HTML概览

语法（本课只是对 规范文档 的解读）

  1. DOCTYPE
  2. 标签
  3. 属性
  4. 注释
  5. 空格 空白
  6. 实体

一、DOCTYPE

目前最推荐的 HTML 5 文档类型声明

<!DOCTYPE html>
  1. DOCTYPE 之前，只能有注释和空白。
  2. 大小写不敏感 / 大小写无所谓，下面的写法也是对的（但是不推荐）
     <!dOcTyPe HtMl>

其他 DOCTYPE。

DOCTYPE 有什么用？

  1. 告诉浏览器你的语法
  2. 可能还会影响到 JS 的功能

二、标签

有内容的标签

如 <script> / <body> / <span> / <button>

无内容的标签

如 <input> / <img> / <link> / <meta>

可省略的标签

  • 如果你能看懂 HTML Specs，那么你知道 在某些条件下 <head> / <body> / </p> 是可以省略的；
  • 如果你看不懂，那你就都别省略吧……

三、属性

四种写法

1 <input disabled> 
2 <input value=yes>
3 <input type='checkbox'>
4 <input name="be evil">

属性名不区分大小写，属性值 居然 区分大小写。

示例

全局属性

所有标签（包括 <html>） 都有的属性（请自行学习 此教程）：

accesskey
class
contenteditable
data-*
draggable
hidden
id
spellcheck
style
tabindex
title
...

四、注释

  1. 普通注释

     <!-- 注释 -->

  2. 奇葩的 IE 注释

    见 微软的文档.aspx#syntax)

     <!-- [if IE 8]>
   <p>Welcome to Internet Explorer 8.</p>
 <![endif] -->

五、空格 空白

  1. "tab" (U+0009), "LF" (U+000A), "FF" (U+000C), and "CR" (U+000D) 都是空白。
  2. 所有空白都会缩成一个空格。

如何保留 HTML 代码中的空白：

  1. 使用 HTML 实体，如 &nbsp;
  2. 使用 <pre> 标签包起来
  3. 在父元素使用 CSS white-space:pre

六、实体

问题：如果你想在页面上展示 <html> 这六个字符，应该怎么写？

显然不能写 <html>，于是 HTML 想了一个「转义」方案，用 &xxxx; 表示一个特殊字符。

  1. 有名字的 HTML 实体，用 &名字; 表示
  2. 没有名字的 HTML 实体，用 &#十进制; 表示
  3. 没有名字的 HTML 实体，还可以用 &#x十六进制; 表示

例如：

&copy; 
&nbsp;
&amp;
&#20320;
&#x4f60;

results matching ""

    No results matching ""