「前端开发」 -

HTML-Element

HTML标签

Posted by eliochiu on October 18, 2022

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指定的文字。
  • widthheight:调整图片的宽度与高度,仅指定一个维度时,另一维度按等比例放缩。
  • 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中只能包含dtdd
  • 一个dl可以包含多个dt,一个dt中也可以包含多个dd

表单标签

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

表单域

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

  • action:用于指定接收并处理表单的服务器地址。
  • method:服务器处理表单的方法,可选值有getpost
  • 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用于定义文本框
  • rowcol用于指定文本框的大小