过一遍html标签（一）

根元素

html

html元素代表HTML文档的根，其他所有元素都是此元素的后代。

• 因为html元素是一个文档中的第一个元素（除了注释），因此它被叫做根元素。

• 在HTML中它不是必须的，但在XHTML中必须明确给出html元素的开闭标签。

• 对应的DOM接口是HTMLHtmlElement。

文档元数据

head

HTML Head 元素规定文档相关的通用信息（元数据），包括文档标题、样式或脚本。

• 父元素只能是html元素，作为其第一个子元素。

• 如果在文档中忽略了 < head> 标签，则大部分浏览器会自动创建一个 < head> 元素。

• 对应的DOM接口是HTMLHeadElement。

title

HTML < title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。

• 同时需要开标签和闭标签，遗漏标签会导致浏览器忽略掉页面的剩余部分

• 一个head元素只能包含一个title元素

• 对应的DOM接口是HTMLTitleElement

base

HTML中的Base元素(< base>)指定文档里所有相对URL地址的基础URL。一份文档最多一个< base>元素。

• 文档中的基础URL可以使用document.baseURI进行查询。
• 此标签不能有结束标签
• 对应的DOM接口是HTMLBaseElement

属性：

• href：用于文档中相对RUL地址的基本URL。
  如果指定了该属性，这个元素必须写在其他任何属性值是URL的元素之前。
  允许绝对和相对RUL。
• target：当元素的超链接或导致导航的形式被激活时，指定显示结果的默认位置。
  
  • _blank: 载入结果到一个新的未命名HTML4窗口，或者一个新的HTML5的浏览上下文。
  • _self: 载入结果到当前的HTML4框（或者HTML5的浏览上下文）。如果没有指定该属性，那该值是元素的默认值属性值。
  • _parent: 对于HTML4，载入结果到当前框的父级框；对于HTML5，载入结果到父级浏览上下文。如果没有父级结构，该选项的行为和_self一样。
  • _top: 在HTML4中，载入结果到全部原始窗口，并且取消其他所有框。在HTML5中，载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self一样。

<base href="http://www.example.com/"><base target="_blank" href="http://www.example.com/">

link

HTML 中< link>元素用于链接外部的 JavaScript 或 CSS 到该文档。 这个元素经常用来链接css文件。

• 这是一个空元素，没有结束标签
• 对应的DOM接口是HTMLLinkElement

属性：

• crossorigin：该枚举属性指定在加载相关图片时是否必须使用 CORS.
  启用 CORS 的图片 可以在 < canvas> 元素中使用, 并避免其被污染.
  
  • ”anonymous”
    会发起一个跨域请求(即包含 Origin: HTTP 头). 但不会发送任何认证信息 (即不发送 cookie, X.509 证书和 HTTP 基本认证信息). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 这张图片就会被污染并限制使用.
  • “use-credentials”
    会发起一个带有认证信息 (发送 cookie, X.509 证书和 HTTP 基本认证信息) 的跨域请求 (即包含 Origin: HTTP 头). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 这张图片就会被污染并限制使用.

当不设置该属性时, 资源将会不使用 CORS 加载 (即不发送 Origin: HTTP 头), 这将阻止其在 < canvas> 元素中进行使用.

• disabled ：配合脚本使用, 可以用来启用或禁用多个样式表链接.
• href：指定被链接资源的URL，URL可以是绝对或相对的
• hreflang：该属性指明了被链接资源的语言. 其意义仅供参考.
• media：规定被链接文档将被显示在什么设备上。
• rel：规定当前文档与被链接文档之间的关系。
• type：被链接文档的MIME类型

<link rel="stylesheet" href="style.css">

还可以指定可替换的CSS文件：

<link href="default.css" rel="stylesheet" title="Default Style"><link href="fancy.css" rel="alternate stylesheet" title="Fancy"><link href="basic.css" rel="alternate stylesheet" title="Basic">

用户可以在浏览器菜单 查看>页面样式 来选择网页的样式. 用户可以通过这种方式来查看网页的不同样式.

meta

HTML Meta 元素 (< meta>) 用来定义其他 HTML 元素无法描述的信息。

通过设置不同属性，元数据可以分为以下几种：

• 如果设置了name，它是一个文档级的元数据，将附着在整个页面上。

  name属性提供了名称/值对中的名称。
  “keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
  类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

• 如果设置了 http-equiv , 它是一个编译指令， 即，由服务器提供的来指示页面应如何加载。
  http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

使用带有 http-equiv 属性的 < meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含：

