html5标签应用 html5 center标签

转载

mob64ca1405d568 2024-08-15 18:39:43

文章标签 html5标签应用 html5 html ide hg 文章分类 HTML5 移动开发

文章目录

HTML5

1）section
2）article
3）aside
4）header
5）footer
6）nav
7）figure
8）embed
9）mark
10）音频和视频
11）datalist选项列表（通过id与input连接）
12）output
14）hgroup

总结

HTML5

1. 内容类型：< !DOCTYPE html> 
 2. 指定字符集编码：< meta charset=”utf8”> 
 3. 不允许写结束标记的标签：br、col、embed、hr、img、input、link、meta

HTML5新增语义化标签

html5标签应用 html5 center标签_hg

代码结构

<body>
    <div class="wrap">
    <header>header</header>
    <section>
        <nav>nav</nav>
        <main>
            <article>
                <header></header>
                <p></p>
                <footer></footer>
            </article>
            <article>
                <header></header>
                <p></p>
                <footer></footer>
            </article>
        </main>
        <aside>aside</aside>
    </section>
    <footer>footer</footer>
    </div>
</body>

1）section

表示内容区块,一般入章节、页眉、页脚或者页面中的其他部分。
可以与h1-h6等元素结合起来使用，标示文档的结构

2）article

表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或者报纸中的一篇文章

3）aside

Aside表示acticle元素的内容之外的，与article元素的内容相关的辅助信息。

4）header

头部标题

5）footer

底部footer

6）nav

表示页面中导航链接的部分：
① 传统的导航条 ② 腾讯新闻 ③侧边栏导航 ④内业导航 ：百度百科 ⑤翻页操作

7）figure

表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。
规定独立的流内容（图像、图表、照片、代码等等）。使用figcaption元素为figure元素添加标题。 

◆ figure 是一种元素的组合，带有可选 标题。用来表示网页上一块独立的内容。
   figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。 
◆ figcaption 表示 figure 的标题。从属于 figure ， 并且， figure 中只能放置一个figcaption

8）embed

embed标签用于定义嵌套的内容，包括各种媒体，格式可以是midi、wav、AIFF、AU、MP3、Flash等

9）mark

高亮显示文字，一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

10）音频和视频

控件属性：

controls 播放控件
autoplay 自动播放
loop 重复播放
poster 视频播放前显示的图片
muted 静音

插入音频audio：

audio/ogg audio/mpeg(mp3)

插入视频video：

video/ogg video/mp4 video/webm

音频视频示例代码

<video controls="controls" autoplay="autoplay" loop="loop" poster="images/img05.jpg">
    <source src="video/3theB.mp4" type="video/mp4">
    <source src="video/3theB.ogg" type="video/ogg">
    <source src="video/3theB.webm" type="video/webm">
</video>
<audio controls >
    <source src="video/zhoujie.mp3" type="audio/mpeg">
    <source src="video/zhoujie.ogg" type="audio/ogg">
</audio>

11）datalist选项列表（通过id与input连接）

html5标签应用 html5 center标签_hg_02

12）output

表示不同类型的输出，比如脚本的输出

for：定义输出域相关的一个或多个元素。 
form：定义输入字段所属的一个或多个表单。 
name：定义对象的唯一名称。（表单提交时使用）

html5标签应用 html5 center标签_hg_03

14）hgroup

< hgroup> 标签被用来对标题元素进行分组。 

当标题有多个层级（副标题）时，< hgroup> 元素被用来对一系列 < h1>  < h6> 元素进行分组。

表单示例代码

<style>
	*{margin: 0; padding: 0;}
	form{
		width: 420px;
		height: 510px;
		border: 1px solid #000;
		margin: 80px auto;
		padding: 30px;
	}
	fieldset{
		border:none;
		border-top: 1px solid green;
		padding: 10px;
	}
	textarea{
		resize:none;
		overflow: scroll;
	}
	.submit{
		border: 2px solid #003c74;
		background: #bcd4f6;
		float: right;
		margin-right: 44px;
		margin-top: 5px;
	}
	input,select,textarea{
		border:1px solid #7f9db9;
	}
