HTML
五大浏览器
IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera
浏览器内核
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
| Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。 |
| chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
| Opera | blink | 现在跟随chrome用b |
web标准
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
Web 标准的好处
遵循web标准可以让不同我们写的页面更标准更统一外，还有许多优点
1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度
HTML骨架
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
文档协议
-
文档类型<!DOCTYPE>
DOCTYPE用来指定HTML的版本。HTML5的声明是< !DOCTYPE html >
< !DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
-
字符集
<meta charset="UTF-8" />:计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。- gb2312 简单中文 包括6763个汉字 GUO BIAO
- BIG5 繁体中文 港澳台等用
- GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
- UTF-8则基本包含全世界所有国家需要用到的字符
HTML常用标签
标签分类
- 单标签
<br/>、<hr/>、<img/>、<input/> - 双标签
span、div、ul li、a、h1-h6、p
常用标签
| 标签名 | 定义 | 说明 |
|---|---|---|
| <p></p> | 段落标签 | 可以把 HTML 文档分割为若干段落 |
| <hr /> | 水平线标签 | 没啥可说的，就是一条线 |
| <br /> | 换行标签 | |
| <div></div> | div标签 | 用来布局的，但是现在一行只能放一个div |
| <span></span> | span标签 | 用来布局的，一行上可以放好多个span |
| <ul><li></li></ul> | 无序列表 | ul里只包li标签 |
| <ol><li></li></ol> | 有序列表 | |
| <dl><dt></dt></dl> | 自定义列表 | |
| <img/> | 图片标签 | 行内块会元素是下对齐 |
| <a></a> | 超链接标签 | |
| <h1></h1>...... | 标题标签 |
标签常用属性
标签属性
img
alt属性：规定图像的替代文本（必须）
-
src 属性：规定显示图像的 URL（必须）
相对路径
以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个 文件时，所使用的路径将不相同，故称之为相对路径。
- 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
- 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
- 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。
绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的
“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.baidu.com”。
title属性：鼠标到图片的提示信息
height属性
width属性
超链接标签a：
- href属性：用于指定链接目标的url地址
target属性：用于指定链接页面的打开方式 _blank _self
锚点定位：
<a href="#two">
表格标签：table
- 表格属性： border：表格边框
- cellspacing：单元格间的间距
- cellpadding：单元格的内容与其边框的内边距
- align：表格的对齐方式，通常是left，center，right
- bgcolor：表格的背景颜
- width：表格宽度
- height：表格高度
- border-collaspe：collaspe：边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽度等于前两个边框宽度之和
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<thead></thead>
<tbody></tbody>：用于定义表格的主体。
表单标签：form
form 属性规定 label 与哪个表单元素绑定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
常用表单元素
| type | 说明 | 常用属性 |
|---|---|---|
| text | 文本框 | value，placeholder，autofocus，name |
| password | 密码框 | value，name |
| radio | 单选按钮 | name |
| checkbox | 复选按钮 | name |
| submit | 提交按钮 | value |
| reset | 重置按钮 | value |
| button | 普通按钮 | value |
下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
所有标签公有的常用属性
class、id、style、data-*
块级元素、行内元素的区别
常见的块级元素有：h1, h2 ,h3, h4, h5, h6 ,p ,div, dl, dt, hr ,ol ,ul, li, form, pre, table, td, th；
常见的行内元素有：em,strong,span,button,input,label,code,select,img,textarea
两者之间的区别：
1.块级元素占据一整行，内联元素的宽度是其元素内容的宽度，多个内联元素排列会放在同一行里除非放不下，才会挤到新的一行
2.块级元素可以设置宽度width和高度height，而内联元素设置widht和height是无效的
3.块级元素可以包含块级元素和内联元素，而内联元素只能包含文本
4.块级元素可以设置margin和padding属性，行内元素只有margin-left、margin-right、padding-left、padding-right起作用
