HTML-Element

HTML语义化

HTML语义化是指在构建HTML页面时，避免大篇幅的使用无语义的标签，HTML语义化的优点有：

• 有利于SEO(Search Engine Optimization， 搜索引擎优化)，便于搜索引擎根据标签确定上下文关键字的权重。
• 有利于用户阅读，样式未加载时也能清晰看出页面结构。
• 有利于屏幕解析器解析，辅助盲人阅读。
• 利于开发和维护，结构化代码具有可读性，更易于维护。

语义标签

语义标签指根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

常见的语义标签

• h1-h6：标题标签，重要性依次降低。
• p：段落标签，表示一个段落，带有换行功能。
• strong：表示一段文字重要的标签，效果与<b></b>类似。
• em：强调标签，效果与<i></i>类似。
• q：行内引用标签，引用一小段文字，外面用引号包裹。
• blockqoute：块引用标签，引用一整段文字。

H5新增语义标签

• header：定义网页或section的页眉。
• nav：定义导航链接部分。
• footer：定义网页或section的页脚。
• hgroup：标题组，定义网页或section的标题。
• section：定义文档中含有标题和段落的区域，主要用于分块。
• article：定义文档中独立、完整、可独自被外部引用的内容。
• aside：定义当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告等
• figure：定义独立于页面的流内容（图像、代码块、图表）等。
• figurecaption：定义figure的标题，只能有一个标题
• time：定义时间
• address：定义地址、邮编等信息，主要出现在页脚。

无语义标签

无语义标签主要有两个，分别是：

• <div>是一个块元素标签，独占一行，没有任何语义。
• <span>是一个行内元素标签，按行依次排列，没有任何语义。

关于块级元素和行内元素的区别，请参考CSS专题

图像标签

在HTML中，<img>用于在页面中插入图像，它是一个空标签，基础语法是：

1
<img scr="图片路径或链接" />

其中， <img>标签必须包含src属性指明图片的url，同时提供一定的可选属性：

• alt：当指定路径的图片不存在时，显示alt指定的文字。
• title：当鼠标光标移动到图片上时，显示title指定的文字。
• width和height：调整图片的宽度与高度，仅指定一个维度时，另一维度按等比例放缩。
• border：用于设置边框。

绝对路径与相对路径

scr通过路径寻找指定图片，路径主要分为绝对路径与相对路径。

• 绝对路径：文件在本地计算机磁盘中的位置。
• 相对路径：文件相对于此HTML文档的位置，相对路径有三种引用方式。
  • 文件与HTML文档在同一目录下：直接通过文件名或./文件名引用该文件
  • 文件在HTML文档的上一级目录中：通过../上一级目录/文件名引用该文件
  • 文件在HTML文档的下一级目录中：通过./下一级目录/文件名引用该文件

超链接标签

在HTML中，<a>用于定义超链接，基础语法是：

1
<a href="超链接地址">内容</a>

超链接必须指定href属性，同时提供一定的可选属性：

• target：超链接跳转的方式。
  • _self为在当前页面中打开超链接，默认采用_self方式。
  • _blank则是在新的页面中打开超链接。

超链接的种类

• 外部链接：href属性指定一个外部的url地址，如<a href="http://www.baidu.com"></a>
• 内部链接：href属性指定内部文档路径，如<a href="demo.html"></a>
• 空链接：href属性为#，如<a href="#"></a>（注：该种方法会直接跳转至页面顶部）
• 下载链接：如果href指定的是一个文件或压缩包，点击此超链接会下载该文件
• 锚点链接：主要用于链接的跳转。例如，当前页面要实现跳转至文字1的功能，则可在文字1的标签中指定id属性，如id="first"。在跳转链接处指定href为要跳转标签的id，如<a href="#first">跳转至文字1</a>，点击此处即可跳转至当前页面的文字1处，锚点链接常用于实现内部的点击-跳转功能。

如果想实现不跳转的空标签，可以使用<a href="javascript:;"></a>或<a href="javascript:void(0)"></a>

表格标签

表格标签主要用于网页呈现数据，而不是用于布局页面的；表格可以让数据的可读性更好。创建表格的基本语法：

• table标签用于定义表格。
• tr代表表格的一行，tr中可以包含多个td，每一个td都代表一个单元格。

1
2
3
4
5
6
7
8
9
10
11
12
<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>Elio</td>
        <td>Male</td>
        <td>21</td>
    </tr>
</table>

一般来说，为了区别表头与表内元素，表头元素通常用<th>定义，表内元素仍然使用<td>，<th>会将表头文字加粗。

1
2
3
4
5
6
7
8
9
10
11
12
<table>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>Elio</td>
        <td>Male</td>
        <td>21</td>
    </tr>
</table>

表格还提供了可选属性：

• border：边框，可选值有1和""，默认为无边框。
• align：表格在页面中的对齐方式，其中center为居中对齐，left为左对齐，right为右对齐。
• cellpadding：文字与边框之间的距离，单位为像素。
• cellspacing：单元格与单元格之间的距离，单位为像素，为0时为实心边框。
• width：表格的宽度。

thead&tbody

为了使表格的结构更加清晰，HTML提供了表格结构标签：

• thead：表头标签，必须包含<tr>标签，位于第一行。
• tbody：主体标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Elio</td>
            <td>Male</td>
            <td>21</td>
        </tr>
        <tr>
            <td>Jeff</td>
            <td>Male</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

合并单元格

表格单元格合并的功能主要通过操纵<td>的属性实现：

• rowspan="n"：以当前单元格为起点，向下跨行合并n个单元格。
• colspan="n"：以当前单元格为起点，向右跨列合并n个单元格。

列表标签

如果说表格标签是为了更清晰的呈现数据，那么列表标签则与之相反，主要用于页面布局。
列表标签分为三类：无序列表、有序列表和自定义列表。

无序列表

无序列表由<ul>嵌套<li>定义。

1
2
3
4
5
<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

注意：

• 无序列表中各个列表项之间没有优先级关系，是并列的。
• ul只能嵌套li，不能嵌套别的元素。
• li相当于一个容器，可以嵌套任何类型的元素。

有序列表

有序列表由<ol>嵌套<li>定义。

1
2
3
4
5
<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

注意：

• 有序列表中各个列表项之间存在优先级关系，即存在序号。
• ol只能嵌套li，不能嵌套别的元素。
• li相当于一个容器，可以嵌套任何类型的元素。

自定义列表

自定义列表常于对属于进行解释，定义列表的列表项前没有任何项目符号，由<dl>引出定义。

1
2
3
4
5
6
<dl>
    <dt>名词1</dt>
    <dd>解释1</dd>
    <dd>解释2</dd>
    .....
</dl>

注意：

• dl中只能包含dt和dd。
• 一个dl可以包含多个dt，一个dt中也可以包含多个dd。

表单标签

网页常常需要和用户进行交互，需要使用表单收集用户信息。
一个完整的表单由表单域、表单控件（表单元素）和提示信息组成。

表单域

<form>用于定义单域，以实现用户信息的传递与搜集。包括下列属性：

• action：用于指定接收并处理表单的服务器地址。
• method：服务器处理表单的方法，可选值有get和post。
• name：表单域名

关于get和post的区别，请参考Ajax专题。

input输入框

在表单元素中 <input /> 标签用于收集用户信息，通过指定type属性来达到各种不同的效果：

• type="text"：定义单行的输入字段，用户可在其中输入字符。默认宽度20个字符
• type="password"：定义密码文本框，输入的数字、字母变成小圆点，达到隐藏的目的
• type="radio"：定义单选按钮。注意必须指定相同的name属性，才能保证只选中一个
• type="checkbox"：定义多选按钮。指定相同的name属性，可以选中多个选项
• type="submit"：定义提交按钮
• type="button"：定义点击按钮（主要用于Javascript启动脚本）
• type="file"：定义文件提交入口，供文件上传
• type="reset"：定义重置按钮，清空表单中的所有数据

除此之外，<input>标签还有很多属性：

• name：定义input元素的名称
• value：定义input元素的值
• checked：默认选中该元素
• maxlength：规定输入的最大字符数

select下拉菜单

<select>主要用于定义下拉表单，语法如下

1
2
3
4
5
6
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

注意：

• select中至少包含一个option
• <option selected="selected">可以指定当前项为默认选项

textarea文本域

textarea定义文本域，语法如下：

1
2
3
<textarea row="" col="">
  内容
</textarea>

注意：

• textarea用于定义文本框
• row和col用于指定文本框的大小

• Previous
  「前端开发」- CSS-Selector-01
• Next
  「前端开发」- HTML-Introduction