qian奇岸微信二维码 如您需要快速报价 请加技术经理微信 服务热线
13501992972
"MENU"
首页 > 开发知识 > 正文

HTML写作方法有什么不同?

奇岸开发
ahqian.com
07/26/2022
wechat

无需加好友免费技术支持

在学习HTML当你在工具箱中添加新技术时,你可能想建立自己的技术HTML以开始所有未来的项目。我们鼓励这样做,这篇文章可以帮助你建立自己的HTML模板。

在这篇文章中,我们将研究如何开始。让我们从简单开始HTML5页面开始:

有了这个基本模板,现在让我们检查标记的一些重要部分,以及这些部分可能和HTML5之前的HTML写作方法有什么不同?

首先,我们有Document Type Declaration或doctype。这只是告诉浏览器(或任何其他分析器)正在查看的文档类型的一种方式。对于HTML文件,它表示HTML具体版本和风格。doctype应该永远是一切HTML文件顶部的第一项。许多年前,doctype声明是一种难以记忆的丑陋混乱。对于XHTML 1.0 Strict:

对于HTML4 Transitional:

虽然文档顶部的一长串文本并没有真正伤害我们(除了迫使我们网站的查看器下载一些额外的字节),HTML消除了难以理解的眼睛。你现在需要的是:

很简单,很重要。大写、小写或大小写可以混合doctype。您会注意到声明中明显缺少“ 尽管是现在Web标记迭代被称为标记迭代 HTML但它实际上只是以前HTML标准的演变——未来的标准将只是我们今天所拥有的标准的发展。

浏览器通常需要支持Web所有现有内容都不需要依赖doctype告诉他们在给定文档中应该支持哪些功能。换句话说,只doctype不的页面不会兼容HTML5。这完全取决于浏览器。事实上,你可以在页面上使用新的HTML这两种旧文档类型的5元素,页面将呈现和使用新的doctype外观相同。

任何HTML下一个文档html元素是HTML5.元素没有太大变化。在我们的例子中,我们包括它lang列值为属性,属性en以英语为基础的指定文件。XHTML语法需要包含一个xmlns属性。在HTML五、不再需要这个lang文档验证或正常运行也不需要属性。

因此,这是到目前为止的内容,包括结束标记:

页面的下一部分是本节。内第一行head是定义文档字符编码的行。XHTML和HTML自4以来,这是另一个简化元素,是一个可选功能,但建议使用。在过去,你可能会这样写:

HTML通过编码字符将标记减少到最低限度改进:

在几乎所有的情况下,utf-8是您将在文档中使用的值。字符编码的完整性不在本文的讨论范围内,您可能不太感兴趣。然而,如果你想进一步研究,你可以阅读相关信息W3C或WHATWG的主题。

