《HTML5学习笔记简明版》.pdf资源-CSDN文库

Javascript

Web前端

需积分: 2 162 浏览量 2024-10-11 11:28:20 上传评论收藏 364KB PDF 举报

资源推荐

资源详情

资源评论

《HTML5学习笔记简明版》系列分享专栏

简介

HTML5学习笔记简明版来自博客园的汤姆大叔，在HTML5学习笔记简明版汤姆大叔对HTML5有更详细的讲解，收藏在这里供学习参考

文章

HTML5学习笔记简明版目录索引

HTML5学习笔记简明版（1）：HTML5介绍与语法

HTML5学习笔记简明版（2）：新元素之section,article,aside

HTML5学习笔记简明版（3）：新元素之hgroup,header,footer,address,nav

HTML5学习笔记简明版（4）：新元素之video,audio,meter,datalist,keygen,output

HTML5学习笔记简明版（5）：input的type超级类型

HTML5学习笔记简明版（6）：新增属性（1）

HTML5学习笔记简明版（7）：新增属性（2）

HTML5学习笔记简明版（8）：新增的全局属性

HTML5学习笔记简明版（9）：变化的元素和属性

HTML5学习笔记简明版（10）：废弃的元素和属性

HTML5学习笔记简明版（11）：新增的API

HTML5学习笔记简明版（1）：HTML5介绍与语法

HTML5介绍

HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性（例如<nav>网站导航块和<footer>）。新型的标签有利于搜索引擎和语义分析，同时更好地帮助

小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，比如视频音频用的<video>和<audio>，总结而言，有如下几大特点：

取消了一些取消了一些HTML4里过时的元素和属性标记里过时的元素和属性标记

其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 hea

der, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。

内容与展示分离内容与展示分离

b 和 i 标签依然保留，但它们的意义和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签

则被完全去掉了。

新增加一些全新的表单输入对象新增加一些全新的表单输入对象

包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单

。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

全新的、更合理的标签全新的、更合理的标签

多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。

本地存储本地存储

这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。

Canvas对象对象

将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。

新的新的API扩展扩展

为HTMLDocument和HTMLElement借口提供了新的API扩展。

HTML5取代取代Flash和和Silverlight

语法(Syntax)

1 文档媒体类型

HTML5定义的HTML语法大部分都兼容于HTML4和XHTML1，但是也有一部分不兼容。大多数的HTML文档都是保存成text/html媒体类型。

HTML5为HTML语法定义了详细的解析规则（包括错误处理），用户必须遵守这些规则将它保存成text/html媒体类型。如下是一个符合HTML语法规范的例子：

<!doctype html>

<html>

<head>

<title>Example document</title>

</head>

<body>

<p>Example paragraph</p>

</body>

</html>

HTML5为HTML语法也定义了一个text/html-sandboxed媒体类型，以便可以host不信任的内容。

其它能够用在HTML5的语法是XML，它兼容于XHTML1。用XML语法的话需要将文档保存成XML媒体类型，并且根据XML的规范需要设置命名空间（namespace）为http://www.

w3.org/1999/xhtml。

下面的例子文档符合HTML5里的XML语法规范，需要注意的是XML文档必须保存成XML媒体类型的，例如application/xhtml+xml或者application/xml。

<?xml version="1.0" encoding="UTF-8"?>

<head>

<title>Example document</title>

</head>

<body>

<p>Example paragraph</p>

</body>

</html>

2 Character Encoding

HTML5的HTML语法里，有三种形式可以声明字符串的encoding类型：

在传输级别（transport level）上，在HTTP实例的header里设置Content-Type。

在文件的开头设置一个Unicode的Byte Order Mark(BOM)，该字符为文件的encoding方式提供了一个签名。

在文档的前1024个byte之前的内容里，使用带有charset属性的meta元素来声明encoding方式。例如：<meta charset="UTF-8">表明该文档是UTF-8格式的。它是替换原有的<met

a http-equiv="Content-Type" content="text/html; charset=UTF-8">语法声明，尽管原有的语法依然可用，但在HTML5里不推荐使用。

对于HTML5里的XML语法，依然和以前的XML语法声明式一样的。

3 DOCTYPE

HTML5的HTML语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。这个DOCTYPE没有其它的目的，并且在XML里是可选项，因为XML媒体格式的文

档一直就是在标准模式下处理的。

DOCTYPE的声明方式是<!DOCTYPE html>，不区分大小写。HTML的早期版本声明的DOCTYPE需要很长是因为HTML语言是建立在SGML的基础上，所以需要关联引用一个相

对应的DTD。HTML5和之前的版本不一样了，仅仅需要声明DOCTYPE就可以告诉文档启用的是HTML5语法标准了，浏览器会为<!DOCTYPE html>做剩余的工作的。

