基础HTML和HTML5
一:标签与元素
大部分 HTML 元素都有一个开始标签和一个结束标签。
开始标签像这样:
结束标签像这样:
开始标签和结束标签的唯一区别就是结束标签多了一个斜杠。
h1 元素通常被用作主标题,h2 元素通常被用作副标题, 还有 h3、h4、h5、h6 元素,它们分别用作不同级别的标题。
p 元素是网站上段落文本的首选元素。 p 是“paragraph(段落)”的缩写。
你可以像这样创建一个段落:
二:注释
注释的作用是给代码添加一些说明,方便团队合作或日后自己查看,但又不影响代码本身。
注释的另一个用途就是在不删除代码的前提下,让代码不起作用。
在 HTML 中,注释的开始标签是
。
列如:
三:元素
HTML5 引入了很多更具描述性的 HTML 元素, 包括 main、header、footer、nav、video、article、section 等等。
这些元素让 HTML 更易读,同时有助于搜索引擎优化和无障碍访问。 main 元素让搜索引擎和开发者能很快地找到网页的主要内容。
举个例子,下面的 main 元素嵌套了两个子元素:
四:用img添加图片
你可以使用 img 元素来为你的网站添加图片,其中 src 属性指向图片的地址。
例如:
<img src=图片地址">
注意:img 元素是没有结束标签的。
所有的 img 元素 必须 有 alt 属性。 alt 的属性值有两个作用,第一个作用是让屏幕阅读器可以知晓图片的内容,这会对网页的可访问性有很大提升;另一个作用是当图片无法加载时,页面需要显示的替代文本。
注意: 如果图片是纯装饰性的,把 alt 的属性值设置为空是最佳实践。
理想情况下,alt 属性不应该包含特殊字符,除非有特殊需要。
五:用实现网页的跳转
你可以用 a(Anchor,简写为 a)来实现网页间的跳转。
a 需要一个 href 属性指向跳转的目的地。 同时,它还应有内容。 例如:
浏览器将显示文本 this links to freecodecamp.org,这是一个可点击的链接。 你可以通过这个链接访问 目标网址。
a(anchor)元素也可以用于创建内部链接,跳转到网页内的各个不同部分。
要创建内部链接,你需要将链接的 href 属性值设置为一个哈希符号 # 加上你想内部链接到的元素的 id,通常是在网页下方的元素。 然后你需要将相同的 id 属性添加到你链接到的元素中。 id 是描述网页元素的一个属性,它的值在整个页面中唯一。
当用户点击了 Contacts 链接,页面就会跳转到网页的 Contacts 区域。
当用户点击 Contacts 链接时,他们将被带到带有 Contacts 标题元素的网页部分。
六:无序列表
HTML 有一个特定的元素用于创建无序列表。
无序列表以
- 开始,中间包含一个或多个
- 元素, 最后以
例如:
会创建一个要点列表,包括 milk 和 cheese。
有序列表以
- 开始,中间包含一个或多个
- 元素。 最后以
例如:
将创建一个包含 Garfield 和 Sylvester 的编号列表。
七:用input创建输入框
input 输入框可以让你轻松获得用户的输入。
你可以像这样创建一个文本输入框:
注意 input 输入框是没有结束标签的。
八:用form创建表单
我们可以只通过 HTML 来实现发送数据给服务器的表单, 只需要给 form 元素添加 action 属性即可。
例如:
当你设计表单时,你可以指定某些字段为必填项(required),只有当用户填写了该字段后,才可以提交表单。
如果你想把文本输入框设置为必填项,在 input 元素中加上 required 属性就可以了,例如:
九:创建按钮
单选按钮是 input 选择框的一种类型。
radio buttons(单选按钮)就好比单项选择题,正确答案只有一个。
每一个单选按钮都应该嵌套在它自己的 label(标签)元素中。 这样,我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮,选中其中一个按钮,其他按钮即显示为未选中,以确保用户只提供一个答案。
下面是一个单选按钮的例子:
最佳实践是在 label 元素上设置 for 属性,让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。 例如:
我们也可以在 label 标签中嵌入 input 元素:
复选框也是 input 选择框的一种类型。
checkboxes(复选框)就好比多项选择题,正确答案有多个。
每一个复选框都应该嵌套在它自己的 label(标签)元素中。 这样,我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的复选框应该拥有相同的 name 属性。
使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性,让其值与相关联的 input 复选框的 id 属性值相同。
下面是一个复选框的例子:
十:给单选按钮和复选框添加默认选中项
用 checked 属性把第一个复选框和单选按钮都设置为默认选中。
为此,只需将单词 checked 添加到 input 元素的内部。 例如:
十一:元素嵌套
div 元素也叫内容划分元素,是一个包裹其他元素的通用容器。
它也是 HTML 中出现频率最高的元素。
和其他普通元素一样,你可以用
十二:声明 HTML 的文档类型
有些元素为页面提供了整体结构,每个 HTML 文档中都应该有这些元素。
在文档的顶部,我们需要告诉浏览器网页所使用的 HTML 的版本。 HTML 是一个在不停发展的语言,大部分浏览器都支持 HTML 的最新标准,也就是 HTML5。 大部分主流浏览器都支持最新的 HTML5 规范。 但是一些陈旧的网页可能使用的是老版本的 HTML。
你可以通过 来告诉浏览器页面上使用的 HTML 版本,“…” 部分就是版本号。 对应的就是 HTML5。
! 和大写的 DOCTYPE 是很重要的,尤其是对那些老的浏览器。 但 html 无论大写小写都可以。
所有的 HTML 代码都必须位于 html 标签中。 其中 位于 之后, 位于网页的结尾。
这是一个网页结构的列子。 你的 HTML 代码会在两个 html 标签之间。
十二:定义 HTML 文档的 head 和 body
html 的结构主要分为两大部分:head 和 body。 网页的描述应放入 head 标签, 网页的内容(向用户展示的)则应放入 body 标签。
比如 link、meta、title 和 style 都应放入 head 标签。
这是网页布局的一个例子: