浏览器的功能：把网页的代码渲染成好看的网页
【常用浏览器】
浏览器市场份额:
http://tongji.baidu.com/data/browser
IE
火狐
谷歌(程序员用)
Edge
Safari
Opera
【浏览器内核】
因为浏览器是由不同的厂商开发出来的，所以它们使用的技术也不一样
不同的浏览器就有了不同的渲染方式，
渲染:默认情况下，渲染引擎可以显示html、xml文档及图片
渲染主要是通过浏览器内核进行渲染的
1. Trident(IE内核)
国内很多的双核浏览器的其中之一核就是Trident，美其名曰：兼容模式
代表：IE、遨游、腾讯、猎豹、360极速浏览器等
win10发布后，IE将其内置浏览器命名为Edge，Edge最显著特点就是新内核EdgeHTML
2. Gecko（火狐）
火狐浏览器采用该内核，Gecko的特点是代码完全公开，因此开发程度很高。
可惜近几年已经没落，比如打开速度慢，升级频繁
3. webkit（Safari）
Safari是苹果公司开发的浏览器，所用内核是Webkit
代表：Safari，Symbian手机浏览器，Android默认浏览器
4. Chromium/Blink（chrome）
13年4月3日，谷歌正式宣布不适用webkit
在Chromium项目中研发Blink渲染引擎，内置于chrome之中。
Blink其实是webkit的分支，大部分国产浏览器后来都使用Blink内核
5. Presto（Opera）
是opera的前任内核，但是最新的opera浏览器已经使用谷歌的内核了。
【web标准】
浏览器的内核不同，工作原理，解析方式肯定不同，显示就会有区别。
为了避免浏览器解析出来的效果不一致导致开发人员为多版本开发而烦恼
web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合，
包括三个方面：
1. 结构标准：结构用于对网页元素进行整理和分类，包括XML和XHTML两部分
2. 样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
3. 行为标准：行为指网页模型的定义与交互的编写，包括DOM和ECMAScript两个部分
* 理解为我们的源码为：html + css + js
Html
【HTML格式】
1. 格式
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
2. 解释
<body>
这个元素中的所有内容都会显示在浏览器的主窗口中
<head>
包含了这个页面的一些信息，在这个标签中经常会看到title标签
<title>
这个元素中的内容要么显示在浏览器的顶端，要么显示在页面所在的选项卡上
【HTML标签】
1. 排版标签
标题 <h1> ~ <h6>
段落 <p>
换行 <br>:段落内换行
水平线 <hr>: <hr color="green" size="7" width="500px" align="left" />
水平线:绿色,宽度(横向)500像素,粗细:7,靠左
属性：color 分割线颜色
size 分割线粗细
width 分割线的宽度
align 水平对齐方式 left center（默认） right
2. 文本格式化标签
<b></b>和<strong></strong> 粗体
<i></i>和<em></em> 斜体
粗体+斜体:嵌套写
<s></s>和<del></del> 加删除线
<u></u>和<ins></ins> 加下划线
<sup> 上标，比如2的2次方
<sub> 下标，比如H2O
3. 图像标签
<img /> 标记属性
src - 图像的路径
alt - 图像不能显示时替代的文本
title - 鼠标悬停时显示的内容
width - 图像的宽度
height - 图像的高度
border - 图像边框的宽度
4. 链接标签
<a></a> 手动
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<meta/> 自动跳转
<meta http-equiv="refresh" content="秒数;url=跳转页面路径"/>
* 注意：
1）外部链接，需要添加 http://
2）内部链接，直接链接内部页面名
3）没有确定链接目标时，通常将href的值定义为 # ，表示暂时为一个空链接
4）不仅可以创建文本超链接，网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接
* 锚点定位
通过创建锚点链接，用户能够快速定位到目标内容
1. 使用 a href="#id名" 创建链接文本
2. 使用相应的id名标注跳转目标的位置
5. base标签
可以设置整体链接的打开状态
<base target=_”blank”>所有链接打开在一个新窗口,但是可以被局部链接设置所覆盖
6. 注释标签
<!-- 注释是写给自己看的，浏览器是不执行的 -->
7. 列表标签
无序列表 ul
* 只能嵌套<li>，放入其他标签或者文字的做法是不允许的
* <li></li>相当于一个容器，可以容纳所有元素
* 无序列表会带有自己的样式属性，可以由CSS修改
li属性举例:
list-style:列表风格,属性为none则去除前面的点
有序列表 ol
8. 表格
表格标签 <table></table>
内部只能嵌套表格行标签 <tr></tr>
表格行标签 <tr></tr>
内部只能嵌套单元格标签 <td></td>
单元格标签 <td></td>
内部可以嵌套任何HTML标签
<table> 元素：定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。
<tr>元素：定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。
<td>元素：定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。
需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。
<table>属性：
border：表格边框的大小 单位：像素(px)
bordercolor：表格边框的颜色
align：水平对齐方式
bgcolor：表格的背景颜色
background：表格的背景图片
cellpadding：单元格填充物
cellspacing：单元格间距
width：表格的宽度
height：表格的高度
<tr>属性：
align：该行所有单元格内部内容的水平对齐方式
valign：该行所有单元格内部内容的垂直对齐方式
bgcolor：该行所有单元格的背景颜色
bordercolor：该行所有单元格的边框颜色
height：该行的行高
<td>属性：
align：该单元格内部内容的水平对齐方式
valign：该单元格内部内容的垂直对齐方式
bgcolor：该单元格的背景颜色
background：该单元格的背景图片
bordercolor：该单元格的边框颜色
width：该单元格所在的列的列宽
height：该单元格所在的行的行高
* 合并单元格
rowspan：合并行
colspan：合并列
row 行
column 列
* 宽度width/高度height表达方式：
1：绝对值：100px 200px
2：相对值：50% 相对父级标签
【表单控件：网页中与用户进行交互数据的标签】
表单标签：<form></form> 和java ee有着莫大的联系
属性:
action:规定当提交表单时向何处发送表单数据
form:如果不指定method属性,则默认是get方式,提交的方式,有get和post两种
1.文本类型控件：
1)文本框控件 <input type="text"/>
属性：value 文本框中的值
readonly="readonly" 只读，只可查看，不可修改
disabled="disabled" 禁用，文本框直接被禁止使用
maxlength 内容的最大长度
* readonly 是只读, 但是当表单提交的时候, 会跟着一起提交
disabled 是禁用, 默认显示灰色, 而且不会随着表单提交
2)密码框控件 <input type="password"/>
属性：参考文本框控件
3)文本域控件 <textarea></textarea>可放大缩小
属性：rows 行数
cols 列数
默认值嵌套在两个标签之间
4)隐藏域控件：<input type="hidden"/>
2.选择类型控件
1)单选按钮 <input type= "radio"/>
属性：name 按钮的分组 (同一组单选按钮才会有互斥效果)
checked="checked" 默认选中
2)复选框控件 <input type="checkbox"/>
属性：checked="checked" 默认选中
3)下拉列表控件 <select></select>
属性：multiple="multiple" 多选项（列表框控件）
下拉选项标签 <option></option>
属性：selected="selected" 默认选中
3. 按钮控件
1)普通按钮 <input type="button"/>
属性：value 按钮上的文字
2)提交按钮 <input type="submit"/>
属性：value 按钮上的文字
**提交的是表单标签<form>里的内容
3)重置按钮 <input type="reset"/>
属性：value 按钮上的文字
**重置的是表单标签<form>里的内容
4)图片按钮 <input type="image"/>
属性：src 图片文件路径
4. 文件上传控件：<input type="file"/>
5. label标签
用于绑定一个表单元素，当点击label的时候，被绑定的表单元素就会获得焦点
<label>
用户名：<input type="text"/>
</label>
点击用户名,光标会显示在后面的文本框
【HTML 框架集】
注意：要使用HTML框架集，页面不能使用body标签。
框架集标签：<frameset></frameset>
属性：rows 分行
cols 分列
frameborder 框架集边框
框架标签：<frame />
属性：src 框架展示的页面
noresize="noresize" 框架不能重定义大小
Index.html:
嵌套框架
<frameset rows="20%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="right"/>
</frameset>
</frameset>
Left.html(左侧的有序列表)代码:
<ol>
<a href="index2.html" target="right"><li>index2</li></a>
<!-- 左边的链接指向index2.html,页面显示在Index.html的右侧 -->
<a href="index3.html" target="right"><li>index3</li></a>
<a href="index4.html" target="right"><li>index4</li></a>
<a href="index5.html" target="right"><li>index5</li></a>
</ol>
结果:
