基础知识
什么是HTML
Hyper Text Markup Language（超文本标记语言）
W3C标准
W3C：World Wide Web Consortium（万维网联盟）
W3C标准包括：
- 结构化标准语言（Html、Xml）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMASript）
在IDEA中创建一个html文件
1、首先可以将创建好的工程中的src文件夹删除
2、新建一个Directory（即文件夹），起名
3、在其中，new一个html文件
4、右上角的浏览器标识，点击可以用对应的浏览器打开我们写的代码对应的网页（如果安装了显示的浏览器）
HTML的基本结构
网页基本信息
1、添加注释的快捷键：crtl+/
2、所有网页内容必须写在
<
h
t
m
l
>
<html>
<html>中
3、【补充】SEO定义：在掌握搜索引擎规则的前提下，对网站进行内部以及外部的调整以及优化，使网站在搜索引擎中的关键词排名靠前，获取更多的流量。
<!--DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta是描述性标签，用来描述网站的一些信息 -->
<!-- meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="狂神说Java">
<meta name="description" content="学习Java">
<!-- title标签代表网页标题-->
<title>Title</title>
</head>
<body>
</body>
</html>
网页的基本标签
- 标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
样式：
- 段落标签
<!--一个p标签就是一段-->
<p>Hello</p>
<p>world</p>
可以通过先输入一个p，之后按Tab键，就可以补全p标签
- 换行标签
<!--虽然换行了，但还是同一段。是自闭合标签-->
Hello <br/>
world <br/>
和段落标签样式的区别：
- 水平线标签
<hr/>
- 字体样式标签
<!--粗体、斜体-->
粗体：<strong>I love you.</strong>
斜体：<em>I love you.</em>
- 特殊符号
<!--特殊符号-->
空格
大于号>
小于号<
版权符号©
<!--
多行
注释
-->
<br/>
空 格
<br/>
空>格
<br/>
空<格
<br/>
空©格
样式：
空格符号记忆方式：以&开始，以；结尾，可以通过提示查看
图像标签
BMP：位图
图像的替代文字：如果图像没加载出来，显示的文字
鼠标悬停提示文字：把鼠标放在图片上显示的文字
先创建一个文件夹，起名为resources，用于存储相关资源，在其中又新建了一个image文件夹，用于存储图片资源
- 地址
用 …/ 代表上一级目录
<img src="../resources/image/1.jpg" alt="吉大照片"title="悬停文字"width="300"height="500">
加载失败时：
其中src和alt是必填的
链接标签
文本链接
<!--
a标签
herf：必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
_blank 在新标签页打开
_self 在当前页面打开
_parent
_top
-->
<a href="图像标签学习.html">点击我跳转到图片</a>
<a href="https://www.bilibili.com/">点击我跳转到bilibili</a>
图片链接
图片格式
虽然图片格式这一节知识比较多，大部分我们只需要了解就可以了，我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。
1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差，但是可以制作动画。
<!--
src:图片地址
alt:加载失败时显示
title:鼠标悬停时的文字
width:宽度
height:高度
-->
<img src="../Resources/image/Cover.jpg" alt="A-SOUL" title="Cover" width="1000">
<!--这段代码的意思是：创建了一个图片链接，跳转到firstweb.html这个界面-->
<a href="firstweb.html">
<img src="../resources/image/1.jpg" alt="吉大照片"title="悬停文字"width="300"height="500">
</a>
锚链接
<!--
1.需要一个锚标记
2.跳转到标记
3.符号#后面加要转转的标记
-->
<a name="top">顶部</a><br>
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<a href="链接标签.html#down">回到链接标签底部</a>
ctrl+d表示复制这行内容到下一行
功能性链接
邮件链接: mailto:邮箱地址
QQ推广链接
<a href="mailto:2273038475@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2273038475&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2273038475:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
其他基本标签
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
- head内部标签
- body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
后续课程讲解的标签都是在标签内部的各种标签。
块元素和行内元素
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
- 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
- 块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
- 可以与其他行内元素位于同一行；
- 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等。
标签对照表
列表
HTML3种列表
列表有3种：有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，请大家重点掌握。
目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。
有序列表
<!--有序ordered列表list-->
<ol>
<li>JAVA</li>
<li>Python</li>
<li>C++</li>
<li>C#</li>
</ol>
属性type
- 可以通过type属性对前面的序号样式进行调整
无序列表
无序列表是三个列表中最为重要的列表。
语法：
<ul type="列表项符号">
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
属性type：
<!--无序unordered列表list-->
<!--
应用范围：导航、侧边栏
-->
<ul>
<li>高等数学</li>
<li>大学英语</li>
<li>高级语言程序设计</li>
<li>思想道德与法治</li>
</ul>
定义列表
语法：
<dl>
<dt>定义名词</dt>
<dd>定义描述</dd>
……
</dl>
说明：
< dl>即“definition list（定义列表）”，< dt>即“definition term（定义名词）”，而< dd>即“definition description（定义描述）”。
在该语法中，< dl>标记和< /dl>标记分别定义了定义列表的开始和结束，< dt>后面添加要解释的名词，而在< dd>后面则添加该名词的具体解释。
<!--自定义defined列表list-->
<!--
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>JAVA</dd>
<dd>Python</dd>
<dd>C++</dd>
<dd>C#</dd>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>天津</dd>
<dd>深圳</dd>
</dl>
HTML学习中的误区
学习HTML的目的就是在你需要的地方用到符合语义的标签，把标签用“对”这才是HTML学习的目的。例如一段文字，应该使用p标签，而不是使用div标签或者其他标签。
网页语义结构良好，对于搜索引擎来说也是极为重要的一点。
表格
标签
- 表格基本标签
- 表格结构标签
基本结构
< table>、< tr>和< td>是HTML表格最基本的3个标签，其他标题标签< caption>、表头单元格< th>可以没有，但是这3者必须要有。
语法：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
说明：
< table>和< /table>标记着表格的开始和结束，< tr>和< /tr>标记着行的开始和结束，在表格中包含几组< tr>< /tr>就表示该表格为几行。< td>和< /td>标记着单元格的开始和结束。
补充
1、边框——border
2、合并行和合并列
合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。
语法：
< td rowspan=“跨度的行数”>
< td colspan=“跨度的列数”>
<!--表格table-->
<!--
行(row) tr
列 td
border:边框
-->
<table border="1">
<tr>
<!--colspan 跨列-->
<td>1.1</td>
<td colspan="2">1.2</td>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
表格完整结构
表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。
表格语义化之后，使得代码更清晰和更利于后期维护。
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
说明：
< thead>、< tbody>和< tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“< tr>< /tr>”表示一行。
表单
表单（form）标签共有4个：< input>、< textarea>、< select>和< option>。其中< select>和< option>是配合使用的。
在< form>和< /form>中间添加其他内容，form标签中的参数method和action是必填的
参数：
- action:表示向何处发送表单数据（可以是网站，也可以是一个请求处理地址）
- method:规定如何发送表单数据（提交方式）
- get:可以在url中看到提交的信息，不安全但高效，不能传输大文件；
- post:无法在url中看到提交的信息，比较安全，可以传输大文件。
<form action="test01.html" method="get">
input标签表单
大部分表单都是用input标签完成的。
语法：
< input type=“表单类型”/>
参数：
- value:默认初始值
- maxlength:最多能输入几个字符
- size:文本框长度
<p>账号：<input type="text" name="username" value="admin" maxlength="10" size="30"></p>
<p>性别：
<!--单选框标签
input typle="radio"
value:单选框的值
name:表示组（name一样表示同一组，同时只能选中一个）
checked:默认选中
-->
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女
</p>
<p>爱好：
<!--多选框input type="checkbox"
checked:默认选中
-->
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="code" checked>敲代码
<input type="checkbox" name="hobby" value="game">打游戏
<input type="checkbox" name="hobby" value="study">学习
</p>
<p>
<!--文件域input type="file"-->
<input type="file" name="file">
<input type="button" name="upload" value="上传">
</p>
<p>邮箱：
<!--邮箱input type="email"-->
<input type="email" name="my-email">
</p>
<p>URL：
<!--URL input type="url"-->
<input type="url" name="my-url">
</p>
<p>数字：
<!--数字input type="number"
max:最大值
min:最小值
step:步长
-->
<input type="number" name="num" max="100" min="0" step="10">
</p>
<p>音量：
<!--滑块input type="range"-->
<input type="range" min="0" max="100" name="voice" step="2">
</p>
<p>搜索：
<!--搜索框input type="search"-->
<input type="search" name="search">
</p>
<p>按钮：
<!--普通按钮button-->
<input type="button" name="btn1" value="点我">
<br>
<!--图片按钮image（具有submit功能）-->
<input type="image" src="../Resources/image/Cover.jpg" name="bn2" width="100">
</p>
<p>
<!--提交按钮submit-->
<input type="submit" value="提交">
<!--重置按钮reset-->
<input type="reset" value="清空">
</p>
textarea标签表单
(1)、多行文本框
语法：
< textarea rows=“行数” cols=“列数”>多行文本框内容< /textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
表现形式如下:
<p>反馈：
<!--文本域textarea
cols:列数
rows:行数
-->
<textarea name="response" cols="50" rows="20">在这里填写反馈</textarea>
</p>
（2）3种文本框对比
单行文本框和密码文本框使用标签，而多行文本框使用< textarea>标签。
①单行文本框
语法：
< input type=“text” value=“默认文字” size=“文本框长度” maxlength=“最多输入字符数”/>
①密码文本框
语法：
< input type=“password”>
①多行文本框
语法：
< textarea rows=“行数” cols=“列数”>多行文本框内容< /textarea>
select和option
下拉列表由标签和标签配合使用。
语法：
<select multiple="mutiple" size="可见列表项的数目">
<option value="选项值" selected="selected">选项显示的内容</option>
……
<option value="选项值">选项显示的内容</option>
</select>
<p>下拉框：
<!--下拉框select
option:选项
selected:默认选中-->
<select name="列表名称">
<option value="选项的值1">选项1</option>
<option value="选项的值2">选项2</option>
<option value="选项的值3" selected>选项3</option>
<option value="选项的值4">选项4</option>
<option value="选项的值5">选项5</option>
</select>
</p>
多媒体
src:资源路径
controls:控制条
autoplay:自动播放
<video src="../Resources/video/超级敏感.mp4" controls autoplay></video>
<audio src="../Resources/audio/超级敏感.mp3" controls autoplay></audio>
插入音频、视频和flash
在网页中插入音频、视频和flash都是使用embed标签。
语法：
< embed src=“多媒体文件地址” width=“播放界面的宽度” height=“播放界面的高度”>< /embed>
说明：
多媒体文件地址可以是相对地址，也可以是绝对地址。
width和height使用px作为单位。
插入背景音乐
为某个网页设置背景音乐，使用的是bgsound标签。不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。
设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签和object标签。
语法：
< bgsound src=“背景音乐的地址”/>
说明：
loop="2"表示重复2次，loop=“infinite"表示无限次循环播放，也可以使用loop=”-1"表示无限次循环播放。
表单的应用
<form action="test01.html" method="get">
<p>
<!--增强鼠标可用性-->
<!--label标签
for:要聚焦到的控件的id-->
<label for="mark">点我聚焦到文本框</label>
<input type="text" name="text" id="mark">
</p>
<p>
<!--只读readonly-->
<input type="text" value="只给看，不给改" readonly>
</p>
<p>
<!--禁用disabled-->
<input type="checkbox" name="a">未选中，可改
<input type="checkbox" name="a" checked disabled>已选中，只读，改不了
<input type="checkbox" name="a" checked>已选中，可改
<input type="button" value="点不了" disabled>
</p>
<p>
<!--隐藏域hidden-->
<input type="button" value="看不见我但我依然存在" hidden>
<input type="button" value="看得见我">
</p>
</form>
补充：增强鼠标可用性
意思是：在之前的表单中，只有点击输入框，才能输入数据，但是在有的表单中，能够实现，点击输入框前的文字，自动选择后面对应的输入框
<p>
<!--增强鼠标可用性-->
<!--label标签
for:后面跟的是一个id-->
<label for="mark">点我聚焦到文本框</label>
<input type="text" name="text" id="mark">
</p>
表单的初级验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初级表单验证</title>
</head>
<body>
<form action="test01.html" method="get">
<!--提示信息placeholder-->
<p>用户名：
<input type="text" name="username" placeholder="请输入用户名">
</p>
<!--必填项required-->
<p>密码：
<input type="password" name="password" required>
</p>
<!--正则表达式-->
<p>URL：
<input type="text" name="url" pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ 或 [a-zA-z]+://[^\s]*">
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
页面结构分析
主要使用的是header、footer、nav
内联框架
浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。< iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。
< frameset>生成的框架结构是依赖上级空间尺寸的，它的宽度或者高度必须有一个和上级框架相同。而< iframe>浮动框架可以完全由指定宽度和高度决定。
语法：
src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。
<iframe src="链接标签.html" name="haha" frameborder="0" width="500"></iframe>
<!--在a标签中使用target属性以标识符为haha的iframe标签的格式打开页面-->
<a href="视频与音频.html" target="haha">点击跳转视频与音频</a>
设置浮动框架是否显示滚动条scrolling
对于浮动框架iframe的的滚动条，我们可以使用scrolling属性来控制。scrolling属性有3种情况：根据需要显示、总是显示和不显示。
语法：
< iframe src=“浮动框架的源文件” width=“浮动框架的宽” height=“浮动框架的高” scrolling=“取值”>< /iframe>
说明：
scrolling属性取值如下：
进阶
HTML、XHTML和HTML5
（一）HTML 和 XHTML
HTML,全称HyperText Mark-up Language (超文本标记语言)，是构成网页文档的 主要语言。我们常说的HTML指的是HTML 4.01。
XHTML,全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言), 它是XML风格的HTML 4.01,我们可以称之为更严格、更纯净的HTML 4.01。
HTML语法书写比较松散，利于开发者编写。但是对于机器，如电脑、手机等来说，语法越松散，处理起来越困难。因此为了让机器更好地处理HTML,我们才在HTML基础上引入了 XHTML
XHTML相对于HTML来说，在语法上更加严格。XHTML和HTML主要区别如下。
1、XHTML标签必须闭合。
在XHTML中，所有标签必须闭合，例如“< p>< /p>" “< div>< /div>”等。此外，空标签也需要闭合，例如< br>要写成< br/>。
错误写法：< p>欢迎来到绿叶学习网
正确写法：< p>欢迎来到绿叶学习网< /p>
2、XHTML标签以及属性必须小写。
在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大 写。不过标签的属性值可以大写。
错误写法：< Body>< DIV>< /DlV>< /Body>
正确写法：< body>< div>< /div>< /body>
3、XHTML标签属性必须用引号。
在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。
错误写法：< input id=txt type=text/>
正确写法：< input id=“txt” type=“text”/>
下面是一个完整的XHTML文档。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>“<span style="font-weight:bold;color:Red;">视觉化思考</span>”能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>
</body>
</html>
(二）HTML5
HTML指的是HTML 4.01, XHTML是HTML的过渡版本，XHTML是XML风格的HTML 4.01。而HTML 5指的是下一代的HTML,也就是HTML 4.01的升级版。
不过HTML 5已经不再是单纯意义上的标签了，它已经远远超越了标签的范畴。HTML 5 除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket.本地存储等。这些新增的技术都是使用JavaScript来操作。也就是说，HTML 5使得HTML从一门“标记语言” 转变为一门“编程语言”。
对于HTML 5中的新技术，在此不做详细介绍。单纯从新增的标签上来看，HTML 5有 以下几个特点。
1、文档类型说明
基于HTML 5设计准则中的“化繁为简”原则，页面的文档类型<!DOCTYPE>被极大地 简化了。
XHTML文档声明如下：
< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” "http:// www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdn>
HTML5文档声明如下：
< !DOCTYPE html>
2、标签不再区分大小写
< div>绿叶学习网< /DIV>
上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属性都采用小写方式。
3、允许属性值不加引号
< div id=wrapper style=co1or: red> 绿叶学习网 < /div>
上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值都加引号，单引号或双引号都可以。
<input type="text" readonly/>
<input type="checkbox" checked/>
上面两句代码等价于：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="checked"/>
在HTML 5中，可以省略属性值的属性如表所示。
一句话概括 HTML、XHTML 和 HTML 5 就是：HTML 指的是 HTML 4.01, XHTML 是HTML的过渡版，HTML5是HTML的升级版。
div和span
对于div和span这两个元素，不少新手也不知道它们之间有什么区别，使用起来也很随便。因此，这里有必要简单介绍一下。
div和span没有任何语义,正是因为没有语义，这两个标签一般都是配合CSS来定义元素 样式的。
div和span区别如下：
(1 ) div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。
(2 ) div常用于页面中较大块的结构划分，然后配合CSS来操作；span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。
其实，除了 div和span外，还有一个label标签。div和span是无语义标签，但label 是有语义标签。label 只适用于表单中，用于显示在输入控件旁边的说明性文字。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>“<span style="font-weight:bold;color:Red;">视觉化思考</span>”能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>
</body>
</html>
在这个例子中，我们想要对“视觉化思考”这几个文字加粗或者改变颜色，此时可以 使用span包含文字，然后再进行样式修改。事实上，span标签往往都是用来配合CSS来 修饰元素的。
id和class
id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫，不知道什么时候用id,什么时候用class,甚至随便使用。
（一）id 属性
id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。W3C建议，对 于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、 主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。
我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此 id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。对于id和 class的命名，我们在CSS进阶部分会详细介绍。
（二）class属性
class,顾名思义，就是“类”。它釆用的思想跟C、Java等编程语言中的“类”相似。 我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元 素具有相同的CSS样式。
如果你要为两个或者两个以上元素定义相同的样式，建议使用class属性。因为这样可以减少大量的重复代码。
注意，对于一个元素而言，我们可以定义多个class。 一般来说，定义多个class的目的在于：一般用一个class抽取公共样式，然后用另外一个class定义单独样式。
对于id和class,我们总结一下：对于页面关键结构，建议使用id；对于小地方，建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id.以便搜索引擎识别页面结构。
浏览器标题栏小图标
在浏览网页的时候，我们会发现几乎所有网站的页面在浏览器标题栏前面都会有一个小 图标
想要实现这个效果，我们只需要在head标签添加一个link标签即可。
语法：
<link rel="shortcut icon" type="image/x-icon" href="../resources/image/music.ico"/>
说明：
rel和type这两个属性的取值是固定形式，无需多讲。href属性取值为小图标的地址, 这个地址是根据小图标在站点文件夹路径而定的，跟图片引用路径是一样的道理。
这里注意一下，小图标格式是.ico,而不是.jpeg、.png、.gif等格式。对于.ico格式的图标制作，我们可以搜索一下“在线icon",会发现很多不错的在线工具，大家可以收藏一下。
语义化
（一）简介
由于HTML简单，很多初学者对它存在一种偏见，觉得它没多少东西，因此在学习的过程中随便对待。其实，学习HTML的重点不在于掌握了多少标签，而是在于掌握标签的语义 以及如何编写一个语义结构良好的页面。
在实际开发过程中，很多人由于对标签语义不熟悉，常常用某一个标签代替另外一个标签来实现某些效果。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.body {
font-family: "微软雅黑";
font-size: 14px;
}
.content {
width: 300px;
padding: 10px;
border: 1px dashed gray;
}
.content div {
font-size: 16px;
font-weight: bold;
height: 24px;
line-height: 24px;
}
</style>
</head>
<body>
<div class='content'>
<div>web 前端开发 </div>
<p>web前端开发最核心3个技术：HTML、CSS和JavaScript HTML控制网页的 结构，CSS控制网页的样式，JavaScript控制网页的行为。</p>
</div>
</body>
</html>
在浏览器预览效果如图所示。
对于上面的标题效果，正确的做法应该是
使用h1 ~ h6标签来实现，但这里却使用div 来代替了。虽然页面效果一样，但是这种“用某一个标签代替另外一个标签来实现相同效果”的做法是完全不可取的，因为它违背了 HTML这门语言的初衷。
HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义，例如p标签，表示的是"paragraph",标记的是一个段落；hl标签，表示“headerl”,标记的是一个最高级标题……而div和span是无语义的标签，我们应该尽可能少用。
HTML很简单，因此很多初学者往往忽略了它的目的和重要性。我们学习HTML并不 是看自己学了多少标签，更重要的是在你需要的地方能否用到正确的语义化标签。把标签用在对的地方，这才是HTML学习的目的所在。
我们都知道前端最核心的技术是HTML、CSS和JavaScript这三种。.其中HTML是网 页的结构，CSS是网页的外观，JavaScript是网页的行为。在这三大元素中，HTML才是最 重要的，而CSS和.JavaScript只是用来修饰结构的。就像你盖房子，房子装饰得再漂亮，如果结构不稳也容易塌。
整站开发时，编写的代码往往都是成千上万行，如果我们全部使用div和span来代替 语义化标签，后期维护会非常困难。此外对于一个页面来说，我们可以根据一个页面的外观来判断哪些是标题，哪些是图片。但是搜索引擎跟人不一样，它可“看不懂” 一个页面长什 么样的。它只会根据HTML代码来识别。搜索引擎一般都是根据HTML标签来识别这里是 一个img标签，那里是一个p标签等。如果整个页面都是div和span,捜索引擎小蜘蛛肯 定会迷路，可能以后都不想来光顾你这个站点。要是这样的话，你崩溃了，你的老板也跟着 崩溃了。
从上面我们知道，编写一个语义结构良好的页面在实际开发中极其重要。主要有两个最大的优点：①利于开发调试和后期维护；②利于搜索引擎优化。
（二）标题语义化
h1 - h6是标题标签，h表示“header”。h1~ h6在HTML语义化中占有极其重要的地位。 h1 ~ h6按照标题的重要性依次递减，其中h1重要性最高，h6重要性最低。
相对于其他语义化标签，h1~ h6在搜索引擎优化(即SEO)中占有相当重要的地位。 在一个页面中，h1 ~ h6这6个标签，我们不需要全部都用上，都是根据需要才用的。对于 h1~ h6,—般情况下我们只会用到h1、h2、h3和h4，很少再会去用h5和h6,因为一个页面不可能用到那么多级的标题。并且从搜索引擎优化的角度来说，h1、h2、h3和h4这4个标签会被赋予一定的权重，而h5和h6的权重跟普通标签差不多，在SEO优化上意义不大。
对于标题h1 ~ h6的语义化，我们需要注意以下四个方面。
（1）一个页面只能有一个h1标签。
（2）hl ~ h6之间不要断层。
（3）不要用h1 ~ h6来定义样式。
（4）不要用div来代替h1 ~ h6.
1.一个页面只能有一个h1标签
hl标签表示每个页面中最高层级的标题，捜索引擎会赋予hl标签最高权重。虽然W3C没有明确规定一个页面不能有多个hl标签，但是我们还是推荐“一个页面一个hl标签”的 做法。如果一个页面出现多个hl,对搜索引擎可能不好，也可能会被判以作弊。就像你写文章一样，一个页面就等于一篇文章，你见过一篇文章有多个主标题的么？
2.h1~h6之间不要出现断层
搜索引擎对hl ~ h6标签比较敏感，尤其是hl和h2。一个语义良好的页面，hl ~ h6 应该是完整有序而没有出现断层的。也就是说，要按照“hl、h2、h3、h4”这样的顺序依次排列下来，不要出现“hl、h3、h4”而漏掉h2的情况。
3.不要用h1~h6来定义样式
我们都知道h1 ~ h6是有默认样式的，如图所示。在实际开发中，很多时候我们需要为文本定义字体加粗或者字体大小。有些人喜欢用h1 ~ h6来代替CSS,使用标签来控制 样式，这是一种非常不好的做法。我们一定要记住，HTML关注的是结构(语义)，CSS关注 的是样式，结构跟样式应该分离。
4.不要用div来代替h1~h6
从语义上来说，一个页面的标题应该使用h1〜h6标签，不要使用div来代替。
分析：
div是无语义的标签，如果使用div来代替h1〜h6,后期维护比较困难，而且对SEO 影响也非常大。因为这种做法会让一个页面丢失大量的权重。
（三）图片语义化
在HTML中，我们使用img标签来表示图片。对于图片的语义化，我们从以下两个方面 来深入探讨一下。
（1） alt属性和title属性。
（2） figure 元素和 figcaption 元素。
1、alt属性和title属性
img标签有两个重要属性：alt和title。
alt属性用于图片描述，这个描述文字是给捜索引擎看的。并且当图片无法显示时，页面会显示alt中的文字。
title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片上时，会显示title中的内容。
语法：
<img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">
搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会査看HTML代码， 通过img标签的alt属性或者页面上下文来判断图片的内容。因此，对于img标签，我们一定要添加alt属性，以便搜索引擎识别图片的内容。alt属性在搜索引擎优化中也很重要，并且会被赋予一定的权重。
请一定要注意；alt属性是img标签必需属性，一定要添加；title属性是img标签可选属性，可加可不加。建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。
2、figure 元素和 figcaption 元素
语法：
<figure>
<img src="" alt=""/>
<figcaption></figcaption>
</figure>
说明：
figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中， 对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使 得页面的语义更加良好。
(四)表格语义化
在实际开发中，我们不建议使用表格布局，应该使用浮动布局或者定位布局。虽然表格拿来做布局的方式被抛弃了，但是这并没有说明表格就一无是处了。
问大家一个问题：如图所示的这种表格数据的展示，应该怎么实现呢？不少得了 “table恐惧症”的小伙伴可能会想到使用div来模拟表格。事实上，对于这种表格数据形式, 最好的选择还是table。
在表格中，我们比较常用的标签是table, tr和td这3个。不过为了加强表格的语义 化，W3C还增加了 5个标签：th、caption、thead、tbody和tfoot。th表示“表头单元格”； caption表示“表格标题”。thead、tbody和tfoot这3个标签把表格从语义上分为三部分: 表头、表身和表脚。有了这几个标签，表格语义更加良好，结构更加清晰。
表格标签如下所示：
说明：
thead, tbody和tfoot这三个标签也是表格中非常重要的标签，它从语义上区分了表头、 表身和表脚。很多人容易忽略这三个标签。
（五）表单语义化
表单跟表格，这是两个完全不一样的概念，不过还是有不少初学者傻傻分不清。对于表单语义化，我们从2个方面来探究一下。
（1）label 标签。
（2）fieldset 标签和 legend 标签。
1、label 标签
W3C规范定义，label标签用于显示在输入控件旁边的说明性文字。也就是将某个表单元素和某段说明文字关联起来。
语法：
< label for=“”> 说明性文字 < /label>
说明：
label标签for属性值为所关联的表单元素的id,例如< input id=“name” type=“text”/>, 则其所关联的label标签应该为< label for=“name”>
label标签的for属性有两个作用。
①语义上绑定了 label元素和表单元素。
②增强了鼠标可用性。也就是说我们点击label中的文本时，其所关联的表单元素也会获得焦点。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<input id="Radio1" type="radio"/>单选框
<input id="Checkbox1" type="checkbox" />复选框
</div>
<hr />
<div>
<input id="rdo" name="rdo" type="radio"/><label for="rdo">单选框</label>
<input id="cbk" name="cbk" type="checkbox" /><label for="cbk">复选框</label>
</div>
</body>
</html>
分析：
从这个例子可以看到，在第一组表单中，我们只能点击单选框才能选中单选框，点击它旁边的说明文字是不能选中的。在第二组表单中，我们可以点击单选框来选中单选 框，并且点击它旁边的说明文字同样也可以选中单选框。而对于复选框来说，也是一样的效果。
其实，这就是label标签for属性的作用。for属性使得鼠标单击的范围扩大到label元素上，极大地提高了用户单击的可操作性。
我们拿复选框来说，下面两行代码是等价的。
<input id="cbk" type="checkbox" /><label for="cbk"> 复选框 </label>
<label>复选框<input id="cbk" type="checkbox"/></label>
2.fieldset 标签和 legend 标签。
语法：
<fieldset>
<legend> 表单组标题 </legend>
</fieldset>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form action="index.aspx" method="post">
<fieldset>
<legend>登录绿叶学习网</legend>
<p>
<label for="name"> 账号：</1abel><input type="text" id="name" name="name" />
</p>
<label for="pwd"> 密码：</label><input type="password" id="pwd" name="pwd" />
</p>
<input type="checkbox" id="remember-me" name="remember-me" /> <label for="remember-me"> 记住我 </label>
<input type="submit" value="登录" />
</fieldset>
</form>
</body>
</html>
分析：
我们可以看到，使用了 fieldset和legend这两个标签之后，表单形成了非常美观的“书签”效果
（六）其他语义化
1、 换行符 < br/>
很多新手会使用＜br/＞标签来换行，或者使用多个＜br/＞标签来实现元素之间的上下间距。
举例：
<div>
<span> 标题 </span><br/><br/>
<span>第 1 部分内容 </span><br/>
<span>第 2 部分内容 </span><br/>
<span>第 3 部分内容 </span>
</div>
上面两个例子使用＜br/＞标签的方式是错误的，这也是＜br/＞标签很常见的错误用法。 事实上，＜br/＞标签有自己特定的语义，不能随便用来实现换行效果。W3C标准规定，＜br/＞ 标签仅仅用于段落中的换行，不能用于其他情况。也就是说，＜br/＞标签只适合用于p标签内部的换行，不能用于其他标签。
2、无序列表ul
在实际开发中，对于列表型的数据，为了实现良好的语义，我们还是建议使用无序列表 或者有序列表，不建议使用div等来实现。
<ul>
<li><span>l</span>HTML 教程 </li>
<li><span>2</span>CSS 教程 </li>
<li><span>3</span>JavaScript 教程 </li>
</ul>
有人问，每一个列表项前都有数字，不应该使用有序列表来实现吗？为什么这里使用无序列表来实现呢？假如使用有序列表，我们是做不到这种外观效果的。因为有序列表前的数字外 观是固定的。在实际开发中，大多数情况下都是使用无序列表，极少情况下会使用有序列表。
3、strong标签和em标签
strong用于实现加粗文本，em用于实现斜体文本。基于结构和样式分离的原则，标签仅仅是为了实现简单的加粗或者斜体效果，我们一般不会用这两个。实际上，W3C对这两个标签赋予“强调”的语义，在strong或者em标签内部的文本被强调为重要文本。并且搜索引擎对这两个标签也赋予一定的权重。如果在一个页面中，为了SEO而想要突出某些关键字，可以使用strong和em这两个标签。一般情况下，我们都是去掉strong和em的默认样式，然后使用CSS重新定义新的样式, 但这并不影响这两个标签的语义。也就是说，样式只会改变标签的外观，但不会改变标签的语义。
4、del标签和ins标签
在HTML中，del和ins这两个标签是配合使用的。del表示“delete”，用于定义被删除的文本。ins表示“insert”，用于定义被更新的文本。一般情况下，我们会使用CSS来重新定义del和ins标签的样式。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>新鲜的新西兰奇异果</p>
<p><del>原价:￥6.50/kg</del></p>
<p><ins>现在仅售：￥4.00/kg</ins></p>
</body>
</html>
5、img标签
想要在页面显示一张图片，我们有两种方式：一是使用img标签；二是使用背景图片。 这两种实现方式最明显的区别在于：使用img标签添加图片，是通过HTML来实现；使用背景图片，是通过CSS来实现。
在实际开发中，很多人添加图片的方式很随意。对于什么时候使用img标签，什么时候使用背景图片，并不是很清楚我们应该根据HTML的语义来判断。如果图片作为HTML的一 部分，并且想要被捜索引擎识别，则应该使用img标签，例如常见的各种图片列表。如果图片仅仅是起到修饰作用，并且不想被搜索引擎识别，则应该使用背景图片。
举个例子，图左这个页面中的图标图片就应该使用背景图片实现，因为这些图标并不需要被搜索引擎识别，也不作为HTML的一部分。而图右页面中应该使用img标签来实 现，因为这是页面HTML结构的一部分，并且希望被搜索引擎识别。
（七）语义化验证
前面这几节，我们介绍了页面语义化需要注意的各个地方。那么平常有什么好的办法来判断一个页面是否语义良好呢？ 一个很简单的办法就是：去掉CSS样式，然后看页面是否还具有很好的可读性。
我们都知道，很多HTML标签都有一定的默认样式，例如p标签有上下边距、strong标签对字体加粗、ul标签有缩进效果，等等。
在前面我们接触过，我们可以使用一个标签来代替另外一个标签，并且使用CSS修饰来实现相同的效果。也就是说，不同的HTML标签可以通过不同的CSS来实现相同的效果。但 是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。
语义不好的页面和语义好的页面：
从上面两张图我们可以看出：一个语义良好的页面在“CSS裸奔”之后，可读性也是非 常高的。想要查看一个页面在“CSS裸奔”下的效果，我们可以使用Firefox浏览器的一款网 页调试插件"Web Developer"来测试。
在 Web Developer ZL具栏找到“CSS” —► “Disable Styles” —'“Disable All Styles” 并且选中，就可以查看页面去掉样式后的效果，如图2-21所示。Web Developer插件的安装和使用，请自行搜索，很简单。
HTML5舍弃的标签
在HTML5中，除了新增标签之外，也有不少标签被舍弃了，如表1和表2所示。
为了实现页面的语义化，我们在实际开发中不应该再去使用这些标签。因此了解哪些标签已经 被舍弃是非常有必要的。
对于这些被舍弃的标签，总体可以分为两大类。
（1）仅仅为了定义样式，没有任何语义，因此被舍弃。
（2）很少使用或者已经被新标签代替，因此被舍弃。
对于HTML语义化，我们需要注意以下两点。
1.我们应该果断舍弃那些仅仅为了定义样式而存在的HTML标签。如果仅仅是为了改 变样式，我们应该使用CSS来实现，不要使用HTML标签。
2.在不同的页面部分，我们优先使用正确的语义化标签。如果没有语义标签可用，才去考虑div和span等无语义标签。
HTML5
一、什么是 HTML5
1.HTML5 的概念与定义
定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
两个概念：
-
是一个新版本的 HTML 语言，定义了新的标签、特性和属性
-
拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5
2.HTML5 拓展了哪些内容
-
语义化标签
-
本地存储
-
兼容特性
-
2D、3D
-
动画、过渡
-
CSS3 特性
-
性能与集成
二、HTML5 新增标签
1、新增了哪些语义化标签
header — 头部标签
nav — 导航标签
article — 内容标签
section — 块级标签
aside — 侧边栏标签
footer — 尾部标签
2.使用语义化标签的注意
-
语义化标签主要针对搜索引擎
-
新标签可以使用一次或者多次
-
在 IE9 浏览器中，需要把语义化标签都转换为块级元素
-
语义化标签，在移动端支持比较友好，
多媒体音频标签
1.多媒体标签有两个，分别是
-
音频 – audio
-
视频 – video
2.audio 标签说明
可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
但是：播放格式是有限的
3.audio 支持的音频格式
audio 目前支持三种格式：
4.audio 的参数
<body>
<!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
<!--
因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
-->
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
</audio>
</body>
多媒体视频标签
1.video 视频标签
目前支持三种格式：
2.语法格式
<video src="./media/video.mp4" controls="controls"></video>
3.video 参数
<body>
<!-- <video src="./media/video.mp4" controls="controls"></video> -->
<!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
<source src="./media/video.mp4" type="video/mp4">
<source src="./media/video.ogg" type="video/ogg">
</video>
</body>
多媒体标签总结
音频标签与视频标签使用基本一致
多媒体标签在不同浏览器下情况不同，存在兼容性问题
谷歌浏览器把音频和视频标签的自动播放都禁止了
谷歌浏览器中视频添加 muted 标签可以自己播放
注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册
新增 input 标签
新增表单属性
扫一扫
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
