Trident: IE、腾讯
Gecko:火狐，Netscape
Webkit: Safari、Chrome (主要用于MAC Os)Presto(弃用)
Blink: Chrome、Opera
移动端: iphone/ipad采用webkit内核,android4.4一下版本采用webkit内核，4.4以上版本采用blink内核
- 不同浏览器默认margin和padding不同
- 解决:css里增加通配符*{margin:O; padding: 0}
- IE6双边距问题，在IE6中设置float，同时设置margin，会出现边距问题
- 解决:设置display:inline;
- 标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
- 解决:超出高度设置overflow:hidden，或设置line-height的值小于高度
- IE9一下浏览器不能使用opacity
- 边距重叠:当相邻两个元素都设置了margin边距, margin将取最大值，舍弃最小值
- cursor:hand 在safari不支持
- 解决:使用cursor:pointer
- 两个块级元素，父元素设置overflow:auto，子元素设置position:relative，且高度大
于父元素，在lE6、IE7会被隐藏而不是溢出
- 解决:父元素设置position:relative
- 超文本标记语言
- 负责网页结构
- 使用标签的形式来标识网页中的不同组成部分
WEB标准: 结构(HTML)、表现(CSS)、行为(Javescript)
网页开发工具
- 静态网页:代码和内容书写完后，除非修改页面代码网页内容、显示效果基本不会发生改变
- 动态网页:页面代码没有变，但显示的内容可以随时间、环境或数据库操作的结果发生改变
<font style="background-color:#FFA39E;">w3c规范</font>
w3c标准有结构、表现和行为组成常见规范有
- 定义语言编码
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
- JavaScript定义
<script language="javascript" type="text/javascript">
</script>
- CSS定义
<style type="text/css">
/* 样式设置 */
</style>
为保证各浏览器的兼容性，在写CSS时要带上计量单位
- 不要再注释内容中使用“--"
- 所有标签和属性必须用小写
- 所有的属性值必须用双引号
- 如文档中要输出>,<和&等，要使用实体转义符
- 要给所有的属性赋一个值，如果没有赋值，默认它的值就是属性名本身
- 所有的标签都必须要有一个相应的结束标记(标签必须要闭合)
- 所有标签必须合理嵌套，不能数显嵌套交叉情况
- 图片要添加有意义的alt属性
- 在form表单中增加lable，以增加用户友好度
<!-- 注释语句 --> 快捷键：ctrl + /
结构:属性名=“属性值”
antry
通用属性
id:用来给标签取一个唯一的名称
Class :用来给标签取一个类名
style:用来设置该标签的行内样式
title:当鼠标移到该标签，所显示的提示内容
自定义标签属性:通常用来传值或用于图片懒加载等
格式: data-*
...
- ‘’‘<html lang=“en"> ‘’‘
en定义语言为英文
zh-CN定义语言为中文
在中文系统的浏览器中，默认使用GB2312进行解码
- <h1-h6> ’‘’
- <p>
- <br>
- <hr>
- <center>
- <ul/ol>
- <a>
通过标签来美化文本外观
- <b>
- <strong>
- <i>
- <em>
- <pre>
- <small><big>
- <sub><sup>
- <del>
- <ins>
<div>和<span> 没有语义，只是一个盒子，用来装内容
- aaa
在html中，如< >这种特殊字符不能直接使用，需要使用一些特殊的符号来表示，这些特殊符号称为实体<转义字符串>
- 语法：
&实体的名字；
< <
>
版权符号 ©
a<b>c
使用<img>向网页中引入一个外部图片，img也是一个自结束标签
img属于行级快标签，相当于执行了display:inline-block操作
- 属性:
src :设置一个外部图片的路径，所使用的路径都是相对路径
alt︰设置在图片不能显示时的描述，搜索引擎可以通过alt属性来识别不同的图片，如不写alt属性，则搜索引擎不会对img中的图片进行收录
title:提示文本，鼠标放到图片上提示
border:给图像设定边框
width :用来修改土图片的宽度，一般使用px作为单位height :用来修改图片的高度，一般使用px作为单位
- 图片格式
JPEG
-支持的颜色比较多，图片可以压缩，但不支持透明
-一般使用JPEG来保存照片等颜色丰富的图片
GIF
-支持的颜色少，只支持简单的透明，支持动态图
-图片颜色单一或是动态图可以使用GIF
PNG
-支持的颜色多，且支持复杂的透明
-可以用来显示颜色复杂的透明的图片
☞ 指相对于当前资源所在目录的位置
☞ 从根目录开始写，全路径
☞ 可以来设置网页的关键字
还可以用来指定网页的描述。搜索引擎检索页面时，会同时检索页面中的关键字
可用来做请求的重定向
<l--name的值是对content值的描述-->
设置网站小图标
<meta http-equiv="refresh" content="5;url="http://www.baidu.com" />
- html中不区分大小写，但一般使用小写
- html中的注释不能嵌套
- html标签结构必须完整，要么成对出现，要么自结束标签
- html标签可以嵌套，但不可以交叉嵌套
- html标签中的属性必须有值，且值必须加引号
块级元素（相当于display:block;操作）
独占一行
宽度和高度是可控的，如果没有设置其宽度，将默认铺满整行
其内可以包含块级和行级元素
‘’‘’‘’
<font style="color:#389E0D;">行级元素（相当于display:inline;操作)</font>
<font style="color:#FA541C;">行内块标签（相当于display:inline-block;操作）</font>
块级标签转为行级标签：
**
行级标签转为块级标签：**
1．从一个页面跳转到另一个页面，使用<a>来创建;
- 属性:
href:指向链接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址
target:指定打开链接的位置
self:表示在当前窗口中打开（默认值）_blank:在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
2．空链接︰创建超链接时，如果地址不确定可以直接写一个 #作为占位符，如果将链接设置为 #，则点击超链接以后，会自动跳转到当前页面的顶部
3．锚点链接
html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识，即id， id属性在同一个页面中只能有一个，不能重复
- 跳转到id为bottom的元素所在的位置，直接在href中写:#id属性值
4．下载链接: href里地址是一个文件或压缩包，会下载这个文件
5．网页元素链接，网页中的各种网页元素，如文本、图像、表格、音频、视频等
都可以添加超链接
6．发送电子邮件，点击链接后可以自动打开计算机中默认的邮件客户端
href="mailto:abc@atguigu.com"
点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并将收件人设置mailto后的邮件地址
同一级目录，网站内部页面之间的相互链接，直接连接内部页面名称
- 主要用于显示、展示数据
- 基本语法
| 单元格内的文字 |
<table>定义表格标签<tr>定义表格的行，必须嵌套在<table></table>标签<td>用于定义表格的单元格，必须嵌套在<tr></tr>标签中<th>表头
- 表格属性(后面用cSS)
valign垂直对齐: top/middle/bottom
这些属性要写到table标签里面
- 4．跨行/跨列属性主要用来绘制复杂表格
Rowspan:跨行（使用这个属性时，如果原为3*2的表格，要实现第1列1，2行跨行，则要删除(2，1)位置的内容)
colspan:跨列
5．完整表格组成: caption(标题)、thead(表头)、tbody(表体）和tfoot(表尾)
- form表单标签使所有标签最核心标签之一，用来实现前后端交互的一个重要标
签。form包含的元素
a.重要属性:
name:表单名称
action:表单数据提交的地方(通常使一个后台文件名
(.jsp/.php/.asp/.aspx/.py等)，或网址。)，如果使#，表示提交到当前文件
method:前端提交数据到后端的方法，主要有:get和post,get为默认
2.表单元素:
a. input类:主要用来完成输入，或发出指令
- text: type="text"可以不写，默认值
属性: placeholder(提示)/name (命名)/minlength和maxlength(最少和最多输入的字符个数)/disabled (失效)/readonly (只读)/value (默认值)/pattern (正则匹配)
- password:密码框，属性与text一样
- radio:单选钮，通常是两项以上。常用属性有:name(必须)/value(后台操作)/checked(选中)/readonly(相互排斥的选项设置相同的name值)
- checkbox:复选框，可以用来选择0项、1项或多项。常用属性有:name (必须)/value (后台操作)/checked(选中)/readonly-
- file:文件上传按钮
- button:普通按钮，通常用它调用脚本代码。常用属性: value(按钮的标题)/disabled (失效)
- image:图片按钮，用法与button一样。有一个特殊属性: src（用来加载提示图片，用它替换了value)。它有提交功能，与submit功能一样
- submit:提交按钮，用来将表单数据提交到后台
- reset:重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态
b. textarea类
文本域（也可以叫多行文本框)，主要用于输入大批量的内容。常用属性: name/id/cols/rows/placeholder/minlength/maxlength/required(必须输入)/value
c. select类
下拉列表框，默认用于单项选择。用option呈现每个选项
multiple:表示可以多选，这是下拉列表框变成了列表框size:最多显示的行数
d. button类
普通按钮，具有提交功能。可以单独使用而不写在form元素中。如果写在form中，有提交功能。写在form外，button主要用来调用js代码
框架集，用来将多个网页文件组合成一个文件
可以引入一个外部的页面，使用iframe俩创建一个内联框架，现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
- 属性:
name:框架名
src:指向一个外部页面的路径，可以使用相对路径scrolling:滚动条(ves/no/auto)
width:宽度(%/px)
height:高度(%/px)
frameborder:是否有边框(1/O)
marginheight:框架离顶部和底部的距离(%/px)
marginwidth:框架离左右的距离(%/px)
注意:在实际开发中，尽量减少使用iframe，因为它破坏了前进和后退功能，且不利于SEO
- HTML5由w3C和WHAT组织机构共同研发出来，于2014年正式发布
- ★HTML5新特性
- 增加了audio和video音频播放，抛弃了Flash
- 新增了canvas画布（绘画，制作动画(如小游戏开发等))
- 地理定位
- 增加了离线缓存
- 硬件加速
- Web Socket(全双工通信)
- 增加了本地存储
- 新增了一些语义化标签
- 网页布局标签
- header:页首
- nav:导航栏
- aside:侧边栏
- main:主题
- section:区块
- article:文章
- footer:页尾
- 语义化标签
- mark:高亮显示(行级)
- details(描述)和summary(摘要):一般用于名词解释
- meter:定义度量衡
i. value:当前值
ii. min{number}:最小值
ii. max{number}:最大值
iv. hight{number}:指定范围的最大值
4. progress:进度条
5. dialog:定义一个对话框或窗口
6. figure:用于对元素进行组合，一般用来组合一张图的标题、图片和图片描述等
- audio播放音乐或音频。IE9一下的版本不支持
- 支持的格式: .mp3/.ogg/.wav
- 属性:
i. src:文件路径
ii. autoplay:自动播放
ili. loop:循环（可以设置循环次数loop="2")
iv. controls:控制条
v. muted:静音
vi. preload:预加载（(当使用autoplay时, preload自动失效)
video 加载视频。IE9一下不支持
- 支持的格式: .mp4/.ogg/.webmb.
- 属性:
i. src:文件路径
ii. autoplay:自动播放
iii. loop:循环
iv. controls:控制条
v. muted:静音
vi. preload:预加载
vii. width:宽度
viii. height:高度
ix. poster:海报
embed嵌入内容或加载插件。
- 属性:
- src
- width
- height
- type:类型
- 属性:
canvas画布，是一个容器元素。
注意:
1. 单独使用canvas没有什么意义，它必须结合Javascript使用。它的体功能是通过JS体现出来的。
2. canvas的宽高最好不要通过css实现，而是直接使用标签属性
contentEditable:将标签转换为可编辑状态。可用于所有标签它的值有true/false
hidden: 对元素进行隐藏。一般用来传值，或当某个条件成立执行内容显示。默认值为hidden
data-*:用于存储页面或应用程序的私有自定义数据。一般用于传值
multiple:规定输入域中可选择多个内容.用于表单组件中，如file/select
required:约束表单元素在提交前必须输入值。用于表单组件中，需要结合提交按钮使用。
pattern:用于验证输入字段的模式。用于表单组件，需要结合提交按钮使用
新增表单
- color:颜色
- email:邮箱
- tel:电话号码
- url:网址
- number:数字
- range:范围
- search:搜索
- date:日期
- datetime:日期时间
- datetime-local:本地日期时间
- year: 年份
- month:月份
- time:时间
表单属性
- formaction:修改action数据提交的地方
- formenctype:修改表单请求的类型
- formmethod:修改数据提交的方法。默认为get常用的提交方式有: get和post。
- 它们的区别
- get以字节为单位提交，只接受ASCIl，而post以字符为单位提交
- get是明文方式，提交的数据会显示在地址栏中，一般不用来传输一些敏感的数据，因为传输的数据暴露在外，而post是暗文方式提交
- get在浏览器中回退是无害的，而post会再次提交请求
- get会被浏览器主动缓存，而post不会，除非手动设置
- get和post在传输字节数上一般没有限制，个别浏览器会有，可以理解为get一般出超过2K，而post一般不超过2M
- form:设置表单元素属于哪个表单
- novalidate:不验证
input属性
a. autocomplete:自动完成。
i．用来帮助用户输入，每一次输入的内容，浏览器是否保存输入的值，以备将来使用。值有: on/off。默认为on
ii．为保护敏感数据（如用户账号、密码等)，避免本地浏览器对它们不安全存储，一般需要关闭
b. autofocus:自动获焦
c. step:步长
d. multiple:多选
e. pattern: 正则匹配
f. placeholder:输入提示
g. required:必须输入
- 文字阴影 text-shadow : px px px #xxx;//参数:横向偏移纵向偏移模糊度颜色