聊聊html5那点事

文章简介：

关于html5相信大家早已经耳熟能详，但是他真正的意义在具体的开发中会有什么作用呢？相对于html，他又有怎样的新的定义与新理念在里面呢？为什么一些专家认为html5完全完成后，所有的工作都可以达到真正的云方式呢？这一系列的问题你是否已经想明白了呢？

本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如：html5新的理念与想法，html5的新标签的用意与具体开发中场景应用，html5与css3的感情经历（用法搭配），包括html5的父亲html的一些小隐私（您在开发中可能不知道的事）;

大家好，又与大家见面了，今天我会为大家讲到的您可能不知道的事有：

1)html页面<h>标签的用法细节?

2)构建网站时候需要做的一些准备？

3)url组成与分类？

4)html5中header的正确用法是什么？

第一个问题：

html页面<h>标签的用法细节?

在现在的html规范中一共有h1-h6,六级标题它们都有自己的css样式，而且它们都是爹与儿子的关系，就是说h1包含h2,h2是h1的细化；如果说你在用这个标签的时候没有上面我说的关系就证明你用的不标准；

而<h>的另一个含意就是是整个文章的骨架；打个比方说明一下，就好像你写word文档的时候，当你把认为是标题的空字段用word给的样式标记上，这样word就会跟据你做的标记生成对应的目录；那么在html中的<h>的作用与word中的是一样的，当然浏览器不会自动生成目录；

不过搜索引擎可是先找的就是<h>中的内容做匹配哦，当然h1是它们中最受宠爱的；（但是不要认为你都用h1写文章就可以很好的提升搜索排名哦）；

给各位看一段代码先：

上面的代码就是一个简单的用<h>标签的用法，没有什么特别的只是想通过上面的例子给各位一些小建议：

1.建议在整个网站都用一致的标题层级这样可以提升用户体验；

2.如上面的h2一样，lang属性与html中的lang属性不一样，也就是说可以对每一个标题分别给一种语言格式；

3.如果各位建立锚链接那么就需要标题中添加id属性；

4.还有最重要的一点就是在html5中的构建页面的结构的四大元素都与<h>标签有关（这里先说一下这四个元素都是什么，之后在后面的文章中我非常详细的说明的它们分别是article,aside,nav和section）

第二个问题：

构建网站时候需要做的一些准备？

可能一些工作人员，很少想这个问题，一般的时候都是领导给了一些效果图之后就按照对应的文档来弄了，这个过程中可能有一些人会想想这样

合理不？也有很多人不想给什么需求就做什么需求，反正一样拿钱，至于网站设计的问题那个网站设计师的事情，好不管你属于那种，都应该看看下面的内容因为，他直的很有用，不管是以后对你的客户或着是自己的网站；

1.确定为什么要创建这站点，需要展示的内容是什么？

2.考虑站点的访问者（就是用户，我们衣食父母），应该如何调整内容使之吸引这些访问者；

3.这个网站需要多少个页面，你需要一个怎么样的网站结构（这个结构可以在定网站之前就在纸上画画，时间不用太长但是可以很宏关的知道

这个网站的树形图），你希望访问者怎样来体验你的网站，是按照你写好的走，还是用户可能自己慢慢发现其中的秘密；

4.做好网站的目录结构与命名规则这个重要性对后期的维护是建设性的；

5.如果自己没有好的想法可以去对手的网站去观模一下，或者是自己看看与设计相关的书，这个是需要用心研究一下的；（必毕设计师还是一个很值得人尊敬的行业）；

6.开发网站前还需要一个必不可少的东西那就是工具，（工预善其事，需要利其器），这个经常做开发的我就不说了，工具用的顺手就行，不分哪个好哪个坏；如果是刚开始做这方面工作的朋友，那就要好好想想了，各位平台都有不错的工具哦，在文章的结尾我会给大家推荐几个的；

第三个问题：

url组成与分类？

URL（UniformResourceLocator,统一资源定位符）

URL格式如下：

“http://www.baidu.com/test/index.html”

他是由模式+服务器名称+路径+文件名组成；

其中：

"http://":就协议模式，最常见的就是http（超文本传输协议了）其他还有https(加密传输，用于安全网页)、ftp（文件传输协议，也可以用于下载哦，很快的一个协议），file(可以用这个协议访问本地的硬盘或本地文件)

"www.baidu.com":就是服务器名称了；（现在的浏览器可以让你只输入服务器的名称就可以访问默认的服务器网页，不需要写访问协议，默认的就是“http”）

"/test/":就是路径了，通常的路径分成“相对”与“绝对",在我们写网页的时候，加载资源就必不可少的，什么用相对路径什么时候用绝对路径就显得相当重要了,通常我们会把放在自己服务器上的资源使用“相对路径”，而放在别人服务器上的资源就用“绝对路径”;

“index.html”:这个就是文件名字了；通常index.html这个文件名也是不用写的，因为web服务器会把平这个页面设置成默认的页面，当然你也可以修改web服务器让其他的页面变成默认的页面（有关服务器的知识就不再这里说明了）

第四个问题：

html5中header的正确用法是什么？

<header>标签就HTML5中的新的标签，可能大家都不熟悉他的用法，也不经常去用因为从比较古老的思维方式想认为他没有什么特别的样式，与div可能感觉上也没有什么的区别；

下面我就为大家好好分析一下这个header标签的用法；

header标签在html5中标准的含义就是网页的页眉，他就用来放一组介绍性或者导航性的内容的区域；大家不然被这个页眉弄的思维狭隘了，以为页眉就一定要在页面的头部或是前面；

其实他可以放在页面中的任何位置，也可以有任意多个，只要他可以实现他的语意与作用就可以,那么他具体需要怎么用呢？

通常页面包含网站的标志、主导航、搜索框和其他全站链接等；

如下面的代码：

这个header标签就表示的是整个网页的页眉，他将一组本网页的导航包括起来，很多曾加了页面的阅读性与访问性，当然上面的用法只是他的用法中的一种，你也可以在下面的内容中继续使用header，只要你的页面看起来语意很明显就好；

了解了他的用法之后下面说说在用他的时候需要注意的东西吧，相信会有很多朋友不知道下面我说的内容的：

1.只在必要时使用header标签，什么是必要的时候就是可以很多提升网页语意的时候，如果只有h1~h6而没有其他的什么内容，就没有必要非要用header了,因为他已经是标题了；

2.header是headerh是h,不要认为他们很想就可以互换使用，其实他们还是很有本质的区别的，这个希望各位朋友好好体会一下；

3.不要把header标签嵌套的footer或address标签中,反之也是一样的；

4.在老的HTML中其实用div也可以实现header的效果，但是需要用id做区分来曾加语意，也可以说header是取代div的一块功能的一种用法；

5.其实的header标签不一定要像例子中的那样包含nav标签，但一般情况下用header标签的时候就可以包含nav标签；因为他是页面的导航。（在后面将nav时候会重点将他的语意用法）

今天讲了一些概念性的东西，不知道对读到这篇文章的您有什么帮助没有？是不是认为HTML5没有我们想的那么神秘但也没有我们想的那样的简单？

下篇文章我会讲一些与HTML5标签中，导航相关的（nav）、定义区块相关的（article,section）;也许还会根据您的评论或提问在下一个文章中解答哦；

感谢您的阅读，期待下次与您见面；

第一时间获得文章更新提醒，每天发布一篇技术大牛原创文章，更多技术信息分享，欢迎关注微信公众平台:程序员互动联盟(coder_online)，搜索微信号coder_online即可关注，在线帮你解决技术难点，给大牛直接出难题！！！