注:为了确保所有浏览器正确读取字符代码,整个字符代码声明必须包含在文档前512个字符的某些位置。它也应该出现在任何基于内容的元素之前(例如紧随其后的元素在我们的示例站点)。</p><p>我们可以写很多关于这个主题的东西,但我们希望你保持清醒——因此,我们将为你节省这些细节!现在,我们愿意接受这个简化的声明,然后继续文档的下一部分:</p><p>在这些行中,HTML5与以前的语法几乎没有什么不同。页面标题(唯一必要的元素)head)被声明为与以前相同,并且我们包含的meta标签只是一个可选在哪里的可选示例;你可以根据需要meta尽可能多地放置有效元素。</p><p>这个标记块的关键部分是样式表,使用常规link元素包含。link除href和外没有其他必填属性rel。该type属性(旧版HTML不必要,也不需要指示样式表的内容类型。</p><p>引入HTML5时,它含有许多新元素,如article和section。你可能会认为这是旧浏览器支持不可识别元素的主要问题,但你错了。这是因为大多数浏览器实际上并不关心你使用什么标签。假如你有一个带recipe标签(或ziggy标签)的HTML文档,并且CSS如果在元素上添加添加了一些样式,几乎每个浏览器都会继续像完全正常一样运行,而不需要抱怨。</p><p>当然,这样的假设性文档将无法验证,可能存在可访问性问题,但它几乎可以正确地呈现在所有浏览器中-Internet Explorer(IE)除了旧版本。在版本9之前,IE防止无法识别的元素接收样式。渲染引擎将这些神秘元素视为未知元素这不仅包括我们想象的元素,还包括开发浏览器版本时尚未定义的任何元素。这意味着(你猜对了)新的HTML5元素。</p><p>好消息是,最近几天,IE利用率下降,IE11的全球利用率已降至约2.7%(截至2018年),但实际上之前的版本已经下降</p><p>但是,如果你真的需要支持古代浏览器,你仍然可以使用可靠的浏览器HTML5 Shiv,这是John Resig最初开发的非常简单JavaScript。受Sjoerd Visscher灵感来源于新的想法HTML5元素可在IE样式设置在旧版本中。但是,的确,现在不需要了。正如我所指出的,所有现代浏览器甚至最新的旧版本都得到支持HTML5元素。(单击显示所有选项查看所有浏览器版本。)一个例外是一些浏览器无法识别更新main元素。但是,对于这些浏览器,只需添加适当的样式(例如,将其设置为block元素),你仍然可以使用这个元素。</p><p>检查开始模板的其他部分,我们常用body元素以及其结束标记和结束html标记。我们还在script元素内引用JavaScript文件。</p><p>与link前面讨论的标签非常相似,应该<script>您不需要声明标签type属性。如果你写过。XHTML,可能会记得script标签如下:</p><p>因为从实际的所有角度来看,JavaScript是Web唯一使用的真实脚本语言,因为所有浏览器都假设你在使用它JavaScript,即使你没有明确声明这个事实,所以type在HTML这个属性在文档中也是不必要的:</p><p>我们已将script将元素放在页面底部,以适应嵌入JavaScript最好的做法。这与页面加载速度有关。当浏览器遇到脚本时,它将暂停下载并显示页面的其他部分。如果在页面顶部的任何内容之前都包含大本,这将大大降低页面的加载速度。这就是为什么大多数脚本应该放在页面的底部,以便在页面的其他部分加载后进行分析。</p><p>但是,在某些情况下(例如,使用HTML5 shiv),脚本可能需要放在文档的开头,因为你希望脚本在浏览器开始显示页面之前生效。</p><p>你也可以通过交互和程序反应UI将网站或Web应用用程序开发提升到一个新的水平。例如,查看相关信息JavaScript和React资源广泛。并使用最佳Web找出如何更快地启动新项目。此外,如果您想在不学习编码的情况下建立网站体验,请阅读联系浪潮。最新的无代码工具浪潮改变了局面,它们的功能在很多情况下都足够强大。</p> </div> <div class="click"> <span>热度527</span> </div> </div> <div class="bodytip"> <div class="detail"> <p>了解更多HTML写作方法有什么不同?欢迎联系奇岸开发客服。</p> <p>奇岸开发可定制企业官网小程序、小程序商城、餐饮外卖小程序、预约小程序、多门店小程序、分销小程序及个人小程序。</p> </div> <div class="prenext"> <ul> <li class="left">上一篇:<a href="https://www.ahqian.com/kaifa/16089">免费网站建设模板自助开通(收藏)</a></li> <li class="right">下一篇:<a href="https://www.ahqian.com/kaifa/16091">如何找到高质量的图片素材、视频背景、图标插图?</a></li> </ul> </div> <div class="wxbox"> <div class="fl"> <img rel="nofollow" src="https://oss.wuxiqian.com/www/22/img/aboRTJwjpKfilhsIAqrSdYmWeVOCBFvx.png" alt="微信二维码" title="微信扫一扫加好友" /> <p>微信长按识别或扫一扫,无需加好友直接咨询,企业网站开发、网站托管维护、企业管理系统开发、微信小程序制作、域名主机、网站备案、网站改版等提供专业技术解答。</p> </div> </div> </div> </div> <div class="side"> <h3>精彩推荐</h3> <div class="inews-list"> <ul class="twlist"> <li><a href="https://www.ahqian.com/news/44967" title='五个免费体验通过自学网络资源网站,我用过,感觉不错'><img rel="nofollow" src="https://oss.wuxiqian.com/www/1/autoimg/1672761902NXk.png" alt="五个免费体验通过自学网络资源网站,我用过,感觉不错" style="object-fit:cover;" title="五个免费体验通过自学网络资源网站,我用过,感觉不错"><strong>五个免费体验通过自学网络资源网站,我用过,感觉不错</strong></a> <p>五个免费体验通过自学网络资源网站,我用过,感觉不错</p> </li> <li><a href="https://www.ahqian.com/kaifa/36454" title='github的start最好是直接用框架springboot'><img rel="nofollow" src="https://oss.wuxiqian.com/www/1/autoimg/1666976103zZt.png" alt="github的start最好是直接用框架springboot" style="object-fit:cover;" title="github的start最好是直接用框架springboot"><strong>github的start最好是直接用框架springboot</strong></a> <p>github的start最好是直接用框架springboot</p> </li> <li><a href="https://www.ahqian.com/news/33873" title='我省老年大学课程先进校评'><img rel="nofollow" src="https://oss.wuxiqian.com/www/1/autoimg/1665508202K4V.png" alt="我省老年大学课程先进校评" style="object-fit:cover;" title="我省老年大学课程先进校评"><strong>我省老年大学课程先进校评</strong></a> <p>我省老年大学课程先进校评</p> </li> <li><a href="https://www.ahqian.com/news/12562" title='网站服务器租:服务器怎么租,服务器租用应该注意哪些问题?'><img rel="nofollow" src="https://oss.wuxiqian.com/www/1/autoimg/1657649402ndO.png" alt="网站服务器租:服务器怎么租,服务器租用应该注意哪些问题?" style="object-fit:cover;" title="网站服务器租:服务器怎么租,服务器租用应该注意哪些问题?"><strong>网站服务器租:服务器怎么租,服务器租用应该注意哪些问题?</strong></a> <p>网站服务器租:服务器怎么租,服务器租用应该注意哪些问题?</p> </li> </ul> </div> <h3>猜你喜欢</h3> <div class="inews-list"> <ul class="txlist"> </ul> </div> <div class="sdbtn"><a href="javascript:" rel='nofollow'>点我获得帮助</a></div> </div> </div> <footer class="footer"> <div class="box" id=""> <div class="d1"> <p class="d1m"> </p> <p>© 2016-2022 奇岸网络科技有限公司 版权所有<br /> <a href=https://beian.miit.gov.cn/ target=_blank rel=nofollow>皖ICP备16025676号-1</a><br /> </p> <P>联系电话:<a href="javascript:">13501992972</a></P> </div> <div class="d2"> <span><img rel="nofollow" src="https://oss.wuxiqian.com/www/22/img/EFxsJUNnfROVlozprMKXyuZdThwLmAvj.png" alt="奇岸开发业务咨询微信二维码" title="微信扫一扫加好友洽谈" width='120' height="120" /> <em>如您需要快速报价</em> <em>请加技术经理微信</em> </span> <!--<span><a class="chat" href="javascript:;"><i class="fa fa-commenting-o"></i></a>--> <!-- <em>在线咨询</em></span>--> <!--<span>--> <!-- <img rel="nofollow" src="https://oss.wuxiqian.com/www/22/img/EFxsJUNnfROVlozprMKXyuZdThwLmAvj.png" alt="奇岸开发业务咨询微信二维码" title="微信扫一扫加好友洽谈" width='120' height="120" />--> <!-- <em>手机扫一扫浏览</em>--> <!--</span>--> </div> </div> <div class="box2"> <div class="copy"> <p> QIAN开发 STUDIO / <a href=" /sitemap">网站地图</a> </p> </div> </div> </footer> <script rel="nofollow" src="https://oss.wuxiqian.com/www/22/tel/js/jquery.min.js"></script> <!--[if !IE]><!--> <script rel="nofollow" src="https://oss.wuxiqian.com/www/22/tel/js/wow.js"></script> <!--<![endif]--> <script> wow = new WOW( { animateClass: 'animated', offset: 30 } ); wow.init(); </script> <script rel="nofollow" src="https://oss.wuxiqian.com/www/22/tel/js/common.js"></script> </body> </html>