笨办法阅读HTML5 specification

其实对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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,585评论 18 139
  • 转载说明 一、介绍 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入g...
    17碎那年阅读 2,437评论 0 22
  • 简介浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.c...
    听风阁阅读 3,270评论 0 7
  • 1. XML简介 以下内容来自于http://www.w3school.com.cn/xml 基本知识 XML 和...
    WebSSO阅读 1,894评论 1 7
  • 第四章 情绪:适时适地传达感情 4.1什么是情绪? 情绪的构成要素:1、生理因素 2、非口语反应 3、认知的解释 ...
    淡淡的绿茶阅读 409评论 0 0