</style>
</head>
<body>
	<form action="">
		<fieldset>
			<legend>个人信息</legend>
			<p>
				<label for="name"> 姓名*</label>
				<input type="text" id="name">
			</p>
			<p>
				<label for="add"> 地址*</label>
				<input type="text" id="add">
			</p>
			<label for="">出生*</label>
			<select>
				<option >1</option>
				<option >2</option>
				<option >3</option>
			</select>
			<select>
				<option >Jan</option>
				<option >Fab</option>
				<option >Jan</option>
			</select>
			<select>
				<option >1997</option>
				<option >1998</option>
				<option >1999</option>
			</select>
			<p>
				<label for="">性别*</label>
				<select>
					<option >女</option>
					<option >男</option>
				</select>
			</p>
		</fieldset>
		<fieldset>
			<legend>其他信息</legend>
		<fieldset>
			<legend>你喜欢这个表单吗？*</legend>
		
			<input type="radio" >喜欢
			<input type="radio">不喜欢
		</fieldset>
		<fieldset>
			<legend>你喜欢什么运动？*</legend>
			<input type="checkbox" checked="checked">足球
			<input type="checkbox">篮球
			<input type="checkbox">羽毛球
		</fieldset>
		<fieldset>
			<legend>请写下你的建议？*</legend>
			<textarea name="" cols="50px" rows="8px"></textarea>
			<input type="submit" value="提交个人信息" class="submit">
		</fieldset>
	</fieldset>
</form>

表单效果图

html5标签应用 html5 center标签_hg_04

表格示例代码

<head>
<meta charset="utf-8">
<style>
	table{
		width: 600px;
		height: 242px;
		border: 1px solid #0047e1;
		border-collapse:collapse; //合并相邻的边框线
		/*table-layout: auto;*/ //边框与边框之间的距离 fixed固定
		font-size: 11px;
		margin: 50px auto;
	}
	caption{
		font-weight: bold;;
		font-size: 18px;
		margin-bottom: 12px;
	}
	/*td{
		border-bottom:1px solid #000;//单线表格时用
	}*/
	.th1{
		background: #0047e1;
		color: #fff;
	}
	.tr_ab{
		background: #7e9de5;
		color: #d8e4f8;
	}
	.pink{
			background: #f9d2e0;
	}
</style>
</head>
<body>
	<table rules="group">
		<colgroup span="2"></colgroup>
		<thead>
			<caption>2017全国非邮发报刊联合征订目录</caption>
			<tr class="th1">
				<th>代号</th>
				<th>刊名</th>
				<th>刊期</th>
				<th>出版地</th>
				<th>年定价</th>
				<th>CN号</th>
			</tr>
		</thead>
		<tbody>
			<tr class="tr_ab">
				<td colspan="6">A马列主义毛泽东思想</td>
				<!-- <td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td> -->
			</tr>
			<tr>
				<td>0001</td>
				<td >马克思主义研究</td>
				<td>月刊</td>
				<td>北京</td>
				<td>144.0</td>
				<td>11-3911</td>
			</tr>
			<tr class="pink">
				<td>0002</td>
				<td>马克思主义研究</td>
				<td>月刊</td>
				<td>北京</td>
				<td>144.0</td>
				<td>11-3911</td>
			</tr>
			<tr>
				<td>0003</td>
				<td>马克思主义研究</td>
				<td>月刊</td>
				<td>北京</td>
				<td>144.0</td>
				<td>11-3911</td>
			</tr>
			<tr class="pink">
				<td>0004</td>
				<td>马克思主义研究</td>
				<td>月刊</td>
				<td>北京</td>
				<td>144.0</td>
				<td>11-3911</td>
			</tr>
			<tr class="tr_ab">
				<td colspan="6" >B哲学、美学、心理学、宗教</td>
				<!-- <td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td> -->
			</tr>
			<tr>
				<td>0001</td>
				<td>马克思主义研究</td>
				<td>月刊</td>
				<td>北京</td>
				<td>144.0</td>
				<td>11-3911</td>
			</tr>
			<tr class="pink">
				<td>0001</td>
				<td>马克思主义研究</td>
				<td>月刊</td>
				<td>北京</td>
				<td>144.0</td>
				<td>11-3911</td>
			</tr>
			<tr>
				<td>0001</td>
				<td>马克思主义研究</td>
				<td>月刊</td>
				<td>北京</td>
				<td>144.0</td>
				<td>11-3911</td>
			</tr>
			<tr class="pink">
				<td>0001</td>
				<td>马克思主义研究</td>
				<td>月刊</td>
				<td>北京</td>
				<td>144.0</td>
				<td>11-3911</td>
			</tr>
			<tr>
				<td>0001</td>
				<td>马克思主义研究</td>
				<td>月刊</td>
				<td>北京</td>
				<td>144.0</td>
				<td>11-3911</td>
			</tr>
		</tbody>
		<tfoot>
		<!-- 总计： -->
		</tfoot>
	</table>
</body>

表格效果图

html5标签应用 html5 center标签_html5_05