HTML5+CSS3笔记(29页).doc

《HTML5+CSS3笔记(29页).doc》由会员分享，可在线阅读，更多相关《HTML5+CSS3笔记(29页).doc（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-HTML5+CSS3笔记-第 26 页HTML5一、 HTML5 概述二、 HTML5基本格式一HTML5 文档结构1.第一步：打开Sublime Text 3，打开指定文件夹；2.第二步：保存index.html 文件到磁盘中，.html 是网页后缀；3.第三步：开始编写HTML5 的基本格式。 /文档类型声明 /表示HTML 文档开始 /包含文档元数据开始 /声明字符编码基本结构 /设置文档标题 /包含文档元数据结束 /表示HTML 文档内容百度 /一个超链接元素（标签） /表示HTML /表示HTML 文档结束二文档结构解析1.Doctype文档类型声明（Document Type D

2、eclaration，也称Doctype）。它主要告诉浏览器所查看的文件类型。在以往的HTML4.01 和XHTML1.0 中，它表示具体的HTML 版本和风格。而如今HTML5 不需要表示版本和风格了。 /不分区大小写2.html 元素首先，元素就是标签的意思，html 元素即html 标签。html 元素是文档开始和结尾的元素。它是一个双标签，头尾呼应，包含内容。这个元素有一个属性和值：lang=zh-cn，表示文档采用语言为：简体中文。 /如果是英文则为en3.head 元素用来包含元数据内容，元数据包括：、。这些内容用来浏览器提供信息，比如link 提供CSS 信息，script提供J

3、avaScript 信息，title 提供页面标题等。. /这些信息在页面不可见4.meta 元素这个元素用来提供关于文档的信息，起始结构有一个属性为：charset=utf8。表示告诉浏览器页面采用的什么编码，一般来说我们就用utf8。当然，文件保存的时候也是utf8，而浏览器也设置utf8 即可正确显示中文。 /除了设置编码，还有别的5.title 元素这个元素很简单，顾名思义：设置浏览器左上角的标题。基本结构6.body 元素用来包含文档内容的元素，也就是浏览器可见区域部分。所有的可见内容，都应该在这个元素内部进行添加。.7.a 元素一个超链接，后面会详细探讨。百度三元素标签探讨HTML

4、 是一种标记语言，刚才的结构我们已经详细探讨过。这里，我们再剖析一下这些“标记”或者叫“标签”，书面上经常称作为“元素”的东西是怎么构成的。1.元素元素就是一组告诉浏览器如何处理一些内容的标签。每个元素都有一个关键字，比如、都是元素。不同的标签名称代表不同的意义，后面将会涉及到段落标签、文本标签、链接标签、图片标签等。元素一般分为两种：单标签（空元素）和双标签。单标签一般用于声明或者插入某个元素，比如声明字符编码就用，插入图片就用；双标签一般用于设置一段区域的内容，将其包含起来，比如段落.。2.属性和值元素除了有单双之分，元素的内部还可以设置属性和值。这些属性值用来改变元素某些方面的行为。比如

5、超链接：中的href 属性，里面替换网址即可链接到不同的网站。当然一个元素里面可以设置多个属性，甚至自定义属性。三、 HTML5文本元素一文本元素总汇HTML5 规范指出：使用元素应该完全从元素的语义出发。但是由于历史遗留及用户至上的原则，这种语义会宽松许多。元素名称说明a 生成超链接br 强制换行wbr 可安全换行b 标记一段文字但不强调strong 表示重要i 表示外文或科学术语em 表示强调code 表示计算机代码var 表示程序输出samp 表示变量kdb 表示用户输入abbr 表示缩写cite 表示其他作品的标题del 表示被删除的文字s 表示文字已不再确认dfn 表示术语定义mar

6、k 表示与另一段上下文有关的内容q 表示引自他处的内容rp 与ruby 元素结合使用，标记括号rt 与ruby 元素结合使用，标记括号ruby 表示位于表意文字上方或右方的注音符号bdo 控制文字的方向small 表示小号字体内容sub 表示下标字体sup 表示上标字体time 表示时间或日期u 标记一段文字但不强调span 通用元素，没有任何语义。一般配合CSS 修饰。从上面这张表格中，我们发现文本元素还是非常多的。但实际上，在现实应用中，真正常用的也就是那么几个，绝大部分是针对英文的。二文本元素解析1.表示关键字和产品名称HTML5解释：元素实际作用就是加粗。从语义上来看，就是标记一段文字

