HTML 语法规范

基本语法概述

  1. HTML标签是由尖括号包围的关键词，例如<html>。
  2. HTML标签通常成对出现的，例如<html>和</html>，这称之为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
  3. 有些特殊的标签必须是单标签（极少情况），例如<br/>,这称之为单标签

标签关系

  • 包含关系
1
2
3
4
<!-- html标签和head标签为包含关系 -->
<html>
  <head></head>
</html>
  • 并列关系
1
2
3
<!-- body标签和head标签为包含关系 -->
<head></head>
<body></body>

HTML 基本结构标签

标签名 定义 说明
<html></html> HTML标签 页面中最大的标签，称之为根标签
<head></head> 文档的头部 注意在head标签中必须设置标签titel
<title></title> 文档的标题 页面标题
<body></body> 文档的主体 元素包含文档的所有内容，页面内容基本都是放到body里面

网页开发工具

开发工具快速生成HTML骨架

  • VS code：输入！快速生成html骨架
  • webstorm：输入html: 5快速生成html骨架

HTML骨架解析

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>
  1. <!doctype> 文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。
    <!doctype html>表明当前页面采取HTML5版本来显示页面。注意：
    1. <!doctype>声明位于文档中的最前面的位置，处于<html>标签之前
    2. <!doctype>不是HTML标签，它就是文档声明标签。
  2. lang 语言种类：用来定义当前文档显示的语言（但是对于文档显示来说，定义为en的文档可以显示英文，定义为zh-CN的文档也可以显示英文。这个属性可以告诉浏览器该文档属于什么类型的文档，浏览器中自带的翻译插件将会自动把它翻译成对应的语言）
    1. en定义语言为英语
    2. zh-CN定义语言为中文
  3. <meta charset="UTF-8">声明字符集为UTF-8格式

HTML 标签

标题标签

1
2
3
4
5
6
7
<!-- 自成一行，加粗显示，重要性依次降低 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

1
<p>我是一个段落标签</p>

特点：1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。

换行标签

1
2
<!-- 强制换行 -->
<br />

文本格式化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 加粗标签 -->
我是<strong>加粗</strong>文字
我是<b>加粗</b>文字

<!-- 倾斜标签 -->
我是<em>倾斜</em>文字
我是<i>倾斜</i>文字

<!-- 删除线标签 -->
我是<del>删除线</del>
我是<s>删除线</s>

<!-- 下划线标签 -->
我是<ins>下划线</ins>
我是<u>下划线</u>

盒子标签

<div>和<span>标签没有语义，它们就是一个盒子，用来装内容的。

1
2
<div>这是头部</div>
<span>今日价格</span>

特点：

1）<div>标签用来布局，但是现在一行只能放一个<div>。大盒子

2）<span>标签用来布局，一行上可以多个<span>。小盒子

图像标签

语法格式：<src src="路径或者文件名">

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示时的提示文字
title 文本 提示文本。鼠标放到图像上，显示的文字
width 像素 设置图像的宽度
height 像素**** 设置图像的高度
border 像素 设置图像的边框粗细

注意点：

1）图像标签可以拥有多个属性，必须卸载标签名的后面。

2）属性之间部分先后顺序，标签名与属性、属性与属性之间均以空格分开

3）属性采取键值对的格式，即key=”value”的格式，属性=“属性值”。

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级 如<img src="baidu.gif" />。
下一级路径 / 图像文件位于HTML文件下一级 如：<img src="images/baidu.gif" />。
上一级路径 ../ 图像文件位于HTML文件上一级 如<img src="../baidu.gif" />。

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

超链接标签

链接的语法格式

1
<a href="跳转目标" target="目标弹窗的弹出方式">文本或图像</a>

两个标签作用的如下：

属性 作用
href 用于指定链接目标的url地址，（必须属性）当标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中的打开方式。

