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

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

十余年的杜集网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整杜集建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联建站从事“杜集网站设计”,“杜集网站推广”以来,每个客户项目都认真落实执行。

文章简介:

      关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作都可以达到真正的云方式呢?这一系列的问题你是否已经想明白了呢?

      本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),包括html5的父亲html的一些小隐私(您在开发中可能不知道的事);

回到今天的正题

今天这篇文章主要讲到的您可能不知道的事有:

1)html页面基本结构中您所没有注意到的内容有那些?

2)html5中最看重的理念“语义化”相比html有什么区别?

3)网页文件的命名您想到过会影响您网站的体验么?

第一个问题:

     html页面基本结构中您所没有注意到的内容有那些?

     下面我们看一个标准的html页面代码

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

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

这个是个最基本的html页面了,你也许一看感觉熟悉的不能在熟悉了,还有什么是我不知道的呢?

如果下面我说的几点您都知道那就证明您真的用心研究过html与浏览器了;

第一点:

     这个标签的用法,也许您发现一个html页面您不写这个标签也是正确的,为什么还要加上他呢?用途是什么呢?其实它的用途是

      1、告诉浏览器这个文件是html文件;

      2、告诉浏览器html的版本,

    这个标签的写法标准的就是我上面写的,当然您可以小写浏览器不会出错,但是标准就是大写可以说整个html

标签就这个doctype标签标准是大写其余的标准都是小写;当然您也可以不按标准来毕竟html规则相对宽松;

小编认为越是宽松的规则开发人员就应该越按照标准来;

ps:html5中一定要有这个标签哦,具体的原因在后续的文章中会详解关于改进后的HTML5DOCTYPE;

第二点:

    这个标签中的lang属性,在一些页面中并没有这个属性,那么它又是干什么的呢?

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

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

浏览器都有这个功能的;

第三点:

