第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>