说明
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE，猎豹安全，360极速浏览器，百度浏览器 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| chrome | Blink | chrome/opera浏览器内核。Blink其实是Webkit的分支 |
目前国内一般浏览器都会采用Webkit/Blink内核，如360，UC，QQ，搜狗等
html基本结构标签
| 标签名 | 定义 | 说明 |
|---|---|---|
| html | html标签 | 根标签 |
| head | 文档的头部 | 在head标签中我们必须设置的标签是title |
| title | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| body | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
文档类型声明标签
文档类型声明，作用就是告诉浏览器使用哪种HTML版本显示网页<!DOCTYPE HTML>
这句代码的意思是：当前页面采取的是HTML5版本来显示网页 注意：
1.声明位于文档中的最前面的位置，处于html标签之前
2.不是一个HTML标签，它就是文档类型声明标签
lang语言种类
用来定义当前文档显示的语言
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页 其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文，但是定义为en的网页，浏览器会提示翻译该页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
字符集
在head标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8"/>
html常用标签
标题标签h
<h1> - <h6>
段落和换行标签p
<p>这是一个段落</p>
特点： 1.文档在一个段落中会根据浏览器窗口的大小自动换行 2.段落和段落之间保有空隙
<br/> <!--换行标签-->
文体格式化标签strong，em
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | strong或者b | 更推荐strong加粗，语义更强烈 |
| 倾斜线 | em或者i | 推荐em |
| 删除线 | del 或者s | 推荐del |
| 下划线 | ins或者u | 推荐ins |
div和 span标签
div和 span标签没有语义的，就是一个盒子，拿来装内容的 特点：
1.<div>标签用来布局，但是现在一行只能放一个div.大盒子
2.<span标签用来布局，一行上可以多个span，小盒子
图像标签和路径img
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示的时候提示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度，不设置高度的情况下，宽高会等比例缩放 |
| height | 像素 | 设置图像的高度，不设置宽度的情况 下，宽高会等比例缩放 |
| border | 像素 | 设置图像的边框粗细 |
超链接标签a
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target：_self为默认值，_blank为在新窗口中打开新方式 _top 和 _parent笔记后面补上
空标签
<a href="#" target="_self">空标签</a>
下载标签
<a href="D:\360极速浏览器下载\DingTalk_v6.0.15.5081263.exe" target="_self">下载</a>
网页元素标签
文本，图像，表格，音频，视频都可以添加超链接
<a href="http://www.baidu.com" target="_parent"><img src="img.png"></a>
锚点链接
可以快速定位到页面中的某个位置
<a href="#fuck"><img src="img.png"></a>
<p id="fuck">333333</p>
特殊字符
> 和 <等特殊字符具体网上查
表格标签
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,center,right | 规定表格相对周围元素的对齐方式 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为"",表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素(视频说是左边为标准计算) |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<tr >
<th>名字</th>
<th>年龄</th>
<th>链接</th>
</tr>
<tr>
<td title="提示文字">小明</td>
<td>33</td>
<td>
<a href="https://www.baidu.com/">贴吧</a>
<a href="https://www.baidu.com/">baidu</a>
<a href="https://www.baidu.com/">306</a>
</td>
</tr>
<tr>
<td>小七</td>
<td>2</td>
</tr>
</table>
表格结构标签
在表格标签中，分别用：thread标签表格的头部区域，tbody标签表格的主体区域，这样可以更好的分清表格结构
以上标签都是放在table标签中
合并单元格
跨行合并：rowspan="合并单元格的个数" 跨列合并：colspan="合并单元格的个数"
- 合并单元格三部曲 1.先确定是跨行还是跨列合并 2.找到目标单元格，写上合并方式=合并的单元格数量。比如：
<td colspan="2"></td>
3.删除多余的单元格
代码：
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<thead>
<tr >
<th>名字</th>
<th>年龄</th>
<th>链接</th>
</tr>
</thead>
<tbody>
<tr>
<td title="提示文字" align="center" rowspan="2">小明</td>
<td>33</td>
<td>
<a href="https://www.baidu.com/">贴吧</a>
<a href="https://www.baidu.com/">baidu</a>
<a href="https://www.baidu.com/">306</a>
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">小七</td>
<td>2</td>
</tr>
</tbody>
</table>
列表标签
无序列表
<ul>
<li>333</li>
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
有序列表
<ol>
<li>333</li>
<li>333</li>
<li>333</li>
<li>333</li>
</ol>
自定义列表
在HTML标签中，dl标签用于定义描述列表(或定义列表)，该标签会与dt(定义项目/名字)和dd(描述每一个项目/名字)一起使用
其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
1.dl里面只能包含dt和dd 2.dt和dd个数没有限制，经常是一个dt对应多个dd
代码：
<body>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
</body>
表单
表单是为了收集用户信息
表单域
表单域是一个包含表单元素的区域
在html标签中,form标签用于定义表单域，以实现用户信息的收集和传递
form会把它范围内的表单元素信息提交给服务器
<form action="提交服务器地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
input表单元素
type属性的属性值及其描述如下：
| 属性值 | 描述 | |
|---|---|---|
| button | 定义可点击按钮(多数情况下，用于通过js启动脚本) | |
| checkbox | 定义复选框 | |
| file | 定义输入字段和"浏览"按钮，供文件上传 | |
| hidden | 定义隐藏的输入字段 | |
| image | 定义图像形式的提交按钮 | |
| password | 定义密码字段，该字段中的字符被掩码 | |
| radio | 定义单选按钮 | |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 | |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 | |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 | |
| 除了type属性外，input标签还有其他很多属性，其常用属性如下： | ||
| 属性 | 属性值 | 描述 |
| -------- | :----- | :----- |
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值,如果是radio 或者是 checkbox ，则为提交给服务器的值，其他input为默认值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
<form action="1.php" method="get" name="表单域名称">
用户名：<input type="text" name="name" maxlength="6"><br/>
密码：<input type="password" name="pwd"><br/>
性别：
男<input type="radio" name="sex" checked="checked" value="1">
女<input type="radio" name="sex" value="2"><br/>
爱好：
游泳<input type="checkbox" name="hobby" value="1">
听歌<input type="checkbox" name="hobby" checked="checked" value="2">
游戏<input type="checkbox" name="hobby" value="3"><br/>
其他信息：<input type="text" name="qita" value="33"><br/>
上传头像：<input type="file" name="file1"><br/>
重置：<input type="reset"><br/>
提交:<input type="submit" value="注册注册">
</form>
1，name和value是每个表单元素都有的属性值，主要给后台人员使用 2，name表单元素的名字，要求单选按钮和复选框要有相同的name值
label标签
label标签为input元素定义标注(标签)
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验
语法：
<label for="sex">男</label>
<input type="radio" id="sex" name="sex" checked="checked" value="1">
<label for="sex1">女</label>
<input type="radio" id="sex1" name="sex" value="2"><br/>
select标签
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用select标签控件定义下拉列表
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option selected="selected">选项5</option>
</select>
1,select中至少包含一对option 2,在option中定义selected="selected"时，当前项即为默认选中项
textarea表单元素
语法：
文本域：<textarea rows="3" cols="20">文本域提示</textarea><br/>
1.通过textarea标签可以轻松地创建多行文本输入框 2.cols="每行中的字符数"，rows="显示的行数",我们在实际开发中不会使用，都是用css来改变大小