HTML 的基本标签及语法
概念： 超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的 基本结构： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
</head> <body> </body> </html>
一、HTML 基本标签 head 部分
1、<!DOCTYPE html>文档声明
文档类型声明，让浏览器按照 HTML5 的标准对代码进行解释与执行。
文档类型声明必不可少，而且，必须放在文档最上方。
如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现 BUG。 2、头部：<head></head>
head 中，主要放一些关于网页设置的相关语句。 mete 标签 （1）设置网页的字符集编码格式
GB2312（简体中文的编码格式） GBK （扩展的国标码。比国标码多了更多的编码格式。） utf-8 (万国码。可以兼容绝大多数国家的语言。) html4.0 之前，声明字符集编码格式:
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
（2）设置网页关键字
name=“keywords” 表示当前语句用于设置网页关键字 content=表示网页的关键字内容，多个关键字之间用英文逗号分开。
eg：
<meta name="keywords"content="杰瑞教育,HTML5,Web 开发" />
（3）设置网页描述
name="description"表示当前语句用于设置网页描述 网页的描述，在搜索引擎中搜索网站时，标题下面的一段文字，就是网页描述的内容。
eg：
<meta name="description"content="这是我开发的第一个网页。"/>
<title></title>标签
网页的标题:也就是网页选项卡上的文字
eg：
<title>百度首页</title>
<link>标签
链接网页小图标：选项卡上的小图片。 rel 属性：选择 icon，表示链接的文件，将作为网页的 icon 图标。 href 属性:选择图片所在的路径地址。
eg：
<link rel="icon" href="img/icon.jpg">
二、常见的块级标签
HTML 的标签分类
分为“块级标签”和“行级标签”
二者区别：
①.块级标签自动换行，前后隔一行.
行级标签不会自动换行，从左向右依次显示.
②.块级标签默认的宽带是 100%.
行级标签的宽带由文字内容撑开.
③.块级标签可以设置宽度、高度、边距等属性.
行级标签不能设置上述属性.
从写法上，html 标签分为“成对标签”和“自闭合标签(空标签)”
1.成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两
个标签之间。
例如：<h1></h1> <p></p> <title><title>
2.自闭合标签/空标签：只有一个标签，用/表示标签的自动闭合（/可
以省略）。
例如<hr/><link/><meta/>
①标题标签（默认加粗，h1 最大，h6 最小）
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
②水平线<hr/>
③段落<p><p/>
④换行<br />
eg：
<p>这是一个段落。这是一个段落。<br>这是一个段落。这是一个段落。</p>
⑤引用<blockquote></blockquote>
blockquote :引用标签。表示标签中的文字是引用自其他网站的内容。
浏览器默认显示效果，整段向后缩进。
cite 属性，表明引用的来源，一般为引用的网址 URL
eg：
<blockquote cite="www.jredu100.com">引用：你好帅哥！</blockquote>
⑥预格式标签：<pre></pre>
与 p 标签不同的是，pre 标签会保留代码中的空格和回车。在网页直接
显示。
最常用的作用，是在网页中显示代码段，保留代码段格式。
<pre>预格式
标签</pre>
基于布局的块级标签
⑦有序列表 ol (order list)
<ol>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ol>
⑧无序列表 ul (unorder list)
<ul>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ul>
⑨定义描述列表
定义列表包含两部分：
<dt></dt>:定义列表的标题，标题定格显示，一般一个定义列表只有一
个标题。
<dd></dd>:定义列表的描述项，相对于标题向后缩进显示，一个列表可
以有多个描述项。
<dl>
<dt>标题</dt>
<dd>描述项</dd>
</dl>
一般情况下，标题 dt 只有一项，描述项 dd 可以有 N 多项。
浏览器显示时，标题格式会显示，显示缩进。
eg：
<dl>
<dt>定义列表的标题</dt>
<dd>定义列表的描述项 1</dd>
<dd>定义列表的描述项 2</dd>
<dd>定义列表的描述项 3</dd></dl>
⑩图片组合标签 figure
包含两个部分：img 一张图片
figcaption：图片的标题，在图片的下方显示。
<figure>
<img src="img/3.jpg" />
<figcaption>这是图片的标题。</figcaption>
</figure>
（11）分区标签 div
用于配合 css 使用，将网页划分为区块，可以包裹各种标签。
eg：
<div style="width:100%; height:100px; ">
<h1>我是 div 里面的标题</h1>
这是 div 里面的文字。
</div>
三、常见的行级标签
常见的行级标签
span（文本）、img（图片）、em（强调）、strong（强调）、q（短引
用）、a（超链接）、
i（倾斜）、b（加粗）、small（缩小字体）
1、span（文本）：用于包裹行内的文字，常配合 css 使用修改文字样
式。
<span style="color: red;font-size: 40px;">真帅！</span>巅峰时代
2、倾斜/加粗
em：显示倾斜
strong：显示加粗
i：倾斜
b：加粗
em strong i b 区别
①em 和 i 都能倾斜，strong 和 b 都能加粗，但是 strong 和 em 多了一
层强调的语义。可以帮助收索引擎快速抓取网站重点,而且 HTML5 要求
开发者尽可能实现代码的语义化。
②em 和 strong 都表示强调，而 strong 得强调程度要大于 em，em 和
strong 标签均可多成嵌套，表示强调程度的递增
eg：
<em>em标签，</em><strong>strong标签</strong><i>i标签</i><b>b标签</b><u>u标签</u>
3、常见引用标签
blockquote、q、cite
区别：
显示效果上：blockquote 整段缩进、q 加引号、cite 倾斜
从功能上：blockquote 用于引用一整段内容，是块级标签。
q 用于引用一句话是行级标签。cite 常用于引用书画作品名。
eg：
<blockquote>块引用</blockquote><q cite="www.jredu100.com">q 标签，短引用 </q><cite>cite 引用</cite>
small（缩小字体）：small 标签可以多层嵌套，表示字体小一号
直到字号小到最小号为止
big（放大字体）：同 small 可以多层嵌套，直到字号最大为止
但是，在最新规范中，small 和 big 标签，不能被提倡使用，提倡使用
style="font-size:11px;"CSS 样式替代
eg：
<small>小一号字体</small><big>大一号字体</big>
4、img 图片标签
（1）src 属性表示图片所在的路径。
[路径的表示方式]
①网络图片地址。并不建议使用。
②可以使用图片的绝对路径。但是严禁使用绝对路径。（因为，绝
对路径使用 file：//协议，网页使用 http：//协议，无法访问 file：
//协议的文件。）
file：///C:sunyang.jpg 绝对路径的写法：file：///盘
符：/文件路径
③使用相对路径。推荐使用的唯一方式。
a.图片在当前文件的下一层，“文件夹名/图片名”
b.图片与当前文件夹在同一层，直接写“图片名”。
c.图片在当前文件的上一层，“../图片名”。
注意：图片必须包含在项目里面，不能推出当前项目根目录。
（2）width、height 宽度和高度属性
（3）title:鼠标指上时显示的文字
（4）alt：图片无法加载时显示的文字。省略 alt，将默认显示 title
内容
（5）align：图片周围的文字，相对于图片的排列方式；
top 文字居上 center 居中 bottom 文字居底
eg：
<img src="img/icon.jpg" width="100"height="100" title="鼠标指上时显示"alt="图片无 法加载"align="bottom"/>
5、超链接<a></a>
（1）1.href 属性：找链接跳转的地址。可以是网络连接，也可以是本
地 html 相对路径。
（2）target 属性：超链接新页面打开位置。
_slef 在当前页面打开（默认）_blank 在新页面打开
（3）title 属性：鼠标指在超链接上显示的文字。
6、功能链接
（1）malito：给指定邮箱发送邮件。
<a href="malito://931497747@qq.com"target="_self"title="1230">超链接</a>
（2）tencent:与指定 qq 聊天
<a href="tencent://message/?uin=1677246256"target="_self"title="1230">聊天</a>
（3）锚链接：点击超链接，可以跳转页面的指定位置(锚点)
①在页面的指定位置，定义一个锚点：
<a name="top"></a>
②将超链接的 href 属性改为“#锚点名称”
<a herf="#top">调到 div 上方</a>
③跳转到其他页面的锚点方式：跳转网页位置#锚点名称
7、其他标签（了解）
①<s>：删除线
eg：
<s>这是 s 标签中的文字</s>
②code：只是表示计算机代码。只会显示等宽字体，不会保留代
码格式，需配合 pre 标签使用
eg：
<pre><code>
jsLoader({name : 'iplookup',url :'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=j s'});</code></pre>
③bdo：表示文本方向，dir="ltr" 从左往右 dir="rtl" 从右往左
eg：
<bdo dir="rtl">姜浩真帅</bdo>
④kbd:表示需要用户用输入的内容。
eg：
请输入“<kbd>Esc</kbd>”退出系统。
⑤sup：上标文本 sub：下标文本
eg：
H<sub>2</sub>O X<sup>2</sup>
⑥var：表示变量
eg：
<var>x</var>+<var>y</var>=1
⑦u:下划线
eg：
<u>这是 u 标签</u>
⑧mark:高亮或标记文本 浏览器显示为黄色背景
eg：
<mark>哈哈哈哈哈</mark>
四、表格<table>
一、表格 table
表格中一行，用 tr 表示；
一行中的每个单元格，用 td 表示；
首行的表头中每个单元格，用 th 表示，th 默认文字会加粗、居中。
二、表格中的各种属性
1.border：给表格的每个td和整个table加边框。如果boder的值>1，
则只有最外层的加粗，tb 的边框不变。
border: hidden：隐藏边框。
2.cellspacing：设置单元格与单元格之间的间距。
cellspacing="0"可以设置边框之间的间距为 0，但是相邻的边框不会
合并，而且显示为两条线的宽度。
设置表格边框合并 可以使用 css 设置：style="border-collapse: collapse; 设置边框合并以后，cellspacing 属性将会消失。
3.cellpadding：单元格内边距，单元格中文字与边框之间的距离。
4.width/height：宽度和高度。0
5.align：设置表格在浏览器中，居左 居右。
6.bgcolor：表格的背景颜色
bordercolor：表格的边框颜色
background：表格背景图。优先级高于背景色。
三、表格的行列属性
作用于 tr 或者 td 的属性：
1.width 宽度、height 高度
2.bgcolor：背景色
当表格的属性与行列的属性发生冲突时，优先级采用 近者优先 的原
则：table<tr<td。
3.align：设置单元格中的文字，水平对齐方式；left center right
valign：设置单元格中的文字，垂直对齐方式；top center bottom
四、表格的跨行与跨列
跨列：colspan="n"如果某个单元格 n 列，则单元格右侧 n-1 个 td 就
不需要了。
跨行：rowspan="n"如果某个单元格行，则单元格下方 n-1 个 td 就
不需要了。
表格结构化
完整的表格结构，包括：
caption：表格的标题，无论<caption>标签放在表格第几行，表格标
题永远在表格正上方居中。
thead：表格的表头部分。永远在表格最上部。
tbody：表格的身体部分。在 thead 之下，tfoot 上。
tfoot：表格的尾部永远在最下部。
表格的直列化
表格有记列，就可以在表格的最上方写几个<col/>标签，每个<col/>
就对应这第几列，可以<col/>标签修改样式、添加 name 等属性，表
示这一列的所有
tb 同步修改;如果，需要对多列修改同样式，可以使用
<colgroup><colgroup/>标签包裹多个<col/>.
五、form 表单
1、form 表单两个重要属性
action：表示，将表单提交给哪个服务器地址；
method：表单提交数据的方式，可选值 get 和 post 两种。
get 和 post 区别
① get 使用 URL 传递数据。所有内容在地址栏可以看见，不安全。
post 的数据无法在地址栏看到，比较安全。
② get 传递的数据量有限，而且只能传递纯文字内容；
post 可以传递大量数据，而且可以传递图片、视频等文件。
③ get 的传输速度比 post 快。
get 传递数据的 URL 格式
http：//原来的地址。html?name1=value1&name2=value2
比如:http：//127.0.0.0：8020/0595.html?username=123
所以，input 使用时，name 属性必不可少。缺少 name，将导致该输
入框的数据比向后台传递。
2、input 的常用属性
① type：表示当前输入框是何种类型的输入框。
② name：给输入框起别名。向后台传递时，使用 name=value 的形
式传递。
③ value：当前 input 的默认值。
④ placholder：输入框的提示内容。当输入框有 value 时，提示内容
消息。
⑤ hidden：隐藏当前输入框。可以写为 hidden="hidden"，也可以
省略属性值，只写<inout type="text" hidden/>
隐藏的输入框内容依然可以向后台传递。（border: hidden 隐藏边框）
⑥ disabled：禁用当前输入框。可以显示，不能使用。
被禁用的输入框内容，将不能向后台传递数据。
⑦ checked：设置默认选中的选项，可以写为 checked="checked",
也可以省略属性值，只写<inout type="text" checked/>
3、input 的 type 类型
① text：普通的文本框。
② password：密码框，输入的内容，显示为小黑点。
③ radio：单选按钮。单选按钮的 value 不能省略，这个 value 需要
传递到后台
单选按钮，凭借 name 是否相同，区分按钮是否为一组，name 必须
相同。
checked="checked"设置单选按钮，默认被选中。
④ checkbox：多选按钮。其他与单选按钮一样。
⑤ file：文件上传框。
acceot 属性，可以限制只能上传何种类型的文件。“*”表示可以接受所
有文件，"image/*"表示只能接受图片。
multiple="multiple",设置可以上传多个图片。
⑥ submit：表单提交按钮。
⑦ reset：表示重置按钮，点击将表单回复为初始状态。
⑧ image：图形提交按钮。src 属性导入图片，与 submit 都聚有提交
表单的作用。
⑨ button：显示为按钮形状，但是没有任何作用。
⑩ hidden：隐藏的输入框。与普通的输入框+hidden="hidden"的作
用相同。
4.select 下拉选择区块
① select 里面的每一项，<option></option>标签表示。
② name 属性，需要写到 select 标签上。
③ option 标签如果有 value 属性，则向后台传递的将是 value 属性的
值，如果没有 value 属性，则传递的是<option></option>标签之间
的文字。
④ option 添加属性 selected="selected",设置默认选中项。
⑤ select 添加属性 multiple="multiple",设置当前下拉控件可以多
选。
⑥ option 添加属性 title，表示鼠标指上后显示的文字。
⑦ select 可以使用<optgrop></optgrop>标签对选项进行分组，
用 label 属性显示分组名。
5.textarea 文本域
① 文本域大小控制
可以用文本域属性 cols="20"（宽度多少字符)rows="10"(高多少行)
可以使用 css 样式 style="width="100px"; height="100px";
可以使用 css 样式
style="width="100px"; height="100px";
②设置文本域大小不能拖动。
style="resize:none"
③ 文字超出区域处理：
使用 style="overflow:xx;"可以显示文字超出区域的显示的方式：
overflow:hidden；超出区域的文字隐藏不显示
overflow:scroll；无论文字多少，都会显示水平垂直滚动条。
overflow:auto；自动，默认效果，文字多显示滚动条，文字少不显示
滚动条。
可以使用 overflow-x 和 overflow-y 单独修改两个方向的滚动条
overflow-x:scroll;overflow-y:hidden;
【HTML5 智能表单】
1.H5 给我们提供了将 form 外的 input 与表单的关联方式。只需给
form 表单起一个 id，然后给表单外面的 input 添加 form 属性，指向
这个 id 就可以实现表单与 input 的绑定；
<form id="ff"></form>
input form="ff"/>
2.H5 新增了很多 input 的新的 type 类型。
range color date email url
3.H5 新增的 input 属性：
① form 属性：关联指定表单的 id
② placeholder：输入框的提示内容
③ required="required":必填。
④ autofocus="autofocus"：指定输入框自动获得焦点。
⑤ autocomplete：是否开启自动提示完成功能，默认为开启状态，设
置为 off 表示关闭，设置为 on 表示打开。
可以给 form 标签设置 autocomplete，控制表单所有输入框的自动提
示功能