4 MathML和SVG

HTML5的HTML语法允许在文档里使用MathML（数学标记语言）和SVG（可伸缩矢量图）元素。例如，一个非常简单的HTML页面包含一个svg元素画出的圆：

<!doctype html>

<p>

A green circle:

</p>

更多复杂的组合标记也是支持的，比如使用svg的foreignObject元素你可以嵌套MathML, HTML，或者自身嵌套。

5 其它

HTML5已经原生支持IRI了，尽管这些IRI只能在UTF-8和UTF-16的文档里使用。

lang属性如果设置的不合法，将会更新为空字符串，以告诉浏览器是一个未知的语言，作用和XML里的xml:lang一样。

HTML5学习笔记简明版（2）：新元素之section,article,aside

section

section元素描绘的是一个文档或者程序里的普通的section节，一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节，或者tab页面里的一个tab下

的box块。一个页面里可以拆分成多个section，分别代表introduction, news items和contact information。

如果元素的内容集中到一起显示可以表达相应的意思的话，那就可以定义成article元素，而没必要使用section元素。

section元素不是一般的容器元素，所以如果一个元素需要定义相应的style或者script脚本的话，那推荐使用div元素，section的使用条件是确保这个元素的内容能够明确地展示在

文档的大纲里。

下面的例子代码来自苹果网站页面的一部分，代码里包含了2个短小的section：

<h1>Apples</h1>

<h2>Tasty, delicious fruit!</h2>

</hgroup>

<p>The apple is the pomaceous fruit of the apple tree.</p>

<h1>Red Delicious</h1>

<p>These bright red apples are the most common found in many supermarkets.</p>

</section>

<h1>Granny Smith</h1>

<p>These juicy, green apples make a great filling for apple pies.</p>

</section>

</article>

可以看到，在section里可以任意使用h1元素，而不用考虑这个section是顶级的，还是二级或者三级元素。

下面的代码是一个毕业典礼的页面，包含2个section，一个是显示将要毕业人的名单，一个是显示毕业典礼的形式。

<!DOCTYPE Html>

<html>

<head>

<title>Graduation Ceremony Summer 2022</title>

</head>

<body>

<h1>Graduation</h1>

<h1>Ceremony</h1>

<p>Opening Procession</p>

<p>Speech by Validactorian</p>

<p>Speech by Class President</p>

<p>Presentation of Diplomas</p>

<p>Closing Speech by Headmaster</p>

</section>

<h1>Graduates</h1>

<ul>

<li>Molly Carpenter</li>

<li>Anastasia Luccio</li>

<li>Ebenezar McCoy</li>

<li>Karrin Murphy</li>

<li>Thomas Raith</li>

<li>Susan Rodriguez</li>

</ul>

</section>

</body>

</html>

article

article代表了一个文档内容的独立片段，例如，博客条目或报纸文章，<article>标签的内容独立于文档的其余部分。

article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分(通常包含在 header 内)，有时也会

包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。

当 article 内嵌 article 时，原则上来说，内部的 article 的内容是和外层的 article 内容是相关的。例如，一篇博客文章中，包含用户提交的评论的 article 就应该潜逃在包含博客文章

article 之中。

剩余32页未读，继续阅读

评论收藏

内容反馈

天涯学馆

粉丝: 2214
资源: 436

《HTML5学习笔记简明版》.pdf

openwrt,Lede深入学习笔记v2.0.pdf

CCNP学习笔记完整版.pdf

冰河的渗透实战笔记-冰河.pdf

Spring Boot 学习笔记完整教程.pdf

希沃白板学习笔记.pdf

Linux学习笔记PDF文档.pdf

CPA重点考点笔记整理版.pdf

JSP学习笔记-2.pdf

Python学习笔记知识分享.pdf

android学习笔记-clip.pdf

杨超线代笔记.pdf

deeplearning深度学习笔记v5.1.pdf

《Nginx学习笔记系列》.pdf

Redis全套学习笔记 完整版pdf.rar

cencespb学习笔记原理图.pdf

Python学习笔记(干货) 中文PDF完整版.pdf

javascript学习笔记讲解版参考.pdf

机器学习个人笔记完整版.pdf.zip

教师资格证-幼儿园【综合素质】学习笔记#..pdf

机器学习学习笔记.pdf

python简明教程笔记.pdf

Go语言学习笔记.pdf 共174页

2023年计算机网络学习笔记笔试面试.pdf

CAD笔记完整版.pdf

CAD笔记金典版.pdf

echarts-gl.min.js

自主研发的软著申请代码文档整理输出工具

最新资源

Redis全套学习笔记完整版pdf.rar