【讲义】第八课:HTML

直播讲义

(方方) #1

预习

问卷

作业

问卷

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 注释

    微软的文档

    <!-- [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;

常用标签举例

table

a

form


(方方) #2