html5基础知识

html5

<!DOCTYPE>标签
html5只有一种,即:
<!DOCTYPE HTML>

示例:
<!DOCTYPE html>
<html>
<head>
<title>html5_title</title>
</head>
<body>
html5内容
</body>
</html>
---------------------
<a>标签
download属性,下载指定的文件(lin.gif),且下载的文件名为 lin3615.gif
示例:
<a href="images/lin3615.gif" download="lin3615.gif">
<img src="lin.gif" />
</a>

media属性

type属性,规定目标文档的MIME类型
示例:
<a href="http://www.lin3615.net/" type="text/html">lin3615</a>
-----------------
<article>标签
规定独立的自包含的内容(只是一种标记而已)
示例:
<body>
<article>
<h1>hhhh</h1>
<p>pppp</p>
</article>
</body>
---------------------
<aside>标签
定义其所处内容之外的内容(一种标记而已)
示例:
<body>
<p>ppp</p>
<aside>
<h3>hhhhh</h3>
hhhhh 的详细解释
</aside>
</body>
-----------------
<audio>标签
定义声音内容
示例:
<body>
<audio src="myvoice.ogg" controls="controls">
当浏览器不支持时将显示的内容
</audio>
</body>
其中属性列表:
autoplay="autoplay"
则音频在就绪后马上播放

controls="controls"
则向用户显示控件,如播放按钮

loop="loop"
则每当音频结束时重新开始播放

muted="muted"
视频输出应该被静音

preload="preload"
音频在页面加载时进行加载,并预备播放,如果用 "autoplay",则 preload 被忽略

src="url"
要播放的音频的 url
---------------------
<button>标签,建议用 input代替
属性列表
autofocus="autofocus"
当页面加载时按钮应当自动获得焦点

form="form_name"
按钮属于一个或多个表单

formaction="url"
覆盖 form元素的 action属性,与 type="submit"配合使用

formenctype=""
覆盖form元素的 enctype属性,与 type="submit"配合使用

formmethod="get" / "post"
覆盖 form元素的 method属性,与 type="submit"配合使用

formnovalidate="formnovalidate"
覆盖form元素 novalidate属性,与 type="submit"配合使用

formtarget="_blank/_self/_parent/_top"
覆盖 form元素的 target属性,与 type="submit"配合使用
--------------------
<canvas>标签(大学问)
用来定义图形,只是一个图形容器,必须使用脚本来绘制图形
<body>
<canvas id="myCanvas">
浏览器不支持
</canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx = canvas.getContent('2d');
ctx.fillStyle='#ff0000';
ctx.fillRect(10,10,80,100);
</script>
</body>
-------------------------
command命令按钮,只有ie9支持
------------------------
<datalist>
定义下拉列表,与 input 结合,datalist及其选项不会被显示出来,仅仅是合法的输入值列表,使用 input元素的 list属性来绑定 datalist
示例:
<body>
<input list="cars" />
<datalist id="cars">
    <option value="1111"></option>
    <option value="2222"></option>
    <option value="3333"></option>
</datalist>
</body>
---------------------
<dialog open="open">标签
用户交互的,只有 safari/chrome支持
-------------------
<embed>标签
定义外部交互内容或插件
属性表:
height: 设置嵌入内容高度
src:url 嵌入的内容 url
type:定义嵌入内容的 类型
设置嵌入内容宽度
示例:
<body>
<embed src="ok.swf" />
</body>
-------------------
<figure>  <figcaption>标签
<figure>:定义媒介内容的分组,以及其标题,与 figcaption 定义标题结合
<figcaption>:定义 figure元素的标题, figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置
示例:会缩进
<body>
<p>ppppp</p>
<figure>
  <figcaption>标题</figcaption>
    <img src="" />
</figure>
</body>
----------------
<footer>标签
定义 section 或 page 的页脚,文档中的页脚部分,里面应该包含别的元素
示例:
<body>
<footer>
<p>这是页脚部分</p>
</footer>
</body>
--------------------
<form> 标签
属性:
autocomplete="on" / "off" 规定是否启用表单自动完成功能
novalidate="novalidate":如果使用该属性,则提交表单时不进行验证
----------------
<header>标签
定义 section 或 page 的页眉
示例:
<body>
<header>
<p>this is header content</p>
</header>
</body>
------------------
<input>
属性:
autocomplete=on/off 规定是否使用输入字段的自动完成功能,默认 on
<body>
<form autocomplete="on">
<input type="text" name="xx" value="" />
<input type="email" name="email" autocomplete="off" />
<input type="submit" />
</form>
</body>
当在 email 中输入不合法的 email后,点击提交,会提示要求输入正确的 email,不让提交

