浏览器内核（Rendering Engine）
负责读取网页内容，整理讯息，计算页面显示方式并显示页面
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| Firefox | Gecko | -- |
| Safari | WebKit | -- |
| Chrome | Chromium/Blink | Blink是WebKit的分支，Chromium项目中研发Blink渲染引擎（浏览器核心），内置于Chrome浏览器中，大部分国产浏览器最新版采用Blink内核，二次开发 |
| Opera | Blink | -- |
Android，使用最高频率的是WebKit内核；ios，大部分自带浏览器内核，一般是Safari或者Trident
WEB 标准
构成
主要包括结构（structure）、表现（presentation）和行为（behavior）三个方面
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类 |
| 表现 | 表现用于设置网页元素的版式、颜色和大小等外观样式 |
| 行为 | 行为是指网页模型的定义以及交互的编写 |
HTML
HTML指的是超文本标记语言（Hyper Text Markup Language）
HTML不是一种编程语言，而是一种标记语言（markup language）
标记语言是一套标记标签（markup tag）
HTML骨架标签
<html> <head> <title></title> </head> <body> </body></html>| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，根标签 |
| <head></head> | 文档的头部 | 在head标签中必须设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面 |
HTML元素标签
1、常规元素（双标签）
<标签名> 内容 </标签名>"<标签名>"表示该标签的作用开始，一般称为"开始标签","</标签名>"表示该标签的作用结束，一般称为"结束标签"
2、空元素（单标签）
<标签名 />空元素用单标签来表示，不包含内容
HTML标签关系
1、嵌套关系
<head> <title> </title></head>2、并列关系
<head></head><body></body>文档类型
<!DOCTYPE html><!DOCTYPE>声明位于文档中最前面位置，处于<html>标签之前，告知浏览器文档使用哪种HTML或XHTML规范
页面语言lang
<html lang="en">指定html语言类型
最常见两种语言：
1、en定义语言为英语
2、zh-CN定义语言为中文
字符集
<meta charset="utf-8">多个字符的集合，计算机要准确处理各种字符集文字，需要进行字符编码，使计算机能识别和存储各种文字
常用字符集：
GB2312：简单中文，包括6763个汉字
BIG5：繁体中文，港澳台等使用
GBK：包含全部中文字符，是GB2312的扩展，加入繁体字的支持，兼容GB2312
UTF-8：基本包含全世界所有国家需要用到的字符
HTML标签的语义化
标签的含义，方便代码阅读和维护，让浏览器或网络爬虫可以很好解析，从而更好分析其中内容，具有更好的搜索引擎优化
HTML常用标签
排版标签
标题标签h
单词缩写：head 头部
提供了六个等级，作为标题使用，并且根据重要性递减
基本语法格式为：
<h1> 标题文本 </h1><h2> 标题文本 </h2><h3> 标题文本 </h3><h4> 标题文本 </h4><h5> 标题文本 </h5><h6> 标题文本 </h6>段落标签
单词缩写：paragraph 段落
把HTML文档分割为若干段落，把文字有条理的显示出来
<p> 文本内容 </p>默认情况下，文本在一个段落中会根据浏览器窗口大小自动换行
水平线标签
单词缩写：horizontal 横线
将段落与段落之间隔开，使文档结构清晰，层次分明，可通过插入图片实现，也可以简单通过变迁来完成
<hr />换行标签
单词缩写：break 打断
强制某行文本换行显示
<br />**div和span标签
div：division的缩写，表示分割、区分的意思
span：跨度、跨距；范围
<div> 这是头部 </div><span> 今日价格 </span>两个都是盒子，用来装页面元素
div标签用来装布局，在一行只能放一个div
span标签用来布局，一行可以放多个span
文本格式化标签
| 标签 | 显示效果 |
|---|---|
| 文本以粗体方式显示（XHTML推荐使用strong） | |
| 文本以斜体方式显示（XHTML推荐使用em） | |
| 文本以加删除线方式显示（XHTML推荐使用del） | |
| <u></u>和<ins></ins> | 文本以加下划线方式显示（XHTML不赞成使用u） |
标签属性
属性就是外在特性
<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>图像标签
单词缩写：image 图像
<img src="图像URL" />src属性用于指定图像文件的路径和文件名，是img标签的必要属性
<img />标记属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持%页面百分比） | 设置图像的宽度 |
| height | 像素（XHTML不支持%页面百分比） | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
标签可以有多个属性，必须写在开始标签中，位于标签名后面，属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开，采取键值对的格式 key="value"的格式
链接标签
单词缩写：anchor 锚
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>| 属性 | 作用 |
|---|---|
| href | 用于锁定链接目标的地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于锁定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，_blank为在新窗口中打开方式 |
外部链接需要添加http://
内部链接只截链接内部页面名称即可
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为"#"（即href="#"），表示该链接暂时为一个空链接
不仅可以创建文本超链接，在页面各种网页元素等都可以添加超链接
注释标签
在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字
<!-- 注释语句 -->快捷键是：ctrl + / 或者 ctrl + shift + /
路径
可分为相对路径和绝对路径
目录文件夹
存放了页面所需相关素材
根目录
目录文件夹的第一层
相对路径
以引用文件之网页所在位置为参考基础，建立出目标路径，保存于不同目录的网页引用同一个文件时，所使用的路径不相同
| 路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 只需输入图像文件名称即可 | |
| 下一级路径 | "/" | 图片文件位于HTML文件同级文件夹下 |
| 上一级路径 | "../" | 在文件名之前加入"../"，如果是上两级，则需要使用"../../" |
绝对路径
以Web站点根目录为参考基础的目录路径，指的是当所有网页引用同一个文件时，所使用的路径是一样的，符号是""而不是"/"
锚点定位
通过创建锚点链接，快速定位到目标内容
1、使用相应id名标注跳转目标的位置（找目标）
<h3 id="two"> 第2集 </h3>2、使用 链接文本 创建链接文本（被点击的）（拉关系）
<a href="#two">base标签
<base target="_blabk">base可以设置整体链接的打开状态，base写到<head></head>之间，把所有的链接都默认添加target="_blank"
预格式化文本pre标签
<pre> 此例演示如何使用pre标签 对空行和空格 进行控制</pre>被包围在<pre>标签元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体，标签中的文字会按照书写的模式显示，不需要段落和换行标签，但比较少用，因为不好整体控制
特殊字符
| 特殊字符 | 描述 | 字符 |
|---|---|---|
| 空格符 | ||
| < | 小于号 | |
| > | 大于号 | |
| & | 和号 | |
| ￥ | 人民币 | |
| © | 版权 | |
| ® | 注册商标 | |
| ° | 摄氏度 | |
| ± | 正负号 | |
| × | 乘号 | |
| ÷ | 除号 | |
| ² | 平方2（上标2） | |
| ³ | 立方3（上标3） |
表格table
常见显示、展示表格式数据，特别是后台展示数据的时候表格运用是否熟练显得很重要
创建表格
<table> <tr> <td> 单元格内的文字 </td> ... </tr> ...</table>table用于定义一个表格标签，tr标签用于定义表格中的行，必须嵌套在table标签中，td用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，字母td指的是表格数据，即数据单元格的内容
表格的主要目的的显示特殊数据
表格属性
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格的边框（默认border="0"无边框） | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值（默认为2像素） |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值（默认为1的像素） |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
表头单元格标签th
一般表头单元格位于表格的第一行或第一列，并且文本加粗居中，只需用表头标签<th></th>代替相应的<td></td>即可
表格标题caption
<table> <captain> 表格标题 </caption></table>captain元素定义表格标题，通常这个标题会被居中且显示于表格之上，标签必须紧随table标签之后，只存在表格里才有意义
合并单元格
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
合并顺序：先上后下、先左后右
合并三部曲：
1、确定跨行还是跨列
2、根据合并顺序找到目标单元格，然后写上合并方式还有要合并的单元格数量
3、删除多余单元格
表格划分结构
题头、正文和脚注，分别用：thead、tbody和tfoot来标注
列表标签
容器里面装载着结构，样式一致的文字或图标的一种形式，叫列表，列表最大的特点就是整齐、整洁、有序，跟表格类似，可组合自由度更高
无序列表ul
各个列表项之间没有顺序级别之分，是并列的
<ul> <li> 列表项1 </li> <li> 列表项2 </li> <li> 列表项3 </li> ......</ul><ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的，<li>与</li>之间相当于一个容器，可以容纳所有元素，无序列表会带有自己样式属性
有序列表ol
有排列顺序的列表，各个列表项按照一定的顺序排列定义
<ol> <li> 列表项1 </li> <li> 列表项2 </li> <li> 列表项3 </li> ......</ol>所有特性基本与ul一致，但实际中比无序列表用的少很多
自定义列表
常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
<dl> <dt> 名词1 </dt> <dd> 名词1解释1 </dd> <dd> 名词1解释2 </dd> ... <dt> 名词2 </dt> <dd> 名词2解释1 </dd> <dd> 名词2解释2 </dd> ...</dl>表单标签
目的为了收集用户信息
通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法，如果不定义表单域，表单中的数据无法传送到后台服务器
表单标签
input控件
<input type="属性值" value="你好" />input是输入的意思
<input />标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性
常用属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| text | 单行文本输入框 | |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| type | button | 普通按钮 |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域 | |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input控件中的默认文本值 |
| size | 正整数 | input控件在页面中的显示宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
type属性通过改变值，决定属于哪种input表单
value是input默认的初始值
后台可通过name属性找到表单，如果是一组，必须给他们命名相同的名字name，可以实现多个选其中一个
label标签
为了提高用户体验，为input元素定义标注（标签），用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点
绑定元素方法：
1、用label只截包括input表单
<label> 用户名： <input type="radio" name="usename" value="请输入用户名" /> </label>适用于单个表单选择
2、for属性规定label与哪个表单元素绑定
<label for="sex"> 男 </label><input type="radio" name="sex" id="sex" />textarea控件（文本域）
<textarea>文本内容</textarea>通过textarea控件可以轻松创建多行文本输入框
文本框和文本域区别
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
|---|---|---|---|---|
| input type="text" | 文本框 | 只能显示一行文本 | 单标签，通过value显示默认值 | 用户名、昵称、密码等 |
| textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
select下拉列表
<select> <option> 选项1 </option> <option> 选项2 </option> <option> 选项3 </option> ...</select>select中至少包含一对option
在option中定义selected="selected"时，当前项即为默认选中项
form表单域
form标签被用于定义表单域，实现用户信息的收集和传递，form中所有内容都会被提交给服务器
<form action="url地址" method="提交方式" name="表单名称">各种表单控件</form>常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单 |
每个表单都应该有自己的表单域，但ajax后台交互的时候，必须需要form表单域