HTML5新增的标签及使用
HTML5和HTML其实是很相似的，但是有些内容有发生了改变，今天我学习了一下HTML5发现还是挺好学的，只要有html+css基础就可以，今天知识看了下新的标签。
一、定义文档类型
在文件的开头总是会有一个标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这是显示的html的文档类型，上面那个是1.0的，下面这个就是HTML5的类型标签，很是简短
<!DOCTYPE html>
二、新的布局方式
如下图所显示的布局结果
正常的HTML布局就是通过div+css进行的，要是布局出这个页面正常的就是用div进行布局，然后给div进行起名字，然后进行样式的修改；
在HTML5中有个块状元素（有意义的div），也就是说不用div标签，而是用名字式的元素，例如：布局出第一个蓝色块是使用div，起名字，然后进行改变css；HTML是使用的header标签进行修改样式，header就是有意义的div
使用HTML5的新的结构标签，做出上面的布局，代码如下：
html代码：
<header>定义一个页面或是区域的头部</header>
<div>
<section>定义一个区域</section>
<aside>定义页面内容的侧边框部分</aside>
</div>
<footer>定义一个页面或是区域的底部</footer>
css代码：
/*页面顶部 header*/
header{
height:150px;
background-color:#abcdef;
}
/*页面中间 div*/
div{
margin-top:10px;
height:300px;
}
section{
height:300px;
background-color:#abcdef;
width:70%;
float:left;
}
article{
background-color:#F33;
width:500px;
text-align:center;
margin:0px auto;
}
aside{
height:300px;
background-color:#abcdef;
width:28%;
float:right;
}
/*页面底部*/
footer{
height:100px;
background-color:#abcdef;
clear:both;
margin-top:10px;
}
这样就可以不用使用div而是使用的有意义的div元素就可以布局出上面的那个样式了
三、新的标签
（1）定义导航链接<nav></nav>
它也是有意义的标签，并不是在某处加上这个标签就有了导航的样式了，这都是有意义的div而已，在头部header中加入菜单标签<nav>，nav标签可以和<ul><li>标签合用
html代码：
<header>
<p>这是一个header部分</p>
<nav> <!--导航链接标签-->
<ul> <!--配合ul使用-->
<li>首页</li>
<li>关于</li>
<li>产品</li>
<li>联系</li>
</ul>
</nav>
</header>
css代码：
/*定义nav的高和颜色*/
nav{
height:30px;
background-color:#F33;
margin-top:100px;}
/*正常设置li的样式*/
li{
list-style:none;
float:left;
width:100px;
height:30px;
}
这样就可以实现之前只用div进行的菜单布局了
（2）定义文章标签<article></article>
可以使用文章块标签进行写文章，这就使用这个标签进行写文章在section部分，可以和<h1><p>合用
html代码：
<article><!--文章块div-->
<h2>文章标题</h2><!--标题-->
<p>文章内容文章内容文章内容文章内容文章内容文章内容
<br>
文章内容文章内容文章内容文章内容文章内容文章内容<br>
文章内容文章内容文章内容</p>
</article>
css样式：
article{
background-color:#F33;
width:500px;
text-align:center; /*水平居中*/
margin:0px auto;
}
这样就可以写一篇文章了
（3）定义媒介内容的分组，以及它们的标题<figure>
A。这个标签可以和它的配套标签联合使用<figcaption>，不过<figcaption></figcaption>中间写标题
<figure>
<figcaption>标题</figcaption><!--配套-->
<p>标题内容</p>
</figure>
B。还可以和<dt><dd>联合使用，其中<dt></dt>是写标题，而<dd>写内容，显示的效果和配套使用的效果也有差异
<figure>
<dt>标题1</dt>
<dd>标题内容</dd>
</figure>
（4）定义对话框或窗口<dialog>
在这个标签中也是可以使用dd和dt标签，对话框中的标题和内容，对话框有个属性是open，这个标签的兼容性不是很好
<dialog open>
<dt>1问题</dt>
<dd>1答案</dd>
<dt>2问题</dt>
<dd>2答案</dd>
</dialog>
（5）定义命令的列表或菜单<menu>
A。这个标签可以和li合用
<menu>
<li>定义列表</li>
<li>定义列表</li>
<li>定义列表</li>
</menu>
B。可以给右键单击中添加自己的内容（只有火狐浏览器可以兼容）
联合（定义用户可以从弹出菜单调用的命令/菜单项目）<menuitem>标签使用
<menu type="context" id="cai">
<!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码-->
<menuitem label="菜单一" onclick="alert('这是菜单一')" icon="右键单击显示的图片"></menuitem> </menu>
<span contextmenu="cai">单击我试试</span>
右键单击后出现想要的菜单项
单击菜单项，弹出内容
（6）标题组<hgroup>
里面可以写一些标题的结合<h3>合用
<hgroup><!--标题组-->
<h3>标题</h3>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
</hgroup>
（7）定义小号文本<small>
这个标签和其他的加粗什么的标签其实是差不多的
<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>
（8）定义元素的细节<details>
里面的内容可以配合标题和内容标签来使用
<details>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
</details>
点击详细信息就可以看到标题和内容了
（9）定义 ruby 注释<ruby>
碰到不认识的字了可以使用这个进行注释拼音，但是有的兼容性不是很好，到时候可以进行修改
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容-->
（10）定义预定义范围内的度量<meter>
有几个属性值，min="" max="" value="" low="" high=""，其中low和high是范围，当value范围超了话就会显示不同的效果
<meter min="0" max="10" value="4" low="2" high="7">
value值超出了范围后
<meter min="0" max="10" value="8" low="2" high="7">
（11）进度条的标签<progress>
<progress id="jindu" max="100" value="0"></progress>进度条
最大值就是进度条的长度就行，value值就是显示的进度，用它可以进行动态的进度条
<progress id="jindu" max="100" value="0"></progress>进度条
<script>
var pro = document.getElementById("jindu");
setInterval(function(){ pro.value+=1;},1000); //间隔1秒它的值加1
</script>
这样进度条就可以完成了，是不是比只用js写的好多了，不同的浏览器表现形式还不一样
HTML5新增的标签及使用的更多相关文章
- HTML5新增Canvas标签及对应属性、API详解（基础一）
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- HTML5新增video标签及对应属性、API详解
知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...
- html5 新增语义标签
一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...
- HTML5新增的标签与属性
一.关于DTD HTML5 不基于 SGML,所以不需要引用 DTD(HTML 4.01 基于 SGML) 二.HTML5结构标签 <header> 标记定义一个页面或一个区域的头部 &l ...
- HTML5新增结构标签
引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...
- HTML5新增的标签和属性归纳
收集总结的HTML5的新特性,基本除了IE9以下都可以使用. HTML5语法 大部分延续了html的语法 不同之处:开头的 <!DOCTYPE html> <html lang=&q ...
- 总结HTML5新增的标签及功能
https://my.oschina.net/chengkuan/blog/422306 标记意义及用法分析/示例 属性/属性值/描述 <article> 定义独立的内容,如论坛帖子.报纸 ...
- HTML5新增的标签
结构性元素<header><footer>定义页眉(与<head>不一样)和页脚 <section>定义section<article> 定 ...
- html5新增语义标签
1.header <header> 标签定义文档的页眉(介绍信息). 2.nav <nav> 标签定义导航链接的部分. 3.article <article> 标签 ...
随机推荐
- Nginx+Tomcat 配置负载均衡集群
一.Hello world 1.前期环境准备 准备两个解压版tomcat,如何同时启动两个tomcat,请看我的另一篇文章<一台机器同时启动多个tomcat>. nginx官网下载解压版n ...
- django “如何”系列4：如何编写自定义模板标签和过滤器
django的模板系统自带了一系列的内建标签和过滤器,一般情况下可以满足你的要求,如果觉得需更精准的模板标签或者过滤器,你可以自己编写模板标签和过滤器,然后使用{% load %}标签使用他们. 代码 ...
- shell脚本里获取字符串的最后一个字符
STR=123456abc FINAL=`echo ${STR: -1}` 或者 FINAL=${STR: -1} 都可以让FINAL获得c这个最后一个字符
- Algorithm --> 字母重排
字母重排 输入一个字典(用***结尾),然后再输入若干单词.没输入一个单词w,都需要在字典中找出所有可以用w的字幕重排后得到的单词,并按照字典序从小到大的顺序在一行中输出,如果不存在,输出“:(”.单 ...
- Hibernate学习（2）- hibernate.cfg.xml详解
1:主配置文件主要分为三部分: 注意:通常情况下,一个session-factory节点代表一个数据库: 1.1:第一部分 数据库连接部分,注意"hibernate.connection.d ...
- [COGS 2583]南极科考旅行
2583. 南极科考旅行 ★★ 输入文件:BitonicTour.in 输出文件:BitonicTour.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 小美要 ...
- python全栈学习--day2
一.in的使用 说明:in有相当多的用处,比如判断,循环for 等. 实例一:in 操作符用于判断关键字是否存在于变量中 s = '男人john' print('男孩' in s) print('男孩 ...
- Java终结方法的使用（终结守卫者）
终结方法finalize()通常是不可预测的,也是很危险的,一般情况下是不必要的. Java语言规范并不保证finalize()会被及时执行,即不确定终结方法执行时间,只规定在对象被垃圾回收之前执行 ...
- Java中HashMap底层实现原理(JDK1.8)源码分析
这几天学习了HashMap的底层实现,但是发现好几个版本的,代码不一,而且看了Android包的HashMap和JDK中的HashMap的也不是一样,原来他们没有指定JDK版本,很多文章都是旧版本JD ...
- Java基础学习笔记十八 异常处理
什么是异常?Java代码在运行时期发生的问题就是异常. 在Java中,把异常信息封装成了一个类.当出现了问题时,就会创建异常类对象并抛出异常相关的信息(如异常出现的位置.原因等). 异常的继承体系 在 ...