HTML的元素 - 掘金

一、什么是元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

二、HTML元素语法

HTML标签以开始标签起始，以结束标签终止
元素内容是开始标签与结束标签之前的内容
某些HTML元素具有空内容（empty content）。 如
空元素在开始标签中进行关闭（以开始标签的结束而结束）。如
大多数HTML元素拥有属性

元素 = 开始标签 + 结束标签 + 内容
= 开始标签 + 结束标签
= 开始标签（在开始标签结束）

三、HTML元素的作用

3-1 指示web浏览器关于页面使用哪个HTML版本进行编写指令

元素：<DOCTYPE>
常用：<!DOCTYPE html>

3-2 限定文档的开始点和结束点

元素：<html></html>
常用：<html lang="zh-cn"></html>
lang 属性：声明语言

3-3 引用脚本、引用样式表和提供元信息等

<head> // 包含所有头部元素
  <title>浏览器标题</title> // 定义浏览器标题的元素
  <base href="http://www.abc.com" /> // 定义页面上所有链接的默认地址
  <base target="_blank" /> // 定义页面上所有链接的默认目标（默认跳转方式）
  <link rel="stylesheet" type="text/css" href="theme.css" />
  // link 最常见的用途是链接外部样式表
  // link 的作用是定义文档与外部资源的关系
  <meta name="keywords" content="HTML,ASP,PHP,SQL" />
  // meta 元信息 设置网页关键词，针对搜索引擎和更新频度的描述和关键词
  <meta http-equiv="charset" content="iso-8859-1" />
  <meta http-equiv="expires" content="31 Dec 2008" />
  // 设置请求头额外的信息
  <meta charset="utf-8" />
  // 设置文档字符集编码类型
  <meta http-equiv="Refresh" content="5;url=http://www.abc.com" />
  // 设置网页定时重定向
  
  <style type="text/css">
    h1, h2 {padding: 0; margin: 0;}
  </style>
  // style元素用于定义HTML文档样式信息
  // type 属性是必需的
  
  <script type="text/javascript">
    document.write("Hello World!");
  </script>
  <script src="index.js"></script>
  // script元素可以包含脚本语句，也可以通过src属性引入外部脚本文件
  // 由于script会阻塞页面的渲染，除非不要还是建议放在 <body></body> 元素后面
  
</head>

3-4 描述网页

<body>
  <p>body 元素的内容会显示在浏览器中。</p>
</body>

四、语义化元素

4-1 section元素

定义：节（section）是有主题的内容组，通常具有标题

<section>
  <h1>HTML</h1>
  <p>HTML是超文本标记语言</p>
</section>

应用场景

将首页划分为简介、内容、联系信息等节

4-2 article元素

定义：可以独立于网站其他内容进行阅读

<article>
  <h1>HTML是什么？</h1>
  <p>HTML是超文本标记语言</p>
</article>

应用场景

论坛
博客
新闻

4-3 header元素

定义：为文档或者节规定页眉，常用于介绍性内容的容器

<article>
  <header>
    <h1>HTML是什么？</h1>
    <p>有什么作用？</p>
  </header>
  <p>HTML是超文本标记语言, HTML 使用标记标签来描述网页</p>
</article>

4-4 footer元素

定义：为文档或节规定页脚，通常包含文档的作者、版权信息、联系方式或网站备案信息等

<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

4-5 nav元素

定义：定义导航链接集合，定义大型的导航链接块

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

4-6 aside元素

定义：包含页面主要内容之外的某些内容（比如：侧边栏，广告信息等）

<body>
  <main>
    <aside>
      <a href="/html/">HTML</a> |
        <a href="/css/">CSS</a> |
        <a href="/js/">JavaScript</a> |
        <a href="/jquery/">jQuery</a>
    </aside>
  </main>
</body>

4-7 main元素

定义：包含文档的主体内容

<body>
  <main>
    <aside>
      <a href="/html/">HTML</a> |
        <a href="/css/">CSS</a> |
        <a href="/js/">JavaScript</a> |
        <a href="/jquery/">jQuery</a>
    </aside>
    <h1>Web 浏览器</h1>
    <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
   
    <article>
      <h1>Google Chrome 浏览器</h1>
      <p>Google Chrome 浏览器是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
    </article>
   
    <article>
      <h1>Internet Explorer 浏览器</h1>
      <p>Internet Explorer 浏览器由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
    </article>
   
    <article>
      <h1>Mozilla Firefox 浏览器</h1>
      <p>Firefox 浏览器是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
    </article>
  </main>
</body>

五、语义化元素的作用

清楚地向浏览器和开发者描述其意义
有利于搜索引擎对页面内容的读取