1、HTML(5)标签

一、HTML文档构成

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <---元素标签--->
  </body>
</html>

<!DOCTYPE>——声明文档类型。
  常用的有:html,以支持html5的方式渲染;HTML 4.01等。
  设置为html会让浏览器以标准模式渲染。否则浏览器默认用自己的怪模式渲染,造成页面渲染混乱。
<html></html>——根元素。包含了整个页面的内容。
<head></head>——包含例如面向搜索引擎的搜索关键字(keywords)、页面描述、CSS 样式表和字符编码声明等。
body></body>——包含元素标签,页面呈现。

二、head中的标签

  • <title>——必须。定义文档的标题
  • <base>——通常情况下,浏览器将当前文档的URL作为相对地址。使用base标签让相对地址以base里的URL为基础。
    属性
    href:当前文档共用的相对地址。
    target:页面所有链接都默认以此属性方式打开。
  • <link>——链接外部样式资源,异步下载。
    属性
    href:被链接文档的地址。
    midea:规定被链接文档将被显示在什么设备上。
    rel:规定当前文档与被链接文档之间的关系。stylesheet表示被链接文档是样式表。 dns-prefetch可以预解析dns。
    type:规定被链接文档的类型。
  • <meta>——元信息。
    属性
    charset:声明当前文档所使用的字符编码。
    name::application-name;author;description;generator;keywords。关联到content。
    content:关联到name。
    http-equiv:把content关联到http头部,类似name。
    例如:
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">定义网站的关键字,用于搜索引擎。
    <meta name="viewport" content="width=device-width, initial-scale=1.0">针对移动网页优化.
  • <script>——脚本下载。
    属性
    async:立即下载,异步。
    defer:延迟到页面加载。

三、body中的元素标签

基础

  • <h1>-<h6>——标题
  • p——段落(不能嵌套块级元素)
  • <br>——换行
  • <hr>——水平线

格式

  • <abbr>——定义缩写
  • <address>——文档作者信息
  • <b>——粗体
  • <bdo>——文字方向
  • <big>——大号字体
  • <cite>——引用
  • <code>——计算机代码
  • <em>——强调文本
  • <small>——小号字体
  • <strong>——语气强调
  • <sup>——上标
  • <sub>——下标

表单

  • <form>——表单
  • <input>——输入
  • <textarea>——文本输入
  • <button>——按钮
  • <select>——下拉列表
  • <optgroup>——选项区
  • <option>——选项
  • <label>——input的元素标注

列表

  • <ul>——无序列表
  • <ol>——有序列表
  • <li>——列表项
  • <dl>——列表区
  • <dt>——列表标题
  • <dd>——列表描述

表格

  • <table>——表格
  • <caption>——表格标题
  • <th>——行头
  • <tr>——行
  • <td>——列
  • <thead>——表头内容
  • <tbody>——主体内容
  • <tfoot>——脚注

四、最新的HTML标准——HTML5

4.1 新特性

(1)新的语义元素

  • <header>——头
  • <footer>——底部
  • <nav>——导航栏
  • <aside>——侧边栏
  • <section>——节
  • <article>——独立包含的内容
  • <figure>——图片区
  • <figcaption>——图片描述
  • <time>——日期/时间
  • <summary>——details元素的可见标题
  • <detail>——隐藏的细节
  • ...

    (2)新的表单控件

  • <datalist>——输入控件的预定义选项
  • <output>——计算结果

    (3)强大的图像支持

  • <canvas>——画布,标量图。适合图表、游戏。不支持事件处理。
  • <svg>——矢量图。适合地图。支持事件处理。

    (4)多媒体支持

    <video><audio>

    (5)本地存储

    sessionStorage,localStorage

猜你喜欢

转载自www.cnblogs.com/chd1994/p/12155587.html