HTML CHEAT SHEET

  • WAI-ARIA(Web Accessibility Initiative’s [ɪˈnɪʃətɪv]倡议 Accessible Rich Internet Applications)
    • 无障碍网页倡议-无障碍的富互联网应用
  • Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

根元素

  • html
    • what is hypertext
      • In computing, hypertext is a way of connecting pieces of text so that you can go quickly and directly from one to another.

元数据

  • head
    • document.head
    • head 里面的子元素大概分为三类,分别是:
      1. 描述网页基本信息的
      2. 指向渲染网页需要其他文件链接的
      3. 各大厂商根据自己需要定制的
        • 比喻开启双核浏览器先河的360浏览器就定制了一个默认使用哪个内核来渲染页面,可以设置为webkit内核、IE标准,IE兼容三种模式。代码分别为:
  • title
    • 核心内容60个字符以内,包括空格,不同浏览器不一样
  • base
    • a 的默认不是 _blank 而是 _self
    • 可以 base target=’_blank’
<base href="www.baidu.com/">   
<base target="_blank">

<img src="KongFu.jpg">
  • link
    • link rel=”stylesheet” href=””
  • meta
    • http-equiv(把 content 属性关联到 HTTP 头部。)
      • content-type
      • expires
      • refresh
      • set-cookie
      • X-UA-Compatible(IE浏览器渲染引擎的指定)
        • //指定IE和Chrome使用最新版本渲染当前页面

        • 如果IE有安装Google Chrome Frame,那么就走安装的组件,如果没有就和一样。
        • Google Chrome Frame,官方的正式中文名称为“谷歌浏览器内嵌框架”,是Google推出的一款免费的Internet Explorer专用插件。
        • 使用Google Chrome Frame,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式浏览网页。Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中。
    • content http-equiv/name的值

    • name
      • author
      • description
      • keywords (,分隔)
      • generator
      • revised
      • others
      • viewport
        • meta name=”viewport” content=”width=device-width,user-scalable=no, initial-scale=1.0”
          • layout viewport
          • visual viewport
          • ideal viewport
        属性 属性描述
        width 设置layout viewport 的宽度,为一个正整数,或字符串”width-device”
        initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
        minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
        maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
        height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
        user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许
    • charset=”UTF-8”
      • gb2312 仅简体
      • gbk 包括繁体
  • style

脚本

  • script
    • script type=”text/javascript”
    • MIME application/ecmascript   application/javascript, text/javascript是默认,为了兼容性
    • script src=”…”
  • noscript
    • 不支持JS时   禁止了 JS 会显示显示替代的内容
  • template
    • template 标签的用途
    • 天生display:none
    • 拥有content属性
      • 判断支不支持 template 就用这个 if(‘content’ in document.createElement(‘template’))
    • 可以在 head 中,也可在 body 中 或者 frameset 中
    • .childNodes 无效
    • innerText 无效
    • .innerHTML 有效
    • 获取 template 内的 Element

        var template = document.getElementsByTagName('template')[0].content;
        var a = template.querySelectorAll('a')[0]; 
        或者
        var a = template.querySelector('a'); 
      
    • 怎么用:
      • 在使用之前,需要知道2个点。
        1. importNode()
          • importNode() 方法把一个节点从另一个文档复制到该文档以便应用。
        2. DocumentFragment
          • DocumentFragment是一个节点类型,代表轻量级的 Document 对象,能够容纳文档的某个部分,DocumentFragment 节点不属于文档树。
          • .content 就是指 这个 DocumentFragment

章节

  • body
    • width 可以设置的非常大
  • section
    • 一般性的区块,是具有相似主题的一组内容,通常包含一个标题
    • 例如新闻网站的分类
  • nav
    • footer 的全局导航性内容也放到 nav 中
  • article
    • 表示文档、页面、应用或网站中一个独立的容器
    • 可以是一片论坛帖子、一片杂志或报纸文章、一篇博客条目、一则用户提交的评论等 独立的内容项
    • artile 可以嵌套,
    • 可以包含 section
  • aside
    • 与主题内容相关性没有那么强,但可以独立存在
    • role = ‘complementary” 补充性内容, aside 要用这个
  • main
    • 一个页面仅使用一次
    • 最好 role = ‘main’
  • header
    • 也适合对于页面深处的一组介绍性或导航型内容进行标记,如 一个区块的目录
    • 如果使用 h1~h6 能满足需求,就不用 header
    • header 与 h1~h6 不能互换
  • footer
    • 只有页面级页脚才有 role = ‘contentinfo’
  • address
    • 有关作者、相关人士或组织的联系信息
    • 办公地点是错误的用法
  • h1~h6
  • hgroup

