本文深入解析HTML5中的关键元素与属性，包括DOCTYPE声明、基本元素、语义相关元素、表单控件、多媒体元素及绘图功能。涵盖<a>、<img>、<table>等标签的使用技巧，及<canvas>、<audio>、<video>的多媒体应用。
以前对HTML有所学习，最近公司要使用，再次学习一边。此笔记是看《疯狂HTML 5+CSS 3+JavaScript讲义》后的个人笔记
1.<!DOCTYPE HTML> DOCTYPE声明（声明内容没有DTD地址，说明H5是妥协式规范）
2.<html>与<head> ,<head><body> ,<body><html>不要插内容
3.checked , readonly , disabled ,selectd写法，下面都可以
defer,ismap,nohref,noshade,nowrap,multiple,noresize
<input checked type="checkbox">
<input checked="true" type="checkbox">
<input checked="checked" type="checkbox">
<input checked="" type="checkbox">
4.允许属性值不使用引号，标签不区分大小写(不建议)
<img src=a.gif alt=test>
5.基本元素
<h1>-<h6>
<p>段落,换行
<span> 不换行
<div> 换行
<b>粗体
<i>斜体
<em>定义强调文本
<strong> 粗体文本
<small> 小号字体文本(注意事项、版权、法律规定)
<sup> 上标文本
<sub> 下标文本
<bdo> 本文显示的方向
通用属性:id,class,style,title,dir等
dir="ltr"/"rtl"指定文本的排列方向
eg:<bdo dir="rtl">12345qwe</bdo>
6.语义相关元素
<abbr> 表示一个缩写 ，指定一个title，表示该缩写的全称
<address> 表示一个地址
<blockquote> 一段长的引用文本 cite属性，指定url,文本的出处
<q> 定义一段短的引用文本，浏览器会自动引用文本添加引号
<cite> 表示作品，自动加斜体
<code>
<dfn> 定义一个专业术语
<del>删除的文本
<ins>插入的文本
<pre> 保留此元素内文本所有的Tab,空格，其他格式都会保留下来
<samp> 定义示范文本
<kbd>定义键盘文本
<var> 表示一个变量
7.<a>
href
hreflang: 所链接的文档所使用的语言
target: _blank 自身, _top新 ,_parent父框架来装载新资源
download="test.jpg" 点击直接下载，不打开。内容为下载时的名字
type 文档的MIME类型
media url所指的媒体类型，默认All
锚点：<a name="top"></a>
定位锚点:<a href="#top"/>
8.列表元素
<ul> 无序
<ol> 有序 start="1"/"A"等 type="1"/"a"/"A" /"I"/"i"(罗马数字)
<li>
<dl><dt><dd>
9.<img>
src alt="图片加载"
width height
<img> <map> <area>：图片不同区域显示不同链接 (不深入了解)
10.表单
一个<table>最多一个<caption>,<head><tfoot>
<table>
cellpadding 单元格内容与单元格边框距离
cellspacing 单元格之间距离
width 表格宽度
<caption> 定义表格标题
<tr>
<td>
colspan 单元格跨多少列
rowspan 跨多少行
height 单元格高 可以是百分比 (建议放到css中)
width
<th>
<tbody> ：<tr><td>
<thead>：一般放标题 <tr><th>
<tfoot>:一般放统计信息 <tr><td>
他们顺序是：thead ,tfoot ,tbody
<!--在thead之前指定，指定thead与tbody中整体列的属性-->
<colgroup style="">
<col style="width:16px">
<col style="width:100px">
</clogroup>
11.<iframe>
框架集:在一个页面嵌套另一个页面
src :url
name
scrolling: true/false
height
width
frameborder:是否显示边框
srcdoc属性
直接指定HTML片段
eg:
<iframe src="1.html" width="" height="" srcdoc="<h3>HTML</h3>">
</iframe>
---常用属性---
12.dir
内容的排列方向，值:ltr/rtl
eg: <div dir="ltr">this is the test</div>
13.title，
当鼠标focus时，会显示小标题
常与<a>，<abbr>使用
14.lang
告诉搜索引擎和浏览器，网页的语言
value= zh/en/fr/ja...
eg:<html lang="zh">
<div lang="en">this is the test</div>
15.accesskey
此属性激活改元素的快捷键
eg:<input name="name" type="text" accesskey="p"/>
ALT+p快捷键
16.tabindex
浏览器可以通过tab按键，切换焦点。此属性控制窗口、HTML元素获得焦点的顺序
此属性主要对：<a>,<button>,<input>,<select>等元素使用
eg:
<a href="#" tabindex="2"></a>
<a href="#" tabindex="1"></a>
<a href="#" tabindex="3"></a>
17.contentEditable
contentEditable = "true"/"false"
可以使元素可以编辑
eg:<div contentEditable="true">qqqq</div>
18.designMode
值：on/off
相当于一个全局的contentEditable属性，当为on,所有的可编辑元素都可编辑
设在body上
19.hidden
true/fasle
20.spellcheck
true/false
当有单词拼错时，提示
用在：input/textarea等输入元素
<!--其他元素-->
21.<article>
内部可以使用的元素：
<header>标题
<footer>脚注
<section>把文章分成块
<atticle>附属别的文章
22.<nav>与<aside>
<nav> 定义页面上的导航条 导航信息
<aside>定义当前页面或文章的附属信息，边栏信息
<body>
<aside>
<div></div><div></div>
</aside>
<body>
23.<main>
改元素用于包含除导航条、Logo、版权外其他主要信息
24.<figure>与<figcaption>
<figure> 表示一个图片区域
<figcaption>表示figure图片区域的标题
25.<mark>、<time>、<detail>、<summary>
<mark>表示需要重点关注的内容
<time>标注的是日期时间等
属性:datatime向机器提供时间,要符合yyyy-MM-ddTHH:mm格式
pubdate:true/false 是否为发布时间，为搜索引擎提供
<detail>用于显示一段详细信息或某个主题的细节
<summary>是detail的摘要信息
<detail>
<summary>摘要</summary>
this is the test
</detail>
26.ruby,rtc,rb,rt,rp
用于为东南亚文字定义注释,如:在两个字上加上拼音
27.bid
有时候浏览器会自动确定文字的方向，可能打乱布局，
用<bid>将这一段在上下文中隔离出来
<li><bid>孙悟空</bid>20不</li>
28.wbr
一段文本告诉浏览器在合适的时候可以进行换行,是否换行由浏览器决定
eg:..,长文本:inter<wbr>national<wbr>ization
29.menu与menuitem
<menu>用于定义菜单，<menuitem>用于定义菜单项
<menu>：
label="标题" :menu标题
type
<menuitem>
type:command,checkbox,radio
label
icon
disabled:表示菜单是否可用
checked:type为checkbox与radio时使用
radiogroup:但选组，type为radio时使用
default:指定该菜单是否为默认菜单项
30.H5头部和元信息
<header>中的元素
<script>
<noscript>:表示页面不支持脚本
<style>
<link> :css连接资源
<title>
<base>:用于指定该页面中所有链接的基本路径
<meta>：用于定义HTML页面的元数据
<link>
href hreflang（语言）media（资源适用于哪些设备，默认all） rel(文档与链接资源关系) size type(资源MIME类型)
rel=：stylesheet，icon，license，copyright，author,prefetch等
type= "text/css"
eg：
<link href="1.css" rel="stylesheet" type="text/css">
<link href="java.ico" rel="shortcut icon" type="image/x-icon">
<header><link href="1.html" rel="prefetch" type="text/html"/></header>
<body><a href="1.html"/></body> <!--预先加载1.html页面-->
<base>
设置基本路径
属性href = url地址 target= _blank/_parent/_self/_top
eg:
<header><base target="_blank" href="http://www.baidu.com" /></header>
<body><a href="index.html"/></body>
当点击a标签的时候，打开的路径是：http://www.baidu.com/index.html
<meta>
定义页面元信息
属性：
http-equiv:元信息的名称，具有特殊意义，帮助浏览器正确处理页面内容
name:元信息的名称
content:元信息的值
charset:页面的字符集
eg:
name= author/website/copyright/Keywords
<meta name="author" content="xichuan">
<meta charset="utf-8">
http-equi属性值：
http-equi="expires" content="1998..." 指定页面过期时间
http-equi="pragma" content="no-cache" 禁止浏览器从本地获取页面内容，无法脱机访问
http-equi="refresh" content="2" 指定浏览器多长时间后自动刷新指定页面
http-equi="set-cookie" content="1998..." 设置cookie过期时间
http-equi="content-type" content="text/html" charset="utf-8" 设置内容类型以及所用的字符集
31.H5的拖放API
可拖动并携带数据 需要添加draggable属性，并监听dataTransfer事件
<div id="source" draggable="true">this is the test</div>
<script type="...">
var source = doc.getEleById("source");
source.ondragstart = function(ect){
evt.dataTransfer.setData("text","drag data is best!!!");
}
</>
可以放入，为document的ondragover时间指定监听器，并取消document对拖动事件的默认行为
document.ondragover = function(evt){
return false;
}
拖动触发到事件：
ondragstart
ondrag
ondragend 结束
ondragenter 拖动元素进入本元素范围
ondragover 拖动元素进入
ondragleave 拖动元素离开本元素
ondrop 刚放入时触发
拖动触发的拖放事件有一个dataTransfer属性(比较高级,后面在深入了解 67页)
<!----------------------------------------------->
表单相关的
<form>属性
action
method = post/get
enctype 指定编码所使用的字符集 eg：application/x-www-urlencoded 处理value属性，multipart/form-data 二级制流的方式处理
name
target 指定哪种方法打开url ...
表单控件有disabled时，不生成请求参数
空间可以分别设置tabIndex属性(焦点顺序)
<input>属性
checked,disabled,maxlength(数字)，readonly,size(数字，范围)
src,width,height（图片）
<label>属性
for属性，指定是谁的标签
<label for="username">，名字</label>
<input id="username" name="name" type="text"/>
<button>
diabled,name,value,type="button/reset/submit"
<select>与<option> 下拉框与选项
<select> : disabled,multiple:是否支持多选 ， size
<option> : disabled,selected,value
<optgroup>: label（标签，必填），disabled
eg：
<select id="" name="" multiple="multiple" size="2">
<option>1</option>
<optgroup label="其他">
<option></option>
</optgroup>
</select>
<rowarea>属性
cols 宽度
rows:高度
disabled
readonly
maxlength:最多字符
wrap:=soft/hard ,hard当超过cols时，提交自动添加一个换行符
<fieldset>与<legend> 元素分组与组标题
<fieldset>属性
name,disabled，form（formId，表明此分组属于此表单）
<legend>标题</legend>放在<fieldset>里面
不常用属性:
<button>的formaction:不用的按钮提交不同的action
eg:<button formaction="register"/> button formaction="login"/>
formenctype:改变表单的enctype属性
formmethod="get/post" 改变表单的提交方式
formtarget="_blank..."
autofocus属性：在页面打开是，组件自动获取焦点
placeholder属性：提示信息
list属性: 它必须和<datalist>组件结合使用
<form>
<input type="text" list="books">
</form>
<datalist id="books">
<option></option>
<option></option>
</datalist>
autocomplete属性：=on/off 根据上次提交，显示上次输入
<input type="text" autocomplete="off"/>
<label>的control属性 label->获取对应的表单元素
在js中访问<label>元素对应的表单元素
eg:
<label id="lb1">name<input type="text" name="name"/></label>
document.getElementById("lb1").control.value="test"';
表单元素labels属性，表单元素->获取label元素
<label id="lb1">name<input type="text" id="name" name="name"/></label>
<label id="lb2">name<input type="text" id="password" name="password"/></label>
document.getElementById("name").labels[0];
文本框的selectDirection属性：="foeward"/"backward"
用于获取用户选取文字的方向,默认是forward
<label id="lb1">name<input type="text" name="name"/></label>
document.getElementById("lb1").control.selectDirection;
复选框的indeterminate属性="on/off"
=on时，表明复选框是一种不确定的状态
其他input元素
color 颜色选择器 返回到value颜色值
date 日期选择器
time 时间选择器
datetime-local 本地日期、时间选择器
week 选择第几周的文本框
month 月份选择框
这六种特有的属性:
min="" 最小值
max="" 最大值
step="" 指定日期、时间的步长
valueAsDate 主要在js中使用，获取到1970经过了多少毫秒
input另外元素
email
tel
url
number
range
search
<optput>元素 ：用在显示color和range元素值等
for属性 指定该元素将会显示哪个或哪些元素的值
eg:
<input type="range" name="name" min="0" max="100" step="5" onchange="b.value=this.value"/>
<output name="b" for="name"/>
<meter>元素 表示一个已知最大值和最小值的计数表
属性:
value,min,max
low :大于min 当value大于low时，计数表才会动(需要测试看结果)
high
optimum: 指定计数表有效范围的最佳值
<progress>元素 进度条
max value
<keygen>元素 用于生成公钥和秘钥对
name 指定表单元素的名称
keytype 算法类型
disabled 是否禁用
输入校验
加入属性：required，pattern="\d{3}-\d{3}", min,max,step(数字，日期时可以使用)
checkValidity()方法
setCustomValidity()方法自定义校验
在form表单中的<button>添加formnovalidate属性时，来关闭表单校验
<!-----------------先不看，用到不多--------------------------------------->
绘图
<canvas> 画布
属性：hidden,width,height
在js使用CanvasRenderingContext2D对象进行画图的
绘画几何：
fillRect(double x,y,width,heught) 填充一个矩形区域
strokeRect(double x,y,width,height) 绘制一个矩形边框
eg:
<canvas id="mc" width="400px" height="280px" style="border:1px solid black">
</canvas>
<script>
//填充
var canvas = document.getElementById('mc');
var ctx = canvas.getContext('2d');
ctx.fillStyle='#f00';
ctx.fillRect(30,20,120,60);
//边框
ctx.strokeStyle = "#00f";
ctx.lineWidth=10;
ctx.lineJoin = "round";
ctx.strokeRect(30,130,120,60);
</script>
点线模式 p107
绘制字符串
设置阴影
使用路径
绘制曲线
绘制位图
坐标变换
使用矩形变换
控制折叠风格
控制填充风格
位图填充
位图剪切
像素处理
输出位图
动画制作
<!---------------------------------------------------------------->
多媒体
<audio src="" controls/>
<video src="" controls/>
js控制媒体播放
<audio> 对应js中的HTMLAudioElment对象
<video> 对应js中的HTMLVideoElement对象
支持的方法：
paly(),pause(),load(),canPlayType(type)="MIME字符串(eg:audio/mpeg) / probably(支持) / maybe / 空字符串(不支持) "
HTMLVideoElement属性：
duration，palyed,paused,...等，返回的是一个TimeRanges对象
TimeRanges对象的属性：length（获取该对象里面所有的时间段）
方法：start(index) end(index) ,index指的是时间段
监听事件
onclick,onfocse,onplaying....等
<track>元素 添加字幕
github上有更多的笔记:Raray-chuan (兮川) · GitHub
扫一扫
4734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
