核心
- 语义
<!DOCTYPE html>
- 声明文档类型为html5 , 不基于SGML (通用标言) , 不需要DTD 引用 , 但是需要doctype规范浏览器行为(例如不使用怪异模式)
- html4.01基于SGML , 因此需要DTD (一系列元素定义的规范集合) 引用
注释
- 条件注释
- lt lte gt gte !
- 置于head末或body初
- 其中可以放<style>,<link>,<script>,甚至任何html元素
- html5shiv插件用于解决老ie不支持h5标签(当成相应的成块状或行内元素进行显示并可以为html5元素添加样式);
- abbr header footer article section aside audio bdi canvas data datalist details dialog figcaption figure hgroup main mark meter nav output picture progress summary template time video
- respond插件用于解决老ie不支持媒体查询
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<head></head>
- 示例模板
- link来自XHTML , 除了加载css,还能定义RSS,定义rel连接属性等
- @import url()只能用于引用css
<style>
@import url()
@import url()
</style>
- 引用的css会在页面加载完后再加载,因此网速慢时可以先把页面显示出来,不会阻断html结构加载
- 方便进行模块化开发,可将多个写在某个css里,再用一个link一起引入
@import url()
@import url()
@import url()
路径
- 相对路径时,js以宿主为基准,css以自身为基准;
- 绝对路径从根目录开始(盘)
<base href='' target=''>
- 为页面上的所有链接规定默认地址或默认目标,包括<a>、<img>、<link>、<form>;
<body></body>
<a href=''></a>
- 无href时等于普通文本,不会变成pointer;
- target='_blank'在新页面打开;默认为自身'_self';
- <a></a>间一定要填内容,否则不显示;
-
<a href='url#id'>文本</a>为锚点用法,url可以为网址或文件位置或者干脆不填;
- ## 或 javascript:void(0),去除隐藏锚点
- <a href='javascript:fn()'>文本</a>点击执行对应js
;
- 上标和下标
<abbr title=''></abbr>
- 表示缩写语义
- 通常跟title属性
<bdo dir=''></bdo>
- 双向流覆盖
- 改变文字方向
- 属性为 dir='ltr'或'rtl'
列表
- <ul><li>无序列表
- <ol><li>有序列表
- <dl><dt><dd>定义列表
<iframe src=''></iframe>
- 属性:src frameborder
- <iframe>若浏览器不支持则显示本句</iframe>
<img src='' alt=''>
- width='' height='' 效果同css,可仅写数字不写px
- alt='' 为图片加载失败时的替换文本,且内容利于SEO
- onerror='this.src="另一url"' 为图片加载失败时的替换图片
- usemap="#+对应map的id或name" 定义客户端图像映射热区
- ismap="#+对应map的id或name" 定义服务器端图像映射热区
<map name='' id=''>
- 此时id和name必须同时存在且相等,为兼容不同浏览器
<area shape=' ' coords=' ' href=' '/nohref alt=' '>
- shape可以为rect circ poly,默认为rect
- rect='x1,y1,x2,y2'
- circ='x,y,r'
- poly='x1,y1,x2,y2......xn,yn'
- 多个area重叠时先到先得,超出边界的坐标会被忽略
- shape可以为rect circ poly,默认为rect
</map>
<table></table>
*border='' cellpadding='' frame='' rules=''
- <tr></tr>表格行
- <th></th>表头
- <td></td>单元格
- more details
<form action='' method=''></form>
-
自身属性:
- action
- method
- target:_self / _blank(提交时新页面打开方式)
- ==autocomplete==(仅对有name的表单元素生效,默认为on,用off关闭)
- ==novalidate==(无值属性,使email等不再验证)
-
表单元素通用属性:
- name
- disabled;
-
input 专用属性:
- maxlength
- readonly;
- ==autocomplete==(仅对有name的表单元素生效,默认为on,用off关闭);
- ==autofocus==
- ==form==(值为对应<form>的id,将该input套入该form)
- ==formaction==(改变action目标)
- ==formmethod==(改变method方式)
- ==formnovalidate==(免验证)
- ==formtarget==(仅对submit按钮生效,覆盖target方式)
- ==max/min==(数字/日期的范围)
- ==step==(数字/日期的间隔)
- ==pattern==(规定输入内容的正则,无则提交时警示)
- 如pattern=" \d+ "
- 警示内容即title
- ==required==(必须有值时才可以提交,无则提交时警示)
- ==placeholder==(不支持ie9及以下)
readonly的元素值可以被get/post提交,通常用于一些替用户固定好的预设值;disabled的元素值无法被提交
<input type='reset'>重置
<input type='submit' value=''>按钮-提交表单
<input type='image' src=''>图片-提交表单
<input type='button' value=''>普通
<input type='file' ==multiple==>提交文件
<input type='hidden'>隐藏
<input type='password' value=''>密码(内容会显示成*)
==<input type='color'>自定义拾色器==
==<input type='date'>==
==<input type='month'>==
==<input type='time'>==
==<input type='week'>==
==<input type='number' max='' min='' step='' value=''>数字加上下箭头==
==<input type='range' value=''>滑块==
==<input type='search' value=''>搜索(仅有语义)==
==<input type='url' value=''>submit时不合格时会有警示==
-
==<input type='email' value=''>submit时不合格时会有警示==
单/复选框<input type='radio'/checkbox name='' value=''>
选中时为checked或checked='checked';
js中判断为if(oInput.checked)或if(oInput.checked==true)
js中赋值为oInput.checked=true
jQ中判断为if($(ele).is(':checked'))
jQ中赋值为
(ele).attr("checked",true);
-
jQ中有$(":checked")选择器,选中所有checked的单复选框
<button></button>
- <button value='名字'>名字</button> value用于兼容浏览器
- <button value=''>名字</button>缺省为submit
- <button type='submit' value=''>名字</button>
- <button type='button' value=''>名字</button>普通
- <button type='reset' value=''>名字</button>
<textarea><textarea>
- rows=' ' cols=' ' 可见行列
- 本身没有value属性,初始内部文字可为innerHTML;但一经修改,仅能通过value读取和调用
<select></select>下拉菜单
- size=''可见项目数
- multipe 多选
<optgroup label=''><optgroup>
- <optgroup>可有可无,用于对选项分组,不可被选中
- label用于描述分组
<option value='用户选了马'>马</option>
- value为后台接受
- selected表示已选中
- jQ中有$(":selected")选择器,选中所有selected的option元素,其余js和jQ类似checked
<label></label>
- 使文本点击时,自动将焦点转到对应的表单控件上
<label> 用户名:<input type='text'> </label> * 此时单击'用户名',就会focus到text输入框中 * 此时不能用for属性,否则失效<label for='对应id'>男</label> <input type='radio' id=''> * 此时单击'男',就会使radio控件checked==<datalist></datalist>==
<input type='text' list='car'>
<datalist id='car'>
<option value='宝马'>宝马</option>
<option value='坏马'>坏马</option>
</datalist>
==<progess></progress>==
- max
- value
==<ruby></ruby>==
- 不支持ruby的浏览器会显示rp中的内容,否则不显示rp
<ruby>
汗<rp>替</rp><rt> HAN </rt><rp>换</rp>
</ruby>
==多媒体==
- <audio>替换文本</audio>
- <video>替换文本</video>
- src
- controls
- autoplay
- loop
- muted
- preload (有autoplay时失效,必然加载)
- auto(随着页面加载时加载)
- meta(只加载元数据)
- none(不加载)
- poster (video播放前显示的图像)
- height/width(仅对video有效)
- <source src=''>
- 插在audio或video的innerHTML中代替其src;
<audio controls>
<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>
全局属性
- dir
- tabindex(由小到大,负数无效,默认为0最后显示)
- data-*
- 自定义属性,可用于储存数据
- 不要包含大写字母
- visibility: hidden
事件属性
- <div onclick=' ++content++ '>,等于oDiv.onclick=function(){
content
}- <div onclick='fn1()'></div>
- <div onclick='alert(123)'></div>