content-type: text/htmlcharset:iso-8859-1expires:31 Dec 2008

• 如果设置了 charset， 此特性声明当前文档所使用的字符编码，鼓励使用UTF-8

<meta charset="utf-8">

除了上面3个，还有1个属性：

• content：content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
  content 属性始终要和 name 属性或 http-equiv 属性一起使用。

style

HTML的< style>元素包含了文档的样式化信息

• 开始标签和结束标签都不能省略

属性：

• type：该属性以MIME类型定义样式语言。如果该属性未指定，则默认为text/css。
• media：指定哪个媒体应该应用该样式
• scoped：如果该属性存在，则样式应用于其父元素；如果不存在，则应用于整个文档。
• title：指定可选的样式表
• disabled：如果指定该属性，则不应用样式规则

<style type="text/css">body {  color:red;}</style>

<article>  <div>The scoped attribute allows for you to include style elements mid-document.   Inside rules only apply to the parent element.</div>  <p>This text should be black. If it is red your browser does not support the scoped attribute.</p>  <section>    <style scoped>      p { color: red; }    </style>    <p>This should be red.</p>  </section></article>

这个例子中按理来说，style的样式应该只应用到section中的p元素上。

脚本

script

HTML <script> 元素的作用是在HTML或XHTML文档中嵌入或引用可执行的脚本。没有async或defer属性的脚本和内联脚本会在浏览器继续解析剩余文档前被获取并立刻执行。

属性：

• asnyc（HTML5）：该布尔属性指示浏览器是否在允许的情况下异步执行该脚本。
  即下载期间不阻塞浏览器加载，下载完毕立即执行，此时是阻塞浏览器加载的。
  该属性对于内联脚本无作用。

• src：这个属性定义引用外部脚本的URI。
  有src属性的script元素标签内不应该再有嵌入的脚本

• type：该属性定义script元素包含或src引用的脚本语言类型。
  属性的值为MIME类型; 支持的MIME类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。
  如果没有定义这个属性，脚本会被视作JavaScript。

  • 如果MIME类型不是JavaScript类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。
  • 如果type属性为module，代码会被当作JavaScript模块

• defer： 这个布尔属性定义该脚本是否会延迟到文档解析完毕后才执行。
  但因为这个功能还未被所有主流浏览器实施，开发人员不应假设脚本实际上都会被延迟执行。
  该属性对于内联脚本无作用。

<!-- HTML4 and (x)HTML --><script type="text/javascript" src="javascript.js"><!-- HTML5 --><script src="javascript.js"></script>

noscript

定义当浏览器不支持脚本时显示的替代文字。

<noscript>  <!-- anchor linking to external file -->  <a href="http://www.mozilla.com/">External Link</a></noscript><p>Rocks!</p>

上面这个例子在允许脚本的浏览器中显示Rocks；
而在不支持脚本的浏览器中显示一个链接。

template（HTML5）

HTML 模板元素 < template> 是一种机制，允许包含 加载页面时不渲染、但随后可以通过 JavaScript实例化 的客户端内容。

可以将模板视作为存储在页面上稍后使用的一小段内容。尽管不会渲染，但解析器会在加载页面的时候处理 < template> 元素中的内容来确保它是有效的。

属性：

• content：只读的content属性，通过它可以读取模板内容。
  一般来说，可以通过判断 content 属性是否存在来判断浏览器是否支持 < template> 元素。

<table id="producttable">  <thead>    <tr>      <td>UPC_Code</td>      <td>Product_Name</td>    </tr>  </thead>  <tbody>    <!-- existing data could optionally be included here -->  </tbody></table><template id="productrow">  <tr>    <td class="record"></td>    <td></td>  </tr></template>

JavaScript 部分，它将 HTML 实例化。

// Test to see if the browser supports the HTML template element by checking// for the presence of the template element's content attribute.if ('content' in document.createElement('template')) {  // Instantiate the table with the existing HTML tbody and the row with the template  var t = document.querySelector('#productrow'),  td = t.content.querySelectorAll("td");  td[0].textContent = "1235646565";  td[1].textContent = "Stuff";  // Clone the new row and insert it into the table  var tb = document.getElementsByTagName("tbody");  var clone = document.importNode(t.content, true);  tb[0].appendChild(clone);  // Create a new row  td[0].textContent = "0384928528";  td[1].textContent = "Acme Kidney Beans";  // Clone the new row and insert it into the table  var clone2 = document.importNode(t.content, true);  tb[0].appendChild(clone2);} else {  // Find another way to add the rows to the table because   // the HTML template element is not supported.}