7、，但并不是特别强调或重要性。比如：一段文本中的某些关键字或者产品的名称。2.表示重要的文字HTML5解释：元素实际作用和一样，就是加粗。从语义上来看，就是强调一段重要的文本。3.强制换行、安全换行Thisabcdkedkslakdjfkdlsakd is apple.解释：在任意文本位置键入都会被换行，而在英文单词过长时使用会根据浏览器的宽度适当的裁切换行。4.表示外文词汇或科技术语HTML5解释：元素实际作用就是倾斜。从语义上来看，表示区分周围内容，并不是特别强调或重要性。5.加以强调HTML5解释：元素实际作用和一样，就是倾斜；从语义上来看，表示对一段文本的强调。6.表示不准确或校正HTM

8、L5解释：元素实际作用就是删除线；从语义上来看，表示不准确的删除。7.表示删除文字HTML5解释：元素实际作用和一样，就是删除线；从语义上来看，表示删除相关文字。8.表示给文字加上下划线HTML5解释：元素实际作用就是加一条下划线；从语义上来看，并不强调此段文本。9.添加一段文本HTML5解释：元素实际作用和一样，加一条下划线；从语义上来看，是添加一段文本，起到强调的作用。10.添加小号字体HTML5解释：元素实际作用就是将文本放小一号。从语义上来看，用于免责声明和澄清声明。11.添加上标和下标55解释：和元素实际作用就是数学的上标和下标。语义也是如此。12.等表示输入和输出HTML5HTML

9、5HTML5HTML5解释：表示计算机代码片段；表示编程语言中的变量；表示程序或计算机的输出；表示用户的输入。由于这属于英文范畴的，必须将lang=en英语才能体现效果。13.表示缩写HTML5解释：元素没有实际作用；从语义上看，是一段文本的缩写。14.表示定义术语HTML5解释：元素就是一般性的倾斜；从语义上看，表示解释一个词或短语的一段文本。15.引用来自他处的内容HTML5解释：元素实际作用就是加了一对双引号。从语义上来看，表示引用来自其他地方的内容。16.引用其他作品的标题HTML5解释：元素实际作用就是加粗。从语义上来看，表示引用其他作品的标题。17.语言元素饕(to)餮(ti)解释

10、：用来为非西方语言提供支持。用来帮助读者掌握表意语言文字正确发音。比如：汉语拼音在文字的上方。但目前Firefox 还不支持此特性。18.设置文字方向HTML5解释：必须使用属性dir 才可以设置，一共两个值：rtl（从右到左）和ltr（从左到右）。一般默认是ltr。还有一个元素也是处理方向的，由于是特殊语言的特殊效果，且主流浏览器大半不支持，忽略。19.突出显示文本HTML5解释：实际作用就是加上一个黄色的背景，黑色的字；从语义上来看，与上下文相关而突出的文本，用于记号。20.表示日期和时间2015-10-10解释：元素没有实际作用；从语义上来看，表示日期和时间。21.表示一般性文本HTML

11、5解释：元素没有实际作用；语义上就是表示一段文本，我们经常用它来设置CSS等操作。四、 HTML5超链接和路径一超链接的属性元素属于文本元素，有一些私有属性或者叫局部属性。那么，相对应的还有通用属性或叫做全局属性。这方面的知识，后面会详细探讨。属性名称说明href 指定元素所指资源的URLhreflang 指向的链接资源所使用的语言media 说明所链接资源用于哪种设备rel 说明文档与所链接资源的关系类型target 指定用以打开所链接资源的浏览环境type 说明所链接资源的MIME 类型（比如text/html）在这几个属性当中，只有href 和target 一般比较常用，而href 是必