标签中其实都是用户不可见的东西,他所包含的东西都是给浏览器或是搜索引擎用的,但是除了标签,他是用户在head中唯一可以看到的标签,说到title就先说他吧,给我们感觉好像就是一个页面名字一样可以显示在浏览器的tag栏中;其实它对于浏览器来或是搜索引擎来说功能还是非常大的;</p><p>       1,对浏览器来说title是书签或是收藏夹默认的名称(一般来说 ,也有例外)</p><p>       2,对搜索引擎来说,他是搜索页面的最优先关键字哦;</p><p>下面是meta标签的charset属性.这个大家应该都知道是告诉浏览器我们的文件的编码字符集,但是需要我们注意的是这个字符集与你所用的开发工具字符集是不是对应的?如果不对应可能会出现乱码的这个问题小编就遇到过,费</p><p>了好大的劲才找到这个问题</p><p>       haed中其它的一些标签我们在之后的文章中会一个一个的说明今天就说这两个吧;</p><p>第二个问题:</p><p>        html5中最看重的理念“语义化”相比html有什么区别?</p><p>      语义化这个概念应该说是伴着html5应运而生,什么是html5 中的所的语义化?简单来说就是"描述内容的含义(meaning)"</p><p>比如说<p>标签就是段落的意思,在html5中所有的标签都有它看书的语义的。而没有语义的标签在html中有,在html5中就没有了;比如<font>标签;而html5又为了补充html现在的不足加上一些新的标签如article,footer,header等等;</p><p>      而些标签的分类叫法也从“块级元素”与“行内元素”变成了“外围内容”与“短语内容”</p><p>      在html5中最基本的理念就是语义与显示分离,html代码中出现的标签都让开发人员或浏览器一看就知道是干什么用的东西,至于显示效果那是ccs3(Cascading Style Sheet)需要干的事情,所以在html5中这个两个好×××终于距离产生了美;</p><p>      那么语义化以后对html文档有什么好处么?</p><p>      1.可以提升可访问性与互操作性(兼容性会更好)</p><p>      2.改进搜索引擎的优化</p><p>      3.一般来说可以让 html文件更小;</p><p>      4.让代码更好唯护,与css3的关系更和谐;</p><p>第三个问题:</p><p>网页文件的命名你想到过会影响你网站的体验么?</p><p>这个一听第一感觉就是不靠谱,一个文件的名字还会影响到网站的体验?</p><p>正确的答案确实是:是的</p><p>如 :文件名:Html_First_Blog.htm 与html-first-blog.html</p><p>这个两个文件名不管是在用户的体验上与搜索引擎上都第二个完胜第一个。是不是有人会问为什么 ??</p><p>下面我就说一下有如下几点是需要我们注意的:</p><p> 1,文件名需要用小写字母:</p><p>       场景就是最简单的输入地址吧,你认为写</p><p>                           http://192.168.0.1/TestHtml/The_First/Html5.html</p><p>      方便还是写    http://192.168.0.1/testhtml/the-first/html5.html方便呢?</p><p>      这个自己体会吧</p><p>2,用短横线分隔单词;</p><p>     大家一定会认为,用"_"挺好,其实这是做c开发时候的写法,也可以说是习惯,但是在网站中“-”是搜索引擎更喜欢的style;</p><p>3,使用标准的扩展名:</p><p>     现在用好多的网站都是用.htm的扩展名,这个浏览器也不会报错,但是标准的扩展名就是.html的所以大家以后写的时候就不要省时间少写一个字母“l”了;</p><p>记住以上几点才正确的写网页文件的命名方法哦,不要把写其它语言的方法放进来。</p><p>今天讲了一些平时我要经常见到,但是不会去注意的地方(只是冰山一角),不知道对读到这篇文章的您有什么帮助没有?</p><p>其实这些细节平时如果不关注也许也不会出什么大的错误,但是一个好的开发人员需要有一个好的习惯,一款好的软件需要用良好的细节体验,一个好的网站同样也需要更好规范与细节(您说呢?)</p><p>下次文章我们会讲一些关于<a href="https://www.cdcxhl.com/" target="_blank">网站制作</a>的小巧门与html的<h>标签的用法;也许还会有一些你所不知道的好玩的小问题,帮您解答;</p><p>感谢您的阅读,期待下次与您见面;</p><p>转载请注明出处:谢谢合作!</p><p>如果有什么不同的想法与建议,或是想第一时间获得博客更新提醒,以及更多技术信息分享,欢迎关注个人微信公众平台:程序员互动联盟(coder_online),扫一扫下方二维码或搜索微信号coder_online即可关注,我们可以在线交流。</p><p> <img src="http://img.blog.csdn.net/20150328223211726?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXExMjM2NTQxMQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="你所不知道的html5与html中的那些事(一)"></p> <br> 网站栏目:你所不知道的html5与html中的那些事(一) <br> URL地址:<a href="http://csdahua.cn/article/iessso.html">http://csdahua.cn/article/iessso.html</a> </div> <div class="view-qrocde cl"> <div class="m z"><img src="/Public/Home/images/ew.jpg"/></div> <div class="text"> <h6>扫二维码与项目经理沟通</h6> <p>我们在微信上24小时期待你的声音</p> <p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p> </div> </div> <div class="othernews cl"> <h3>其他资讯</h3> <ul> <li><a href="/article/csdhoi.html">新形势下,企业如何进行数字化转型附下载地址-创新互联</a></li><li><a href="/article/csdpjd.html">opencv如何实现矩形检测-创新互联</a></li><li><a href="/article/csdhde.html">解决python中syntaxerror错误的方法-创新互联</a></li><li><a href="/article/csdpgo.html">解决mysql报错1045的方法-创新互联</a></li><li><a href="/article/csdpei.html">HTML5Video标签的属性、方法和事件汇总介绍-创新互联</a></li> </ul> </div> </div> </div> <div class="sidebar"> <div class="tuijian"> <a href="#"> <h2 class="cl"><span>行业动态</span></h2> <h3>企业网站建设的重要性!</h3> <p>现在虽然是移动互联网时代,但企业网站依然重要,包含PC站点,移动站。可以说企业网站关系企业的未来发展和前途,尤其对中小企业更是如此,一些中小企业老板,对自己的名片很在乎,因为这是个门面。...</p> </a> </div> <div class="ser sidesub"> <h2>服务项目</h2> <ul class="ebox"> <li class="sub sub-1"> <div> <h3>网站建设</h3> <p></p> <a class="btn" href="/serve/website/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>移动端/APP</h3> <p></p> <a class="btn" href="/serve/moblie/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>微信/小程序</h3> <p></p> <a class="btn" href="/serve/small/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>技术支持</h3> <p></p> <a class="btn" href="/serve/tech/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>其它服务</h3> <p></p> <a class="btn" href="/serve/othe/">查看详情</a> </div> </li> <li class="sub sub-5"> <div> <h3>更多服务项目</h3> <p> <a>用我们的专业和诚信赢得您的信赖,从PC到移动互联网均有您想要的服务!</a></p> <a class="btn" href="/serve/">获取更多</a> </div> </li> </ul> </div> <div class="contact" id="fix"> <h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2> <h3>电话:13518219792</h3> <p>如遇占线或暂未接听请拨:136xxx98888</p> <div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div> </div> </div> <script> //固定滚动 (function () { var oDiv = document.getElementById("fix"); var H = 120, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function () { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "contact fixed"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "contact "; } }; } })(); </script> </div> <div class="footer"> <div class="wp"> <div class="wpss cl"> <dl class="about"> <dt>网站制作</dt> <dd><a href="http://www.cqcxhl.com/" target="_blank" title="重庆网站制作">重庆网站制作</a></dd><dd><a href="http://www.cxhljz.cn/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="http://m.cdcxhl.cn/dingzhi/" target="_blank" title="定制网站制作">定制网站制作</a></dd><dd><a href="http://m.cdcxhl.cn/mobile/" target="_blank" title="手机网站制作">手机网站制作</a></dd> </dl> <dl class="about"> <dt>网站建设</dt> <dd><a href="http://www.lzwzjz.cn/" target="_blank" title="泸州网站建设">泸州网站建设</a></dd><dd><a href="http://www.kswcd.com/service/" target="_blank" title="上市集团网站建设">上市集团网站建设</a></dd><dd><a href="http://chengdu.cdcxhl.cn/" target="_blank" title="成都网站建设">成都网站建设</a></dd><dd><a href="http://m.cdcxhl.cn/dingzhi/" target="_blank" title="成都定制网站建设">成都定制网站建设</a></dd> </dl> <dl class="about"> <dt>网站设计</dt> <dd><a href="http://www.cdxwcx.cn/sheji/" target="_blank" title="成都网站设计">成都网站设计</a></dd><dd><a href="https://www.cdcxhl.com/" target="_blank" title="成都网站设计">成都网站设计</a></dd><dd><a href="http://www.36103.cn/" target="_blank" title="成都网站设计">成都网站设计</a></dd><dd><a href="http://chengdu.cdcxhl.cn/dingzhi/" target="_blank" title="定制网站设计">定制网站设计</a></dd> </dl> <dl class="contact"> <dt>联系我们</dt> <dd>电话:13518219792</dd> <dd>邮箱:631063699@qq.com</dd> <dd>地址:成都青羊区锦天国际1002号</dd> <dd>网址:www.csdahua.cn</dd> </dl> <dl class="flow"> <dt></dt> <div class="ma cl"> <div class="m"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </div> </dl> </div> </div> <div class="footer-link wp"> <ul class="wpss cl"> <li class="fisrt">友情链接</li> <li><a href="http://www.cdfuwuqi.com/host/" title="虚拟主机" target="_blank">虚拟主机</a></li><li><a href="https://www.cdcxhl.com/qiye.html" title="企业网站建设" target="_blank">企业网站建设</a></li><li><a href="http://www.cdkjz.cn/" title="成都网站建设" target="_blank">成都网站建设</a></li><li><a href="https://www.xwcx.net/tuoguan.html" title="电信机房托管服务器" target="_blank">电信机房托管服务器</a></li><li><a href="https://www.cdcxhl.cn/ " title="虚拟主机" target="_blank">虚拟主机</a></li><li><a href="http://www.cdxwcx.cn/seo/" title="网络营销推广" target="_blank">网络营销推广</a></li><li><a href="http://www.cxhljz.cn/" title="成都网站设计公司" target="_blank">成都网站设计公司</a></li><li><a href="http://www.dmvi.cn/" title="成都广告公司" target="_blank">成都广告公司</a></li><li><a href="http://chengdu.cdxwcx.cn/wangzhan/" title="公司网站建设" target="_blank">公司网站建设</a></li><li><a href="http://www.scgulin.cn/" title="古蔺网站建设" target="_blank">古蔺网站建设</a></li> </ul> </div> </div> <div class="bot-footer"> <div class="wp"> <p class="wpss"> <em>Copyright © 2002-2023 www.csdahua.cn 快上网建站品牌 QQ:244261566 版权所有</em> <em>备案号:<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em> </p> <p class="wpss" style="line-height:30px !important;"> </p> </div> </div> <div class="footer-kefu"> <ul> <li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a> </li> <li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li> <li class="wx"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </li> <li class="m"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>移动版官网</p> </div> </li> <li class="top"><em></em></li> </ul> </div> <script src="/Public/Home/js/all.js"></script> </body> </html> <script> $(".cont img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>