前言
工作需要，开始学习HTML5!
什么是HTML5
- 2014年才定制完HTML5的标准，历时8年
- 移动先行原则
为什么用HTML5
- 跨平台(利用HTML5编写的UI界面能运行在所有拥有浏览器的平台)
- HTML5的运行平台：浏览器
- 但是HTML5不能完成一些特定的功能，比如：拍照、访问相册...
HTML5框架
- sencha-touch
- phoneGap
- jQuery mobile
- Bootstrap
Web开发新时代
-
Web1.0主流技术：HTML+CSS -
Web2.0主流技术：Ajax(JavaScript/DOM/异步数据请求) -
Web3.0主流技术：HTML5+CSS3- HTML5亮点:
CanvasHTML5音视频 Web存储GeolocationWorkers多线程处理 - CSS3亮点：设计动画 2D变形 N多新特性
- HTML5亮点:
网页的组成
- HTML(网页的具体内容和结构)
- CSS(网页的样式，美化网页)
- JavaScript(网页的交互效果，比如对用户鼠标事件做出响应)
HTML
HTML的全称是
HyperText Markup Language，超文本标记语言
其实它就是文本，由浏览器负责将它解析成具体的网页内容。HTML由N个标签（节点、元素、标记）组成。
1.常见的HTML标签
标题：h1、h2、h3、h4、h5....
段落：p
换行：br
容器：div、span（用来容纳其他标签）
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a
- 块级标签
- 独占一行的标签
- 能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
- 行内标签（内联标签)
- 多个行内标签能同时显示在一行
- 宽度和高度取决于内容的尺寸（比如span、a、label）
- 行内-块级标签（内联-块级标签）
- 多个行内-块级标签可以显示在同一行
- 能随时设置宽度和高度（比如input、button）
2.HTML5新增标签
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
2.1 结构性标签
负责Web上下文结构的定义
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
header 标记头部区域内容
footer 标记脚部区域内容
section 区域章节表述
nav 菜单导航,链接导航
2.2 块级性标签
完成Web页面区域的划分，确保内容的有效分隔
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog 人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
2.3 行内语义性标签
完成Web页面具体内容的引用和表述，丰富展示内容
meter 特定范围内的数值，如工资、数量、百分比
time 时间值
progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
2.4 交互性标签
功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础
details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
datagrid 控制客户端数据与显示，可用于动态脚本及时更新
menu 用于交互菜单
command 用来处理命令按钮
CSS
CSS的全称是
Cascading Style Sheets，层叠样式表,它用来控制HTML标签的样式，在美化网页中起到非常重要的作用。
CSS的编写格式是键值对形式的。
比如
color: red;
background-color: blue;
font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值
CSS的3种书写形式
1.行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
2.页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
3.外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
CSS的两大重点
- 属性(通过属性的复杂叠加才能做出漂亮的网页)
- 选择器(通过选择器找到对应的标签设置样式)
CSS选择器
选择器的作用:选择对应的标签，为之添加样式
选择器的权值
通配选择符（*）：0
标签： 1
类： 10
属性： 10
伪类： 10
伪元素： 1
id： 100
important： 1000
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
优先级排序:important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
属性
CSS有N多属性，根据继承性，主要可以分为2大类
- 可继承属性
- 父标签的属性值会传递给子标签
- 一般是文字控制属性
所有标签可继承
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
- 不可继承属性
- 父标签的属性值不能传递给子标签
- 一般是区块控制属性
不可继承属性
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
CSS中有个display属性，能修改标签的显示类型
none：隐藏标签
block：让标签变为块级标签
inline：让标签变为行内标签
inline-block：让标签变为行内-块级标签（内联-块级标签）
JavaScript
JavaScript是一门广泛用于浏览器客户端的脚本语言,由Netspace公司设计，当时跟Sun公司合作，所以名字起得像Java,业内一般简称JS。
JS的常见用途
- HTML DOM操作（节点操作，比如添加、修改、删除节点）
- 给HTML网页增加动态功能，比如动画
- 事件处理：比如监听鼠标点击、鼠标滑动、键盘输入
JS常见的书写方式有2种
页内JS：在当前网页的script标签中编写
<script type="text/javascript">
</script>
外部JS
<script src="index.js"></script>
后记
持续学习中...
网友评论