12、须要用的。其他几个属性，在元素使用较少，将在CSS 章节再探讨。1.href 属性百度解释：href 是必须属性，否则元素就变成空元素了。如果属性值是http:/开头的URL，意味着点击跳转到指定的外部网站。2.target 属性百度解释：target 属性告诉浏览器希望将所链接的资源显示在哪里。属性名称说明_blank 在新窗口或标签页中打开文档_parent 在父窗框组（frameset）中打开文档_self 在当前窗口打开文档（默认）_top 在顶层窗口打开文档这四种最常用的是_blank，新建一个窗口。而_self 是默认，当前窗口打开。_parent和_top 是基于框架页面的，分别

13、表示在父窗口打开和在整个窗口打开。而HTML5 中，框架基本被废弃，只能使用元素，且以后大量结合JavaScript 和PHP 等语言配合，框架用的就很少了。二相对与绝对路径所谓相对路径，就是相对于链接页面而言的另一个页面的路径。而绝对路径，就是直接从file:/磁盘符开始的完整路径。我们在同一个目录下做上两个页面，其中一个页面链接到另一个页面。1.绝对路径index2解释：首先是file:/开头，然后是磁盘符，然后是一个个的目录层次，找到相应文件。这种方式最致命的问题是，当整个目录转移到另外的盘符或其他电脑时，目录结构一旦出现任何变化，链接当即失效。2.相对路径index2解释：相对路径的条

14、件是必须文件都在一个磁盘或目录下，如果是在同一个目录下，直接属性值就是被链接的文件名.后缀名。如果在同一个主目录下，有多个子目录层次，那就需要使用目录结构语法。3.目录语法同一个目录：index2.html 或./index2.html；在子目录：xxx/index2.html；在孙子目录：xxx/xxx/index2.html；在父目录：./index2.html；在爷爷目录：././index2.html；三锚点设置超链接也可用来将同一个文档中的另一个元素移入视野。通过属性id 或name 实现锚点定位。/链接第一章 第二章 第三章/锚点 五、 HTML5分组元素一分组元素总汇为了页面的排

15、版需要，HTML5 提供了几种语义的分组元素。元素名称说明p 表示段落div 一个没有任何语义的通用元素，和span 是对应元素blockquote 表示引自他出的大段内容pre 表示其格式应被保留的内容hr 表示段落级别的主题转换，即水平线ul,ol 表示无序列表，有序列表li 用于ul,ol 元素中的列表项dl,dt,dd表示包含一系列术语和定义说明的列表。dt 在dl 内部表示术语，一般充当标题；dd 在dl 内部表示定义，一般是内容。figure 表示图片figcaption 表示figure 元素的标题二分组元素解析1.建立段落这是一个段落这也是一个段落解释：元素实际作用就是将内部包

16、含的文本形成一个段落；而段落和段落之间保持一定量的空隙。2.通用分组这是一个通用分组这是又一个通用分组解释：元素在早期的版本中非常常用，通过这种一般性分组元素进行布局。而在HTML5 中，由于语义的缘故，被其他各种文档元素所代替。和段落的区别就是，两段文本的上下空隙是没有的，空隙间隔和换行一样。3.引用大段他出内容这是一个大段引自他出内容这是另一个大段引自他出内容解释：元素实际作用除了和元素一样，有段落空隙的功能，还包含了首尾缩进的功能。语义上表示，大段的引用他出的内容。4.展现格式化内容解释：元素实际作用就是编辑器怎么排版的，原封不动的展现出来。当然，这种只适合简单的排版，复杂的排版就无法满

17、足要求了。5.添加分隔解释：元素实际作用就是添加一条分割线，意图呈现上下文主题的分割。6.添加无序列表张三李四王五马六解释：元素表示无序列表，而元素则是内部的列表项。7.添加有序列表张三李四王五马六解释：元素表示有序列表，而元素则是内部的列表项。元素目前支持三种属性。ol 元素属性属性名称说明start 从第几个序列开始统计：reversed 是否倒序排列：，一半主流浏览器不支持type 表示列表的编号类型，值分别为：1、a、A、i、Ili 元素属性属性名称说明value 强行设置某个项目的编号。王五8.生成说明列表这是一份文件这里是这份文件的详细内容1这里是这份文件的详细内容2解释：这三个元