链接分类

  • 外部链接：例如<a href="http://www.baidu.com">百度</a>。
  • 内部链接：网站内部页面之间的相对链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>。
  • 空链接：如果当时没有确定链接目标时，<a href="#">首页</a>。
  • 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
  • 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
  • 描点链接：当我们点击链接，可以快速定位到页面中的某个位置。
    • 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
    • 找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第2集介绍</h3>

表格标签

表格的作用

用于展示数据，使得数据整洁干净

表格标签的语法

1
2
3
4
5
<table>
  <tr><td>名称</td> <td>性别</td> <td>年龄</td></tr>
  <tr><td>孙悟空</td> <td>男</td> <td>50000</td></tr>
  <tr><td>唐僧</td> <td>男</td> <td>40</td></tr>
</table>

1）<table></table>是用于定义表格德标签。

2）<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。

3）<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4）字母td指表格数据，即数据单元格的内容。

表头单元格

<th></th>只能位于<tr></tr>里

表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

1
2
3
4
5
<table>
    <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
    <tr><td>陈洲</td> <td>男</td> <td>23</td></tr>
    <tr><td>蔡德钊</td> <td>男</td> <td>23</td></tr>
</table>

表格属性

表格标签的属性，实际开发中不常用，一般通过CSS进行设置

属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对其方式
border 1或”” 规定表格单元是否拥有边框，默认为””，表示没有边框。
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素。
cellspacing 像素值 规定单元格之间的空白，默认2像素。
width 像素值或百分比 规定表格的宽度。

表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分：在表格标签中，分别用：<thead>标签表示表格的头部区域、<tbody>标签表示表格的主体区域。这样可以更好的分清表格结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table align="center" border=1 cellpadding="0" cellspacing="0" width="500" height="250">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>陈洲</td>
        <td>男</td>
        <td>23</td>
    </tr>
    <tr>
        <td>蔡德钊</td>
        <td>男</td>
        <td>23</td>
    </tr>
    </tbody>
</table>

合并单元格

合并单元格方式

  • 跨行合并：rowspan=”合并单元格的个数”
  • 跨列合并：colspan=”合并单元格的个数”

目标单元格（写合并代码）

  • 跨行：最上侧单元格为目标单元格，写合并代码
  • 跨列：最左侧单元格为目标单元格，写合并代码

合并单元格实现思路

1）先确定是跨行还是跨列合并。

2）找到目标单元格，写合并方式=合并的单元格数量。比如：<td colspan="2"></td>。

3）删除多余的单元格。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table align="center" border=1 cellpadding="0" cellspacing="0" width="500" height="250">
    <tbody>
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>

列表标签

无序列表

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

无序列表的基本语法格式如下：

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

1）无序列表的各个列表项之间没有顺序级别之分，是并列的。

2）<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

3）<li>与</li>之间相当于一个容器，可以容纳所有的元素。

4）无序列表会带有自己的样式属性，但在实际使用中，一般使用CSS来设置。

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

有序列表的基本语法格式如下：

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

1）<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。

2）<li>与</li>之间相当于一个容器，可以容纳所有元素。

3）有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

自定义列表

在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

其基本语法如下：

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

1）<dl></dl>里面只能包含<dt>和<dd>。

2）<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

表单标签

表单域

表单域是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交到服务器。

1
2
3
<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>

常用属性：

属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 用于设置表单数据的提交方式，其取值为get或post。
name 名称 用于指定表单名称，以区分同一个页面中多个表单域。

表单控件（表单元素）

<input>输入表单元素

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

1
<input type="属性值" />

1）<input /> 标签为单标签。

2）type属性设置不同的属性值用来指定不同的控件类型。

3）type属性的属性值及其描述如下：

属性值 描述
button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）。
checkbox 定义复选框。
file 定义输入字段和“浏览”按钮，供文件上传
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

4）<input>标签的其他常用属性如下：

