HTML
百度不在便捷,图片全部失效请多包涵。
前言
本篇讲述HTML5新标签的内容。
简述一些HTML5里常用的标签与属性。html是一个语义化编程语言,初学者需要更好的理解标签的语义。
记住标签使用方法的同时请记住标签的语义。
1 新增标签
1.1结构标签(有语义化div)
标签 | 语义 |
---|---|
article | 定义一篇文章 |
header | 定义一个页面或者一个区域的头部 |
nav | 定义导航链接 |
section | 定义一个区域 |
aside | 定义页面内容部分的侧边栏 |
hgroup | 定义文件中一个区块的相关信息 |
figure | 定义一组媒体内容以及他们的标题 |
figcaption | 定义figure元素的标题 |
footer | 定义以页面或一个区域的底部 |
dialog | 定义一个对话框 |
用法:
<html>
<head>
<meta charset="utf-8"/>
<tltle>例子</title>
</head>
<body>
<header>
<h1>我是头部</h1>
<nav>
<ul>
<li>我是</li>
<li>导航</li>
</ul>
</nav>
</header>
<section> <!--内容-->
<figure> <!--定义媒体块-->
<figcaption>系统建设指南</figcaption> <!--定义媒体块标题-->
</figure>
</section>
<section> <!--内容-->
<hgroup><!--定义文件中一个区块的相关信息()-->
<h1>系统建设指南</h1>
<h3>著:王一黑</h3>
<h4>标签<em>位体</em><em>系统流</em></h4>
</hgroup>
<aside> <!--经常和article配合使用-->
<a href="/">简述</a>
<a href="/">第一章</a>
</aside>
<article> <!--一篇文章-->
<>简述</>
<p>
王绍惨遭现实蹂躏,大醉后穿越到平行世界,成为系统之主。
事情却没有这么简单,系统简陋不堪功能残缺,众多的功能等着他添加,每天系统运行所需要能量,一切都需要大量的能量。
这个世界也不是那么的平静,幻想位面正在缓慢的融入世界。
导致世界大变,充斥着各种幻想人物,灵气也在缓慢复苏。
道士,武者,巫师,魔法师,各种神秘的组织,或善或恶,慢慢的出现在人们的视线中。
世界中暗涌流动,既然都这么乱了,再乱一点想必也是可以承受。
肆意的改变幻想人物的命运,穿越到幻想位面加快融合速度,得以掠夺更多的能量!
科学且合理的搭建系统,健康的成长为一名合格的系统。</p>
</article>
</section>
<section> <!--内容-->
<dialog> <!--对话-->
<p>王五:推荐票给你,加油哦哦哦! </p>
<p>张三: 进门不拜是为无理,更何况如此肥沃的土地。插个旗证明自己来过,我看见,我征服!插了旗你就是我。</p>
</dialog>
<dialog>
<p>赵四:作者快更新!! </p>
<p>李七: .....作者精力有限勿催</p>
</dialog>
</section>
<footer>
我是底部的信息 <!--我是底部的信息 -->
</footer>
</body>
</html>
注意:header , section , aside ,article , footer 不要嵌套,header ,section ,footer 只用于最外层
1.2多媒体标签
标签:
标签 | 语义 |
---|---|
audio | 定义一个音频 |
video | 定义一个视频 |
source | 定义媒体资源 |
canvas | 画布 |
embed | 外部可交互的内容或插件 |
属性:
属性 | 语义 | 值 |
---|---|---|
autoplay | 自动播放 | autoplay(为了提升用户体验 新版本的浏览器不支持) |
loop | 循坏 | loop |
controls | 浏览器控件 | controls |
preload | 页面加载时进行加载,并预备播放(如果设置autoplay 直接忽略本值) | auto - 面加载后载入整个音频 meta - 面加载后只载入元数据 none - 面加载后不载入音频 |
width | 宽度属性(只对视频有效) | 数值 |
height | 高度属性(只对视频有效) | 数值 |
muted | 静音播放(只对视频有效) | muted |
poster | 未播放是显示的图片(只对视频有效) | poster |
1.2.1 audio(音频)
<audio src="音频地址" autoplay="autoplay" loop="loop" controls="controls"> </audio>
大家发现没有? 并没有自动播放~~ 我也去查询了一下这个问题。
不能用的原因很简单,为了提升用户的体验。 因为默认自动播放时时,声音默认最大。
我看了网上也有一些很畸类的解决方法。需要自己动手修改浏览器的值。。。。。 对于用户来说,不会因为你一个网站去查询然后设置自己的浏览器不太现实。
在此处留个坑后续解决~
1.2.2 video(视频)
<video src="视频地址" autoplay="autoplay" loop="loop" controls="controls"> </video>
同音频一样无法自动播放
1.2.3 source(媒体资源)
<audio autoplay="autoplay" loop="loop" controls="controls">
<source src="ogg格式的音频" type="audio/ogg">
<source src="mp3格式的音频" type="audio/mpeg">
</audil>
1.2.4 canvas(画布)
需要js 技术 ,先不解说。
1.2.5 embed(外部可交互的内容或插件)
测试
<embed src="//music.163.com/style/swf/widget.swf?sid=1323352627&type=2&auto=0&width=320&height=66" width="340" height="86" allowNetworking="all"></embed>
效果
1.3状态标签
标签 | 语义 |
---|---|
meter | 状态标签(实时状态显示) |
progress | 进度标签 |
1.3.1 meter(实时状态)
此表借用于 w3school
属性
属性 | 值 | 描述 |
---|---|---|
form | form_id | 规定 <meter> 元素所属的一个或多个表单。 |
high | number | 规定被视作高的值的范围。 |
low | number | 规定被视作低的值的范围。 |
max | number | 规定范围的最大值。 |
min | number | 规定范围的最小值。 |
optimum | number | 规定度量的优化值。 |
value | number | 必需。规定度量的当前值。 |
测试
最小值20,最大值80, 最小警惕范围30 ,最大警惕范围70, 最佳状态50 vlaue 则是当前值我们看一效果
<meter value="50" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="20" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="80" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="50" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="30" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="70" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="45" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="55" min="20" max="80" low="30" high="70" optimum="50" ></meter>
效果如下
1.3.2 progress(进度标签)
只有两个属性
测试
<progress value="22" max="100"></progress>
效果:
1.4 列表标签
标签 | 语义 |
---|---|
datalist | 为input标记定义一个下拉了表,配合option标签 |
details | 定义一个元素的详细内容,配合summary |
1.4.1 datalist(数据列表标签)
注意:input中的list值和datalist中的id值一样
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
效果:
1.4.2 details(详细标签)
属性 | 意 |
---|---|
open | 规定在 HTML 页面上 details 应该是可见的。 |
配合summary标签使用 可以更改名称
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
未点击
已点击(如果设置 open属性则默认就是展开状态)
1.5 新的文本标签
1.5.1注释标签
标签 | 意 |
---|---|
ruby | 定义注释或拼音 |
rt | 定义ruby的注释内容 |
rp | 告诉那些不支持ruby元素的浏览器如何显示 |
<p>有<ruby>冇<rp>(</rp><rt>māo mō mù</rt><rp>)</rp></ruby>有 </p>
有冇有
1.5.2 其他标签
标签 | 意 |
---|---|
mark | 有标记的文本(黄色选中状态) |
output | 定义一些输出类型,计算表单结果配合oninput时间 |
1.5.2.1 mark(标记的文本)
测试:
<mark>哈哈哈</mark>
效果:
哈哈哈
1.5.2.2 output(计算表单结果)
测试
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
效果:
2.删除的标签(html向下兼容,虽然删除还是能使用)
2.1 纯表现的元素
basefont,big,center,font,s,strike,tt,u等
2.2对可用性产生负面影响的元素
frame,frameset,noframes
2.3产生混淆的元素
acronym,applet,isindex,dir
2.删除的标签(html向下兼容,虽然删除还是能使用)
3新增属性
3.1 input 新增类型
3.1.1 email ,tel(邮件类,手机号 只针对手机端)
<input type="email" />
<input type="tel" />
3.1.2 erl(网址类 只针对苹果手机端)
<input type="erl" />
3.1.3 number(输入运算值与运算符 全端)
<input type="number" />
3.1.4 range (功能:滑动选值 pc端)
min默认值0;
max默认值100;
<input type="range" min="0" max="100" />
3.1.5 search(功能:用于搜索 pc端)
<input type="search" />
3.1.6 color (功能:颜色选择功能 pc端)
<input type="color" />
3.1.5 Date Pickers Input类
类 | 意 | 端 |
---|---|---|
date | 选取日,月,年 | 全 |
month | 选取月,年 | 全 |
week | 选取 周和年 | 苹果已放弃支持 |
time | 选取时间(时和分) | 全 |
datetime | 选取时间,日,月,年(UTC时间) | 已放弃 |
datetime-local | 选取时间,日,月,年(本地时间) | 全 |
3.2 form新属性
3.2.1 autocomplete (自动完成的功能)
本属性 可以用在 form 标签,也可以用在 input标签。
值 | 意 |
---|---|
no | 打开 |
off | 关闭 |
<form autocomplete="no">
<input type="text" />
<input type="text" autocomplete="off" />
</form>
3.2.2 autofocus (自动聚焦)
本属性 用在 所有input。
<input type="text" autofocus="autofocus " />
3.2.3 multiple (多个值)
本属性 用在 input 文件上传(file)和邮箱(email)。
<input type="file" multiple="multiple" /> 可以上传对个文件
<input type="email" multiple="multiple" /> 邮箱号与邮箱号之间用","隔开
3.2.4 placeholder(描述输入域所期待的值)
本属性 用在 input (text)(search)(url)(telephone)(email)(password)
<input type="text" placeholder="请输入"/>
3.2.5 required (输入不能为空)
<input type="text" required="required"/>
3.3其他新属性
3.3.1链接属性(sizes(尺寸),target(目标全页面的链接打开方式))
sizes
<lint rel="icon" href="icon.gif" type="image/gif" sizes="16*16"/>
target
<base href="http://localhost/" target="_blank" />
3.3.2 超链接属性(media(对设备进行优化),hrefiang(设置语言),rel(设置超链接的引用))
media :设备转换之间的一个优化
hrefiang:网站语言转换之间的一个优化
rel:网站超链接的一个语义化(非本站链接添加 rel=“external”)
3.3.3 script (defer(后加载), async(同步加载))
defer 只支持IE
async 主流都支持
3.3.4 ol有序列表 (start(起始至), reversed(倒斜排列))
<ol start="5" reversed="reversed">
<li>a</li>
<li>ss</li>
<li>dd</li>
<li>ff</li>
<li>gg</li>
<li>hh</li>
</ol>
3.3.5 html(manifest)和style(scoped)
总结
到这里我们就结束了HTML入门篇。详细的还请看参考文献。如:w3c,菜鸟,mozilla 后续会有 js篇
==如本文章描述有误请尽快联系博主!感谢您的阅读与帮助!==