文章目录
HTML5
1. 内容类型：< !DOCTYPE html>
2. 指定字符集编码：< meta charset=”utf8”>
3. 不允许写结束标记的标签：br、col、embed、hr、img、input、link、meta
HTML5新增语义化标签
代码结构
<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连接）
12）output
表示不同类型的输出，比如脚本的输出
for：定义输出域相关的一个或多个元素。
form：定义输入字段所属的一个或多个表单。
name：定义对象的唯一名称。（表单提交时使用）
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>
表单效果图
表格示例代码
<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标签的小总结，后期将继续更新html基础知识点
文章为原创内容，要是遇到有不合适的地方欢迎赐教🙌
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
