web基础学习（四）HTML5的主结构元素、表单

最新推荐文章于 2022-08-04 15:00:59 发布

June.1

最新推荐文章于 2022-08-04 15:00:59 发布

阅读量459

点赞数 1

分类专栏： web基础 web前端文章标签： html5主结构元素 html5表单

本文链接：https://blog.csdn.net/qq_39043923/article/details/88893430

版权

web前端同时被 2 个专栏收录

17 篇文章 4 订阅

订阅专栏

web基础

15 篇文章 1 订阅

订阅专栏

一、主结构元素

HTML5主结构更改

<!DOCTYPE html>
<html>
	  <head>
		    <meta charset="utf-8">
		    <title>learnvue</title>
	  </head>
	  <body>
		    <div></div>
	  </body>
</html>

HTML5兼容性
可以省略标记的元素

不允许写结束标记的	可以省略结束标记的	可以省略全部标记的
br、hr、img、input、link、meta、base、param、area、col、 command、 embed、keygen、source、 track、 wbr	li、 dt、 dd、 p、 option、 thead、 tbody、 tr、 td、 th、 rt、 rp、 optgroup、 colgroup、 tfoot	html、head、 body、 colgroup、 tbody

具有boolean值的属性

在html中有一些元素的属性，当只写属性名称而不指定属性值时，表求属性值为true, 如果设置该属性值为false，则不使用该属性即可。另外，要想将属性值设定true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。例如input元素中的disabled与readonly就是这样的属性如：<input type="text" readonly="readonly">可以写成<input type="text" disabled >
引号使用

在html中使用属性时，属性值可以使用双引号，也可以使用单引号括起来，在HTML5中做了一些改进，当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，属性两边的引号是可以省略的。比如：<input type="text" readonly="readonly">可以写成<input type="text" readonly=readonly>
HTML5新增的主体结构元素
- article元素
  
  article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章，一篇论坛帖子、一段用户评论红叶独立的插件，或其他任何独立的内容.
  article 元素是可以嵌套使用的
  article 元素可以用来表示插件
- section元素
  
  section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section并非一个普通的容器元素；当一个容器需要被直接定义样式或能过脚本定义行为时，推荐使用div而非section元素。
- nav元素
  
  nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接级都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。
  nav元素应用场景：1.传统导航条 2.侧边栏导航 3.页内导航 4.翻页操作
- aside元素
  
  aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容部分。
- time元素与微格式
  
  time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间
- pubdate属性
  
  pubdate属性是一个可选的boolean值得属性，它可以被应用到article元素中的time元素上，代表了文章或整个网页的发布日期。
HTML5非新增的主体结构元素
- header
  
  header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，例如页面标题导航、数据表格、搜索表单或相关的logo图片。
- footer
  
  footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相磁阅读链接及版权信息等。
- hgroup
  
  hgroup元素是将标题及其子标题进行分级的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组。
- address
  
  address元素用来在文档中呈现联系信息，包括文档作者或文档维护作者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息

IE浏览器下处理兼容HTML5

<!-[if lt IE9]> 
	<script src="html5.js"></script>
      <![endif]->

<!–[if lt IE9]>  
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
     <![endif]–>

HTML5实战应用

下面的注释风格相当于实际项目,每个人都要有良好的注释习惯。这将对于团队的协作有着巨大帮助

<!-- 使用HTML5主结构 渲染到浏览器就带有HTML5的属性-->
<!-- 名义上body html等标签完全可以省略,但为了结构区分明显大部分人都留下-->
<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>HTML5</title>
	<style type="text/css">
	/* header */
	header{
		width: 1000px;
		height: 30px;
		margin: 0 auto;
		background-color: yellow;
		padding-top: 90px;
	}
	header nav{
		width: 1000px;
		height: 30px;
		background-color: green;
	}
	/* content */
	section{
		width: 1000px;
		margin: 20px auto 20px;
		overflow: hidden;
	}
	section article{
		float: left;
		width: 700px;
		height: 400px;
		background-color: yellow;
	}
	article hgroup h1{
		text-align: center;
	}
	article hgroup h2{
		text-align: center;
	}
	section aside{
		float: left;
		width: 280px;
		height: 400px;
		margin-left: 20px;
		background-color: yellow;
	}
	footer{
		width: 1000px;
		height: 100px;
		margin: 0 auto;
		background-color: yellow;
	}
	</style>
	<!--这里做兼容处理-->
	<!-[if lt IE9]>
		<script src="js/html5.js"></script>
	<![endif]->
</head>
<body>
	<!-- header start 语义化标签头部-->
	<header>
		<div class="head-top">
		</div>
		<!-- 语义化标签导航部分-->
		<nav>

		</nav>
	</header>
	<!-- header end -->
	<!-- content start 语义化标签内容部分-->
	<section>
		<!-- 语义化标签文章部分-->
		<article>
			<!-- 语义化标签标题部分-->
			<hgroup>
				<h1>这是一个主标题</h1>
				<h2>这是一个副标题</h2>
			</hgroup>
				<p>10月10日上午10时10分，故宫博物院近年来开展的最大规模消防实战演习正式开始。演习假定太和殿遭到雷击，闷顶内发生“火灾”，安全监控中心值班人员通过视频监控发现火情，开放管理处现场工作人员发现有人员被困，安全受到严重威胁，迅速通知消防处值班员，第一时间拨打119报警电话，并组织现场观众进行疏散。</p>
				<!-- 语义化标签地址部分-->
				<address>
					作者：
				</address>
		</article>
		<!-- 语义化标签侧边栏部分-->
		<aside>
			
		</aside>
	</section>
	<!-- content end -->
	<!-- footer start 语义化标签底部内容部分-->
	<footer>
		&copy;
	</footer>
	<!-- footer end -->
</body>
</html>

二、表单元素

表单内元素的form属性

在HTML5中，可以把他们书写在页面上任何的地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了
formaction属性

任意指定提交地址,单击不同的按钮时可以将表单提交到不同的页面
formmethod属性

表单提交方式
formtarget属性

表单打开窗口属性类似于a标签的target属性
autofocus属性

input 上添加自动获取焦点
required属性

required=“请输入用户名” ,本属性提交空数据提示后面的内容信息

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--1. 指定表单的 id 值为 one-->
	<form id="one"></form>
	<!--2. 指定表单的 id 值为 two-->
	<form id="two"></form>


	<!--1. 从属 id值为one的表单-->
	<label for="username">用户名：</label>
	<!--required="请输入用户名" 禁止空白提交提示-->
	<input required="请输入用户名" type="text" name="username" id="username" form="one" >
	<label for="pwd">密码：</label>
	<input required="请输入密码" type="password" name="pwd" id="pwd" form="one" >
	<!--在按钮上添加 ：formaction 任意制定提交地址,  formmethod:直接制定提交方式get、post , formtarget="_self" 打开窗口属性-->
	<input type="submit" value="登录" form="one" formaction="page1.php" formmethod="get" formtarget="_self">
	<input type="submit" value="登录23" form="one" formaction="page23.php" formmethod="get" formtarget="_self">
	<br>

	<!--2. 从属 id值为two的表单-->
	<label for="username">用户名：</label>
	<!--input 添加 autofocus属性 自动获取焦点-->
	<input autofocus type="text" name="username" id="username" form="two">
	<label for="pwd">密码：</label>
	<input type="password" name="pwd" id="pwd" form="two">
	<input type="submit" value="登录" form="two" formaction="page2.php" formmethod="post" formtarget="_blank">
	<!-- 
	formmethod 给不同按钮添加不同的数据提交方式 属性要添加到按钮上 
	-->
</body>
</html>

增加改良的 input 元素,表单验证

