你所不知道的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)

原文发表时间:2015-03-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第72天:jQuery实现下拉菜单

1、块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度

612
来自专栏IT派

你还在付费爱奇艺VIP?神级程序员教你用Python任意下!

我相信如果看电影的都知道,不管是爱奇艺还是腾讯视频还是优酷很多的电影电视都是需要VIP的,但是为了看这么一个电视或者电影开个vip又不是很划算,小编今天教大家如...

944
来自专栏面朝大海春暖花开

java短信接口调用

之前一直在一个传统的单位上班好多听容易的技术都没接触过,即使有时候想搞一搞类似于支付宝支付,短信接口调用,微信公众号,小程序之类等功能,一直有心无力 终于跳槽了...

1261
来自专栏从零开始学 Web 前端

从零开始学 Web 之 JavaScript(一)JavaScript概述

JavaScript历史 要了解JavaScript,我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年,当时的网景公司正凭借其Naviga...

852
来自专栏编程派的专栏

提升 Python 编程效率的十点建议

程序员的时间很宝贵,Python这门语言虽然足够简单、优雅,但并不是说你使用Python编程,效率就一定会高。要想节省时间、提高效率,还是需要注意很多地方的。 ...

1K0
来自专栏向治洪

Vuejs和其他前端框架的对比

React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composabl...

30910
来自专栏Hongten

pygame系列_pygame的各模块叙述

在pygame中,有很多模块,每个模块对应着不同的功能,如果我们知道这些模块是做什么的,那么,对我们的游戏开发会起到关键性的作用。

762
来自专栏互联网杂技

AngularJS 对SEO是硬伤

在过去的2014年, 前端开发因为大量前端框架的出现开发模式有了巨大的改变,MVC这个web服务器端开发的模式,由于angularjs们的出现,变成了前端MVV...

4557
来自专栏十月梦想

移动端适配之比例缩放适配

前面一篇简单介绍了适配的方案(百分比适配),对于百分比的适配也是挺多问题,这次介绍一下viewport适配方案!

923
来自专栏IMWeb前端团队

移动端重构实战系列0——sandal 和 sheral

sandal是什么 简单来说,sandal是基于sass的一个移动端css的基础库,提供了一些基础的重置,常用的mixin,如flex布局,等分,水平垂直居中,...

1819

扫码关注云+社区