Skip to main content

HTML 常见的元素

HTML 结构分析​

HTML 文档详解​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

这里有：

  • <!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
  • <html></html> — html 元素。该元素包含整个页面的内容，也称作根元素。
  • <head></head> — head 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
  • <meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
  • <title></title> — ttile 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
  • <body></body> — body 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

完整的 HTML 结构​

一个完整的 HTML 结构包括哪几部分呢？

  • 文档声明

  • html 元素

    • head 元素
    • body 元素
<!DOCTYPE html>
<html>
  <head>
    <title>HTML 文档结构</title>
  </head>
  <body>
    <h1>我是标题</h1>
  </body>
</html>

文档声明​

  • HTML 最上方的一段文本我们称之为 文档类型声明，用于声明文档类型。<!DOCTYPE html>

  • <!DOCTYPE html>

    • HTML 文档声明，告诉浏览器当前页面是 HTML5 页面；
    • 让浏览器用 HTML5 的标准去解析识别 内容；
    • 必须 放在 HTML 文档的最前面，不能省略，省略了会出现兼容性问题；

  • HTML5 的文档声明比 HTML 4.01、XHTML 1.0 简洁非常多 (了解即可)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 元素​

  • <html> 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。

    • 所有其他元素必须是 此元素的后代。

      <!DOCTYPE html>
      <html lang="zh-CN">
        ...
      </html>

  • W3C 标准建议为 HTML 元素增加一个 lang 属性，作用是

    • 帮助语音合成工具确定要使用的发音；
    • 帮助翻译工具确定要使用的翻译规则；

  • 比如常用的规则：

    • lang="en"表示这个 HTML 文档的语言是英文；
    • lang="zh-CN"表示这个 HTML 文档的语言是中文。

head 元素​

  • HTML head 元素 规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。

    • 什么是元数据（meta data），是描述数据的；
    • 这里我们可以理解成对整个页面的配置：

  • 常见的设置有哪些呢？一般会至少包含如下 2 个设置。

    • 网页的标题：title 元素 <title>网页标题</title>

    • 网页的编码：meta 元素

      • 可以用于设置网页的 字符编码，让浏览器更精准地显示每一个文字，不设置或者错误会导致乱码；
      • 一般都使用 utf-8 编码，可以显示世界上所有的文字；<meta charset="utf-8">

body 元素​

  • body 元素里面的内容将是你 在浏览器窗口中看到的东西，也就是 网页的具体内容和结构。

  • 之后学习的大部分 HTML 元素都是在 body 中编写呈现的。

<body>
  <input type="text" />
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
  </ul>
</body>

HTML 的元素​

  • HTML 元素本身很多，但是常用的元素就是那么几个。

  • 常用的元素（暂时掌握下面几个就够了，90% 时间都在写这几个）

    • p 元素、h 元素；
    • img 元素、a 元素、iframe 元素；
    • div 元素、span 元素；

  • 下阶段学习的元素：

    • ul、ol、li 元素；
    • button 元素、input 元素；
    • table 、thead 、tbody 、thead 、th 、tr 、td ；

  • HTML5 新增元素（后续学习）