响应式Web设计
HTML基础
用占位符文本填充空白
Web 开发者通常用lorem ipsum text来做占位符，占位符就是占着位置的一些文字，没有实际意义。
为什么叫lorem ipsum text呢?是因为lorem ipsum是古罗马西塞罗谚语的前两个单词。
从公元16世纪开始lorem ipsum text就被当做占位符了，这种传统延续到了互联网时代。与此同时，孙悟空也在五指山下被压了500年，然后就进化成程序猿了，是不是很巧合。_
HTML5 元素介绍
HTML5 引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section等等。
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。
main元素让搜索引擎和开发者瞬间就能找到网页的主要内容。
给网站添加图片
用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。
例如：
注意：img元素是没有结束标记的。
所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。
注意：如果图片是纯装饰性的，用一个空的alt是最佳实践。
理想情况下，alt属性不应该包含特殊字符，除非需要。
用锚点实现网页间的跳转
用a锚点（Anchor，简写 a）来实现网页间的跳转。
锚点需要一个href属性指向目的地，它还需要有锚点文本
用锚点实现网页内部跳转
锚点同样也可以用来在网页内不同区域的跳转。
设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性，它的值在整个页面中唯一。
将锚点嵌套在段落中
可以在其他文本元素内嵌套链接。
target是锚点的一个属性，它指定了会以什么方式来打开链接，属性值 "_blank"的意思是链接会在新元素页打开。
href是锚点的另一个属性：它指定了链接的 URL 地址。
用 # 号来创建固定链接
有时你想为网站添加一个锚点，但如果你还不确定要将它链接到哪儿，这时可以使用固定链接。
在后面的课程中我们会学到：如何轻松通过JavaScript更改链接指向的地址。
创建一个无序列表
HTML 有一个特定的元素用于创建无序列表unordered lists（缩写 ul）。
无序列表以<ul>开始，中间包含一个或多个<li>元素，最后以</ul>结尾。
创建一个有序列表
HTML 有一个特定的元素用于创建有序列表ordered lists（缩写 ol）。
有序列表以<ol>开始，中间包含一个或多个<li>元素，最后以</ol>结尾。
创建一个输入框
现在让我们来创建一个form表单。
input输入框可以让你轻松获得用户的输入。
你可以像这样创建一个文本输入框：
<input type="text">
注意：input输入框是没有结束标记的。
给输入框添加占位符文本
Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。
你可以像这样创建一个占位符：
<input type="text" placeholder="this is placeholder text">
创建一个表单
通过给form表单添加一个action属性，你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单。
例如:
<form action="/url-where-you-want-to-submit-form-data"></form>
给表单添加提交按钮
让我们来给表单添加一个submit提交按钮，当点击提交按钮时，表单中的数据将会被发送到action属性指定的地址上。
例如：
<button type="submit">this button submits the form</button>
给表单添加一个必填字段
当你设计表单时，你可以指定某些字段为必填项(required)，只有当用户填写了该字段后，才可以提交表单。
如果你想把文本输入框设置为必填项，在input元素中加上required属性就可以了，例如：<input type="text" required>
创建一组单选按钮
radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。
单选按钮只是input输入框的一种类型。
每一个单选按钮都应该嵌套在它自己的label（标签）元素中。
所有关联的单选按钮应该拥有相同的name属性。
下面是一个单选按钮的例子：
下面是一个单选按钮的例子：
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
最佳实践是在label元素上设置for属性，让其值与单选按钮的id属性值相等，这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。例如：
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
创建一组复选框
checkboxes（复选框）就好比多项选择题，正确答案有多个。
复选框是input输入框的另一种类型。
每一个复选框都应该嵌套在它自己的label（标签）元素中。
所有关联的复选框应该拥有相同的name属性。
最佳实践是在label元素上设置for属性，让其值与复选框的id属性值相等，这样就在label元素和它的子元素复选框之间创建了一种链接关系。例如：
下面是一个复选框的例子：
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
给单选按钮和复选框添加默认选中项
通过添加checked属性，你可以设置某个单选按钮或多选按钮被默认选中。
为此，只需给input元素添加 “checked” 属性。 例如:
<input type="radio" name="test-name" checked>
元素嵌套
div元素，也叫division（层）元素，是一个盛装其他元素的通用容器。
它也是 HTML 中出现频率最高的元素。
和其他普通元素一样，你可以用<div>来标记一个div元素的开始，用</div>来标记一个div元素的结束。
声明 HTML 文档的文档类型
在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。
你可以通过<!DOCTYPE ...>来告诉浏览器你使用的是 HTML 的哪个版本，"..." 部分就是版本的数字信息。<!DOCTYPE html>对应的就是 HTML5。
!和大写的DOCTYPE是很重要的，特别是对于老的浏览器。但html大写小写都可以。
接下来，所有的 HTML 代码都必须位于html标签中。其中<html>位于<!DOCTYPE html>的后面，</html>位于网页的结尾。
定义 HTML 文档的标题和正文
html的结构主要分为两大部分：head、body。关于网页的描述都应该放入head标签，网页的内容都应该放入body标签。
比如link、meta、title和style都应该放入head标签。
最后
以上就是瘦瘦热狗最近收集整理的关于FreeCodeCamp学习笔记--HTML响应式Web设计的全部内容，更多相关FreeCodeCamp学习笔记--HTML响应式Web设计内容请搜索靠谱客的其他文章。
![[原] 在HTML文档中添加标签名、ID、类名](https://file2.kaopuke.com:8081/files_image/reation/bcimg8.png)
发表评论 取消回复