组织内容

  • p
  • hr
    • 设定了 height 后,可以设定 background 属性
  • pre
    • 内部的HTML标签仍是有意义的
  • blockquote
    • blockquote 与 /blockquote 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
    • 虽然主流浏览器都不支持blockquote 标签的 cite 属性,但搜索引擎可以通过此属性获取关于引文的更多信息。
    • cite属性 值为 URL, 规定引用的来源。
    • cite标签 是简要地“提及”,blockquote是忠实地一模一样地“引用”,即原封不动
    • quote,其是从拉丁文quotare来的,意思是how many,有多少。现代含义是to repeat exactly what someone else has said or written
    • 可以和 q 嵌套使用
  • ol
    • display:block;
    • -webkit-padding-start:40px
      • 即有默认的padding-left
    • type=”1/a/A/i/I”
    • start=”10”
    • reversed=”reversed”
    • list-style
      • list-style-type
        • 可以继承
      • list-style-position
        • inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
          • 不属于 li
          • 但是随着 li 移动,如给 li 添加 padding-left, 前导符也一起移动
        • outside
      • list-style-image
  • ul
    • type=”disc/square/circle”
    • display:block;
    • -webkit-padding-start:40px
      • 即有默认的padding-left
  • li
    • display:list-item;
  • dl
  • dt
  • dd
    • 有默认的 margin-left:40px;
  • figure
  • figcaption
<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="http://www.w3school.com.cn/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
  • div
    • division

文字形式

  • a
    • href 属性
      • a href=”tel:1860..”
      • a herf=”mailto:…”
      • a href=”javascript:while(1){alert(‘com’)}
    • rel 属性 规定当前文档与被链接文档之间的关系。
      • external 指向的是另外一个网站
    • download 属性 该属性也可以设置一个值来规定下载文件的名称
      • 如果链接指向文件, 有了这个属性就是下载了
      • 没有这个属性就是在 _self 上打开这个资源
    • 块级链接(block-level link)
      • 可以包含 div 等块级元素
      • 其他链接、视频、音频、iframe、表单元素 等交互式内容不可以
  • em
    • 斜体
    • 表示内容的着重点
  • strong
    • 粗体
    • 表示内容的重要性
  • small
  • s(用del代替)
  • cite
    • cite 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。按照惯例,引用的文本将以斜体显示。还应该把引用包括在一个 a 标签中
    • q是显示内容,而cite则是显示说这段内容的人名或是书名。
  • q
    • normal 字体
    • 自动加双引号
  • dfn
    • dfn 标签尽量少用为妙。作为一种通用样式,尤其在技术文档中,当第一次新的术语时,应该将它们与普通文本分开,这样读者可以更好地理解文章当前的主题,而从那以后就不要再对这个术语进行任何标记了。
  • abbr
    • 仅在第一次时,给出其全称,写在title 中 或 括号中
    • title属性,鼠标放上去的时候显示全称
    • text-decoration:underline dotted
  • time
    • datetime
    • pubdate
      • 指示
<p>我在<time datetime="2008-02-14">情人节</time>有个约会。</p>
<article>
<time datetime="2011-06-22" pubdate="pubdate"></time>
Hello world. This is an article....
</article>
  • code
    • 等宽字体
  • var
    • var 标签是计算机文档中应用的另一个小窍门,这个标签经常与 code 和 pre 标签一起使用,用来显示计算机编程代码范例及类似方面的特定元素。
  • samp
    • 用来定义计算机程序的样本文本
  • kbd

      说到技术概念上的特殊样式时,就要提到 <kbd> 标签。正如你已经猜到的,它用来表示文本是从键盘上键入的。
      浏览器通常用等宽字体来显示该标签中包含的文本。
      <kbd> 标签经常用在于计算机相关的文档和手册中。例如:
      键入 <kbd>quit</kbd> 来退出程序,或者键入 <kbd>menu</kbd> 来返回主菜单。
    
  • sub
    • 默认css
      • vertical-align:sub
      • font-size:smaller
      • 会轻微的增大行高
  • sup
    • 默认css
      • vertical-align:sup
      • font-size:smaller
      • 会轻微的增大行高
    • 脚注
  • i
  • b
  • u
  • mark
  • ruby
    • 红宝石
    • ruby annotation(注释,注解,标注)
    • 此ruby标签跟松本行弘开发的Ruby语言毫无关系。ruby标签常在东亚语言中,为文字增加拼音或者假名批注
    • ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。
  • rb是要注音的对象
    • 在英文mdn上才有
  • rt
    • 汉语拼音注释
