1.<!DOCTYPE html>
告诉浏览器使用什么规范
1.定义： DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器；
2.作用： 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
ps:
1. 如果你的页面没有DOCTYPE声明，那么compatMode默认是怪异模式 BackCompat，浏览器按照自己的方式解析渲染页面，那么在不同的浏览器下，存在兼容性的css可能就会显示不同的样式。
2.如果你的页面添加了<!DOCTYPE html>，就等同于开启了标准模式 CSS1Compat，那么浏览器就会按照W3C的标准解析渲染页面，这样你的页面在所有的浏览器里显示都一样。
这就是<!DOCTYPE html>的作用。
2.<html lang="en"></html>
向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示“english”
你的页面如果是中文页面，可将其改为
<html lang="zh">
zh即表示中文
这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响。
这些现在都是html规范，你的页面越规范，就越容易被收录。
2.3.<head></head>
lang="en"也可以放head
<head lang="en">
<meta charset="UTF-8">
<title>不同等级的标题标签对比</title>
</head>
虽然head中的内容并不会渲染显示，但是却起着至关重要的作用，从head这个命名就足以看出它对整个文档的意义。以下是head标签的作用：
1.设定网站的样式
2.加载和运行脚本
3.为搜索引擎提供关键字，文档描述，帮助做SEO
4.设定viewport，告诉设备如何进行渲染
1.<meta></meta>标签
head包含的页面的元数据(描述数据的数据)，所有head中的元数据都是不会直接渲染的，比如标题，样式等等。meta可以包含的信息种类更加丰富。
根据用途进行以下分类：
设置charset
设置页面字符编码，如：
<meta charset="utf-8">
实际请求页面的时候响应头如果有content-type字段，它里面的charset会覆盖当前meta标签中的值。如：content-type：text/html；charset=utf-8
设置viewport
viewport是一个虚拟的窗口，用户通过它来查看页面内容。viewport的宽度可以被认为设置，并且允许缩放。
以下的例子是将viewport的宽度设置为设备宽度，初始缩放比为：1
<meta name="viewport" content="width=device-width, initial-scale=1">
2.<title> </title>标签
用来表示文档的标题
3.<style></style>标签（内样式）
<style> 标签同 <link> 标签类似，不同的是，<link> 标签是引用外部 CSS 样式文件，而 <style> 标签则是用来在内部编写 CSS 样式。
我们建议在 <head> 标签中使用 <link> 或 <style> 标签，而不是在其他标签中使用。当浏览器加载页面时，会自上而下执行代码。如果这两个标签写的靠近下方，在加载页面样式时，可能会有短暂的延迟，影响用户使用效果。
4.<link>标签（外样式引CSS）href
在 HTML 中，允许使用 <link> 标签配合 href 属性来引用外部 CSS（Casecading Style Sheets）文件，其中 href 属性值为外部 CSS 文件的路径。
5.<script> 标签（外样式引CSS）src
用来引入外部文件。与 <link> 标签不同的是，<script> 标签配合 src 属性引入外部 JavaScript 文件，而 <link> 标签则是配合 href 属性引用外部 CSS 文件。一个是使用 href，另一个是使用 src，那么它们到底有什么区别呢？
href与src的区别
src 是 source 的简写，表示来源地址，用来引入地址中的内容。引入的内容会嵌入到当前标签所在的位置，所以浏览器在解析引入文件时，会停止对后续文档的处理，直到 src 的内容加载完毕。
href 是 Hypertext Reference 的简写，表示超文本引用。在使用 href 时，浏览器不会停止解析当前文件。因为 href 属性中的内容只是与当前页面有关联，然后当前页面对它进行一次引用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="expires" content="31 Dec 2090">
<title>文档的标题</title>
<link rel="stylesheet" href="url">
<style></style>
<script src="url"></script>
</head>
<body>
</body>
</html>
2.4.<body></body>
■ 作用
定义HTML文档的主体，包含HTML文档的所有内容(比如文本、超链接、图像、表格和列表等等)
■ 全局属性
<body> 标签支持所有HTML的全局属性
■ 事件属性
<body>标签支持所有HTML的事件属性
<body></ body >里的属性：
bgcolor设置页面背景颜色
<body bgcolor="red"></ body >即页面背景色为红色；
background设置背景图片
<body background=“图片地址”></body >
bgproperties=fixed是设置背景图片不随滚动条的滚动而滚动，直接加在地址后面即可。
<body text="green"></ body >即网页文字为绿色
对于链接中的文字，link，vlink，alink分别对应：普通超级链接，访问过的超级链接，当前活动的超级链接。
如，<body alink="red" link="pink" vlink="green"></ body >当前颜色为粉色，点击时为红色，访问过为绿色。
<body leftmargin="200" topmargin="300">你好吗</ body >。即“你好吗”距离左边为200，上边为300.
1.<h?></h?>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.<hr/>水平线标签（分割标题和段落）
<h1>北京欢迎你</h1>
<hr/>
<p>
北京欢迎你，有梦想谁都了不起！<br/>
让我们都加油去超越自己。<br/>
</p>
3.<p></p>段落标签
<br/>换行标签
<p>
北京欢迎你，有梦想谁都了不起！<br/>
让我们都加油去超越自己。<br/>
</p>
4.字体样式标签
<strong>内容</strong>加粗
<em>内容</em>斜体
注释
<em>1931</em>年由南京乘飞机到北平，飞机失事，因而遇难<br/>-->
Ctrl+/可以产生
5.<img.../>图像
<p> <img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></p>
6.<a href=”url”></a>超链接
target="_blank"表示新窗口打开，没有则是当前页打开
<!--图片超链接-->
<a href="detail.html" target="_blank">
<img src="image/img1.png" alt="姑娘，欢迎降落在这残酷的世界" title="姑娘，欢迎降落在这残酷的世界" />
</a>
<p>
<!--文字超链接-->
<a href="detail.html" target="_blank">姑娘，欢迎降落在这残酷的世界</a>
</p>
<p><a href="elearing/index.html" target="_blank">YL在线学习平台</a></p>
6.1锚链接
<a href="#register"></a> <a name="register">新用户注册</a>
<p><img src="image/logo.jpg" width="305" height="104" alt="logo" /> [<a href="#register">新用户注册帮助</a>] [<a href="#login">用户登录帮助</a>]</p>
<h1>新手指南 - 登陆或注册</h1>
<h2>购物流程</h2>
<img src="image/help_steps.jpg" width="752" height="67" />
<h2><a name="register">新用户注册</a></h2>
<h4>Step 1 点击页面右上方的“注册”按钮注册聚美优品账号。</h4>
<img src="image/login_step1.jpg" width="550" height="132" />
<h4>Step 2 注册前请仔细阅读《聚美优品用户协议》，如无异议请点击“同意以下协议并注册”。请根据相应提示在信息栏内填入您的注册信息。</h4>
<img src="image/signup_step2.jpg" width="716" height="588" />
<p>注册成功后系统将自动登录您的账号，并转至聚美优品首页。</p>
<h2><a name="login">登录</a></h2>
<h4>Step 1 如您已经拥有聚美账号，请点击页面右上方的“登录”按钮</h4>
<img src="image/login_step1.jpg" width="550" height="132" />
<h4>Step 2 在登录页面的信息栏内填入对应信息，点击“登录”按钮进行登录，或通过选择登录框下方的合作账号进行快速登录。登录成功后，系统将自动跳转至聚美优品首页。</h4>
<img src="image/login_step2.jpg" width="716" height="528" />
6.2邮件链接
<p><img src="image/logo.jpg" width="305" height="104" alt="logo" /> [<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>] </p>
</body>
块内元素和行内元素
<p>我是p元素</p>
<h1>我是标题h1</h1>
<h6>我是标题h6</h6>
<a href="#">我是超链接a元素</a>
<strong>我是strong元素</strong>
<em>我是em元素</em>
总结
7.表
1无序列表ul,li
没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
2有序列表ol,li
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等
3定义列表dl-dt-dd
没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
对比
4基本表格<table border=”2”>tr-th-td
<table border="2">
border设置边界线条，即边框
将table设置样式：
border-collapse:collapse;
然后就可以开始给我的tr元素设置border-bottom了。
4.1表格跨列<td colspan="2"></td>
4.2表格跨行<td rowspan="2"></td>
4.3表格跨行跨列 4.1、4.2顺序排列
8.音频、视频
两种格式视频是为了浏览器的格式兼容选择
controls控件
autoplay自动播放
muted无声
1视频<video></video>
必须有控件或者无声才能自动播放
<video autoplay>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
你的浏览器不支持video元素
</video>
2音频<audio></audio>
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
9.结构布局header,section,footer
<head lang="en">
<meta charset="UTF-8">
<title>网易邮箱页面布局</title>
<!--此段代码只是让大家能更好的看到每块元素的位置，后面在CSS中会具体讲解-->
<style>
header,section,footer{
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体部分</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
</body>
对比div
区别就是没区别，在H5出现以后，主张语义化标签，<header>、<footer>等html5的这几个标签都是收集了网上数百万网站上出现概率比较多的部分确定的，比如网站80%都会用页脚来声明版权等等。
相比于普通的<div>标签，H5的一些新标签只是增强代码的可读性，同时运行时，搜索引擎会在查找元素上更省时。
10iframe框架
<iframe src="subframe/the_one.html"
width="500px" height="236px" name="newPage" />
例子2
<h1>上方导航条</h1>
<p>
<a href="subframe/the_first.html" target="mainFrame">下边显示第一页</a><br /><br />
<a href="subframe/the_second.html" target="mainFrame">下边显示第二页</a><br /><br />
<a href="subframe/the_third.html" target="mainFrame">下边显示第三页</a><br />
</p>
<iframe name="mainFrame" width="800px" height="150px" src="subframe/the_second.html" />
总结
767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
