大佬教程收集整理的这篇文章主要介绍了HTML5提高,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我个人觉得,当你学会了一些最基本的标签其实是够用的,但是在很多网页中可以发现很多新的标签。这个时候不知道它是干嘛的实际上心里是非常没底的,所以在这里我打算写一篇HTML5提高的文章,尽量以大白话的方式来告诉你H5中的一些实用小技巧。
首先,要明白一点。我们使用标签时如果想要非常规范的一看就很专业的那种效果,我们应该利用原本标签的语义。
如,写了@L_696_7@<main>
标签,别人一看就知道,原来这是主体内容的区域。
当然,如果你全部使用<div>
也没什么问题,只是不推荐这样做。
其次,使用HTML标签不要在意他原本的模样,尽管他可能非常丑,因为我们可以随时通过CSS来修改它的样式。
<header>
标签代表一块内容区域的页眉,即头部,它没什么具体语义,@L_696_7@页面中可以有多个<header>
标签,当然也可以只有@L_696_7@。
<footer>
标签代表@L_696_7@页眉的页脚,即尾部。页脚通常包含文档的作者、@L_675_22@、使用条款链接、联系信息等等。应该是与<header>
相对应,不过没有也没关系。
<nav>
代表一块区域中的导航。注意!是一块区域的导航,这代表@L_696_7@页面中可以有多个<nav>
标签,当然也可以只有@L_696_7@。
<!DOCTYPE html> <html lang="en"head> @L_607_28@ charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"title>Document</bodyheader> nav> ul> li><a href="#">导航一a></>导航二>导航三html>
<main>
标签代表主要内容区域,@L_696_7@页面只应该出现一次。
<article>
仅仅代表一块区域中的内容,没什么具体语义。
使用 <section>
定义@L_696_7@区块,一般是一组相似内容的排列组合。
当然像这种更多的就是用列表标签排序。不过外层我们可以套上<section>
标签。
使用<aside>
可以设置与主要区域无关的一些内容,如轮播图,广告,公告等等。
<div>
没有什么清楚的界限来规定它应该做什么,所以变成了@L_696_7@万能的标签。啥都能装,这个就不用多介绍了,基本你一打开页面全是它。
<p>
标签用于定义一段文本的内容。这个在上一篇HTML中已经讲过了,使用它应该注意一些问题,如包裹的内容等。
<pre>
标签可以原封不动的将你所有的格式打印出来,在博客园里的代码块基本外部都是包裹的<pre>
标签。这个标签在上一篇HTML中也提到过了。
<br>
才是@L_696_7@真正的换行标签,注意与<p>
的使用区别。上一篇HTML中也提到过。
<span>
代表的意思和<div>
一样,如果你的某些文本需要修改一下样式。可以使用它来包裹,这在页面中是非常常见的,但是它的语义却不是很明确,也是属于@L_696_7@模糊的定位。可以看到在博客园的插入代码中,几乎全都是用的<span>
标签。
<time>
标签里可以放一些时间的文本,这非常方便。尽管他看起来没有任何样式,这里再强调一下,不要看他样式,注意语义就行了。
@H_262_459@
<abbr>
也是放的@L_696_7@文本,它有个title
属性,这里面可以放一些描述信息。当鼠标悬浮与其上方时,描述信息就会出来。可以看到文本下方有小虚线,不用在意。CSS可以帮你干掉他。
这个没什么好描述的,在上一篇文章中也写的非常的明白了。如果你经常使用数学之内的公式,那么你应该掌握它。
在上一篇文章中是将它归类于文字类的,@L_696_7@删除线。但是<del>
本身的意思就是删除,我们再碰到如下的情景时可以使用它。
和<del>
可配套使用,@L_696_7@代表已经废弃了,@L_696_7@代表修正后的。如下图。
它的语义为定义一些不是很准确的文本信息,虽然与<del>
的使用效果是一样的,但是我们应该按照不同的语义划分来使用标签。
<code>
标签中应该放入的是代码,尽管它没有任何格式化,需要一些格式化插件来辅助完成代码的格式化。
可以用于显示进度条的完成时间,属性@H_258_20@max为进度条的最大数量,属性value
为当前的进度。后期可以使用js来进行控制。
> progress value="58" max="100"progress>
在上一篇文章中我给他定义为加粗,这是在效果上来定的。@R_993_5874@的语义应该为强调性的文本。
同上,也是属于强调性文本,但是强调的程度不同,这个应该轻一点。
这个就相当于@L_696_7@马克笔的效果,能够突出显示文本,因此我觉他的定义应该是值得记录的一段文本。
<cite>
标签通常表示它所包含的文本对某个参考文献的引用,或文章作者的名字。
<blockquote>
引用来源标签,一般为小段文本。
<q>
用于表示行内引用文本,在大部分浏览器中会加上引号。
cite>狂人日记blockquote> 凡事总须研究,才会明白。古来时常吃人,我也还记得,可是不甚清楚。我翻开历史一查,这历史没有年代,歪歪斜斜的每叶上都写着“仁义道德”几个字。我横竖睡不着,仔细看了半夜,才从字缝里看出字来,满本都写着两个字是“吃人”! >鲁迅先生q>吃人用的恰到好处! >
<address>
用于设置地址信息。一般放在<footer>
页脚中。
上篇文章中记录了<a>
的一些使用小技巧。我在这里再例举几个。
除了页面跳转外可以指定其他链接。使用以下方式也有缺点,邮箱可能会被恶意用户采集到。
<a href="mailto:c2323182108@gmail.com">发送邮件</a>
这个就主要针对移动端的用户了。
<a href="tel:10086">y移动客服</a>
默认情况下使用链接可以下载浏览器无法处理的文件,如果下载图片需要后台语言告之浏览器@H_258_20@mime类型。Ps:如果不懂@H_258_20@mime的百度一下就知道了。
<input>
的type
有个hidden
可以作为隐藏输入框,这个里面的值我们可以填好。用于隐藏的向后台提交一些数据。
当用户在<input>
框输入内容后,可以设定pattern
属性进行正则验证,还可以绑定oninvalid
事件,如果验证错误则会触发该事件。注意,我们不单单该在前端验证,更应该在后端进行验证,二次验证才能确保数据的准确性,如果有用户修改页面中的代码,那么第一次验证就会出现问题,所以我们需要二次验证。
form action=""input type="text" name="username" pattern="[\w]{3,18}" oninvalid="javascript:alert('请输入正确的用户名,字母下划线组成长度3-18')"button>提交form> >
我们可以为<input>
设定属性autocomplete
属性,它有2个状态为,@L_696_7@on
@L_696_7@off
,用来选择是否记住用户键入值的历史记录。这个属性默认的值为on
。
autocomplete="off">
<input>
的type
为date
时候,可以来上传@L_696_7@年月日(标准时间)。当<input>
的type
为time
时,可以上传时分。type
为week
是年周,type
为@H_258_20@month是年月。type
是datetiR_309_11845@e-local
则为本地化时间。 @H_258_20@min属性可以设置开始时间, @H_258_20@max属性可以设置结束时间。step
属性可以设置步长即多少时间一间隔。
="date"="date_time"button ="submit">
="time">
="week">
="month">
="datetiR_309_11845@e-local">
我们在提交表单时除了使用<submit>
标签外,也可以使用<button>
按钮来进行提交,只需要将其type
属性设置为submit
即可。
="hidden"="hiddent_id" value="1"="username"="password"="pwd">
<form>
有个属性叫做@H_258_20@multiple,可以支持多文件上传。还有个属性叫accept
,用来指定上传文件的MIME类型。
="" method="POST" enctype="multipart/form-data"fieldset="file"="icon" accept="image/png,image/gif" multiple>保存>
这个数据列表有点像<SELEct>
但是又不一样,它是通过<input>
,<datalist>
以及<option>
进行组合的。
<input>
有个属性为list
,指定为<datalist>
的id
即可。
list="data_list"datalist idoption ="北京"option="上海"="广州"datalist>
尽管H5中已经支持<video>
标签来插入视频,但是它原生的并不太好。我们应该用一些第三方的插件,如阿里云播放器
,video.js
等等。
属性 | 描述 |
---|---|
autoplay | 如果出现该属性,则视频在就绪后马上播放(需要指定类型如 type="video/mp4" )。 |
preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。 如果设置为 preload=@L_607_28@data 值将加载视频尺寸或关键针数据,目的也是减少带宽占用。 设置为preload="auto" 时表示将自动加载视频数据 |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。该属性是必须的。 |
height | 设置视频播放器的高度。 |
width | 设置视频播放器的宽度。 |
loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
@H_621_1@muted | 规定视频的音频输出应该被静音。 |
poster | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
src | 要播放的视频的 URL。 |
属性 | 描述 |
---|---|
autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。 如果设置为 preload=@L_607_28@data 值将加载视频尺寸或关键针数据,目的也是减少带宽占用。 设置为preload="auto" 时表示将自动加载视频数据 |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
@H_621_1@muted | 规定视频的音频输出应该被静音。 |
src | 要播放的视频的 URL。 |
当有的浏览器不支持某种格式的多媒体,我们可以为他添加一些备用的。将<source>
嵌入到<video>
或者<audio>
中即可。请注意设置<source>
的src
属性以及type
属性。
audio controls autoplay loop preload="auto"source src="houdunren.ogg" type="audio/ogg"="houdunren.mp3"="audio/mp3"audio>
以上是大佬教程为你收集整理的HTML5提高全部内容,希望文章能够帮你解决HTML5提高所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。