（浏览器内核不同，所以相同的代码显示出的页面或排版就有差异）
Web标准三层构成
（1）结构：对网页元素进行整理和分类，主要HTML（人的身体）
（2）表现：表现网页元素的版式、颜色、大小等外观样式，CSS（人的着装）
（3）行为：网页模型定义及交互的编写，js（人的行为）
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>标签分为：双标签和单标签（<br />）;嵌套关系（head和title）和并列关系（head和body）
lang:指定语言，en：英语；zh-CN:中文
<html lang="zh-CN">charset:将body内按这个字符集存储。GBK:简体繁体。
<head>
<meta charset=" ">
</head>语义化目的：
1.方便代码阅读和维护
2.让浏览器或网络爬虫很好解析，更好分析其中内容
3.使用语义化标签具有更好的搜索引擎优化
标题标签：<h1>到<h6>从大到小
段落标签：<p></p>作用分段
水平线标签：<hr />
换行标签：<br />
div和span标签：div是分区的意思；span是范围跨度意思。主要用来装网页元素的
div:用来布局用的，一行只能放一个div（一个div结束会自动换行）
span：用来布局，一行可以有多个span（不会换行）
文本格式化标签
<b></b>：加粗效果。
<strong></strong>：加粗效果。推荐用。有强调意思。
<i></i>:倾斜效果
<em></em>：倾斜效果。强调意思
<s></s>：加删除线
<del></del>:加删除线。强调。
<u></u>:加下划线。
<ins></ins>:加下划线。强调。
标签属性
<标签名 属性1=“属性值1” 属性2=“属性值2”.....> 内容 </标签名>
<手机 颜色=“红色” 大小=“5寸” > </手机>
图像标签img
<img src="图像1" />
| 属性 | 属性值 | 描述 |
| src（必须写） | URL | 图像的路径 |
| alt | 文本 | 图像不能显示 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 数字 | 设置图像边框的宽度 |
链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
href:指定链接目标的url地址，（必须有）
target:指定链接页面的打开方式，取值有self和black两种，self是默认值，当前窗口打开，blank：在新窗口中打开。
（ps:外部链接需要添加http:// www.baidu.com
内部链接：直接链接内部页面名称 index.html
没有确定的链接目标：href="#" 代表空链接
）
注释标签
<!-- 注释语句 --> 快捷键 ：ctrl+ /
相对路径：
同一级路径：图片引用的时候，直接写图片的名字就行。<img src="baidu.gif">
下一级路径：<img src="images/baidu.gif">
上一级路径：<img src="../images/baidu.gif">
绝对路径：
<img src="C:/......">不提倡使用，因为换个电脑可能就不正确了。
<img src="http://www.......">
瞄点定位：
比如点击目录，能跳转到目录所在的内容行。
<a href="#tree"> 2.圣诞树由来 </a><br /> 目录：
<h2 id="tree" >2.圣诞树由来</h2> 对应内容：
base标签：
设置整体链接的打开状态
<head>
<base target="_blank">
</head>
预格式化文本
<pre> </pre>：在里面写什么效果，显示出来就什么效果。比如换行和空格。
特殊符号
 ：空格
创建表格
<table>//表格标签：一个长方形
<tr>//行标签：
<td>单元格内文字</td>
</tr>
</table>
比如：
<table>
<tr> <td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr> <td>小明</td>
<td>男</td>
<td>18</td>
</tr>
</table>
表格属性（加粗默认0）
| 属性名 | 含义 | 常用属性值 |
| border | 设置表格边框(默认border=0 无边框) | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值（默认2） |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值（默认1） |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中水平对齐方式 | left center right |
表头：表格的第一行或第一列
<th></th>让表头加粗居中（td改th）
表格标题caption
eg: <table>
<caption>2020年增长情况</caption>
</table>
合并单元格
2种方式：
1.跨行：rowspan=“合并单元格的个数”
2.跨列：colspan=“合并单元格的个数”
合并顺序：先上后下 先左后右
步骤：
1.确定跨行还是跨列
2.找到目标单元格（先上后下 先左后右），写上合并方式和合并单元格的数量
<td rowspan="2">照片</td>
3.删除多余单元格
列表标签
列表用来布局。
无序列表（ul）
无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
有序列表(ol)
<ol>
<li>列表项1</li>
</ol>
自定义列表（围绕着什么来解释说明的）
<dl>
<dt>北京</dt>
<dd>朝阳区</dd>
<dd>海淀区</dd>
</dl>
表单标签
由 表单控件、提示信息、表单域 三种组成。
input控件
<input type="属性值" value="你好"> （input单标签）
| 属性 | 属性值 | 描述 |
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域（比如：上传文件） | |
| name | 由用户自定义 | 控件的名称（通过name把不同表单区分开，name相同只能选1个） |
| value | 由用户自定义 | input控件中默认文本值（比如：请输入用户名） |
| size | 正整数 | input控件在页面中的显示宽度 |
check属性：默认选中状态。常见于单选按钮和复选按钮。
<input type=" " check="checked">
label标签：
作用：绑定一个表单元素。点击用户名，光标定位到输入用户名，点击输入用户名的框也可以移到输入用户名。
怎么绑定元素？
（1）label标签直接包括input表单
<label>用户名： <input type="radio" name="username" value="请输入用户名"> </label>
（2）for和id来控制
<label for="nc">昵称：</label> <input type ="text" id="nc"/>
textarea控件（文本域）
应用：比如评论
<textarea cols="每行的字符数" rows="显示的行数">
文本内容
</textarea>
实际开发不用。通过css
select下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
</select>
<option selected="selected">为默认选中项，实际开发用的比较少。select优缺点，不同浏览器中显示的效果不一样。而且程序员改不了。
form表单域
通过form表单域将用户信息传递给服务器。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
action:用来指定接收并处理表单数据的服务器程序的url地址。
method:get/post，设置表单数据的提交方式
name:名称，用来指定表单的名称，以区分同一个页面的多个表单
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