<ruby>
    <rb>我是中国人</rb>
    <rp>(</rp>
    <rt>wo shi zhong guo ren</rt>
    <rp>)</rp>
</ruby>
  • rp
    • 用于在不支持 ruby 的浏览器中的旁注文本周围显示括号
    • 支持 “ruby” 元素的浏览器不会显示 “rp” 元素的内容。
<ruby>
    <rb>吉林大学</rb>
    <rp>(</rp>
    <rt>きつ りん だい がく</rt>
    <rp>)</rp>
</ruby>

    <p>邯郸
    <ruby>
        北<rp>(</rp><rt>bei</rt><rp>)</rp>
        京<rp>(</rp><rt>jing</rt><rp>)</rp>
    </ruby></p>
    

 rp:若浏览器不支持ruby那么上例就会依次显示rb rp rt rp rb内容在同一行。如果浏览器支持,那么rp内容不会显示。
  • bdi
    • chrome测试无果,68,兼容性差
  • dbo
    • dir=”rtl” 完全倒叙
<bdo>ni hao</bdo>
-> oah in

  • span
  • br
    • 对诗歌、街道地址
  • wbr
    • 代表一个可换行处

编辑

  • ins
    • datetime=”2018-05-02T21:56:42 +0800”
  • del
    • datetime=”2018-05-02T21:56:42 +0800”

嵌入内容

  • img
  • iframe
  • embed
    • 嵌入的内容,如插件
  • object
    • HTML5 中不支持 applet 标签。请使用 object 元素 标签代替。
  • param

  • video
    • autoplay controls loop preload muted(静音) src width height
    • preload 属性规定是否在页面加载后载入视频。 如果设置了 autoplay 属性,则忽略该属性
    • video 与 /video 之间插入的内容是供不支持 video 元素的浏览器显示的
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

  • audio
  • source
  • track
    • 为诸如 video 元素之类的媒介规定外部文本轨道。
    • 用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。
  • canvas
  • map
  • area
  • svg
  • math

Table 表格

  • table
  • caption
    • css 属性
      • caption-side
        • top 默认值。把表格标题定位在表格之上。
        • bottom 把表格标题定位在表格之下。
      • empty-cells
        • 除非 border-collapse 设置为 separate,否则将忽略这个属性。
        • hide 不在空单元格周围绘制边框。
        • show 在空单元格周围绘制边框。默认。
  • col
  • colgroup
    • span 规定列组应该横跨的列数。
<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>


<table width="100%" border="1">
  <colgroup span="2" style="background:green"></colgroup>
  <colgroup style="background:yellow"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>
  • tr
  • td
  • th
  • thead
  • tbody
  • tfoot

  • 注意
    • table 的 border 仅仅是最外层的那一个
    • td 的 border 才是 cell 的 border

表单(form 中的元素是inline元素)

  • form
    • action=
    • method=”get/post”
  • fieldset
  • legend
<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>
  • label
<form action="" method="get">
    <label for="username">UserName:</label>
        <input type="" name="user" id="username">
    <input type="submit">
</form>
  • input
    • display:inline-block
      • input texarea select button
button	        定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
checkbox	    定义复选框。
color	        定义拾色器。

date	        定义日期字段(带有 calendar 控件)
datetime	    定义日期字段(带有 calendar 和 time 控件)
datetime-local	定义日期字段(带有 calendar 和 time 控件)
month	        定义日期字段的月(带有 calendar 控件)
week	        定义日期字段的周(带有 calendar 控件)
time	        定义日期字段的时、分、秒(带有 time 控件)

