`
846717529
  • 浏览: 4981 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

你所不知道的html5与html中的那些事(一)

阅读更多
文章简介:
      关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作都可以达到真正的云方式呢?这一系列的问题你是否已经想明白了呢?
      本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),包括html5的父亲html的一些小隐私(您在开发中可能不知道的事);
 
回到今天的正题
今天这篇文章主要讲到的您可能不知道的事有:
1)html页面基本结构中您所没有注意到的内容有那些?
2)html5中最看重的理念“语义化”相比html有什么区别?
3)网页文件的命名您想到过会影响您网站的体验么?
 
第一个问题:
     html页面基本结构中您所没有注意到的内容有那些?
     下面我们看一个标准的html页面代码
这个是个最基本的html页面了,你也许一看感觉熟悉的不能在熟悉了,还有什么是我不知道的呢?
如果下面我说的几点您都知道那就证明您真的用心研究过html与浏览器了;
 
第一点:
     <!DOCTYPE html>这个标签的用法,也许您发现一个html页面您不写这个标签也是正确的,为什么还要加上他呢?用途是什么呢?其实它的用途是
      1、告诉浏览器这个文件是html文件;
      2、告诉浏览器html的版本,
    这个标签的写法标准的就是我上面写的,当然您可以小写浏览器不会出错,但是标准就是大写可以说整个html
标签就这个doctype标签标准是大写其余的标准都是小写;当然您也可以不按标准来毕竟html规则相对宽松;
小编认为越是宽松的规则开发人员就应该越按照标准来;
ps:html5中一定要有这个标签哦,具体的原因在后续的文章中会详解关于改进后的HTML5DOCTYPE;
 
第二点:
    <html lang="ch"> 这个标签中的lang属性,在一些页面中并没有这个属性,那么它又是干什么的呢?
其实它就是告诉浏览器我这个页面是什么语言的,注意是语言不是编码格式哦,您是否见过下面的场景:
浏览器提示“检测到当前页面为英文是否翻译为中文  ”这个就是因为这个属性造成的,目前不是所以的
浏览器都有这个功能的;
 
第三点:
<head>标签中其实都是用户不可见的东西,他所包含的东西都是给浏览器或是搜索引擎用的,但是除了<title>标签,他是用户在head中唯一可以看到的标签,说到title就先说他吧,给我们感觉好像就是一个页面名字一样可以显示在浏览器的tag栏中;其实它对于浏览器来或是搜索引擎来说功能还是非常大的;
       1,对浏览器来说title是书签或是收藏夹默认的名称(一般来说 ,也有例外)
       2,对搜索引擎来说,他是搜索页面的最优先关键字哦;
下面是meta标签的charset属性.这个大家应该都知道是告诉浏览器我们的文件的编码字符集,但是需要我们注意的是这个字符集与你所用的开发工具字符集是不是对应的?如果不对应可能会出现乱码的这个问题小编就遇到过,费
了好大的劲才找到这个问题
       haed中其它的一些标签我们在之后的文章中会一个一个的说明今天就说这两个吧;
 
第二个问题:
        html5中最看重的理念“语义化”相比html有什么区别?
      语义化这个概念应该说是伴着html5应运而生,什么是html5 中的所的语义化?简单来说就是"描述内容的含义(meaning)"
比如说<p>标签就是段落的意思,在html5中所有的标签都有它看书的语义的。而没有语义的标签在html中有,在html5中就没有了;比如<font>标签;而html5又为了补充html现在的不足加上一些新的标签如article,footer,header等等;
      而些标签的分类叫法也从“块级元素”与“行内元素”变成了“外围内容”与“短语内容”
      在html5中最基本的理念就是语义与显示分离,html代码中出现的标签都让开发人员或浏览器一看就知道是干什么用的东西,至于显示效果那是ccs3(Cascading Style Sheet)需要干的事情,所以在html5中这个两个好基友终于距离产生了美;
      那么语义化以后对html文档有什么好处么?
      1.可以提升可访问性与互操作性(兼容性会更好)
      2.改进搜索引擎的优化
      3.一般来说可以让 html文件更小;
      4.让代码更好唯护,与css3的关系更和谐;
 
第三个问题:
网页文件的命名你想到过会影响你网站的体验么?
这个一听第一感觉就是不靠谱,一个文件的名字还会影响到网站的体验?
正确的答案确实是:是的
如 :文件名:Html_First_Blog.htm 与html-first-blog.html
这个两个文件名不管是在用户的体验上与搜索引擎上都第二个完胜第一个。是不是有人会问为什么 ??
下面我就说一下有如下几点是需要我们注意的:
 1,文件名需要用小写字母:
       场景就是最简单的输入地址吧,你认为写
                           http://192.168.0.1/TestHtml/The_First/Html5.html
      方便还是写    http://192.168.0.1/testhtml/the-first/html5.html方便呢?
      这个自己体会吧
2,用短横线分隔单词;
     大家一定会认为,用"_"挺好,其实这是做c开发时候的写法,也可以说是习惯,但是在网站中“-”是搜索引擎更喜欢的style;
3,使用标准的扩展名:
     现在用好多的网站都是用.htm的扩展名,这个浏览器也不会报错,但是标准的扩展名就是.html的所以大家以后写的时候就不要省时间少写一个字母“l”了;
记住以上几点才正确的写网页文件的命名方法哦,不要把写其它语言的方法放进来。
 
今天讲了一些平时我要经常见到,但是不会去注意的地方(只是冰山一角),不知道对读到这篇文章的您有什么帮助没有?
其实这些细节平时如果不关注也许也不会出什么大的错误,但是一个好的开发人员需要有一个好的习惯,一款好的软件需要用良好的细节体验,一个好的网站同样也需要更好规范与细节(您说呢?)
 
下次文章我们会讲一些关于网站制作的小巧门与html的<h>标签的用法;也许还会有一些你所不知道的好玩的小问题,帮您解答;
 
感谢您的阅读,期待下次与您见面;
 
 

 

转载请注明出处:谢谢合作!
如果有什么不同的想法与建议,或是想第一时间获得博客更新提醒,以及更多技术信息分享,欢迎关注个人微信公众平台:程序员互动联盟(coder_online),扫一扫下方二维码或搜索微信号coder_online即可关注,我们可以在线交流。

 

 

分享到:
评论

相关推荐

    你必须知道的HTML5特征、窍门和技术

    资源名称:你必须知道的HTML5特征、窍门和技术内容简介:一、新的Doctype//zxx:”doctype”中文意思指“文档类型”仍在使用麻烦的,不可能记得住的XHTML文档类型?如果是,为什么还在用呢?使用新的HTML5文档类型...

    HTML4和HTML5之间的10个主要不同

    HTML5是最新的HTML标准,或迟或早,所有的web程序员都会发现需要使用到这个最新的标准,而且,很多人都会感觉到,重新开发一个HTML5的网站,要比把一个网站从HTML4迁移到HTML5上容易的多,这是因为这两个版本之间有...

    解读html5关于html5的应用与认识

    在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走: • 何时能用 • 网页设计师的浏览器支持列表 • HTML5 测试 • 布局引擎对比 你还可以运行 Javascript(用...

    HTML5移动Web开发指南.pdf

    另外,由于时间及水平有限,在本书编写过程中可能存在一些对HTML5及移动Web技术认识不全面或者表述错漏的地方,敬请读者批评指正。作者的联系邮箱为,新浪微博是@三桥sankyu。谨以最真诚的心希望能与读者共同交流,...

    最新HTML5播放器插件含Demo!

    现在已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今天向大家推荐一款非常优秀的html5播放器MediaElement.js,它不仅能够添加我们...

    html5shiv.js

    所以我们在使用过程中,想要让低版本的浏览器,即IE9以下的浏览器支持,那么这款html5shiv.js是一个非常好的选择! 上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面...

    HTML5开发环境搭建

    Dreamweaver CS6算是最为强悍的HTML5开发环境,并且是我所知道的唯一支持Jquery mobile所见即所得的开发工具。appMobi非常适合在不同分辨率下的调试,非常cool的界面也非常做演示之用。 2. HTML5的各个元素的...

    HTML5新特性

     你可能不知道,Google 的首页也使用 HTML5,不过,目前,他们还仅仅使用了 HTML5 的 doctype,页面的其它部分还是旧代码,但 Google 在他们的各种应用中已经在广泛采用 HTML5。最典型的例子是 Gmail,HTML5 的离线...

    你不知道的5个HTML5API

    本文将为你提供5个你所不知道的API,助你在HTML5开发这条路上走的更远。一提到HTML5,你脑海里是不是闪现这样的画面:“一大堆脱衣舞女和独角兽走进房间,然后演奏着 I’mSexyandIknowit”。产生这样的想法难道是...

    IE支持html5脚本插件

    让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会...

    HTML5实现漂亮的分步骤注册登录表单

    分步骤的登录注册表单现在也比较多,主要是能提高用户体验,用户可以有选择性的填写相应的表单信息,不至于让用户看到一堆表单望而却步。今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单,外观不用说...

    html5视频播放器.zip

    只要你知道视频流的地址,你就可以直接在页面输入,然后开始播放,不再是文件里面写死的一个视频地址,而是可以随时接收任何一个视频地址。播放中实现了快进、快退、播放进度、还有大中小全屏三种画面、还有开关背景...

    让IE支持CSS3 Media Query实现响应式Web设计,html5.js让IE(包括IE6)支持HTML5元素方法

    微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,...

    Linux公社推出的HTML5 参考手册.chm

    Linux公社推出的HTML5 参考手册,不知道为啥比别的手册大了一倍,呵呵,我没有仔细对比,大家自己下载了看看吧。

    你必须知道的28个HTML5特征、窍门和技术

    摘要: 前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。更多html5信息请关注:http://www.html5cn.org

    帝国CMS HTML5自适应模板 v7.2.zip

    在这个版本里,不知道为什么,视频调用我一直没有调用出来,也希望精通帝国的学长帮忙指点一二。这个版本里,没有什么特别的东西,主要是以文字为主,不过这也是为用户着想,因为现在的手机流量费用都很高,所以,...

    cpp-GDevelop是一个开源HTML5和原生游戏创建工具不需要任何编码技能

    GDevelop是一个功能齐全的开源游戏开发软件,允许在不知道特定编程语言的情况下创建HTML5和原生游戏。 所有游戏逻辑都是使用直观且功能强大的基于事件的系统构建的。

    你不知道的5个HTML5新功能

    当你在人群中谈论到“HTML5”,你也许会感觉到,自己像一位异域舞者或独角兽,来到屋子中间,带有明显的“我很酷,我知道它”的意味。这不能说我们虚荣,多少年来,基本的HTML API一直没有任何发展,以至于当有一个...

Global site tag (gtag.js) - Google Analytics