18、素是一个整体，但或并非都必须出现。9.使用插图这是一张图解释：这两个元素一般用于图片的布局。六、 HTML5表格元素一表格元素总汇表格的基本构成最少需要三个元素：、，其他的一些作为可选辅助存在。元素名称说明table 表示表格thead 表示标题行tbody 表示表格主体tfoot 表示表脚tr 表示一行单元格th 表示标题行单元格td 表示单元格col 表示一列colgroup 表示一组列caption 表示表格标题二构建表格解析1.构建基础表格张三男未婚李四女已婚解释：元素表示一个表格的声明，元素表示表格的一行，元素表示一个单元格。默认情况下表格是没有边框的，所以，在元素增加一个borde

19、r 属性，设置为1 即可显示边框。2.为表格添加标题单元格姓名性别婚姻张三男未婚李四女已婚解释：元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。这里使用了一个通用属性style，主要用于CSS 样式设置，以后会涉及到。均属于单元格，包含两个合并属性：colspan、rowspan 等。3.添加表头姓名性别婚姻解释：元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头位置。4.添加表脚统计：共两名解释：元素为表格生成表脚，限制在表格的底部。5.添加表主体张三男未婚李四女已婚解释：元素主要是包含住非表头表脚的主体部分，有助于表格格

20、式的清晰，更加有助于后续CSS 和JavaScript 的控制。6.添加表格标题这是一个人物表解释：元素给表格添加一个标题。7.设置列解释：元素是为了处理某个列，span 属性定义处理哪些列。1 表示第一列，2 表示前两列。如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点移入第二位，再处理第二个即可。8.更灵活的设置列解释：元素表示单独一列，一个表示一列，控制更加灵活。如果设置了span 则，控制多列。七、 HTML5文档元素一文档元素总汇文档元素基本没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念。元素名称说明h1h6 表示标题header 表示首部footer 表

21、示尾部nav 表示有意集中在一起的导航元素section 表示重要概念或主题article 表示一段独立的内容address 表示文档或article 的联系信息aside 表示与周边内容少有牵涉的内容hgroup 将一组标题组织在一起details 生成一个区域，用户将其展开可以获得更多细节summary 用在details 元素中，表示该元素内容的标题或说明二文档元素解析文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结构性。只有在后面的章节学习CSS，配合使用才能起到布局和样式的效果。1.表示首部这里部分一般是页面头部，包括：LOGO、标题、导航等内容解释：元素

22、主要设置页面的标头部分。2.表示尾部这里是页面的尾部，一般包括：版权声明、友情链接等内容解释：元素主要设置页面的尾部。3.添加标题标题部分小标题部分解释：实际作用就是加粗并改变字体大小。用于各种标题文档。4.组合标题标题部分小标题部分解释：元素的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题，这是使用此元素包含群组。5.文档主题这里一般是存放文档主题内容。解释：元素的作用是定义一个文档的主题内容。6.添加导航这里存放文档的导航解释：元素给文档页面添加一个导航。7.添加一个独立成篇的文档解释：元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。在比较大的页面中会使用到，比如

23、一片博文的列表，每篇博文，都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等。8.生成注释栏这是是一个注释解释：元素专门为某一段内容进行注释使用。9.表示文档或article 元素的联系信息。联系信息解释：如果是在元素下时，表示整个文档的联系信息。如果是在元素下时，表示其下的联系信息。10.元素生成详情区域、元素在其内部生成说明标签解释：由于大多数主流浏览器尚未支持，暂略。八、 HTML5嵌入元素一嵌入元素总汇这里所列出的元素，并非本节课全部涉及到，比如音频audio、视频video、以及动态图像canvas 和媒体资源source、track 等会在后面章节或季度讲解

24、。元素名称说明img 嵌入图片map 定义客户端分区响应图area 表示一个用户客户端分区响应图的区域audio 表示一个音频资源video 表示一个视频资源iframe 嵌入一个文档embed 用插件在HTML 中嵌入内容canvas 生成一个动态的图形画布meter 嵌入数值在许可值范围背景中的图形表示object 在HTML 文档中嵌入内容param 表示将通过object 元素传递给插件的参数progress 嵌入目标进展或任务完成情况的图形表示source 表示媒体资源svg 表示结构化矢量内容track 表示媒体的附加轨道（例如字幕）二嵌入元素解析1.嵌入图像解释：元素主要是插入一