属性 属性值 描述
name 由用户自定义 定义input元素的名称
value 由用户自定义 定义input元素的值
checked checked 规定此input元素首次加载时应当被选中。
maxlength 正整数 规定输入字段中的字符的最大长度
  1. name和value是每个表单元素都有的属性值，主要给后台人员使用。
  2. name表单元素的名字，要求单选按钮和复选按钮要有相同的name值。
  3. checked属性主要针对单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素。其值一般为”checked”
  4. maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。

<label>标签表单元素

<label>标签为input元素定义标注（标签）。

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

语法：

1
2
3
4
性别：<label for="man">男</label>
<input type="radio" name="sex" id="man" />
<label for="woman">女</label>
<input type="radio" name="sex" id="woman" />

核心：<label>标签的for属性应当与相关元素的id属性相同。

<select>下拉框表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义下拉列表。

语法：

1
2
3
4
5
6
<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option selected="selected">选项4</option>
</select>
  1. <select>中至少包含一对<option>。
  2. 在<option>中定义selected=”selected”时，当前项即为默认选中项。

<textarea>文本域表单元素

语法：

1
2
3
<textarea rows="3" cols="20">
文本内容
</textarea>
  1. 通过<textarea>标签可以轻松地创建多行文本输入框。
  2. cols=”每行汇总的字符数”，rows=”显示的行数”，实际开发中不会使用，一般都是用CSS来改变大小

表单属性

autocomplete 属性：默认为true，每次输入时允许显示历史输入记录，false则不会显示

HTML 中的注释和特殊标签

注释

1
<!-- 注释标签 -->

常用特殊字符

特殊字符 描述 字符的代码
空格符  
< 小于号 <
> 大于号 >

HTML5 的新特性

HTML5 新增的语义化标签

  • <header>: 头部标签
  • <nav>: 导航标签
  • <article>: 内容标签
  • <section>: 定义文档某个区域
  • <aside>: 侧边栏标签
  • <footer>: 尾部标签

HTML5 新增的多媒体标签

视频标签<video>

语法：

1
<vedio src="文件地址" controls="controls"></vedio>

常见属性：

属性 值 描述
autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决无法自动播放问题）
controls controls 向用户显示播放控件
width pixels（像素） 设置播放器宽度
height pixels（像素） 设置播放器高度
loop loop 播放完是否继续播放该视频，循环播放
preload auto（预先加载视频）<br/>none（不应加载视频） 规定是否预加载视频（如果有了autoplay就忽略该属性）
src url 视频url地址
poster imgurl 加载等待的画面图片
muted muted 禁音播放

音频标签<audio>

语法：

1
<audio src="文件地址" controls="controls"></audio>

常见属性：

属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
src url 规定播放的音频的url
muted muted 如果出现该属性，则音频输出为禁音。
preload auto<br/>metadata<br/>none 规定当网页加载时，音频是否默认被加载以及如何被加载。

<font style="color:#DF2A3F;">注意：谷歌浏览器应添加muted属性解决音频无法自动播放的问题。</font>

HTML5 新增的 input 标签

属性值 说明
type=”email” 限制用户输入必须为Email类型
type=”url” 限制用户输入必须为URL类型
type=”date” 限制用户输入必须为日期类型
type=”time” 限制用户输入必须为时间类型
type=”month” 限制用户输入必须为月类型
type=”week” 限制用户输入必须为周类型
type=”number” 限制用户输入必须为数字类型
type=”tel” 手机号码
type=”search” 搜索框
type=”color” 生成一个颜色选择表单

HTML5 新增的表单属性

属性 值 说明
required required 表单拥有该属性表示其内容不容为空，必填。
placeholder 提示文本 表单的提示信息，存在默认值将不显示。
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示在字段中填写的选项。<br/>默认已经打开，如autocomplete=”on”，关闭autocomplete=”off”需要放到表单内，同时加上name属性，同时成功提交。
multiple multiple 可以多选文件提交