文章简介:
关于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方便呢?
这个自己体会吧
2,用短横线分隔单词;
大家一定会认为,用"_"挺好,其实这是做c开发时候的写法,也可以说是习惯,但是在网站中“-”是搜索引擎更喜欢的style;
3,使用标准的扩展名:
现在用好多的网站都是用.htm的扩展名,这个浏览器也不会报错,但是标准的扩展名就是.html的所以大家以后写的时候就不要省时间少写一个字母“l”了;
记住以上几点才正确的写网页文件的命名方法哦,不要把写其它语言的方法放进来。
今天讲了一些平时我要经常见到,但是不会去注意的地方(只是冰山一角),不知道对读到这篇文章的您有什么帮助没有?
其实这些细节平时如果不关注也许也不会出什么大的错误,但是一个好的开发人员需要有一个好的习惯,一款好的软件需要用良好的细节体验,一个好的网站同样也需要更好规范与细节(您说呢?)
下次文章我们会讲一些关于网站制作的小巧门与html的<h>标签的用法;也许还会有一些你所不知道的好玩的小问题,帮您解答;
感谢您的阅读,期待下次与您见面;
文章简介:
关于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方便呢?
这个自己体会吧
2,用短横线分隔单词;
大家一定会认为,用"_"挺好,其实这是做c开发时候的写法,也可以说是习惯,但是在网站中“-”是搜索引擎更喜欢的style;
3,使用标准的扩展名:
现在用好多的网站都是用.htm的扩展名,这个浏览器也不会报错,但是标准的扩展名就是.html的所以大家以后写的时候就不要省时间少写一个字母“l”了;
记住以上几点才正确的写网页文件的命名方法哦,不要把写其它语言的方法放进来。
今天讲了一些平时我要经常见到,但是不会去注意的地方(只是冰山一角),不知道对读到这篇文章的您有什么帮助没有?
其实这些细节平时如果不关注也许也不会出什么大的错误,但是一个好的开发人员需要有一个好的习惯,一款好的软件需要用良好的细节体验,一个好的网站同样也需要更好规范与细节(您说呢?)
下次文章我们会讲一些关于网站制作的小巧门与html的<h>标签的用法;也许还会有一些你所不知道的好玩的小问题,帮您解答;
感谢您的阅读,期待下次与您见面;
第一时间获得博客更新提醒,以及更多技术信息分享,欢迎关注个人微信公众平台:程序员互动联盟(coder_online)
1.直接帮你解答Html5上面的疑问
2.第一时间获得业内十多个领域技术文章
3.针对文章内疑点提出问题,第一时间回复你,帮你耐心解答
4.让你和原创作者成为很好的朋友,拓展自己的人脉资源
扫一扫下方二维码或搜索微信号coder_online即可关注,我们可以在线交流。

转载请注明出处:http://www.cnblogs.com/qiugc846717529/p/4374976.html
- 你所不知道的html5与html中的那些事第三篇
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...
- 你所不知道的html5与html中的那些事(三)
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...
- 你所不知道的html5与html中的那些事(五)——web图像
文章简介: 现在的页面,一般都离不开图像,而怎么做才能让我们的页面中的图像加载的又快又好呢?在优化页面速度的时候还有什么事是你所不知道的呢? 下面看看今天我为大家带来了哪些关于we ...
- 你所不知道的html5与html中的那些事(四)——文本标签
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...
- overflow:hidden 你所不知道的事
overflow:hidden 你所不知道的事 overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- 你所不知道的setTimeout
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...
- 你所不知道的SQL Server数据库启动过程,以及启动不起来的各种问题的分析及解决技巧
目前SQL Server数据库作为微软一款优秀的RDBMS,其本身启动的时候是很少出问题的,我们在平时用的时候,很少关注起启动过程,或者很少了解其底层运行过程,大部分的过程只关注其内部的表.存储过程. ...
- 关于setTimeout()你所不知道的地方,详解setTimeout()
关于setTimeout()你所不知道的地方,详解setTimeout() 前言:看了这篇文章,1.注意setTimeout引用的是全部变量还是局部变量了,当直接调用外部函数方法时,实际上函数内部的变 ...
随机推荐
- linux磁盘简单分区方式
1:分区 fdisk /dev/sdb 2:格式化 mkfs -t ext3 /dev/sdb1 或者 mke2fs -t ext4 /dev/sdb2 3:挂载 mount /dev/sdb1 ...
- Mysql之二
MySQL的数据类型 SQL接口 标准: ANSI SQL:SQL-86--------SQL-89--------SQL-99---------SQL-03 数据类型 字符型: CHAR(不区分字母 ...
- MYSQL- 创建和删除临时表
临时表可能是非常有用的,在某些情况下,保持临时数据.最重要的是应该知道的临时表是,他们将当前的客户(www.111cn.net)端会话终止时被删除 当你创建临时表的时候,你可以使用temporary关 ...
- ecshop中index.dwt文件分析
对于ecshop新手来说,这篇总结值得关注. 对于没有web编程基础的同学来说,ecshop模板里面有两个文件特别重要, 但是这两个文件同时也很不好理解,分别是index.dwt和style.css. ...
- WordPress Import 上传的文件尺寸超过php.ini中定义的upload_max_filesize值-->解决方法。
參考一: WordPress Importer上传导入备份文件时遇到这样一个错误,提示"上传的文件尺寸超过 php.ini 中定义的 upload_max_filesize 值". ...
- springMVC整合xStream
一. 简单介绍: xStream能够轻易的将Java对象转换成xml.JSON.本篇博客将使用springMVC整合利用xStream转换xml. 关于xStream使用的博文:http://blog ...
- DataGridView实现倒计时功能(源码)
需求:最近做一个即时通项目,需要结合OA项目:其中有一个待办事项需要倒计时,准备在DataGridView里展示,如图: 第一步:绑定数据 ; intLoop <= ; intLoop++) { ...
- JavaScript网站设计实践(六)编写live.html页面 改进表格显示
一.编写live.html页面,1.JavaScript实现表格的隔行换色,并且当鼠标移过时当前行高亮显示:2.是输出表格中的abbr标签的内容 实现后的效果图是这样的: 1.实现思路 在输出表格的时 ...
- 【转】ubuntu修改IP地址和网关的方法
一.使用命令设置Ubuntu IP地址 1.修改配置文件blacklist.conf禁用IPV6 sudo vi /etc/modprobe.d/blacklist.conf 表示用vi编辑器(也可以 ...
- android学习——popupWindow 在指定位置上的显示
先看效果图,免得浪费大家时间,看是不是想要的效果 . 直接上代码 ,核心方法. [java] view plaincopy private void showPopupWindow(View pare ...