25、张外部的图片，那么图片的路径问题和超链接一致。img 的私有属性属性名称说明src 嵌入图像的URLalt 当图片不加载时显示的备用内容width 定义图片的长度（单位是像素）height 定义图片的高度（单位是像素）ismap 创建服务器端分区响应图usemap 关联元素2.创建分区响应图解释：通过图片中的热点进行超链接，这里我们采用Dreamweaver 进行操作生成的。3.嵌入另一个文档index |百度解释：表示内嵌一个HTML 文档。其下的src 属性表示初始化时显示的页面，width 和height 表示内嵌文档的长度和高度，name 表示用于target 的名称。4.嵌入插件内容

26、解释：元素是扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了一个土豆网的flash 视频。type 类型表示被插入内容的类型，这里不列出所有，后面如果遇到其他类型的文件，再继续探讨；width 和height 表示宽高；src 表示文件路径。5.和元素解释：元素和一样，只不过object 是html4 的标准，而embed 是html5 的_标准。而object 不但可以嵌入flash，还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替，我们这里暂时不对其详细讲解。6.显示进度解释：元素可以显示一个进度条，一般通过JS 控制内部的值。IE9 以及更低版本不支持此元

27、素。7.显示范围里的值解释：元素显示某个范围内的值。其下的属性包含：min 和max 表示范围边界，low 表示小于它的值过低，high 表示大于它的值过高，optimum 表示最佳值，但不出现效果。IE 浏览器不支持此元素。九、 HTML5音频和视频一音频和视频概述首先，我们要理解两个概念：容器（container）和编解码器(codec)。1.视频容器音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为：.avi、.flv、.mp

28、4、.mkv、.ogg、.webm。2.编解码器音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC、MPEG-3、Ogg Voribs，视频编解码器：H.264、VP8、Ogg Theora。3.浏览器支持情况起初，HTML5 规范本来打算指定编解码器，但实施起来极为困难。部分厂商已有自己的标准，不愿实现标准；而有一些编解码器受专利保护，需要支付昂贵费用

29、。最终放弃了统一规范的要求，导致各个浏览器实现自己的标准。容器格式视频编解码音频编解码IE9+ Firefox5+ Chrome13+WebM VP8 Vorbis OGG Theora Vorbis MPEG-4 H.264 AAC 疑问？除了上面三款浏览器，还有Safari5+支持MPEG-4,Opera11 支持WebM 和OGG，通过这组数据，只要备好MP4 和OGG 格式的即可，但对于新的高清标准WebM，当然是非常必要的。因为WebM 不但清晰度高，而且免费，不受限制许可的使用源码和专利权。目前Chrome 浏览器，为了推广WebM 格式的视频。声称未来将放弃H.264 编码的视频

30、，所以有可能在以后的版本中无法播放MP4 的视频。当然，目前演示的版本还是支持的。二video 视频元素以往的视频播放，需要借助Flash 插件才可以实现。但Flash 插件的不稳定性经常让浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它。而取代它的正是HTML5 的video元素。元素的属性属性名称说明src 视频资源的URLwidth 视频宽度height 视频高度autoplay 设置后，表示立刻开始播放视频preload 设置后，表示预先载入视频controls 设置后，表示显示播放控件loop 设置后，表示反复播放视频muted 设置后，表示视频处于静音状态poster 指定视频数

31、据载入时显示的图片1.嵌入一个WebM 视频解释：插入一个视频，主流的视频为.webm，.mp4，.ogg 等。src 表示资源URL；width 表示宽度；height 表示高度。2.附加一些属性解释：autoplay 表示自动开始播放；controls 表示显示播放控件；loop 表示循环播放；muted 表示静音。3.预加载设置解释：preload 属性有三个值：none 表示播放器什么都不加载；metadata 表示播放之前只能加载元数据（宽高、第一帧画面等信息）；auto 表示请求浏览器尽快下载整个视频。4.使用预览图解释：poster 属性表示在视频的第一帧，做一张预览图。5.兼容多个浏览器video width=800 height=600 contro