《HTML5与CSS3权威指南》学习笔记1

HTML5新特性详解

最新推荐文章于 2025-11-08 10:27:17 发布

原创最新推荐文章于 2025-11-08 10:27:17 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #文档 #html #ruby #框架

web前端专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML5的新特性，包括DOCTYPE声明的变化、新的结构元素如article和section的使用方法，以及如何通过CSS来增强这些元素的表现力。此外，还探讨了全局属性的应用和JavaScript在创建HTML5元素方面的作用。

第1章 Web时代的变迁

不管怎么样，就是变迁了……

第2章

2.1.2 变化的标记方法

DOCTYPE声明：HTML5中刻意不使用版本声明

<!DOCTYPE html>

指定字符编码，可以且只可以使用原来的声明方法或者新的声明方法中的一种

<meta charset="UTF-8">

2.1.3 HTML5确保了与之前HTML版本的兼容性

元素一览

标签	描述
<!--...-->	定义注释。
<!DOCTYPE>	定义文档类型。
<a>	定义超链接。
<abbr>	定义缩写。
<acronym>	HTML 5 中不支持。定义首字母缩写。
<address>	定义地址元素。
<applet>	HTML 5 中不支持。定义 applet。
<area>	定义图像映射中的区域。
<article>	定义 article。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<b>	定义粗体文本。
<base>	定义页面中所有链接的基准 URL。
<basefont>	HTML 5 中不支持。请使用 CSS 代替。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>	定义文本显示的方向。
<big>	HTML 5 中不支持。定义大号文本。
<blockquote>	定义长的引用。
<body>	定义 body 元素。
<br>	插入换行符。
<button>	定义按钮。
<canvas>	定义图形。
<caption>	定义表格标题。
<center>	HTML 5 中不支持。定义居中的文本。
<cite>	定义引用。
<code>	定义计算机代码文本。
<col>	定义表格列的属性。
<colgroup>	定义表格列的分组。
<command>	定义命令按钮。
<datalist>	定义下拉列表。
<dd>	定义定义的描述。
<del>	定义删除文本。
<details>	定义元素的细节。
<dfn>	定义定义项目。
<dir>	HTML 5 中不支持。定义目录列表。
<div>	定义文档中的一个部分。
<dl>	定义定义列表。
<dt>	定义定义的项目。
<em>	定义强调文本。
<embed>	定义外部交互内容或插件。
<fieldset>	定义 fieldset。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<font>	HTML 5 中不支持。
<footer>	定义 section 或 page 的页脚。
<form>	定义表单。
<frame>	HTML 5 中不支持。定义子窗口（框架）。
<frameset>	HTML 5 中不支持。定义框架的集。
<h1> to <h6>	定义标题 1 到标题 6。
<head>	定义关于文档的信息。
<header>	定义 section 或 page 的页眉。
<hgroup>	定义有关文档中的 section 的信息。
<hr>	定义水平线。
<html>	定义 html 文档。
<i>	定义斜体文本。
<iframe>	定义行内的子窗口（框架）。
<img>	定义图像。
<input>	定义输入域。
<ins>	定义插入文本。
<keygen>	定义生成密钥。
<isindex>	HTML 5 中不支持。定义单行的输入域。
<kbd>	定义键盘文本。
<label>	定义表单控件的标注。
<legend>	定义 fieldset 中的标题。
<li>	定义列表的项目。
<link>	定义资源引用。
<map>	定义图像映射。
<mark>	定义有记号的文本。
<menu>	定义菜单列表。
<meta>	定义元信息。
<meter>	定义预定义范围内的度量。
<nav>	定义导航链接。
<noframes>	HTML 5 中不支持。定义 noframe 部分。
<noscript>	定义 noscript 部分。
<object>	定义嵌入对象。
<ol>	定义有序列表。
<optgroup>	定义选项组。
<option>	定义下拉列表中的选项。
<output>	定义输出的一些类型。
<p>	定义段落。
<param>	为对象定义参数。
<pre>	定义预格式化文本。
<progress>	定义任何类型的任务的进度。
<q>	定义短的引用。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<rt>	定义 ruby 注释的解释。
<ruby>	定义 ruby 注释。
<s>	HTML 5 中不支持。定义加删除线的文本。
<samp>	定义样本计算机代码。
<script>	定义脚本。
<section>	定义 section。
<select>	定义可选列表。
<small>	将旁注 (side comments) 呈现为小型文本。
<source>	定义媒介源。
<span>	定义文档中的 section。
<strike>	HTML 5 中不支持。定义加删除线的文本。
<strong>	定义强调文本。
<style>	定义样式定义。
<sub>	定义下标文本。
<summary>	定义 details 元素的标题。
<sup>	定义上标文本。
<table>	定义表格。
<tbody>	定义表格的主体。
<td>	定义表格单元。
<textarea>	定义 textarea。
<tfoot>	定义表格的脚注。
<th>	定义表头。
<thead>	定义表头。
<time>	定义日期/时间。
<title>	定义文档的标题。
<tr>	定义表格行。
<track>	定义用在媒体播放器中的文本轨道。
<tt>	HTML 5 中不支持。定义打字机文本。
<u>	HTML 5 中不支持。定义下划线文本。
<ul>	定义无序列表。
<var>	定义变量。
<video>	定义视频。
<xmp>	HTML 5 中不支持。定义预格式文本。

属性一览

属性	值	描述
accesskey	character	规定访问元素的键盘快捷键
class	classname	规定元素的类名（用于规定样式表中的类）。
contenteditable	true false	规定是否允许用户编辑内容。
contextmenu	menu_id	规定元素的上下文菜单。
data-yourvalue	value	创作者定义的属性。 HTML 文档的创作者可以定义他们自己的属性。必须以 "data-" 开头。
dir	ltr rtl	规定元素中内容的文本方向。
draggable	true false auto	规定是否允许用户拖动元素。
hidden	hidden	规定该元素是无关的。被隐藏的元素不会显示。
id	id	规定元素的唯一 ID。
item	empty url	用于组合元素。
itemprop	url group value	用于组合项目。
lang	language_code	规定元素中内容的语言代码。语言代码参考手册。
spellcheck	true false	规定是否必须对元素进行拼写或语法检查。
style	style_definition	规定元素的行内样式。
subject	id	规定元素对应的项目。
tabindex	number	规定元素的 tab 键控制次序。
title	text	规定有关元素的额外信息。

2.4 全局属性：可以对任何元素都使用的属性。这里介绍几种

contentEditable属性

designMode属性

hidden属性

spellcheck属性

tabindex属性

3 HTML5的结构

3.1 新增的主题结构元素：article,section,nav,aside,time,pubdate

3.2 新增的非主体结构元素：header,hgroup,footer,address

3.3 HTML5结构

1 显式编排：明确使用secetion等元素创建文档结构，在每个内容区块内使用标题。（推荐！）

2 隐式编排：不明确使用section等元素，而是根据页面中所书写的各级标题等把呢荣区块自动创建出来。

3 标题分级：h1>>h6

新<旧生成下级区块

新≥旧生成新区块

3.3.2 对新的结构元素使用样式

追加CSS声明

//追加block声明
article,aside,dialog,figure,footer,header,legend,nav,section{display:block}
//正常使用样式
nav{float:left;width:20%}

Javascript脚步创建元素

//在脚本中创建元素
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
</script>