autofoucs="autofocus":规定输入字段在页面加载时是否获得焦点

form="formid":规定输入字段所属的一个或多个表单
as:(t2也作为 form表单提交的一个元素值)
<body>
<form id="form1">
<input type="text" name="t1" />
<input type="submit" />
</form>
<input type="text" name="t2" form="form1" />
</body>

formaction="url" 覆盖 action中的url
同理
formenctype, formmethod, formnovalidate, formtarget
height="value"定义input字段的高度,适用于 type="image",单位为像素
同理: width

list 引用包含输入字段的预定义选项 datalist
as :
<body>
<form>
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="www" value="http://www.xxx.com" />
<option label="shop" value="http://shop.xxx.com" />
</datalist>
<input type="submit" />
</form>
</body>
点击输入 w时会提示 www,选择www时会自动填充 http://www.xxx.com

max="" min="" 最大值,最小值
as:
<form>
<input type="number" max="100" min="1" />
<input type="submit" />
</form>

multiple="multiple" 允许同时使用多个值
as:同时选择多个即可
<form>
<input type="file" value="" multiple="multiple" />
</form>

pattern:输入值的模式和格式
as:(数字)
<input type="text" name="tt" pattern="[0-9]*" />

placeholder="text" 帮助用户填写输入字段的提示信息
as
<input type="" name="" placeholder="输入你的内容" />

required="required"
提示规定输入字段的必需的
as:
<input type="" name="" required="required" />

step="numbervalue" 规定输入字的合法数字间隙
as:(点击一次,增加或减少3)
<input type="" value="" name="" step="3" />
--------------
<mark>标签
定义有记号的文本,突出显示部分文本
as:
<body>
aa bb <mark>ccc</mark>
</body>
--------------
<meter> 标签
使用 meter 元素来度量给定范围内的数据
as:
<body>
<meter value="3" min="0" max="10"></meter>
<meter value="0.6">60%</meter>
</body>
属性
form=form_id:规定 <meter>元素所属的一个或多个表单
height=number: 规定被视作高的值的范围
low=number: 规定被视作低的值的范围
max=number:规定范围的最大值
min=number:规定范围的最小值
optimum=number:规定度量的优化值
value=number 规定试题的当前值
----------------------
<nav>标签
定义导航链接
<body>
<nav>
<a href="">Home</a>
<a href="">Prev</a>
<a href="">Next</a>
</nav>
</body>
--------------
<progress>定义任何类型的任务进度
属性:
max=number:规定任务一共需要多少工作
value=number:规定已经完成多少任务
as:
<body>
<progress value="50" max="100"></progress>
</body>
-----------------
<section>
文档中的区段,比如章节,页眉,页脚等
as
<body>
<section>
  <h1>RMB</h1>
  <p>这是钱的解释</p>
</section>
</body>
--------------------
<select>
属性:
autofocus="focus"
form="form_id"
required="required" 规定文体区域是必填的
------------------------
<source>
定义媒介源
属性:
media="" 规定媒体资源的类型
src=url: 规定媒体文件的URL
type="" 规定媒体资源的 MIME类型
as:
<body>
<audio controls>
<source src="xx.mp3" type="audio/mpeg">
<source src="xx.ogg" type="audio/ogg">
你的浏览器不支持
</audio>
</body>
优先考虑支持的,如果两个都不支持,则显示文本
-------------
<textarea>
属性:
autofocus="autofocus"
form=form_id
maxlength=number
placeholder="text":描述文本区域预期值的简短提示
required="required"
wrap="hard/soft" : 规定当前表单元素中提交时,文本区域中的文本如何换行
-------------------
<time>
定义日期/时间
as:
<body>
<p>afsd<time>9:00</time></p>
<p>xzdf <time datetime="2014-09-03">Now</time></p>
</body>
-------------
<video>
定义视频
属性:
autoplay="autoplay"
controls="controls"
height="pixels": 设置视频播放器的高度
loop="loop":是否播放完后循环播放
muted="muted": 规定视频的音频输出应该被静音
poster="url": 规定视频下载时显示的图像,或者在用户点击播放按钮前的图像
preload="preload": 加载前进行预载,如果有 autoplay出现,则忽略
src="url":播放视频的 URL
width="pixel":设置视频播放器的高度
--------------------




原文地址:https://www.cnblogs.com/lin3615/p/3947208.html