语义化标签
来源:互联网 发布:js时间戳和php时间戳 编辑:程序博客网 时间:2024/05/19 09:50
语义化标签
在html5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化 也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~~ 谁不想简单轻松一些呢。。。
语义化标签有2种,一种是单纯语义化的,无功能,二种是语义化,且有功能的。
一:无功能,语义化标签
1.1 - <header></header>SM:也就是我们的头部标签, 一般用于网站头部内容
1.2 <footer></footer>SM:有头部肯定就有底部,一般用于网站底部(赶脚好废话呀~~)。
1.3 <nav></nav>SM:导航标签,这个也比较好理解,平时我们用UL标签写导航的时候,UL里面一定是要包含li标签标签的,这样会有一定的局限性,<nav></nav>标签就不局限里面所房标签,可以是一群的a标签,也可以是一个a,一个p,你喜欢就好!
<nav><a href="">导航1</a>
<a href="">导航2</a>
<a href="">导航3</a>
<a href="">导航4</a>
</nav> 1.4 <hgroup></hgroup>
SM:标题组合,一般为页面的主要标题加描述
<hgroup><h2>我是标题</h2>
<h3>我是标题描述</h3>
</hgroup> 1.5 <section></section>
SM:一个板块或者一个区域内容,用于划分页面不同区域
1.6 <article></article>SM:用来在页面中表示一套结构完整且独立的内容部分
1.6.1 <aslde></aside>SM:主题的附属信息(用途很广,主要就是一个附属内容),如果article里面为一篇文章的话,那么文章的作者以及信息内容就是这篇文章的附属内容了
1.7 <figure></figure>SM:媒体元素,比如一些视频,图片啊等等
<figure><img /> //图片
<figcaption>我是图片的说明描述</figcaption> //图片说明
</figure> 1.8 <time></time>
SM:专门为时间而出的标签,以往我们时间标签很多,比如span,i,b等等 time标签有个属性datetime="" //没实际功能,便于查找
二:有功能,语义化标签
2.1 <datalist></datalist>SM:选项列表,与input元素配合使用,来定义input可能的值
<input type="text" list="valList"> //要在input标签中添加一个新的list属性,属性值为datalist的ID~<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
当我在输入框中输入一个j的时候,里面相关的javascript就会显示出来~~
2.2 <details></details>SM:用于描述文档或者文档某个部分的细节~ 默认属性为open~
ps:配合summary一起使用
<details><summary>芝麻开门</summary>
<p>BOOM!!!!!!!!!!!!</p>
</details>
//没有点击时候的页面显示
//点击之后的内容显示 2.3 <progress></progress>
SM:用于制作进度条,里面有2个属性,1:max 总的进度 2:value 现在的进度
<progress max="200" value="100"> // max:总共为200,当前为100,就是说进度条只到的50%<span>20</span>% //用于兼容不支持此属性的浏览器
</progress>
三:关于兼容
毫无疑问,H5标签肯定是有兼容问题的, 低版本的IE是不认识这些语义化标签的,一般有2种办法可以解决这个问题
NO.1自己写javascript代码, 因为IE不认识这些标签,所以我们只需要在js中创建这些标签就好
<script type="text/javascript">document.createElement('header'); //创建一个header元素
</script>
这样我们就创建出来了一个header头部元素,现在我们就可以HTML和样式中写入这个标签
ps:因为创建出来的标签是没有任何默认属性的,所以我们要给创建出来的标签创建一个CSS属性display:block ;
NO.2直接在外部引入一个js文件,引入方法跟我们平时引入插件的方式一样(这里就不再阐述)。。。。
- HTML5语义化标签
- HTML语义化标签
- 页面标签语义化
- HTML语义化标签
- 标签语义化
- 标签语义化
- html5 语义化标签
- web标签语义化
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- 标签语义化
- HTML标签语义化
- Android和Fragment的onActivity诡异Bug
- 关于 VS 2015 C++ .dll文件的学习与编写(一)
- java的final修饰符
- haproxy基础配置
- Spring MVC @RequestParam @RequestHeader @CookieValue用法
- 语义化标签
- java单例模式的两种实现
- LinkedList的实现
- 切片程序
- Mybatis ORM框架
- win32网络编程实例——同步IO
- hdu 5686 Problem B
- 接触c语言
- 实施工程师考核常用端口号