HTML5新增元素及属性

最新推荐文章于 2023-08-21 16:45:48 发布

Benefit.

最新推荐文章于 2023-08-21 16:45:48 发布

阅读量488

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/lipeikun/article/details/105156651

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5
新特性

新的语义化标签，如header、footer、nav
新的表单控件，如email、url、search
用于绘画的canvas元素
用于媒介回放的video和audio元素
HTML新增结构元素
header 页眉，引导和导航
nav 页面导航的链接组
section 内容与标题
article 独立完整的相关内容块
aside 非正文内容
footer 脚注

页面布局
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <meta charset="UTF-8">  
 <title>Document</title>  
 <style>  
 *{  
 padding:1000;  
 margin: 1000;  
 }  
 .box{  
 width: 500px;  
 height: 600px;  
 border: 1px #ccc solid;  
 margin: 30px auto;  
 }  
 .header{  
 width: 500px;  
 height: 40px;  
 text-align: center;  
 line-height: 40px;  
 background: pink;  
 }  
 .main{  
 width: 500px;  
 height: 520px;  
 }  
 .footer{  
 width: 500px;  
 height: 40px;  
 text-align: center;  
 line-height: 40px;  
 background: pink;  
 }  
 .nav{  
 width: 500px;  
 height: 30px;  
 line-height: 30px;  
 background: lightgreen;  
 }  
 .container{  
 width: 500px;  
 height: 490px;  
 }  
 .aside{  
 width: 150px;  
 height: 490px;  
 float: left;  
 background: skyblue;  
 text-align: center;  
 line-height:490px;  
 }  
 .article{  
 width: 350px;  
 height: 490px;  
 float: left;  
 text-align: center;  
 background: yellow;  
 line-height: 490px;  
 }  
 </style>  
 </head>  
 <body>  
 <div class="box">  
 <header class="header">头部</header>  
 <main class="main">  
 <nav class="nav">导航</nav>  
 <div class="container">  
 <aside class="aside">侧边栏</aside>  
 <article class="article">正文</article>  
 </div>  
 </main>  
 <footer class="footer">底部</footer>  
 </div>  
 </body>  
 </html>

代码呈现图
HTML新增网页元素
video 视频
audio 音频
canvas 图形
datalist 可选数据的列表
time 标签定义时间日期
mark 呈现突出文字

网页元素
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h4>可选数据列表</h4>
	<input list="city">
	<datalist id="city">
		<option value="北京"></option>
		<option value="上海"></option>
		<option value="广州"></option>
		<option value="深圳 "></option>
	</datalist>
	<h4>时间标签</h4>
	<p>今天早上<time>8:00</time>起床</p >
	<h4>mark</h4>
	<p><mark>课工场</mark>,每时每刻给你新机会</p >
</body>
</html>

代码效果图
HTML5新增全局属性

contentEditable 规定是否允许用户编辑内容
designMode 规定整个页面是否可编辑
hidden 隐藏
spellcheck 拼写、语法检查
tabindex tab键迭制次序

全局属性
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <h4>contenteditable</h4>
   <p contenteditable="true">这个段落应该被编辑</p >
   <h4>designMode</h4>
   <p>这个段落应该被编辑</p >
   <p>这个段落应该被编辑</p >
   <p>这个段落应该被编辑</p >
   <h4>hidden</h4>
   <p hidden>这个段落应该被隐藏</p >
   <h4>spellcheck</h4>
   <p contenteditable="true">这个段落应该被语法检查</p >
   <h4>tabindex</h4>
   <p><a href="" tabindex="2">我是第二个</a ></p >
   <p><a href="" tabindex="1">我是第一个</a ></p >
   <p><a href="" tabindex="3">我是第三个</a ></p >    
</body>
</html>
<script>
   document.designMode="off";
</script>

代码效果图
CSS3高级选择器

优先级

优先级就近原则，同权重情况下定义最近者为准
载入样式以最后载入的定位为准
！important>id>class>tag
important比内联优先级高，但内联比id高
HTML5表单新增input类型
e−mail
url
color
search
number 属性 max min step value
range 同number
Date pickers 属性 date month week time datetime datetime-local

表单新增input类型
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="">
		<p>
			<input type="email">
			<input type="submit">
		</p >
		<p>
			<input type="url">
			<input type="submit">
		</p >
		<p>
			<input type="color">
		</p >
		<p>
			<input type="search">
			<input type="submit">
		</p >
		<p>
			<input type="number" max="10" min="2" step="2" value="1">
		</p >
		<p>
			<input type="range" max="50" min="10" value="50">
		</p >
		<p>
			<input type="date">
		</p >
		<p>
			<input type="month">
		</p >
		<p>
			<input type="week">
		</p >
		<p>
			<input type="time">
		</p >
		<p>
			<input type="datetime">
		</p >
	</form>
</body>
</html>

代码效果图
HTML5新增表单元素

datalist 标签定义选项列表
keygen 规定用于表单的密钥对生成器字段
output 标签定义不同类型的输出
HTML5新增form属性
autocomplete 规定form或input域应该拥有自动完成功能
invalidate 规定在提交表单时不应该验证form或input域
HTML5表单新增input属性
autofocus 页面加载时自动获得焦点
required规定输入域不能为空
placeholder 提供提示，描述输入域所期待的值
pattern 规定验证input域的模式（正则表达式）
height、width 仅适用于image类型的input标签的图像高度和宽度

表单新增input属性
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="demo.php" autocomplete="off">
	<p>用户名：<input type="text" name="name1" autofocus></p >
	<p>邮箱： <input type="email" name="name2" required></p >
	<p>邮箱： <input type="email" name="name2" placeholder="不能缺少@符"></p >
	<p>邮箱： <input type="email" name="name2"></p >
	<p>用户名：<input type="text" pattern="[a-zA-Z"]{3}"></p >
	<p><input type="submit"></p >
	</form>
</body>
</html>

代码效果图

Benefit.

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增元素及属性

HTML5新特性新的语义化标签，如header、footer、nav新的表单控件，如email、url、search用于绘画的canvas元素用于媒介回放的video和audio元素HTML新增结构元素header 页眉，引导和导航nav 页面导航的链接组section 内容与标题article 独立完整的相关内容块aside 非正文内容footer 脚注页面布局 ...
复制链接

扫一扫