HTML
一、定义
HTML：Hyper Text Mark-up Language超文本标记语言，通过元素标签的形式建立Web站点，通过浏览器进行解析。
二、<body>中的标签
1、换行符 <br/>
2、水平<hr/>
3、段落 <p></p> 特点：上下自动生成空白行。
4、标题<h1></h1>。标题有六种，h1最大，一个页面只能出现一次。
5、文本标签<font></font>
文本格式化，一些常用于设置文本字体的元素：
<big>大号文字</big>
<small>小号文字</small>
<strong>加粗</strong> （尽量用strong）<b>加粗</b>
<em>倾斜</em>（尽量用em） <i>倾斜</i>
<del>删除线</del>（尽量用del）<s>删除线</s>
<sub>下标文字</sub>
<sup>上标文字</sup>
<ins>插入文字</ins>
6、图像<img />
| 属性 | 属性值 | 说明 |
| Src（必写） | url | 图像资源的地址 |
| width | 像素（px） | 图像宽度 |
| height | 像素（px） | 图像高度 |
| alt | 替代文字 | 不能显示图像信息时候的替换文字 |
| title | 替代文字 | 鼠标放在图片上显示的文字 |
图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。
路径：
./ 当前目录
../ 回到上一层目录
7、定义超链接 <a href=“URL”></a>
属性：href属性必须有，href的作用是指明超链接要链接到的网址。
title属性表示链接的提示信息，鼠标放到链接上显示的文字。
target属性表示链接的打开方式，属性值包括_blank(新的空白页)、_self(当前页)，_top（当前页）、_parent针对于框架页面中的跳转
<a href="#"> </a> #但表当前页 空链
href也可以链接到别的地址，如邮箱、电话、sms。
<a href=“1233456.qqcom”>邮件链接</a>
<a href=“tel:电话号码”>拨打电话</a>
<a href="sms:139xxxxxxx">发送短信</a>
8、锚点；点击使用户跳到文档的某个部分。
例：<a href="#位置名">跳转</a>
<p id="位置名">代码代码</p>
从a跳转到p
9、 HTML 实体字符。
* 实体名是大小写敏感的。后面的分号必须有。
空格
小于号< <
大于号> >
和号& &
人民币￥ ¥
版权©️ ©
注册商标®️ ®
摄氏度 °
正负号 ±
乘号 ×
除号 ÷
平方2 ²
立方3 ³
10、列表
（1）、无序列表
无序列表用<ul><li></li></ul>表示。
属性：Type（用css中的list-style也可以）
属性值： 列表前的符号
disc 实心原点
circle 符号为空心圆
square 符号为方形
2）、有序列表
有序列表用<ol><li></li></ol>。
有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。
属性 属性值 说明
type 1、 a 、 A、i、I 用来设置项目前面的标记
start 数值 排序的起点数值
（3）、定义列表
定义列表用<dl><dt>标题</dt><dd></dd></dl>
11、表格（用div）
表格由 <table> 标签以及一个或多个 tr、th或td 元素组成。
注意：*colspan =”2”合并同一行上的单元格 ， rowspan =”2”合并同一列上的单元格； *cellpadding 单元格边距（字与内边框的距离） cellspacing 单元格间距（内外边框的间距）;
12、form 表单<form></form>
表单主要负责获取用户填写的数据，并通过浏览器向服务器传送数据。
属性 说明
name 表单的名称
action 表单提交地址
method 表单数据提交的方式 （get:在url地址上面传送参数到服务器,post：在后台传送参数到服务器）
enctype MIME类型
target 打开方式（_blank:在一个新的窗口打开 _self:在相同的框架中调入文档 _top:把文档调入原来的最顶部的浏览器窗口中）
1）文本域：文本域通过<input type="text"> 标签来设定
maxlength="" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled="disabled" 输入框未激活状态
name="username" 输入框的名称
value=" " 将输入框的内容传给处理文件
2）密码字段：密码字段通过标签<input type="password"> 来定义；
文本输入框的所有属性对密码输入框都有效。
3）单选按钮：单选按钮通过标签<input type="radio"> 来定义:
*name属性：只有将name的值设置相同的时候，才能实现单选效果。
checked=”checked” 设置默认选择项。
例：<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
4）复选框：复选框通过标签<input type="checkbox"> 来定义:
默认选中：checked=”checked”
<input checked="checked" type="checkbox" id="r1">
<label for="r1">复选框</label>
5)下拉列表：<select ></select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
属性 说明
size 下拉列表框的显示行数
multiple 是否多选
disabled 是否禁用
selected 设置默认选中的选项
value 选项值
<optgroup></optgroup> 对下拉列表进行分组。
Label=”” 分组名称。
<select name="city" multiple>
<optgroup label="广东">
<option value="1">广州</option>
<option value="2">深圳</option> </optgroup>
<optgroup label="其他">
<option value="3">长沙</option>
<option value="4">香港</option> </optgroup>
</select>
6)textarea(表单元素：多行文本域)
属性 说明
rows 指定文本框的高度
cols 指定文本框的宽度
例：<textarea name="content" rows="5" cols="50"> </textarea>
注：此处的文本框宽高是由字符个数组成的。
7)上传文件
<input type=“file” name=“photo” />
利用这项功能时，在 form 标签中要指定method属性。要把enctype属性指定为 multipart/form-data。
说明：multiple 控制是否上传多文件
<input type="file" name="photo" multiple />
8) 提交按钮: 提交按钮通过标签<input type=submit"> 来定义:
9)普通按钮：<input type=button">
不能提交信息，配合JS使用。
10)图片按钮：<input type=image">
图片按钮可实现信息提交功能
11)重置按钮：<input type=”reset”>
12)隐藏域:隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。
<input type="hidden" name="uid" value="10"/>
13)<label>: label标签的作用是将输入项或选项及其标签文字关联起来。
<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>
14）HTML5补充表单控件
网址：<input type=“url”>
日期：<input type=“time”>
时间：<input type=“time”>
邮件：<input type=“email”>
数字：<input type=“number” step=“5”>
滑块：<input type=“range”>
13、<span></span>用于块级元素中的行内元素
三、<head>中的标签
1、<meta>标签
name属性，后面接content
1）、name='viewport'视口
说明：在移动设备浏览器上，user-scalable=no可以禁用其缩放功能。这样禁用缩放功能后，用户只能滚动屏幕。
<meta name="viewport" content="width=device-width",initial-scale=1,maximmum-scale=1,user-scakable=no''>
2）、name='description' 网页描述
3）、name='author' 作者
4）、name="keywords"' 关键字
5）、name="copyright"版权信息
6）、name="robots"
robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引，content的参数有：all,none,index,noindex,follow,nofllow.默认是all.
http-equiv属性，后面接content
1）Refresh自动刷新并转到新页面。
<meta http-equiv="Refresh" content="5;URL">(URL可为空)
2）content-Type（显示字符集的设定）
<meta charset="utf-8">
常用的是utf-8和gb2312。utf-8为多国语言编码，gb2312为中文简体编码。
3）Window-target(显示窗口的设定)
强制页面在当前窗口以独立页面显示。
<meta http-equiv="window-target" content="_top">
4）Set-Cookie
说明：如果网页过期，那么存盘的cookie将被删除。
<meta http-equiv="Set-Cookie"> content="cookievalue=xxx;expires=Friday,12-Jan-2001 18:18:18 GMT;path=/"（必须用GMT时间）
5）Pragma
说明：禁止浏览器从本地计算机的缓存中访问页面内容。
<meta http-equiv="Pragma" content="no-cache">
这样设定，访问者将无法脱机浏览。
6）Expires(期限)
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
<meta http-equiv=Expires Content=0>
<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18GMT">
1、X-UA-Compatible
X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。
<meta http-equiv="X-UA-Compatible" content="IE=7">
#以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.
2、 content = "IE=Edge,chrome=1"
这里的chrome=1不是说IE的技术增强了可以模拟Chrome浏览器，而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可以让用户的IE浏览器外观不变，但用户在浏览网页时实际上使用的是Chrome的内核，并且支持Windows XP及以上系统的IE6/7/8。
而上文提到的那个meta标记，则是在是安装了GCF后，用来指定页面使用chrome内核来渲染。
GCF下载地址: http://code.google.com/intl/zh-CN/chrome/chromeframe/ （ie打开）
安装完成后,如果你想对某个页面使用GCF进行渲染，只需要在该页面的地址前加上 gcf： 即可，例如： gcf:http://cooleep.com
但是如果想要在开发时指定页面默认首先使用GCF进行渲染，如果未安装GCF再使用IE内核进行渲染，该如何进行呢?
就是使用这个标记。
2、<link>标签
1）链接外部样式表
<link rel="stylesheet" href="">
2）设置icon图标
<link rel="icon" href="">
四、文档声明（Doctype）的作用
声明位于文档的最前面，处于标签之前，告知浏览器的解析器用什么文档类型来规范解析这个文档。Doctype不存在或者格式不正确会导致文档以混杂模式呈现。
例如：<!DOCTYPE html>等于开启了标准模式，那么浏览器就按照w3c的标准解析渲染页面
五、语义化
概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
意义：1、网页结构合理
2、有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取。
3、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4、便于团队的开发和维护
如何语义化：
1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）。
六、常见的浏览器及其内核
Trident(IE内核)
360安全浏览器（1.0-5.0为Trident,6.0为Trident+Webkit,7.0为Trident+Blank）;
360极速浏览器（7.5之前为Trident+Webkit,7.5为Trident+Bkink）;
遨游浏览器（遨游1.x/2.x为ie内核，3.x为ie与Webkit双核）；
猎豹安全浏览器（1.0-4.2为Trident+Webkit,4.3及以后的版本Trident+Blink）;
搜狗高速浏览器(1.x为Trident,2.0及以后版本为Trident+Webkit);
uc浏览器（Blink内核+Trident内核）；
Gecko(Firefox内核)
Webkit(Safari内核，Chrome内核）
Presto内核（Opera内核）
七、严格模式和混杂模式
严格模式：浏览器根据规范呈现页面
混杂模式：页面以一种比较宽松的向后兼容的方式显示。通常模拟老式浏览器的行为以防止老站点无法工作。
差异：最显著的例子是：ie6出现的时候，在严格模式使用正确的盒模式，在混杂模式中则使用老式专有的盒模型。
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