email	        定义用于 e-mail 地址的文本字段
file	        定义输入字段和 "浏览..." 按钮,供文件上传
hidden	        定义隐藏输入字段
image	        定义图像作为提交按钮(提交时,会提交鼠标点击图片的位置坐标)

number	        定义带有 spinner 控件的数字字段
password        定义密码字段。字段中的字符会被遮蔽。
radio	        定义单选按钮。
range	        定义带有 slider 控件的数字字段。
                min=
                max=
reset	        定义重置按钮。重置按钮会将所有表单字段重置为初始值。

search	        定义用于搜索的文本字段。
submit	        定义提交按钮。提交按钮向服务器发送数据。
tel	            定义用于电话号码的文本字段。
text            默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。
url	            定义用于 URL 的文本字段。
  • button
  • select
  • datalist
<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

也可以用 <option value="ferrari">lam</option>,这样显示在一行中,左边是ferrari ,右边浅色字体显示lam
推荐只写 <option>,不写后边的那个结束标签
  • option
  • optgroup
    • 把相关的选项组合在一起
<select>
  <optgroup label="Swedish Cars">
    <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>
  • textarea
    • cols=”4”
    • rows=”10”
  • keygen 密钥对生成器控件
  • progress 进度条
    • IE9 不支持
    • 支持的浏览器,标签间的文字不会显示出来,不支持的会显示出来
<progress value="22" max="100"></progress> 
  • output
    • 执行计算然后在 output 元素中显示结果:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form>
  • meter
    • IE9 不支持
    • 类似 progress
    • 支持的浏览器,标签间的文字不会显示出来,不支持的会显示出来
form	form_id	规定 <meter> 元素所属的一个或多个表单。
high	number	规定被视作高的值的范围。
low	number	规定被视作低的值的范围。
max	number	规定范围的最大值。
min	number	规定范围的最小值。
optimum	number	规定度量的优化值。
value	number	必需。规定度量的当前值。

Form属性

alt			text			定义图像输入的替代文本。
autocomplete    	on/off 			规定是否使用输入字段的自动完成功能。
autofocus		autofocus		规定输入字段在页面加载时是否获得焦点。
checked			checked			规定此 input 元素首次加载时应当被选中。

height			pixels/%		定义 input 字段的高度。(适用于 type="image")
width			pixels/%		定义 input 字段的宽度。(适用于 type="image")

max			number date		规定输入字段的最大值。
min                     number date		规定输入字段的最小值。请与 "max" 属性配合使用,来创建合法值的范围。

maxlength		number			规定输入字段中的字符的最大长度。

size			numbh    number  规定被视作高的值的范围。
417 low number  规定被视作低的值的范围。
418 max number  规定范围的最大值。
419 min number  规定范围的最小值。
420 optimum number  规定度量的优化值。
421 value   number  必需。规定度量的当er_of_char	        定义输入字段的"显示"宽度(大写字母)。没卵用,css width 更好用

multiple		multiple		如果使用该属性,则允许一个以上的值。
pattern			regexp_pattern	        规定输入字段的值的模式或格式。
	                                        例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。

placeholder		text			规定帮助用户填写输入字段的提示。

readonly		readonly		规定输入字段为只读。
disabled		disabled		当 input 元素加载时禁用此元素。

required		required		指示输入字段的值是必需的。
step			number			规定输入字的的合法数字间隔。

form			formname		规定输入字段所属的一个或多个表单。
list			datalist-id		引用包含输入字段的预定义选项的 datalist 。

交互

  • details
    • 兼容性差
  • summary
    • details>标记常与summary标记配合使用。在默认情况下,不显示details中的内容。当与summary标记配合使用时,在单击summary标记后才会显示datails元素中设置的内容。
  • menu
  • menuitem
    • 这两个标签兼容性很差,只有 firefox 使用

字符编码

  • gb2312:只包含简体中文字符集
  • gbk:包含繁体中文
  • lang
    • lang=”zh-cmn-Hans”
    • lang=”zh-cmn-Hant”

块级元素 行内级元素

  • p 不能嵌套 div, p 会被 div 裁成 2 个
  • a 不能嵌套 a

