认识HTML5中的新标签与新属性

前端之HTML5,CSS3(一)

  HTML5中常用内容标签

  header标签

  header标签定义文档的页眉,基本语法:<header>content</header>。

  nav标签

  nav标签定义导航链接部分,基本语法:<nav>content</nav>。

  footer标签

  footer标签定义文档的页脚,基本语法:<footer>content</footer>。

  article标签

  article标签定义文章内容部分,基本语法:<article>content</article>。

  section标签

  section标签定义文档中区域,类似于div标签,基本语法:<section>content</section>。

  aside标签

  aside标签定义内容之外的侧边栏部分,基本语法:<aside>content</aside>。

  datalist标签

  datalist标签与input标签结合使用,定义输入下拉选项,基本语法:<datalist><option>content</option>...</datalist>。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>datalist标签-测试</title>
</head>
<body>
<input type="text" value="" list="language" />
<datalist id="language">
<option>C</option>
<option>C++</option>
<option>C#</option>
<option>php</option>
<option>python</option>
<option>perl</option>
<option>java</option>
<option>javascript</option>
</datalist>
</body>
</html>

  效果

  认识HTML5中的新标签与新属性

  fieldset标签

  fieldset标签与legend标签搭配使用,定义区域范围,基本语法:<fieldset><legend>title</legend></fieldset>。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fieldset标签-测试</title>
<style type="text/css">
fieldset {
width: 300px;
}
</style>
</head>
<body>
<fieldset>
<legend>用户登录</legend>
用户名称:<input type="text" name="user_name">
<br />
用户密码:<input type="password" name="pwd">
</fieldset>
</body>
</html>

  效果

认识HTML5中的新标签与新属性

input标签新增type属性值

属性值 实例 描述
email <input type="email"> 输入邮箱格式
tel <input type="tel"> 输入手机号码
url <input type="url"> 输入url格式
number <input type="number"> 输入数字格式
search <input type="search"> 搜索框,语义化
range <input type="range"> *拖动滑块
time <input type="time"> 时,分
date <input type="date"> 年,月,日
datetime <input type="tatetime"> 时间
month <input type="month"> 月,年
week <input type="week"> 星期,年

  效果自行测试,PC端浏览器兼容性较差。

input标签新增属性

属性 实例 描述
placeholder <input type="text" placeholder="Enter your name"> 输入框内文字提示,输入内容消失
autofocus <input type="text" autofocus> 鼠标光标自动定位在输入框,无须点击输入再输入
multiple <input type="file" multiple> 支持多文件上传
autocomplete <input type="text" autocomplete="off"> 表单是否启动表单自动完成功能,属性值有:on和off
required <input type="text" required> 必填,内容不能为空
accesskey <input type="text" accesskey="s"> 指定快捷键,使用alt+s快速定位光标到输入框内

  多媒体标签

  audio标签:添加音频标签,基本语法:<audio src="xxx.mp3"></audio>,支持音频格式有mp3,ogg,wav,根据浏览器不同,不同格式音频支持程度有所不同。属性有:autoplay、controls、loop,autoplay设定音频自动播放,打开网页播放音频,无法中止,至音频播放完毕;controls设定音频控制,页面出现音频控件;loop设定音频循环播放。设置方法:<audio src="faded.ogg" autoplay/controls/loop></audio>。

  解决浏览器格式不兼容的方法:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio标签-测试</title>
</head>
<body>
<!-- 可以使用属性等于属性值的形式 -->
<audio autoplay controls="controls" loop="loop">
<source src="backgroud.mp3" />
<source src="backgroud.ogg" />
<source src="backgroud.wav" />
</audio>
</body>
</html>

  video标签:添加视频频标签,基本语法:<video src="xxx.mp3"></video>,支持视频格式有mp4,ogg,webM,根据浏览器不同,不同格式视频支持程度有所不同。属性有:autoplay、controls、loop,autoplay设定视频自动播放,打开网页播放视频,无法中止,至视频播放完毕;controls设定视频控制,页面出现视频控件;loop设定视频循环播放。设置方法:<video src="faded.ogg" autoplay/controls/loop></video>。

  解决浏览器格式不兼容的方法:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video标签-测试</title>
</head>
<body>
<!-- 可以使用属性等于属性值的形式 -->
<video autoplay controls="controls" loop="loop">
<source src="movie.mp4" />
<source src="movie.ogg" />
<source src="movie.webM" />
</video>
</body>
</html>
上一篇:React Native & debug & debugger


下一篇:html5中的新标签