文档章节

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

yistn
 yistn
发布于 2015/04/04 08:39
字数 2092
阅读 48
收藏 0
点赞 0
评论 0



文章简介:

      关于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属性,在一些页面中并没有这个属性,那么它又是干什么的呢?

其实它就是告诉浏览器我这个页面是什么语言的,注意是语言不是编码格式哦,您是否见过下面的场景:

浏览器提示“检测到当前页面为英文是否翻译为中文  ”这个就是因为这个属性造成的,目前不是所以的

浏览器都有这个功能的;


第三点:

<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即可关注,我们可以在线交流。


 


本文转载自:

共有 人打赏支持
yistn
粉丝 19
博文 37
码字总数 8907
作品 0
海淀
高级程序员
你所不知道的html5与html中的那些事(四)——文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所...

qiugc
2015/04/19
0
1
深入理解html5系列-文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所...

东辉在线
2015/04/20
0
0
HTML5 不可限量的发展前景

现在的HTML5就像当年崭露头角时的Ajax,有人在做,但不知道叫它什么。最近,苹果在HTML5上大做文章,而著名的Web设计师Eric Meyer则提出了Web Stacks的概念。Alex Kessinger是Yahoo的一名前端...

晨曦之光
2012/03/09
0
0
HTML5——对HTML5的认识

首先非常感谢李刚老师出的这本书《HTML5/CSS3/JavaScript讲义》,今天读了第一章节的内容,趁热打铁,总结一下。 HTML5的时代已经到来,它对所有的前端开发人员来说是一种福音。HTML5致力于解...

武小猪
06/26
0
0
HTML4与HTML5之间的10个本质区别

HTML5是目前最新的HTML规范,每一个web开发人员将会发现自己需要使用这项新的标准工作。而且,其中很多人会发现,由于HTML4与HTML5之间的区别,新建一个HTML5的网站远比从HTML4往HTML5上迁移...

晨曦之光
2012/03/09
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
为FLASH正名!HTML5前景分析

(本文于2010.10.01发表在《草根》杂志第四期,LAMP交流超级群(500人):106382633) 眼下关于HTML5的新闻在互联网上可谓是铺天盖地,关注度甚是有超越云计算之势,网友的反映也是众说风云,...

张沫
2010/11/08
0
2
HTML5 localStorage本地儲存

localStorage是最新的HTML5中的新技術,它主要是用於本地儲存。最近看了看localStorage,發現不僅比cookie實用多了,還比cookie簡單多了。於是我到這裡來和大家分享一下。 介紹 本地儲存這東...

Yorhom
2012/08/10
0
0
HTML5 LocalStorage 本地存储

说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个c...

lrxing
2013/01/04
0
0
html5 sessionStorage 与 localStorage使用详解

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

Adam-Lee
2012/08/22
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
0
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
12
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
1
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
1
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
0
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
2
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部