下面是示例测试复制可用,需要测试兼容各个浏览器版本。月,周火狐浏览器暂时不兼容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>input</title>
</head>
<body>
	<form action="page1.php" method="get">
		<label required for="tel">电话：</label><input type="tel" name="tel" id="tel">
		<br>
		邮箱表单：
		<input required type="email">
		<br>
		url表单：
		<input required type="url">
		<br>
		数字表单：
		<input type="number">
		<br>
		颜色表单：
		<input type="color">
		<br>
		滑动条表单：
		<input type="range">
		<br>
		搜索域表单：
		<input type="search">
		<br>
		日期表单：
		<input type="date">
		<br>
		时间表单：
		<input type="time">
		<br>
		UTC 时间表单：
		<input type="datetime">
		<br>
		本地时间表单：
		<input type="datetime-local">
		<br>
		月时间表单：
		<input type="month">
		<br>
		周时间表单：
		<input type="week">
		<br>
		提交表单：
		<input type="submit" value="登录">
		<br>
		
	</form>
</body>
</html>

增加的页面元素
1. 新增的figure元素figcaption元素
  
  <figure> 标签规定独立的流内容（图像、图表、照片、代码等等）
2. 新增的details元素与summary元素
  
  <details> 标签用于描述文档或文档某个部分的细节。
3. 新增的mark元素
  
  <mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签
4. 新增的progress元素
  
  <progress> 标签标示任务的进度（进程）。
5. 新增的meter元素
  
  <meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。
6. 改良的ol列表
7. 改良的dl列表
  
  <dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

HTML5音频和视频播放

audio(音频)

HTML5提供了播放音频文件的标准,

<!--1.  种写法-->
<audio controls src="audio/mp3"></audio>
<!--2.  种写法-->
<audio controls>
	<source src="" type="audio/mp3">
	<source src="" type="audio/wav">
	<source src="" type="audio/ogg">
 </audio>

control(控制器)
control属性供添加播放、暂停和音量控件

标签：
<audio> 定义声音
<source> 规定多媒体资源，可以是多个

video (视频)

HTML5提供了展示视频的标准

<!--1.  种写法-->
<video src="视频路径" autoplay controls poster="封面图面路径"></video>
<!--2.  种写法-->
<video controls>
		<source src="" type="video/mp4">
		<source src="" type="video/ogg">
   </video>

control(控制器)
control属性供添加播放、暂停和音量控件

标签：
<video>定义声音
<source>规定多媒体资源，可以是多个

以下操作示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--文章标签-->
	<article>
		<p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>
		<!--文章相关解释展示,在文章的下面-->
		<figure>
			<img src="images/shanghai_lupu_bridge.jpg" alt="">
			<p>黄浦江上的的卢浦大桥</p>
			<p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p>
		</figure>
		<!--文章描述-->
		<details>
			<!--展示标题-->
			<summary>速度与激情</summary>
			<!--展开内容-->
			<p>（描述）这个电非常好看</p>
		</details>
		<p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，<mark style="background-color:red">接近上海市内环高架路的总长度。</mark>卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>
		<!--滚动条-->
		<progress></progress>
		<meter>sdfds</meter>
	</article>
	<!--start="5" : 列表顺序从第5个开始递增 ,reversed：规定列表为降序-->
	<ol start="5">
		<li>这是一个列表项</li>
		<li>这是一个列表项</li>
		<li>这是一个列表项</li>
		<li>这是一个列表项</li>
		<li>这是一个列表项</li>
		<li>这是一个列表项</li>
		<li>这是一个列表项</li>
		<li>这是一个列表项</li>
		<li>这是一个列表项</li>
		<li>这是一个列表项</li>
	</ol>
	<!--autoplay 自动播放音频-->
	<audio src="pipayu.mp3" controls autoplay></audio>
	<audio controls>
		<source src="pipayu.mp3" type="audio/mp3">
		<source src="pipayu.mp3" type="audio/mp3">
	</audio>
	<!--视屏展示 poster="sw.jpg"：首图展示-->
	<video controls src="Video001.mp4" poster="sw.jpg"></video>
</body>
</html>

June.1

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web基础学习（四）HTML5的主结构元素、表单

一、主结构元素HTML5主结构更改<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>learnvue</title> </head> <body> <div>...
复制链接

扫一扫