HTML5学习笔记

标签变化

DOCTYPE标签：指示浏览器关于页面使用哪个HTML版本进行编写的指令，必须是HTML文档的第一行，在html标签之前。

常用版本：HTML 4.01 strict、HTML 4.01 Transitional、HTML 4.01 Frameset、HTML5

1
2
3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">

DTD(文档定义类型)：简单来说DTD为使用XML语言定义html标签规范(html5无需引用DTD)

新增标签

1. 结构标签:有意义的div

<article>---定义一篇文章
<header>---一个页面或区域的头部
<nav> ---导航栏
<section>---定义一个区域
<aside>---定义区域中的侧边栏
<hgroup>---定义文件中一个区域的相关信息（h1-h6标题的集合）
<figure>---定义一组媒体内容及标题
<figcaption>---figure元素的标题
<footer>---一个页面或区域的底部
<dialog>---定义一个对话框

注意：

1.不要嵌套header/section/aside/article/footer
2.级别顺序：header/section/footer > aside/article/figure/hgroup/nav > dib/figcaption

2.多媒体标签

audio标签
<audio src="" autoplay="autoplay" loop="-1" controls="controls"></audio>

1
2
3

<audio autoplay="autoplay">
    <source src=".mp3" type="audio/mpeg">
</audio>

注：autoplay自动播放 / loop循环次数(-1为无限循环) / controls控制进度及声音
对于不兼容audio标签的浏览器需用文字提示

video标签(用法与audio相似，可以控制宽高)
<video controls="controls" width=" " height=" ">…</video>

embed标签：定义外部的可交互的内容或插件，如flash
<embed src="" width=" " height=" ">…</embed>

3.状态标签

meter标签【兼容chrome.opera】
<meter value=" " min=" " max=" " low=" " high=" " optimum=" "></meter>

若不定义最值则自动计算：
<meter value="0.75">75%</meter>
注：value为设定值 / min-max为阈值 / low-high为适当值 / optimum为最佳值

progress标签【兼容chrome.火狐.opera】
<progress value="" max="">

不规定固定值则表现为正在加载
<progress max="100">

4.列表标签

datalist标签：为input标记定义一个下拉列表配合option【兼容火狐.opera】

<input placeholder=" " list=" "/>
<datalist id="与input的list一致">
    <option value=" ">…</option>
</datalist>

注：placeholder为输入框中默认文字，可以在下拉框中选择，也可以输入选择或输入不存在的选项

details：定义一个元素的详细内容配合summary

1
2
3

<details open="open">
    <summary>展开全文</summary>
</details>

注：summary用于修改默认的’详细信息’文字 open=”open”为开启展开，默认不开启

5.注释标签

ruby标签：定义注释或音标
rt标签：定义对ruby的注释内容
rp标签：告诉不支持ruby标签的浏览器如何显示

1	<p>………<ruby>夼 <rp>(</rp> <rt>kuang</rt> <rp>)</rp> </ruby></p>

6.其他标签

mark标签：定义有标记的文本（黄色选中）
output标签：定义一些输出类型计算表单结果配合oninput事件

<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
<input type="text" id="price" value="5000">*
<input type="number" id="number" value="1">=
<output name="totalPrice" for="price number"></output>

删除的标签

纯表现元素：Basefont、big、center、font、s、strike、tt、u
产生负面影响的元素：frame、frameset、noframes(可以用iframe)
产生混淆的元素：acronym、applet、isindex、dir

重定义标签

<b>--只是粗体，不传递表示重要的意思
<i>--只是斜体，不传递表示重要的意思
<dd>--可以用details与figure一同使用，定义文本，dialog也可以用
<dt>--汇总细节
<hr>--表示主题结束而不是水平线（显示相同）
<menu>--重新定义用户界面菜单，配合commond或menuitem使用
<small>--表示小字体
<strong>表示重要性但不强调

属性变化

input属性变化

email、url、tel、number
注：number在pc端只能在文本框里输入0123456789+-.e
其他为手机键盘的变化

Date Pickers Input类型
date、month、week、time、datetime、datetime-localtime
date:<input type="date" name="date">

Range Input类型
<input type="range" name="range" min="1" max="10">
<input type="search" name="search">
<input type="color" name="color">

表单属性

1.autocomplete属性：form或input域拥有自动完成功能（记忆输过的内容）
<form action=" " autocomplete="on">
<form type="name" autocomplete="off">
默认开启关闭需要off

2.autofocus属性：页面加载时，域自动获得焦点（适用所有input）
<input autofocus="autofocus"/>

3.multiple属性：规定输入域可有多个值/可选多个文件（适用input中的email和file）
<input multiple="multiple"/>
多个邮箱之间要用；隔开

4.placeholder属性：提示描述输入域所期待的值（灰色）
<input type="text" name="text" placeholder="提示语">
适用input标签的type为：text、search、url、tel、email、password

5.required属性：规定必须在提交之前填写内容，不能为空
<form type="text" required="required"/>
适用input标签的type为：text、search、url、tel、email、password、date、pickers、number、checkbox、radio、file

链接属性

size(分辨率)：
<link rel="icon" href=" " type="image/gif" size="16*16">

targete
<base href="http://localhost/" target="_blank(默认_self)">

超链接
a:media=” “ handhelp手持设备 tv电视设备

a:hrefang=”zh” 设置语言 zh中文 zh/cn简体 zh/uk繁体 zh/tw台湾 en英文

a:rel=”external” 设置超链接引用这里为外部链接

其他属性

script

1 2	<script type="text/script">直接编写</script> <script type="text/script" src=" ">引入链接文件</script>

script的defer属性：加载完脚本不执行，而是等整个页面加载完再执行，只在IE兼容
<script defer="defer">

script的async属性：加载完脚本立刻执行，不用等整个页面加载完，属于异步执行，兼容主流浏览器
<script async="async">

ol有序列表

start起始值 Reversed倒叙
<ol start="10" reversed> <li> </li> </ol>

manifest=”cache.manifest”
<html manifest="cache.manifest">

简述API

API是一些预先定义的函数

简述canvas

canvas用于在网页上绘制图形（使用JavaScript）

Hexo

PART1-HTML