文章简介：
关于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)，扫一扫下方二维码或搜索微信号coder_online即可关注,我们可以在线交流。
相关推荐
一、HTML5的新特性与改进 1. **语义化标签**：HTML5引入了新的语义化标签，如、、、和等，这些标签使得网页结构更加清晰，有利于搜索引擎优化（SEO）和无障碍访问。 2. **离线存储**：通过`applicationCache`，...
资源名称：你必须知道的HTML5特征、窍门和技术内容简介：一、新的Doctype//zxx:”doctype”中文意思指“文档类型”仍在使用麻烦的，不可能记得住的XHTML文档类型？如果是，为什么还在用呢？使用新的HTML5文档类型...
在课程中，你将了解到HTML5如何组织网页结构，包括头部（head）、主体（body）和元数据（metadata）的使用。 1.1 软件架构分类： 在了解HTML5之前，我们需要知道软件架构的两种主要类型：C/S架构（Client/Server）...
综上所述，这个压缩包中的内容是一套使用HTML5、CSS3和JavaScript技术精心打造的百度知道10周年活动特效。用户可以下载这些文件，研究其代码实现，学习如何利用现代Web技术创造引人入胜的交互式用户体验。无论是对...
HTML5是一种强大的网页开发技术，它允许开发者在不依赖外部插件的情况下创建丰富的交互式内容。其中，HTML5的多媒体支持是其一大亮点，而M3U8（HLS，HTTP Live Streaming）则是苹果公司提出的一种流媒体传输协议，...
它可以让你知道哪些特性在用户浏览器中可用，从而帮助你优雅地降级或提供替代方案。在IE6中，Modernizr可以帮助识别哪些HTML5特性需要额外的polyfill或脚本来实现。 3. **CSS Hack**: 由于IE6的CSS解析机制与标准...
现在已经有很多html5播放器可以使用，使用html5播放器可以轻松的在页面中插入媒体视频，从而使我们的web页面变得更加丰富多彩，所以今天向大家推荐一款非常优秀的html5播放器MediaElement.js，它不仅能够添加我们...
首先，我们需要明确一点，MFC对话框与WebBrowser控件中的HTML页面的交互并不直接。因为WebBrowser控件实际是基于Internet Explorer的ActiveX控件，通过它可以加载HTML页面，并且支持通过COM接口与外部程序进行通信。...
404错误页是网页设计中的一个重要组成部分，它在用户访问不存在的页面时显示，提供友好的用户体验。HTML5模板的出现使得创建富有吸引力且功能丰富的404页面变得更加便捷。Bootstrap框架，作为一款流行的前端开发工具...
7. **兼容性与优化**：虽然HTML5拖放功能在现代浏览器中广泛支持，但并非所有浏览器都完全兼容。因此，在开发时需要考虑对老版本浏览器的适配，可能需要借助JavaScript库或polyfill来提供兼容性。 8. **视觉反馈**...
`video-js.swf` 是一个Flash备用文件，用于那些不支持HTML5视频的旧版浏览器。尽管HTML5已经广泛被接受，但为了向后兼容，这种备用方案仍然重要。 最后，`demo.captions.vtt` 是WebVTT（Web Video Text Tracks）...
HTML5是一种先进的网页开发技术，它为网页设计者提供了更多的功能和灵活性，使得网页内容更加丰富和互动。在这个“html5瀑布流图片点击弹出大图片信息代码”中，我们探讨的是如何利用HTML5实现一个瀑布流布局的图片...
所以我们在使用过程中，想要让低版本的浏览器，即IE9以下的浏览器支持，那么这款html5shiv.js是一个非常好的选择！ 上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面...
它的核心功能是作为一个HTML5解析器，能够处理各种HTML和XHTML输入，包括不完全符合规范的标记，从而实现对“真实世界”HTML内容的有效处理。"html5lib-0.999.tar_html5_universal_"这个文件名暗示了这是一个针对...
在IT行业中，转换HTML到PDF是一项常见的需求，特别是在生成报告、文档或电子书籍时。PD4ML是一个Java库，专门用于将HTML内容转换为高质量的PDF文档。本篇将深入探讨如何使用PD4ML实现在Java环境中处理中文乱码问题，...
"html5触屏手机端上下拉滑动加载更多数据"这个主题，正是讨论如何在网页中实现一种常见的滚动加载效果，即“无限滚动”或“上拉加载更多”。这种设计模式常用于新闻、社交网络和电商网站，当用户接近页面底部时，...
尽管JavaScript是现代Web开发中不可或缺的一部分，但许多人错误地将HTML5与JavaScript混为一谈。实际上，HTML5主要关注的是结构和语义，而JavaScript则负责处理逻辑和交互。HTML5中新增了许多元素（如`<article>`、`...
在HTML5中，实现手机相机拍照并上传照片给后台的功能主要涉及到两个关键API：`<input type="file">`的`capture`属性和File API。下面将详细介绍这两个知识点及其相关应用。 1. `<input type="file">`与`capture`...
在本文中，我们将深入探讨如何使用HTML5来构建一个高效且用户体验良好的在线购物车系统。 首先，理解HTML5的基础结构至关重要。HTML5引入了新的元素，如、、、、和，这些元素有助于提高页面的语义化，使页面结构更...