你所不知道的html5与html中的那些事（二）

文章简介：

      关于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（Uniform Resource Locator,统一资源定位符）

  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是header  h是h ,不要认为他们很想就能够互换使用，其实他们仍是颇有本质的区别的，这个但愿各位朋友好好体会一下；

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

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

5.其实的header标签不必定要像例子中的那样包含nav标签，但通常状况下用header标签的时候就能够包含nav标签；由于他是页面的导航。（在后面将nav时候会重点将他的语意用法）

 

 

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

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

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

 

附录：

网页编辑器推荐：

若是你是windos版本那就简单了，菜鸟的话就用：

1）dreamweaver 吧，虽然有点占内存可是对菜鸟来讲是很很少的IDE工具；

果如认为本身是中级或是高手：

2）Sublime Text是一个不错的选择，用不少的插件与很好玩的用法，并且速度超快，流畅感不错；

3）Text Editor也不错，也是轻量级的开发工具；

4）Notepad++这个就不过多的解释了；

若是你是OSX如今流行的工具备：

1）BBEdit（www.barebones.com/products/bbedit）也是一个很强大的开发工具；

2)Sublime Text(www.sublimetext.com) 这个上面说过了；

3）TextMate( http://macromates.com)这个就是BBEdit的简化版本

 

在这里简单的推荐了几个；还有不少能够上网上找找，工具这个东西适合本身就好。

转载请注明出处：谢谢合做！

若是有什么不一样的想法与建议，或是想第一时间得到博客更新提醒，以及更多技术信息分享，欢迎关注我的微信公众平台:程序员互动联盟(coder_online)，扫一扫下方二维码或搜索微信号coder_online便可关注,咱们能够在线交流。