• HTML注释:<!-- 注释的内容 -->

  • 文档声明:<!doctype html>

  • <a href="" target="_blank">:必须给定href属性才算是一个超链接,否则就是一个普通的行内标签

    href取值:除url外其他都是空链接

      href="javascript:void(0);",不刷新页面,但是貌似有其他JS浏览器兼容问题
      href="javascript:;",不刷新页面,推荐方法
      href="#linkName",不刷新页面,设置锚点链接的
      href="###",不刷新页面
      href="#",这样设置页面会刷新且会到页面顶部
      href="url"
    

    target取值:规定在何处打开链接

      target="_blank":在新窗口(页签)打开
      target="_self":在当前窗口(页签)打开,默认值
      target="_parent":在父窗口(页签)打开
      target="_top":在整个窗口中打开,将会清除所有被包含的框架并将文档载入整个浏览器窗口
      target="frameName":在指定的框架(frameName)中打开,不能以下划线开头
    
  • <audio src="">:定义声音,比如音乐或其他音频流

      src="url",要播放的音频URL
      autoplay="autoplay",设置音频就绪后,是否自动播放
      controls="controls",设置是否显示控件,如播放、暂停按钮等
      loop="loop",设置是否循环播放
      muted="muted",设置是否为静音
      preload="auto",设置是否在页面加载后载入音频
      preload="meta",当页面加载后只载入元数据
      preload="none",当页面加载后不载入音频
    

    例:

      <audio controls="controls" muted="muted">
        <source src="/i/horse.ogg" type="audio/ogg">
        <source src="/i/horse.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
    
  • <button autofocus="autofocus">Click Me</button>

      autofocus="autofocus",设置当页面加载时自动获得焦点
      disabled="disabled",设置状态禁用,禁用后既不可用,也不可点击
      form="formID",设置所属的表一个或多个表单,其值必须是表单的id,多个表单用空格分隔
    
  • <canvas height="" width=""></canvas>,单位只能是pixels

    设置画布的宽和高,每当画布的宽或高被重设时,画布内容就会被清空

  • <caption>,定义表格的标题,必须紧随<table>标签之后且一个<table>只能有一个<caption>

  • <datalist id="inputListValue">,定义选项列表,与<input>元素配合使用,用来定义<input>可能的值

    id的值必须是input的list属性的值,例:

      <input id="myCar" list="cars" />
      <datalist id="cars">
          <option value="BMW">
          <option value="Ford">
          <option value="Volvo">
      </datalist>
    


    默认下拉列表是不展开,当在<input>中输入内容时有匹配时则展开

  • <details open="open">,用于描述文档或文档某个部分的细节,与<summary>标签配合使用可以为<details>定义标题,标题是可见的,当用户点击标题时,显展开<details>的内容

    open="open",设置默认是否展开<details>中除<summary>其他的内容,例:

      <details open="open">
          <summary>Jay</summary>
          <p>Jay Creater.</p>
      </details>
      <details>
          <summary>Jay</summary>
          <p>Jay Creater.</p>
      </details>
    

Jay

Jay Creater.




Jay

Jay Creater.


  • <form action="" method=""></form>,为用输入创建HTML表单,表单用于向服务器传输数据

      action="url",设置提交表单时,发送表单数据的URL,为空的话就向当前页发送
      autocomplete="on/off",设置表单是否启用自动完成,自动完成允许浏览器跟据之前键入的值,显示出在字段中填写的选项
      method="get/post",设置用于发送表单数据的HTTP方法
      name="formName",设置表单的名称
      novalidate="novalidate",设置提交表单时不进行验证
      target="",设置在何处打开action URL,取值(_blank, _self, _parent, _top, frameName)
    
  • <html xmlns="" manifest="">

      xmlns="http://www.w3.org/1999/xhtml",定义XML namespace属性
      manifest="url",定义一个URL,在这个URL上描述了文档的缓存信息
    
  • <iframe>,会创建包含另外一个文档的内联框架(即行内框架)

    在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素,HTML5支持

      frameborder="1/0",设置是否显示框架的边框,默认值为1,如果要设置边框建议用CSS;
      height="pixels/%",设置框架的高度,建议用CSS;
      width="pixels/%",设置框架的宽度,建议用CSS;
      marginheight="pixels",设置<iframe>的内容距<iframe>的顶部和底部的边距,类似于padding;
      marginwidth="pixels",设置<iframe>的内容距<iframe>的左侧和右侧的边距;
      name="frameName",设置<iframe>的名称;
      sandbox="",HTML5新属性,设置一系列对<iframe>中内容的额外限制,多个值用空格分隔:
          "",为空时,应用其他所有的限制;
          allow-same-origin,允许<iframe>内容被视为与包含文档有相同的来源;
          allow-top-navigation,允许<iframe>内容从包含文档导航(加载)内容;
          allow-forms,允许表单提交;
          allow-scripts,允许脚本执行;
    
      scrolling="yes/no/auto",设置是否显示滚动条;
      seamless="seamless",HTML5新属性,规定<iframe>看上去像是包含文档的一部分;
      src="url",设置<iframe>中显示的文档的URL;
      srcdoc="HTML_code",设置显示在框架中的HTML内容,必须是有效的HTML语法;
    

    例:

      <iframe srcdoc="<p>Hello world!</p>" src="/demo/demo_iframe_srcdoc.html">
          <p>Your browser does not support iframe.</p>
      </iframe>
    
  • <img src="" alt="" />,src和alt是两个必须的属性

    src=”url”,设置显示图像的URL
    alt=”text”,设置图像的替代文本,即图像坏掉的情况下显示的文本

  • <input type="" />,type可取值:

    • type="button",定义一个按钮

        <input type="button" value="button" />
      
    • type="checkbox",定义一个复选框

        <input type="checkbox" />
      
    • type="color",定义一个颜色面板,调用系统的颜色面板

        <input type="color" name="favcolor" />
      
    • type="date",允许用户选择一个日期(年/月/日)

        <input type="date" name="bday" />
      
    • type="datetime",允许用户选择一个日期和时间(本地时区)

        <input type="datetime" name="bdaytime" />
      
    • type="datetime-local",允许用户选择一个日期和时间(无时区)

        <input type="datetime" name="bdaytime" />
      
    • type="email",定义一个邮件输入域

        <input type="email" name="email" />
      
    • type="file"定义一个文件上传域

        <input type="file" name="file" />
      
    • type="hidden",定义隐藏的输入字段

        <input type="hidden" name="hidden" />
      
    • type="image",定义图像形式的提交按钮,必须有 src 属性 和 alt 属性

        <input type="image" src="submit.gif" alt="Submit" />
      
    • type="month",允许用户选择一个月份和年(无时区)

        <input type="month" name="bdaymonth" />
      
    • type="number",定义一个整数输入域

        <input type="number" name="quantity" min="1" max="5" />
        //最小值为1,最大值为5
      
    • type="password",定义一个密码框

        <input type="password" name="password" />
      
    • type="radio",定义一个单选按钮

        <input type="radio" name="radio" />
      
    • type="range",定义一个类似于滑动条的数字域

        <input type="range" name="points" min="1" max="10" />
        //最小值为1,最大值为10
      
    • type="reset",定义一个重置按钮

        <input type="reset" name="reset" />
      
    • type="search",定义一个搜索域

        <input type="search" name="search" />
      
    • type="submit",定义一个提交按钮

        <input type="submit" name="submit" />
      
    • type="tel",定义输入电话号码字段

        <input type="tel" name="usrtel" />
      
    • type="text",定义一个输入框

        <input type="text" name="text" />
      
    • type="time",允许用户选择一个时间(无时区)

        <input type="time" name="usrtime" />
      
    • type="url",定义一个URL地址输入域(必须是一个合法的完整的URL地址)

        <input type="url" name="homepage" />
      
    • type="week",定义一个可以选择年份和设置周的输入域

        <input type="week" name="yearweek" />
      
  • <input />,常用属性:

    • autocomplete=”on/off”,设置是否使用输入字段自动完成功能

    • autofocus=”autofocus”,设置页面加载时自动获得焦点

    • checked=”checked”,与type=”checkbox”或type=”radio”配合使用,设置页面加载时预先选中

    • disabled=”disabled”,当<input>加载时禁用此元素

    • form=”formID”,规定字段所属的一个或多个表单,多个表单使用空格分隔值,其值必须是所属表单的id

    • formaction=”url”,覆盖表单的action属性,适用于type=”submit”和type=”image”

    • formmethod=”get/post”,覆盖表单的method属性,适用于type=”submit”和type=”image”

    • formnovalidate=”formnovalidate”,覆盖表单的novalidate属性,适用于type=”submit”,提交表单时不验证

    • formtarget=”_blank,_self,_parent,_top,frameName”,覆盖表单的target属性适用于submit和image

    • height=”pixels/%”,定义<input>字段的高度,适用于type=”image”

    • list=”datalistID”,引用包含输入字段的预定义选项的datalist

    • max=”number/date”,规定输入字段的最大值

    • min=”number/date”,规定输入字段的最小值

      max和min属性适用于以下<input>类型:number, range, date, datetime, datetime-local, month, time,week

    • maxlength=”number”,规定输入字段中的字符的最大长度,与type=”text”和type=”password”配合使用

    • multiple=”multiple”,规定输入字段可选择多个值,与type=”file”和type=”email”配合使用

    • name=”fieldName”,定义<input>元素的名称,用于对提交到服务器后的表单数据进行标识,或JS引用

    • pattern=”regexpPattern”,规定输入字段的值的模式或格式,模式指的是正则表达式,

      适用于以下<input>类型:text, search, url, telephone, email以及password,可使用title属性来描述

    • placeholder=”text”,输入字段的默认提示信息(hint),获得焦点时消失

    • readonly=”readonly”,规定输入字段为只读,只读字段不能修改,与type=”text”和type=”password”配合

    • required=”required”,规定字段为必填

    • src=”url”,只能与type=”image”配合使用,规定图像的URL

    • step=”number”,规定输入字的合法数字间隔(步长),如step=”3”,则合法的数为-3/0/3/6等

      适用于number, range, date, datetime, datetime-local, month, time以及week

    • value=”value”,规定<input>元素的值

    • width=”pixels/%”,定义<input>字段的宽度,只适用于type=”image”

  • <keygen name="security">,规定用于表单的密钥对生成器字段,当提交表单时,私钥存储在本地,公钥发送到服务器

    • autofocus="autofocus",设置页面加载时自动获得焦点

    • challenge="challenge",将<keygen>的值设置在提交时询问

    • disabled="disabled",禁用

    • form="formID",设置<keygen>字段所属的一个或多个表单

    • keytype="rsa/dsa/ec",定义密钥的安全算法,默认rsa

    • name="name",定义<keygen>元素的唯一名称,name属性用于在提交表单时搜集字段的值

        <keygen name="security">
      
  • <label for="">,为<input>元素定义标注(标记)

    for=”eleID”,与表单元素绑定的ID

  • <link href="" rel>,定义文档与外部资源的关系

    • href=”url”,定义被链接的URL

    • media=”mediaQuery”,规定被链接文档将显示在什么设备上,接受若干个值,可以用and/not/,运算符

      • 可能的运算符:

        • and,规定一个AND运算符
        • not,规定一个NOT运算符
        • ,,规定一个OR运算符
      • 设备:

        • all,默认值,适用于所有设备
        • aural,语音合成器
        • braille,盲文反馈装置
        • handheld,手持设备(小屏幕、有限带宽)
        • projection,投影仪
        • print,打印预览模式或打印页面
        • screen,计算机屏幕
        • tty,电传打字机以及类似的使用等宽字符风格的媒介
        • tv,电视机类型设备(低分辨率、有限的滚屏能力)
      • 值:

        • width,规定目标显示区域的宽度,可使用”min-“和”max-“前缀

            media="screen and (min-width: 500px)"
          
        • height,规定目标显示区域的高度,可使用”min-“和”max-“前缀

            media="screen and (max-height: 700px)"
          
        • device-width,规定目标的宽度,可使用”min-“和”max-“前缀

            media="screen and (device-width: 500px)"
          
        • device-height,规定目标的高度,可使用”min-“和”max-“前缀

            media="screen and (device-height: 500px)"
          
        • orientation,规定目标显示的方向,可能值:竖-“portrait”或横-“landscape”

            media="all and (orientation: landscape)"
          
        • aspect-ratio,规定目标显示区域的宽度/高度比,可使用”min-“和”max-“前缀

            media="screen and (aspect-ration: 16/9)"
          
        • device-aspect-ratio,规定目标的device-width和device-height比率,可使用”min-“和”max-“前缀

            media="screen and (device-aspect-ratio: 16/9)"
          
        • color,规定目标的bits/color,可使用”min-“和”max-“前缀

            media="screen and (color: 3)"
          
        • color-index,规定目标可以处理的颜色数,可使用”min-“和”max-“前缀

            media="screen and (min-color-index: 256)"
          
        • monochrome,规定单色帧缓冲中的bits/pixel,可使用”min-“和”max-“前缀

            media="screen and (monochrome: 2)"
          
        • resolution,规定目标的像素密度(dpi或dpcm),可使用”min-“和”max-“前缀

            media="print and (resolution: 300dpi)"
          
        • scan,规定tv显示器的扫描方式,可能的值:”progressive”和”interlace”

            media="tv and (scan: interlace)"
          
        • grid,规定输出设备是否是网格或位图,可能的值:”1”为网格,否则为”0”位图

            media="handheld and (grid: 1)"
          
    • rel=””,必需,定义当前文档与被链接文档之间的关系

      • alternate,链接到文档的替代版本
      • author,链接到文档的作者
      • help,链接到帮助文档
      • icon,导入表示文档的图标
      • license,链接到文档的版权信息
      • next,表示文档是集合的一部分,且集合中的下一个文档是被引用的文档
      • prefetch,规定应该对目标资源进行缓存
      • prev,表示文档是集合中的一部分,且集合中的上一个文档是被引用的文档
      • search,链接到针对文档的搜索工具
      • stylesheet,要链接的样式表的URL
    • type=”MIME_type”,被链接文档的MIME类型,默认为type=”text/css”

  • <main>,IE不支持,标定文档的主要内容

    <main>元素中的内容对于文档来说应当是唯一的,它不应该包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单等

    <main>在一个文档中必须是唯一的,只能出现一次,且不能是以下元素的后代:<article>, <aside>, <footer>, <header><nav>

  • <mark>,定义带有记号的文本,高亮显示文本

          Do not forget to buy <mark>milk</mark> today.
    

    Do not forget to buy milk today.

  • <meta>,定义页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词

    • content=”some_text”,定义与http-equiv或name属性相关的元信息

    • http-equiv=”content-type/default-style/refresh”,把content属性关联到HTTP头部

      • content-type,规定文档的字符编码

          <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        
      • default-style,规定要使用的预定义的样式表

          <meta http-equiv="default-style" content="the document’s preferred stylesheet" />
          //content的值必须匹配同一个文档中的一个link元素上的title属性的值,或必须匹配同一个文档中的一个style元素上的title属性的值
        
      • refresh,定义文档自动刷新的时间间隔

          <meta http-equiv="refresh" content="300" />
        
    • name=”application-name/author/description/keywords/generator”,把content属性关联到一个名称

      • application-name,规定页面所代表的WEB应用程序的名称

      • author,规定文档的作者名字

          <meta name="author" content="Jay Creater" />
        
      • description,规定页面的描述,搜索引擎会把这个描述显示在搜索结果中

          <meta name="description" content="The document is html attribute" />
        
      • generator,规定用于生成文档的一个软件包(不用于手写页面)

          <meta name="generator" content="Sublime Text" />
        
      • keywords,规定一个逗号分隔的关键词列表

          <meta name="keywords" content="HTML, meta tag, tag reference" />
        
    • charset=”character_set”,设置文档的字符编码,常用的就是UTF-8 - Unicode字符编码

  • <meter>,度量给定范围内的数据,以进度条形式展示,不过它不应用于指示进度,如果标记进度条请使用<progress>标签

      <meter value="3" min="0" max="10">3/10</meter>
    
    3/10
      <meter value="0.6">60%</meter>
    
    60%
    • form=”formID”,规定<meter>元素所属的一个或多个表单

    • high=”number”,规定度量的值位于哪个点,被界定为高值且其值必须小于max,大于low和min

    • low=”number”,规定度量的值位于哪个点,被界定为低值且必须大于min,小于high和max

    • max=”number”,规定范围的最大值,属性的值必须大于min,如果没有规定max属性的值,默认为1

    • min=”number”,规定范围的最小值,属性的值必须小于max,如果没有规定min属性的值,默认为0

    • optimum=”number”,规定度量值被界定为最优值的范围

    • value=”number”,必需,规定度量的当前值,其值必须介于min和max属性值之间

  • <nav>,定义导航链接的部分,如果文档中有 “前后” 按钮,则应该把它放到<nav>元素中

  • <ol>,定义一个有序列表,列表排序以数字来显示

    reversed=”reversed”,指定列表倒序

  • <optgroup>,用于把相关的选项组合在一起

    • disabled=”disabled”,规定禁用该选项组

    • label=”text”,为选项组规定描述

        <select>
          <optgroup label="Swedish Cars" disabled="disabled">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
          </optgroup>
          <optgroup label="German Cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </optgroup>
        </select>
      
  • <option>,定义下拉列表中的一个选项,<option>标签中的内容作为<select><datalist>一个元素使用

    • disabled=”disabled”,规定此选项被禁用

    • label=”text”,定义当使用<optgroup>时所使用的标注

    • selected=”selected”,规定选项为选中状态

    • value=”text”,定义送往服务器的选项值,如果没有value属性,选项的值将设置为

  • <output>,作为计算结果输出显示(比如执行脚本的输出)

    • for=”eleID”,描述计算中使用的元素与计算结果之间的关系

    • form=”formID”,定义输入字段所属的一个或多个表单

    • name=”name”,定义对象的唯一名称

  • <progress>,定义运行中的任务进度,与Javascript一起使用来显示任务的进度

    • max=”number”,规定需要完成的值

    • value=”number”,规定进程的当前值

        <progress value="22" max="100"></progress>
      
  • <script>,用于定义客户端脚本

    • async=”async”,规定异步执行脚本(仅适用于外部脚本)

    • charset=”charset”,规定脚本中使用的字符编码(仅适用于外部脚本)

    • defer=”defer”,规定当页面已完成解析后,再执行脚本(仅适用于外部脚本)

    • src=”url”,规定外部脚本的URL

    • type=”MIME-type”,规定脚本的MIME类型

  • <section>,文档的某个区域

  • <select>,用来创建下拉列表,元素中的<option>标签定义了列表中的可用选项

    • autofocus=”autofocus”,规定在页面加载时下拉列表自动获得焦点

    • disabled=”disabled”,禁用下拉列表

    • form=”formID”,定义<select>字段所属的一个或多个表单

    • multiple=”multiple”,定义下拉列表可选择多项

    • name=”name”,下拉列表的名称

    • required=”required”,规定用户在提交表单前必须选择一个下拉列表中的选项

    • size=”number”,规定下拉列表中可见选项的数目,如果使用了multiple属性,则size默认为4

      例:

        <select name="cars" multiple>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>
          <option value="jay">jay</option>
        </select>
      
  • <source>,为媒体元素(<video><audio>)定义媒体资源

    • media=”mediaQuery”,规定媒体资源的类型,供浏览器决定是否下载(浏览器都不支持)

    • src=”url”,规定媒体文件的URL

    • type=”MIME-type”,规定媒体资源的MIME类型

  • <style>,定义HTML文档的样式信息

    • media=”mediaQuery”,为样式规定不同的媒体类型

    • scoped=”scoped”,如果使用该属性,则样式仅仅应用到style元素的父元素及其子元素

    • type=”text/css”,规定样式的MIME类型

  • <summary>,为<details>元素定义一个可见的标题,当用户点击标题时会显示出详细信息

  • <td>,定义表格的一个单元格

    • colspan=”number”,规定单元格可横跨的列数

    • rowspan=”number”,规定单元格可横跨的行数

  • <textarea>,定义一个多行的文本输入域

    • autofocus=”autofocus”,规定当页面加载时,自动获得焦点

    • cols=”number”,规定文本区域可见的列数,推荐用CSS代替

    • disabled=”disabled”,禁用

    • form=”formID”,定义文本区域所属的一个或多个表单

    • maxlength=”number”,规定文本区域允许的最大字符数

    • name=”text”,规定文本区域的名称

    • placeholder=”text”,设置一个简短的提示,获得焦点时提示消失

    • readonly=”readonly”,设置为只读

    • required=”required”,设置为必填

    • rows=”number”,设置文本域可见的行数,推荐用CSS代替

    • wrap=”hard/soft”,规定当提交表单时,文本区域中的文本应该怎么换行

    • soft,提交表单时,文本不换行,默认值

    • hard,文本换行(包含换行符),当使用hard时,必须指定cols属性

  • <time>,定义公历的时间(24小时制)或日期,时间和时区偏移是可选的。

    datetime=”datetime”,规定日期/时间。另一种方式,则是由元素的内容给定日期/时间

    例:

          I have a date on <time datetime="2008-02-14">Valentines day</time>.
    

    I have a date on .

  • <track>,为媒体元素(<audio><video>)定义外部文本轨道

    • default=”default”,规定该轨道是默认的,如果用户没有选择任何轨道,则使用默认轨道

    • kind=”captions/chapters/descriptions/metadata/subtitles”,规定文本轨道的文本类型

    • label=”text”,规定文本轨道的标签和标题

    • src=”url”,必需的,规定轨道文件的URL

    • srclang=”language_code”,规定轨道文本数据的语言,如果kind属性值是subtitles,则该属性是必需的

  • <video>,定义视频,目录只支持三种格式的视频MP4, WebM, Ogg

    • MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器,MIME-type=”video/mp4”

    • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器,MIME-type=”video/webm”

    • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器,MIME-type=”video/ogg”

    • autoplay=”autoplay”,视频就绪后马上播放

    • controls=”controls”,设置显示控件,如播放按钮等

      浏览器控件应该包括,播放、暂停、定位、音量、全屏切换、字幕(如果可用)、音轨(如果可用)

    • height=”pixels”,设置视频播放器的高度

      设置视频的高度和宽度是一个好习惯,如果设置这些属性,在页面加载时会为视频预留空间,如果没有设置这些属性,那么浏览器就无法预先确定视频的尺寸,这样就无法为视频保留合适的空间,结果是,在页面加载过程中,其布局也会产生变化。注意,不要通过height和width来缩放视频,因为通过height和width属性来缩小视频,用户最后下载的还是原始大小的视频(虽然在页面上看起来较小),如果真想缩小视频,应该使用相关软件进行压缩。

    • loop=”loop”,设置循环播放

    • muted=”meted”,设置视频的音频输出为静音

    • poster=”url”,设置视频正在下载时显示的图像URL,直到用户点击插入按钮

    • preload=”auto/metadata/none”,设置视频在页面加载时进行加载,并预备播放,如果使用autoplay则忽略该属性

    • auto,指示一旦页面加载,则开始加载音频/视频

    • metadata,指示当页面加载后仅加载音频/视频的元数据

    • none,指示页面加载后不应加载音频/视频

    • src=”url”,要播放的视频的URL

    • width=”pixels”,视频播放器的宽度

      例:

        <video width="320" height="240" controls="controls">
          <source src="movie.mp4" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          您的浏览器不支持 HTML5 video 标签。
        </video>
      
  • <wbr>,设置文本中何处适合添加换行符