mass

  • 检验 HTML5 CSS3 支持性
    • Modernizr JS库
  • web 超文本应用技术工作组(WHATWG),在负责开发 HTML5 规范的大量内容
  • 规范(specification 缩写为 spec) 标准文档

  • 空元素(empty element 或 void element) 不包含文本,也不包含其他元素,单标签
    • 可选的 空格 和 ‘/’
  • 元素,属性,值
    • 值 不需要写单位,默认为像素
    • 布尔属性(Boolean attribute) 值是可选的
  • 文件名,文件夹名 用 ‘-‘ 分割,而不要用 ‘_‘,SEO 对 ‘-‘ 支持地更好
  • URL
    • 相对URL
      • 普通相对URL
      • 根相对URL
  • 语义化(semantics)

  • 每个页面都应该有一个 h1(或这多个 h1)

  • HTML5 将行内级元素称为 短语内容(phrasing content)

  • utf-8, no BOM

  • 不要使用 h1~h6 标记副标题、标语等 无法成为独立标题的子标题

  • 处于 SEO 的目的,最好将重要的内容放在前面,使用 css 改变它们在浏览器中的显示顺序

  • role 地标角色,不要在页面上过多的使用地标角色

小例子

  • 地址栏图标

      <link href="/images/favicon.ico" rel="shortcut icon" />
    
    • 这里的favicon建议是16x16或者32x32的,必须是8位色或者24位色的,格式必须是png或者ico或者gif。 16x16/32x32 且 8位或24位色 且 png/ico/gif。
    • “shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词(“shortcut”将被忽略,而仅适用“icon”);而Internet Explorer将会把它作为一个单独的名称(“shortcut icon”)。
    • 注意:当favicon.ico被置于文档根目录时,将会被一些不处理link元件的浏览器找到,即使没有您的站点上没有指向它的链接。

    • 详情

自定义 emmet.vim 快捷键

  • 具体步骤和参考链接
    1. 根据 emmet.vim 的描述,自定义需要安装 web-api for emmet
    2. web-api 的安装
      1. 利用 vim 的包管理工具 vundle 下载安装
        1. installed the web-api for emmet-vim
          • Plugin ‘mattn/webapi-vim’
          • 进入vi, :PluginInstall //众所周知的原因,比较慢
      2. 手动下载 web-api 包进行安装 * https://github.com/mattn/emmet-vim, 更名为 ‘emmet-vim’ 放入 .vim/bundle/下 * 进入 vi, :PluginInstall
    3. 创建 自定义的 快捷方式
      1. 创建 自定义快捷键 文件
        • touch ~/.snippets_custom.json (文件名可按照自己的需求定义)
      2. 添加自定义快捷键内容 Adding custom snippets

         1. 自定义示例-IE调用最新的渲染引擎进行渲染
         {
             "html" : {
                 "snippets" : {
                     "meta:win": "<meta http-equiv=\"Content-Type\" content=\"text/html;charset=windows-1251\" />",
                     "meta:edge": "<meta http-equiv=\"X-UA-Compatible\" content=\"${1:ie=edge},${2:chrome=1}\" />"
                 }
             }
         }
        

        语法请参阅 https://docs.emmet.io/customization/snippets/

        保存退出

    4. 修改 ~/.vimrc 配置文件(如果没有则创建之)
      • let g:user_emmet_settings = webapi#json#decode(join(readfile(expand(‘~/.snippets_custom.json’)), “\n”))
      • 保存退出
    5. 此时编辑 HTML 文件,即可实现自定义快捷键

    更多示例参考

      • 本人验证 直接在 .vimrc 中设置 custom snippets 的方式不能正常运行(可能本人不太熟悉vim 脚本编写吧)

          let g:user_emmet_settings = {
              "html" : {
                  "snippets" : {
                      "meta:win": "<meta http-equiv=\"Content-Type\" content=\"text/html;charset=windows-1251\" />",
                  }
              }
          }
        
      • 设置 meta:360 遇到的问题

          "meta:360":"<meta name=\"renderer\" content=\"${1:webkit} ${2:ie-stand} ${3:ie-comp}\" />"
        
          Escaping | and $ characters
          The $ character is used for tabstops and variables, the | character it used to indicate caret position when snippet is expanded. If you want to output these characters as-is, you should use double backslash to escape them: \\$ or \\|
                    
          但是 \\$ 可以,\\| 却是空格
        

HTML 属性

  1. tabindex
    • 适用元素
      • focusable元素
      • a, area, button, input, object, select 以及 textarea
    • 1 是第一个,不是零