其实对HTML说不上陌生也不算熟悉,准确的说是从来没有考虑过要看官方文档,每次都是停留在浅尝辄止的水平保持够用就好。这次机会让我能够好好的把HTML官方文档看一遍,提升一下自己的水平:)
Link :https://www.w3.org/TR/html5/
比较重要的部分:3.2.5章节 4.1章节 4.2章节 4.3章节 4.4章节 4.5章节 meta标签
3.2.5Global attributes(全局属性)
The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification):
accesskey
class
contenteditable
dir
hidden
id
lang
spellcheck
style
tabindex
title
translate
这些属性只能被标准的HTML元素作为属性定义。当HTML标签使用这些属性的时候,命名空间中没有这些属性的不会被考虑。
具体作用:
accesskey:使用键盘可以操作网页,一般使用为alt+key.
class:这个属性是一个element的class的独立规范列表。class允许css和javascript通过class选择器或者类似下面的DOM方法来选择和访问element
contenteditable:是否可编辑开关。使用时必须赋值"true",不允许直接加入标签内使用。如果没有被设置,则直接继承父元素属性。
dir:表明文本方向。可定义为ltr/rtl/auto.分别为left-to-right,right-to-left,auto.auto会使用基本的解析算法进行解析,如果发现字符有很强的方向性,那么则将这个方向作为整个element的方向。
hidden:这个布尔(Boolean)属性表示element还没有或是不再存在,当然这都是相对的。例如,你经常在页面上使用隐藏element,只有在登录处理完成后才可以被使用。浏览器不渲染这样的element。也就是说,一般用于隐藏元素吧。
id:这个属性是唯一的标识,它在整个document里应该是唯一的。准确的说,就是用来当锚点的。
lang: language.顾名思义。
spellcheck:拼写检查。一般中文是不用的,做I18N的网站有可能会用。用的话一般是用来检查输入框?
style:CSS Style.
tabindex:决定是不是能获得焦点,使用方式是用tab切换。定义它的值即可,从小到大依次切换,负数则永远不会被切换到。
title:文本信息。顾名思义系列。
translate:标记用于localized的时候是否翻译。
data-*:被称为自定义属性。允许HTML和它对应DOM表现形式之间的专有信息交换。可以理解为Script使用的标签.
draggbale:这个属性决定一个Element是否能够被拖动。可被定义为True 和False,未设置则默认为auto。必须规定True或者False,同contenteditable标签一致,不允许直接使用。
4.1章节 The root element(根元素)
Link:https://www.w3.org/TR/html5/semantics.html#the-root-element
只讲了一种元素,HTML元素。也就是<html>。它没有种类,所有子文档都需要使用。它的开始标签之前,只能够写注释,结束标签之后,同样只能写注释。不允许任何ARIA值。
4.2章节 Document metadata(文档的metadata)
Link:https://www.w3.org/TR/html5/document-metadata.html#document-metadata
metadata(元数据)代表该标签指示了HTML的页面相关信息,绝大一部分是写给浏览器看的。具体有<base>,<head>,<Link>,<meta>,<style>,<title>等。这些东西可以在网页里定义,也可以链接到包含相关信息的外部文件。
<base>指定基础URL,<head>,规定相关元数据,<Link>,链接外部资源,<meta>杂货堆(其他规定不了的都归它管)<style>,包含样式化信息(CSS),title(指定标题)
4.3章节 Sections(内容分区)
Link:https://www.w3.org/TR/html5/sections.html#sections
这个部分的标签主要用来对内容进行分区。其中:
address标签主要用于为最近的<article>或者<body>元素提供信息。如果它作用于<body>,那么它将作用于整个文档。
article元素表示文档页面等中的独立结构。特点是独立分配,可复用。一般用在帖子,新闻,博客这种交互式组件上。
aside这个部分表示和其余页面几乎无关的部分。常见的应该就是Google的广告和一些Web应用程序这种外部嵌入的东西?
footer表示最近一个章节内容/根节点的页脚。一般是包含章节作者,版权信息等。
h1-h6顾名思义系列,标题级别。
header表示网页头(个人理解)一般添加logo等信息,也可以用来添加预加载信息。
hgroup一个段的标题.
nav HTML导航栏 (<nav>) 描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表.
section HTML Section 元素 (<section>) 表示一个区域。一般是通用的。
4.4Grouping content(文本内容)
p:paragraph.顾名思义系列。
hr:画一条横线。
pre:预处理文本。此标签下的所有文本将保留空格和换行符。
blockquote:块级元素引用。
ol:order List.顾名思义系列,有排序的列表。
ul:unorder List.顾名思义系列,不排序的列表。
li:list.顾名思义系列,标记一个列表。
dl:展示词汇表或元数据。用于在一个定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。
div:Division,用于分割网页。
main:main元素(<main>)呈现了文档<body>或应用的主体部分。
dd:HTML <dd> 元素(HTML 描述元素)用来指明一个描述列表 (<dl>) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现
div:通用的流内容用于对元素分组。
4.5章节 Text-level semantics(文本等级语义标签?)
a标签:锚定其他元素,定义一个超链接到其他页面、文件等流终点。
em:着重标记。可以多重嵌套,等于强调+强调的效果。
strong:强壮!!表示强调。google了一下和<b>有啥区别,原来一个是语气上的强调,一个是字体加粗,只是<b>挺无辜的,刚好和<strong>一个效果。
small字体变小一号。
s已经没用了。HTML5不再支持。
cite元素.HTML引用标记,必须包含引用作品的符合简写格式的标题或者URL。
q元素。表示一个封闭的且短的,行内引用的文本。不能加换行符。
dfn:定义元素。顾名思义系列。Define.
time表示时间。<time>2011-11-12T14:54</time>这么写就行了。
code标签。代表一段代码的开始。同MarkDown.
b加粗。MarkDown里也是这么用的。
var写代码的时候用来标注一个变量。
samp=sample.顾名思义系列。
kbd表示用户输入。产生一个行内元素。
sub/sup已废弃。
i用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示.显示出来就是斜体的问题~
mark突出显示文字,标记重点。显示搜索引擎后关键字。
ruby注音用。
span元素是短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者Id属性)
8.1 Writing HTML documents(如何写HTML文档)
1.如何写DOCTYPE.
Doctype是一种头文件。它必须是HTML文档的第一行,位于<html>标签之前。!DOCTYPE不是HTML标签,它是指示web浏览器关于页面使用哪个HTML版本的指示命令。HTML4.01中,<!DOCTYPE>声明引用DTD,因为HTML4.01基于SGML.HTML5不基于SGML,所以不用引用DTD。
(SGML:Standard Generalized Markup language.(标准通用标记语言).DTD:Document Type Definition.(文档类型定义)。HTML和XML都是从中衍生出来的。HTML4还遵循着SGML的写法,但是HTML5已经不再基于SGML了。这乱七八糟的SGML已经是历史糟粕了,不用管它)
2.元素。
元素有很多种类——空元素,文字元素,文字外元素,外部元素,普通元素。空元素包含“area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr” 文字元素包含“script, style”,文字外元素包含“textarea, title”,外部元素包含所有MathML命名空间和SVG命名空间的元素。其他的标签都是普通元素。
(MathML:数学标记语言,SVG:可缩放矢量图形Scalable Vector Graphics)
2.1.开始标签。
2.1.1开始标签必须以"<"作为开始。
2.1.2接下来的字符必须是一个元素的标签名。
2.1.3如果在<后要加入属性,那么你必须加入一个以上的空格。
2.1.4开始标签将有一个或更多的属性,属性之间必须用空格隔开。
2.1.5在属性值后,或在Tag名称后如果没有属性值,那么应该添加一个或更多的空格来填充。(一些属性值需要在后面接空格,具体看https://www.w3.org/TR/html5/syntax.html#syntax-attributes)
2.1.6如果元素是空元素,或者如果这个元素是一个外部元素(MathML,SVG),那么需要加一个单独的"/"字符。这个字符对空元素是无效的,但是外部元素需要加一个"/"进行闭合。
2.1.7当然,最后你需要加一个">".
2.2结束标签。
没有需要注意的地方,略过。
2.3属性。
Link:https://www.w3.org/TR/html5/syntax.html#writing
属性一般写在一个元素的开始标签里面。属性有它自己的名称和值,属性的名称必须由一个或更多的字符(除了空白字符、NULL、"、'、>、/、=、用作控制的字符、unicode未定义的字符)组成。在HTML语法中,属性的名称(包括外部元素)将无视大小写(可混合)的匹配ACSII实例的属性名称。
2.4文本
文本内容可以填入内容,属性值,注释。文本可以使用LF\CR进行换行。
2.5字符引用。
略。
2.6CDATA段
CDATA必须包含:字符串"<![CDATA[",且其中的字符不能包含两个大括号。,然后再添加闭合。CDATA只能被用于外部元素(MathML或者SVG)