You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
HTML 乍一看可能给人感觉到一些荒谬,因为其规范是在几十年间,许多不同背景的开发者共同贡献的,很多地方可能无法很全局的把握。
为了简化难度,没有暴露多线程的特征给开发者,HTML 和 DOM API 也被设计为无法检测是否有其它脚本正在同时运行。就算是 webWorker,其实现原理可以认为是在同一个浏览器上下文序列化执行所有脚本。
Tag
由 <>/ 构成,某些标签可以不闭合,比如 <br>
标签可以嵌套,比如:
<p>This <em>is <strong>correct</strong>.</em></p>
但不能交叉嵌套:
<p>This is <em>very <strong>wrong</em>!</strong></p>
Attribute
如果属性值不包含空格、"' ` =<> ,就可以不用双引号,以下写法都是正确的:
<!-- empty attributes --><inputdisabled><inputdisabled=""><inputdisabled=""/><!-- attributes with a value --><inputname=address><inputname='address'><inputname="address">
拓展机制
HTML 提供了很多方法拓展语义,确保使用安全的方法拓展语义,保证不会产生副作用,例如:
class 可以被浏览器广泛支持
data - * 属性可以确保不被浏览器使用,安全的传递数据
使用 描述页面数据
通过 rel="" 定义链接类型
<script type =""> 可以定义自定义数据类型,通过本地或者服务器在页面嵌入原生数据
使用 embed 嵌入插件,比如 flash
使用 js 拓展功能
解析
HTML 标记在浏览器被解析成 DOM 树,存储在内存中。包括的节点类型:DocumentType,Element,Text,Comment,以及不常见的 ProcessingInstruction。
例如:
<!DOCTYPE html><html><head><title>Sample page</title></head><body><h1>Sample page</h1><p>This is a <ahref="demo.html">simple</a> sample.</p><!-- this is a comment --></body></html>
dom的回调,比如 img 标签的 onLoad,虽然是异步事件,但可能在 dom 渲染过程中触发,因此如下的 js 监听可能不会生效:
<imgid="games" src="games.png" alt="Games"><!-- the 'load' event might fire here while the parser is taking a break, in which case you will not see it! --><script>varimg=document.getElementById('games');img.onload=gamesLogoHasLoaded;// might never fire!</script>
XHTML
是 HTML 的变体,因为使用了 XML 语法。XHTML 是 XML 的应用程序。
如果文档以 text / html MIME 类型传输,浏览器会作为 HTML 类型处理,目前使用 html 5.0 版本的规范,也就是 "HTML 5"。
如果使用 XML MIME 类型,例如 application / xhtml + xml 时,会被浏览器视为 XML 文档,使用 XHTML 5.0 版本的规范,称为 "XHTML 5"。与 HTML 5 的区别是,XHTML 5 对 HTML 标签语法检查的更严格,细小的语法错误都会阻止文档渲染,比如 XHTML 中的 DOM 语法不允许 noscript 标签,也不允许 --> 的注释。
CSS
Cascading Style Sheets 层叠样式表 让呈现样式与结构分离。
HTML 内联的样式属性因为不利于维护,增大文件体积,已经逐渐废弃,例如 <font color=""> ,仅保留了 style 属性。
说明
解读不是翻译,因此不会逐句涵盖 w3c 的官方文档,我本意将站在一个初学者的角度,将需要注意的地方记录下来,同时站在一个实用主义者角度,将工作中不常用,但与标准差异较大的理解记录下来,主要意图是记录自己的理解,和帮助日后索引与查询,如果读者希望地毯式理解 w3c 标准,建议逐字阅读 w3c 官方英文文档。
HTML
the Hypertext Markup Language 超文本标记语言
HTML 乍一看可能给人感觉到一些荒谬,因为其规范是在几十年间,许多不同背景的开发者共同贡献的,很多地方可能无法很全局的把握。
为了简化难度,没有暴露多线程的特征给开发者,HTML 和 DOM API 也被设计为无法检测是否有其它脚本正在同时运行。就算是 webWorker,其实现原理可以认为是在同一个浏览器上下文序列化执行所有脚本。
Tag
由
<
>
/
构成,某些标签可以不闭合,比如<br>
标签可以嵌套,比如:
但不能交叉嵌套:
Attribute
如果属性值不包含空格、
"
'
`=
<
>
,就可以不用双引号,以下写法都是正确的:拓展机制
HTML 提供了很多方法拓展语义,确保使用安全的方法拓展语义,保证不会产生副作用,例如:
解析
HTML 标记在浏览器被解析成 DOM 树,存储在内存中。包括的节点类型:DocumentType,Element,Text,Comment,以及不常见的 ProcessingInstruction。
例如:
会被解析为:
可以看到文字虽然没有被标签包裹,但在 DOM 树中与标签一样会生成
#text
节点。不过#text
节点比预期的要多,因为代码中包含很多空格与换行,不过,所有<head>
之前的空白会被忽略,所有</body>
之后的空白都会被提前到</body>
的结尾处。任何 DOM 节点都可以被嵌入的
script
脚本操控。事件触发
dom的回调,比如
img
标签的onLoad
,虽然是异步事件,但可能在 dom 渲染过程中触发,因此如下的 js 监听可能不会生效:XHTML
是 HTML 的变体,因为使用了 XML 语法。XHTML 是 XML 的应用程序。
如果文档以 text / html MIME 类型传输,浏览器会作为 HTML 类型处理,目前使用 html 5.0 版本的规范,也就是 "HTML 5"。
如果使用 XML MIME 类型,例如 application / xhtml + xml 时,会被浏览器视为 XML 文档,使用 XHTML 5.0 版本的规范,称为 "XHTML 5"。与 HTML 5 的区别是,XHTML 5 对 HTML 标签语法检查的更严格,细小的语法错误都会阻止文档渲染,比如 XHTML 中的 DOM 语法不允许
noscript
标签,也不允许-->
的注释。CSS
Cascading Style Sheets 层叠样式表
让呈现样式与结构分离。
HTML 内联的样式属性因为不利于维护,增大文件体积,已经逐渐废弃,例如
<font color="">
,仅保留了style
属性。WebFonts
在网页使用字体,无需在系统安装,正在打造的网页字体通用标准是: WOFF
容错
自动在
form
标签前把p
标签结束:The text was updated successfully, but these errors were encountered: