海阔天空

手机扫码查看

HTML标签

link标签扩展
css样式
<link href=”css.css” rel=”stylesheet” type=”text/css”>
icon图标
<link type=”/image/x-icon” rel=”icon” href=”favicon.icon”>
dns解析
<link rel=”dns-prefetch” href=”url”>

meta标签扩展
name=”description” content=”网站描述”
name=”keywords” content=”关键词”
name=”renderer” content=”webkit浏览器内核”
http-equiv=”X-UA-Compatible” content=”ie=edge”
http-equiv=”refresh” content=”3″ url=”3秒后跳转的地址”

---

h5新语义化标签

header：页眉|footer：页脚|main：主体|hgroup：标题组合|nav：导航
article：独立的内容|aside：辅助信息的内容|section：区域|figure：描述图像或视频
figcaption：描述图像或视频的标题部分
<figure>
<img src=”x.jpg”>
<figcaption>
xxx描述
</figcaption>
</figure>

datalist：选项列表
<input type=”text” list=”ele”>
<datalist id=”ele”>
<option value=”a”</option>
<option value=”ab”</option>
<option value=”abc”</option>
</datalist >

details/summary：文档细节/文档标题
<details open>
<summary>标题</summary>
<p>html</p>
</details>

progress/meter：定义进度条/定义度量范围
<progress min=”0″ max=”10″ value=”5″></progress>
<meter min=”0″ max=”100″ value=”45″ low=”10″ high=”60″></meter >

time/mark：定义日期和时间/带有记号的文本

---

表格扩展

添加单线：border-collapse:collapse
隐藏空单元：empty-cells:hide
斜线分类：border/rotate
列分组：colgroup/col
<colgroup>
<col span=”2″ style=””>
</colgroup>

---

表单美化
<label>
<input type=”checkbox”>
<div></div>
</label>
<style>
label input{display:none}
label input:checked + div{background-position:0 0}
label div{w28px;h28px;bg:url(‘x.png’) 0 0}
</style>

表单扩展之input控件

email：电子邮箱地址输入框
url：网址输入框
number：数值输入框
range：滑动条
date/month/week：日期控件
search：搜索框
color：颜色控件
tel：号码输入框
time：时间控件

表单的新属性

autocomplete：自动完成
autofocus：获取焦点
required：不能为空
pattern：正则验证
method：数据传输方式
enctype：数据传输类型
name/value：数据的键值对

表单的扩展标签

fieldset：表单内元素分组
legend：为fieldset元素定义标题
<fieldset>
<legend>登录</legend>
用户名：<input type=”text”>
</fieldset>

optgroup：定义选项组
<select>
<optgroup label=”水果”></optgroup>
<option value=””>苹果</option>
</select>