HTML5介绍
2016-03-31 14:55
501 查看
HTML5
HTML5(网页的5.0版本)
2014年W3C历时8年才定制完HTML5的标准。
HTML5常用框架
sencha-touch、phoneGap、jQuery mobile、bootstrap
公司职位的划分
1> 平面设计师 作图、切图、HTML、CSS
2> 前端工程师 HTML、CSS、Javascript、模板技术
3> 后台工程师 服务器（Java、.Net、PHP）、数据库
4> 移动工程师（iOS/android）手机UI界面（OC、HTML5）、跟服务器交互
HTML5开发应用(个人推荐)
http://www.dcloud.io/
HTML5开发工具
eclipse、MyEclipse、Dreamwaver、WebStrom(⼤神编辑器)、HBuilderWeb开发新时代
Web1.0 主流技术:HTML+CSS
Web2.0 主流技术:Ajax(JavaScript/DOM/异步数据请求)
Web3.0 主流技术:HTML5+CSS3
HTML5亮点: Canvas HTML5音视频、Web存储、Geolocation Workers多线程处理
CSS3亮点: 设计动画 2D变形 N多新特性
http://html5test.com/
网页组成的3个部分
HTML(网页的具体内容和结构)+CSS(网页的样式)+JavaScript(掌握)
http://www.w3school.com.cn/
常见的HTML标签
标题：h1、h2、h3、h4、h5....
段落：p
换行：br
容器：div、span（用来容纳其他标签）
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a
HTML5新增标签
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
结构性标签(负责Web上下文结构的定义，确保HTML文档)
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
header/footer 标记头/脚部区域内容
section 区域章节表述
nav 菜单导航,链 接导航
2.块级性标签(完成Web页面区域的划分，确保内容的有效分隔)
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog 人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
3.行内语义性标签(完成Web页面具体内容的引用和表述，丰富展示内容)
meter 特定范围内的数值，如工资、数量、百分比
time 时间值
progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
4.交互性标签(功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础)
details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
datagrid 控制客户端数据与显示，可用于动态脚本及时更新
menu 用于交互菜单
command 用来处理命令按钮
CSS(层叠样式表)
用来控制HTML标签的样式，在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的，比如：
color: red;
background-color: blue;
font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值
CSS有3种书写形式
行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
CSS选择器
标签选择器：根据标签名找到标签
<div>div1</div>
<div>div2></div>
div {
color:blue;
}
结果：
div1
div2
类选择器:
<div class="high">div1</div>
.high {
color:blue;
}
结果：
div1
id选择器
<div id="high">div1</div>
#high {
color:blue;
}
结果：
div1
并列选择器：多个标签，相同的样式写到一起
复合选择器：快速定位标签
后代选择器：标签内包含所有指定标签
直接后代选择器：标签内指定标签
相邻兄弟选择器：两个标签之间的标签
属性选择器：标签后面中括号里，跟上相应的属性
伪类选择器：
伪类：
伪元素：
选择器优先级:
important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
HTML标签类型
HTML有N多标签，根据显示的类型，主要可以分为3大类
块级标签
独占一行的标签
能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
行内标签（内联标签）
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸（比如span、a、label）
行内-块级标签（内联-块级标签）
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度（比如input、button）
修改标签的显示类型
CSS中有个display属性，能修改标签的显示类型
none：隐藏标签
block：让标签变为块级标签
inline：让标签变为行内标签
inline-block：让标签变为行内-块级标签（内联-块级标签）
CSS属性 – 可继承属性
所有标签可继承
visibility、cursor
内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
text-indent、text-align
列表标签可继承
list-style、list-style-type、list-style-position、list-style-image
CSS属性 – 不可继承属性（红色表示常用）
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
盒子模型
网页上的每一个标签都是一个盒子
每个盒子都有四个属性
内容（content）
盒子里装的东西
网页中通常是指文字和图片
填充（padding，内边距）
怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
边框（border）：盒子本身
边界（margin，外边距）
盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出
CSS3新增特性
RGBA透明度
RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，可用于设置透明值
块阴影与圆角阴影
box-shadow text-shadow
圆角
border-radius
边框图片
border-image
形变
transform: none | <transform-function>[<transform-fuction>
HTML5(网页的5.0版本)
2014年W3C历时8年才定制完HTML5的标准。
HTML5常用框架
sencha-touch、phoneGap、jQuery mobile、bootstrap
公司职位的划分
1> 平面设计师 作图、切图、HTML、CSS
2> 前端工程师 HTML、CSS、Javascript、模板技术
3> 后台工程师 服务器（Java、.Net、PHP）、数据库
4> 移动工程师（iOS/android）手机UI界面（OC、HTML5）、跟服务器交互
HTML5开发应用(个人推荐)
http://www.dcloud.io/
HTML5开发工具
eclipse、MyEclipse、Dreamwaver、WebStrom(⼤神编辑器)、HBuilderWeb开发新时代
Web1.0 主流技术:HTML+CSS
Web2.0 主流技术:Ajax(JavaScript/DOM/异步数据请求)
Web3.0 主流技术:HTML5+CSS3
HTML5亮点: Canvas HTML5音视频、Web存储、Geolocation Workers多线程处理
CSS3亮点: 设计动画 2D变形 N多新特性
http://html5test.com/
网页组成的3个部分
HTML(网页的具体内容和结构)+CSS(网页的样式)+JavaScript(掌握)
http://www.w3school.com.cn/
常见的HTML标签
标题：h1、h2、h3、h4、h5....
段落：p
换行：br
容器：div、span（用来容纳其他标签）
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a
HTML5新增标签
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
结构性标签(负责Web上下文结构的定义，确保HTML文档)
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
header/footer 标记头/脚部区域内容
section 区域章节表述
nav 菜单导航,链 接导航
2.块级性标签(完成Web页面区域的划分，确保内容的有效分隔)
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog 人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
3.行内语义性标签(完成Web页面具体内容的引用和表述，丰富展示内容)
meter 特定范围内的数值，如工资、数量、百分比
time 时间值
progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
4.交互性标签(功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础)
details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
datagrid 控制客户端数据与显示，可用于动态脚本及时更新
menu 用于交互菜单
command 用来处理命令按钮
CSS(层叠样式表)
用来控制HTML标签的样式，在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的，比如：
color: red;
background-color: blue;
font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值
CSS有3种书写形式
行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
CSS选择器
标签选择器：根据标签名找到标签
<div>div1</div>
<div>div2></div>
div {
color:blue;
}
结果：
div1
div2
类选择器:
<div class="high">div1</div>
.high {
color:blue;
}
结果：
div1
id选择器
<div id="high">div1</div>
#high {
color:blue;
}
结果：
div1
并列选择器：多个标签，相同的样式写到一起
复合选择器：快速定位标签
后代选择器：标签内包含所有指定标签
直接后代选择器：标签内指定标签
相邻兄弟选择器：两个标签之间的标签
属性选择器：标签后面中括号里，跟上相应的属性
伪类选择器：
伪类：
| :active | 向被激活的元素添加样式。 | |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | |
| :link | 向未被访问的链接添加样式。 | |
| :visited | 向已被访问的链接添加样式。 | |
| :first-child | 向元素的第一个子元素添加样式。 | |
| :lang | 向带有指定 lang 属性的元素添加样式。 |
| :first-letter | 向文本的第一个字母添加特殊样式。 | |
| :first-line | 向文本的首行添加特殊样式。 | |
| :before | 在元素之前添加内容。 | |
| :after | 在元素之后添加内容。 |
important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
HTML标签类型
HTML有N多标签，根据显示的类型，主要可以分为3大类
块级标签
独占一行的标签
能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
行内标签（内联标签）
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸（比如span、a、label）
行内-块级标签（内联-块级标签）
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度（比如input、button）
修改标签的显示类型
CSS中有个display属性，能修改标签的显示类型
none：隐藏标签
block：让标签变为块级标签
inline：让标签变为行内标签
inline-block：让标签变为行内-块级标签（内联-块级标签）
CSS属性 – 可继承属性
所有标签可继承
visibility、cursor
内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
text-indent、text-align
列表标签可继承
list-style、list-style-type、list-style-position、list-style-image
CSS属性 – 不可继承属性（红色表示常用）
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
盒子模型
网页上的每一个标签都是一个盒子
每个盒子都有四个属性
内容（content）
盒子里装的东西
网页中通常是指文字和图片
填充（padding，内边距）
怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
边框（border）：盒子本身
边界（margin，外边距）
盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出
CSS3新增特性
RGBA透明度
RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，可用于设置透明值
块阴影与圆角阴影
box-shadow text-shadow
圆角
border-radius
边框图片
border-image
形变
transform: none | <transform-function>[<transform-fuction>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- H5小游戏的坑点小结
- 快速创建一个适用手机web的html5页面
- 安卓Native和H5页面进行交互
- 200个好玩html5游戏源码（捕鱼达人，植物大战僵尸，超级玛丽，五子棋，象棋，切水果.....）
- Html5学习心得
- h5实战
- Html5之高级-14 Web Socket(概述、API、示例)
- HTML5学习笔记（一）（2015-12-2）【新浪云搬运】
- HTML5学习笔记（二）2015-12-7【新浪云搬运】
- html5 圆角ie8
- Html5之高级-13 Web存储API (两个存储系统、sessionStorage、localStorage)
- Html5之高级-12 Web Workers(概述、 API)
- Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)
- HTML5的新特性
- html5的replaceState实现详情页到列表页的无刷新且回到上次位置
- Html5之高级-10 Geolocation(Geolocation、百度地图API)
- html5-文件
- html5-文件
- HTML5 介绍
- 提高 HTML5 画布性能