HTML5第一章至第四章

第一章
1.HTML5文件的基本结构
在一个HTML文档中，必须包含标记，并且放在一个HTML文档中的开始和结束位置。 中间包含两个部分，分别是和，head标记包含HTML头部信息，如文档标题，样式定义等。body包含文档主体部分。

2.编写HTML文档时遵守W3C标准，W3C是制定和维护统一的国际化Web开发标准的组织
3.网页基本标签
标题标签

1~6级
段落标签

换行标签

水平线标签

---

注释和特殊符号

4.插入图像时使用标签，要求src和alt属性必选
5.超链接标签
超链接的基本用法
这是一个空链接
1
超链接的应用场合

页面间链接
锚链接
功能性链接

5.行内元素和块元素的特性
块元素
无论内容多少，该元素独占一行（p、h1-h6…）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)

第二章
1.列表
无序列表

• 第一行
• 第二行
• 第三行
• 第四行

无序列表的特性
没有顺序，每个

• 标签独占一行（块元素）
  默认
• 标签项前面有个实心小圆点
  一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

• 有序列表

  1. 第一行
  2. 第二行
  3. 第三行
  4. 第四行

  有序列表的特性
  有顺序，每个

• 标签独占一行（块元素）
  默认
• 标签项前面有顺序标记
  一般用于排序类型的列表，如试卷、问卷选项等

• 定义列表

  水果

  苹果

  桃子

  李子

  定义列表的特性
  没有顺序，每个

  标签、
  标签独占一行（块元素）
  默认没有标记
  一般用于一个标题下有一个或多个列表项的情况

  2.表格
  表格的基本使用方法
  使用

  、、

  创建表格

  制作跨列、跨行的表格
  跨列：colspan=“横向跨的单元格数”
  跨行：rowspan=“纵向跨的单元格数”

  3.媒体元素
  视频元素
  <video src=“视频路径” controls //提供播放、暂停和音量的控件>
  1
  音频元素

  <audio src=“音频路径” controls //提供播放、暂停和音量的控件>
  1
  4.结构元素（header、section、article、nav、aside、footer）的使用
  结构元素，又称为区块型元素，是用来定义区块内容范围的元素。之前，区块型元素只有

  一个，HTML5新增了7个语义化结构元素，包括

  、

  、

  、

  、

  、

  、

  Section元素表示文档中的一个区域(或节)，是区块级通用元素。比如，内容中的一个专题组，一般来说会有包含一个标题(heading)。一般通过是否包含一个标题(

  -

  element)作为子节点，来辨识每一个

  
  [注意]如果元素内容可以分为几个部分的话，应该使用

  而不是

  ；再有，不要把

  元素作为一个普通的容器来使用，这是本应该是

  的用法。 一般来说，一个

  应该出现在文档大纲中

  article元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当

  元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的

  元素可嵌套在代表博客文章的

  元素中
  　　

  元素的作者信息可通过

  元素提供，但是不适用于嵌套的

  元素；

  元素的发布日期和时间可通过 元素的pubdate属性表示
  [注意]对于

  和

  来说，是必须要加上标题的
  元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。一般用于表示不直接相关内容的侧边栏，

  里面的内容与它所关联的内容相互独立，谁缺了谁都不影响各自文本含义的理解。如一篇文章的广告、相关背景和引述内容等

  HTML导航栏(

  )描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表，并不是所有的链接都必须使用

  元素，它只用来将一些热门的链接放入导航栏，例如

  元素就常用来在页面底部包含一个不常用到，没必要加入

  的链接列表，一个网页也可能含有多个

  元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表
  元素表示页面头部或区块头部，用于将介绍内容和区块的辅助导航分组到一起，所以它有可能包含区块的标题元素以及其他的介绍内容(目录、logo等) [注意]由于

  和

  元素不是分节内容，所以不会引入新的分节到大纲中
  元素表示最近一个章节内容或者根节点(sectioning root)元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息 [注意]

  元素内的作者信息应包含在

  元素中

  5.>&#20869;&#32852;&#26694;&#26550;&#30340;&#20351;&#29992;

  src="path"> // src="path" 引用页面地址 // name="mainFrame" 框架标识名

  第三章
  1.表单主要用来制作动态网页，方便和用户进行交互
  2.常用的表单元素
  文本框（text） 密码框（password） 单选按钮（radio） 复选框（checkbox） 列表框（和） 按钮（button、submit和reset） 邮箱（） 网址（） 数字（） 滑块（） 搜索（）

  3.表单的高级应用
  隐藏域

  //type="hidden" 表示隐藏域

  只读

  //readonly 表示只读

  禁用

  //disabled 表示禁用

  表单元素的标注
  增强鼠标的可用性
  自动将焦点转移到与该标注相关的表单元素上

  标注的文本
  
  // for=“male” 表单元素的id

  4.表单的初级验证
  
  //文本框输入内容提示

  //必填项 //验证规则，正则表达式

  第四章
  1.CSS概念
  CSS的优势
  内容与表现分离
  网页的表现统一，容易修改
  丰富的样式，使得页面布局更加灵活
  减少网页的代码量，增加网页的浏览速度，节省网络带宽
  运用独立于页面的CSS，有利于网页被搜索引擎收录

  2.CSS语法规则，使用

  //选择器 { 声明1;
  // 声明2;
  // …… }

  3.HTML中引入CSS样式
  链接式与导入式的区别

  标签属于XHTML，@import是属于CSS2.1 使用链接的CSS文件先加载到网页当中，再进行编译显示 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

  CSS样式优先级
  行内样式>内部样式表>外部样式表

  行内样式

  style属性的应用

  直接在HTML标签中设置的样式

  内部样式表

  //CSS代码写在的

  外部样式表

  CSS代码保存在扩展名为.css的样式表中
  HTML文件引用扩展名为.css的样式表，有两种方式
  链接式

  …… ……

  导入式@import

  ……

  4.CSS3的选择器
  基本选择器
  标签选择器
  HTML标签作为标签选择器的名称

  …

  、

  、

  类选择器

  标签内容

  ID选择器

  标签内容

  基本选择器的优先级
  ID选择器>类选择器>标签选择器

  高级选择器

  层次选择器
  选择器 类 型 功能描述
  E F 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
  E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
  E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
  E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
  语法：
  body p{ background: red; } //后代选择器
  body>p{ background: pink; } //子选择器
  .active+p { background: green; } //相邻兄弟选择器
  .active~p{ background: yellow; } //通用兄弟选择器

  结构伪类选择器

  选择器 功能描述
  E:first-child 作为父元素的第一个子元素的元素E
  E:last-child 作为父元素的最后一个子元素的元素E
  E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
  E:first-of-type 选择父元素内具有指定类型的第一个E元素
  E:last-of-type 选择父元素内具有指定类型的最后一个E元素
  E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
  使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
  E F:nth-child(n)在父级里从一个元素开始查找，不分类型
  E F:nth-of-type(n)在父级里先看类型，再看位置

  属性选择器

  属性选择器 功能描述
  E[attr] 选择匹配具有属性attr的E元素
  E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
  E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
  E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
  E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配