网站首页  词典首页

请输入您要查询的论文:

 

标题 从网页制作的发展浅析语义化
范文

    陈梅 苏晨 赵静雅

    摘要:随着网络信息的爆炸式增长,让计算机能够模仿人类解读信息,从而为用户提供精准有效的信息成为网络开发人员的一个重要目標,语义化与语义技术是实现这一目标的重点,本文从网页制作各个时期的HTML分析阐述了语义化的体现与起到的作用。

    关键词:网页制作发展;HTML;语义化

    中图分类号:TP37? ? ? ? 文献标识码:A

    文章编号:1009-3044(2019)28-0236-02

    开放科学(资源服务)标识码(OSID):

    在迎接网络5G时代的到来之际,浏览网页获取各种信息,早已成为人们生活中不可或缺的一个重要活动,网页上的信息从最初的简单文本内容,发展到包含文本、图片、音视频以及动画等各种丰富的内容,网页上信息的获取方式也从简单的链接查找信息,发展到根据用户的浏览历史进行有针对性的有效推送信息,从网页的发展可以看出人们对获取信息内容需求的不断提高,伴随而来的网页制作技术中也体现了更多的语义化。

    1 网页制作的发展

    网页制作的发展经历了web1.0、web2.0和当前的web3.0时代,为了满足用户对信息获取从内容到方式的不断提高的需要,网页的制作技术也在不断更新与改进,使网页开发的技术人员能够拥有更多的新工具实现更好的用户体验。其中HTML已经于2014年由W3C发布了HTML5.0推荐标准,CSS也在CSS2.1的基础上分为多个模块单独升级,进入到CSS3。

    2 语义化的含义与作用

    语义是指语言意义,语义元素即拥有语义的元素,能够清楚地向浏览器和开发者描述其意义。

    使用带语义化的标签制作的网页能够在多个方面体现出优势,第一,使用带语义化的标签,使代码结构清晰,即使页面没有CSS的设置也能够呈现出完整良好的内容结构;第二,为用户浏览网页提供良好的用户体验;第三,降低计算机理解内容含义和语境的难度,搜索引擎网络爬虫通过标签确定关键字的权重,因此有利于与搜索引擎建立良好的沟通,帮助网络爬虫抓取更多的有效信息;第四,语义化标签使代码具有更强的可读性,便于团队的开发与维护,使开发人员对HTML结构理解统一;第五,便于屏幕阅读器等其他设备对网页的解析。

    3 网页初期的语义化体现

    HTML(超文本标记语言——HyperText Markup Language)作为 Web 世界的基石,从一开始其中的标签就是语义化的,如表示标题,<p>    表示段落,用于解释名称或者解释图片信息,表示表格数据。</p><p>    同时从HTML被发明开始,样式也以各种形式存在。网络初期,信息内容相对较少,网页制作中采用table进行布局,优势在于一方面能够快速编写代码,另一方面可以形成比较复杂的变化,而且在不同浏览中展示效果相同。但是将table标签用于布局属于不正规使用,破坏了网页的语义化,因为table标签本身的语义是表现数据。另外HTML中除了显示内容的标签,还有很多用于显示形式的标签,如<center>居中标签、<font>字体标签,也是具有语义化的,在此阶段,语义化的内容标签与语义化的形式标签共同存在于HTML中。</p><p>    4 HTML4.0中的语义化体现</p><p>    随着网页信息量的快速增长,为了满足页面设计者的要求,HTML添加了很多显示功能,同时随着这些功能的增加,HTML也变得越来越杂乱,而且HTML页面也越来越臃肿,此时网页开发中将内容与形式的分离的思想开始进入网页开发者的视野之中。</p><p>    CSS的出现为HTML标记语言提供了样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破,利用它可以实现修改一个小的样式更新与之相关的所有页面元素,具有丰富的样式定义和易于使用和修改的特点。 基于DIV+CSS的网页实现了内容与形式的分离,HTML提供信息内容,CSS设置样式,这是网页朝着语义化迈进的一大步,HTML中更加注重语义的表现,使得在没有CSS的情况下也能够将内容进行完整地呈现。</p><p>    伴随着DIV+CSS布局的广泛应用,有一个问题变得越来越突出,由于标签不具有具体的语义,Web开发人员为了达到一些网页显示效果,因此对DIV过度滥用,使用多余的带有ID属性的DIV标签作为元素的容器,造成了开发规范不统一的问题,偏离了内容表现,成为形式的一个组成部分。</p><p>    5 HTML5中的语义化体现</p><p>    第一,除去为了解决开发规范不统一的问题外,随着信息量的爆炸式增长,搜索引擎优化,对语义的要求也越来越依赖,使用更具语义化的元素成为网页开发的一个关注点,因此HTML5中引入了更多拥有语义的元素——直接用于描述内容的标记,如用于定义头部的元素header、尾部元素footer、导航区段元素nav、侧边栏元素aside、正文元素article和section,同时在新规范中也丢弃一些原先用于表现性的元素:big、center、font、tt等,提倡用语义正确的元素进行代替。HTML5中的这些语义化标签不是对网页的页面外观进行改变,而是页面开发过程中将结构中的大量DIV标签替换成语义化标签。下图为HTML5的页面结构语义元素。</p><p>    第二,图片是网页信息中的一个重要元素,在HTML5中,通过使用<figure>和<figcaption>元素,将图片与图片搭配的标题组合为一个整体,增强了其语义,代码如下:</p><p>    第三,HTML5中的很多新元素都可以帮助开发者更准确的描述内容,有得第三方程序解析网页代码,如屏幕阅读器就可以借助HTML5的新属性role,通过开发人员设置的导航提示轻松解析页面,为页面建立一个简单的索引,方便用户在应用程序中快速导航。</p><p>    6 语义化发展的前景——语义化网络</p><p>    网页从一开始为用户提供丰富信息的目标到如今为用户提供更精准的信息服务的目标,实际上是将人类灵活处理加工信息的方式,通过技术手段让计算机进行解读完成,用语义技术来实现这一愿景,使用语义数据构建语义网是发展的大趋势,越来越多的企业和开发者在不断探索将语义技术融入Web应用程序中。</p><p>    参考文献:</p><p>    [1] 张雪红. 浅谈Html5的特性及其发展趋势[J].江西广播电视大学学报,2018(1).</p><p>    [2] 韦佳佳.基于HTML5语义化标签的Web文本提取技术 [J].贵阳学院学报,2017(9).</p><p>    [3] 刘霜; 潘立武.HTML发展应用中的探索与研究[J].信息与电脑(理论版),2016(6).</p><p>    [4] 杨柳. 论HTML5和CSS3在网页布局中新特性和优势 [J].电子世界,2016(8).</p><p>    【通联编辑:唐一东】</p> </td> </tr> <tr> <td width="61" align="center">随便看</td> <td> <ul class="random"> <li><a target="_blank" href="d318228.html">通信技术与计算机技术融合初探</a></li> <li><a target="_blank" href="d318229.html">通信能耗定额管控分析</a></li> <li><a target="_blank" href="d318230.html">基于微博时代下的社会网络舆情传播研究</a></li> <li><a target="_blank" href="d318231.html">网络时代我国传统报业数字化转型方式的思考</a></li> <li><a target="_blank" href="d318232.html">交互设计中眼动仪的可用性研究</a></li> <li><a target="_blank" href="d318233.html">计算机自动化技术在广播发射中的应用研究</a></li> <li><a target="_blank" href="d318234.html">网络新闻道德失范问题研究</a></li> <li><a target="_blank" href="d318235.html">教辅编辑的数字化转型探究</a></li> <li><a target="_blank" href="d318236.html">基于云计算技术的云课堂网络辅助教学平台应用研究</a></li> <li><a target="_blank" href="d318237.html">合同管理信息系统的设计与实现</a></li> <li><a target="_blank" href="d318238.html">基于遗传算法的智能组卷考试系统研究</a></li> <li><a target="_blank" href="d318239.html">新媒体在医院公益性文化传播中的实践和探索</a></li> <li><a target="_blank" href="d318240.html">基于ZigBee技术的自动化立体农业系统的设计</a></li> <li><a target="_blank" href="d318241.html">智能家居探源与设计</a></li> <li><a target="_blank" href="d318242.html">基于服务功能分析的高校档案网站建设</a></li> <li><a target="_blank" href="d318243.html">融媒体时代下新媒体资本运营初探</a></li> <li><a target="_blank" href="d318244.html">动漫IP热潮下的衍生产品设计研究</a></li> <li><a target="_blank" href="d318245.html">基于视觉传达设计中视觉思维模式创新的研究</a></li> <li><a target="_blank" href="d318246.html">新媒体时代背景下电视新闻编辑综合素养研究</a></li> <li><a target="_blank" href="d318247.html">新闻编辑中的舆论引导应用分析</a></li> <li><a target="_blank" href="d318249.html">新媒体视野下的梅罗维茨传播理论述评</a></li> <li><a target="_blank" href="d318250.html">自媒体新闻传播对传统新闻传播的合理解构及重塑</a></li> <li><a target="_blank" href="d318251.html">新媒体时代新闻传播的创新模式探讨</a></li> <li><a target="_blank" href="d318252.html">自媒体新闻传播对传统新闻传播的相关冲击与影响</a></li> <li><a target="_blank" href="d318253.html">关于新媒体时代的新闻传播理论创新</a></li> <li><a target="_blank" href="47232.html">counterstrategist</a></li> <li><a target="_blank" href="47233.html">counterstrategists</a></li> <li><a target="_blank" href="47234.html">counterstrategy</a></li> <li><a target="_blank" href="47235.html">counterstream</a></li> <li><a target="_blank" href="47236.html">counterstreams</a></li> <li><a target="_blank" href="47237.html">counterstrike</a></li> <li><a target="_blank" href="47238.html">counterstrikes</a></li> <li><a target="_blank" href="47239.html">counterstrokes</a></li> <li><a target="_blank" href="47240.html">counterstyle</a></li> <li><a target="_blank" href="47241.html">counterstyles</a></li> <li><a target="_blank" href="47242.html">counter-styles</a></li> <li><a target="_blank" href="47243.html">countersubversive</a></li> <li><a target="_blank" href="47244.html">countersubversives</a></li> <li><a target="_blank" href="47245.html">countersue</a></li> <li><a target="_blank" href="47246.html">countersued</a></li> <li><a target="_blank" href="47247.html">countersues</a></li> <li><a target="_blank" href="47248.html">countersuggestion</a></li> <li><a target="_blank" href="47249.html">counter-suggestion</a></li> <li><a target="_blank" href="47250.html">countersuggestions</a></li> <li><a target="_blank" href="47251.html">countersuing</a></li> <li><a target="_blank" href="47252.html">countersuit</a></li> <li><a target="_blank" href="47253.html">countersuits</a></li> <li><a target="_blank" href="47254.html">countersurveillance</a></li> <li><a target="_blank" href="47255.html">counter-surveillance</a></li> <li><a target="_blank" href="47256.html">countersurveillances</a></li> <li><a target="_blank" href="b542257.html">酒食之类普通礼物</a></li> <li><a target="_blank" href="b542258.html">酒食地狱</a></li> <li><a target="_blank" href="b542259.html">酒食征逐</a></li> <li><a target="_blank" href="b542260.html">酒食过度</a></li> <li><a target="_blank" href="b542261.html">酒食醇酒</a></li> <li><a target="_blank" href="b542262.html">酒饩</a></li> <li><a target="_blank" href="b542263.html">酒饭</a></li> <li><a target="_blank" href="b542264.html">酒饮席面,话讲当面</a></li> <li><a target="_blank" href="b542265.html">酒饮得尽兴、畅快</a></li> <li><a target="_blank" href="b542266.html">酒饮饱</a></li> <li><a target="_blank" href="b542267.html">酒饵</a></li> <li><a target="_blank" href="b542268.html">酒馆戏园等热闹场所</a></li> <li><a target="_blank" href="b542269.html">酒馔</a></li> <li><a target="_blank" href="b542270.html">酒香</a></li> <li><a target="_blank" href="b542271.html">酒香不怕价高</a></li> <li><a target="_blank" href="b542272.html">酒香不怕巷子深</a></li> <li><a target="_blank" href="b542273.html">酒驾</a></li> <li><a target="_blank" href="b542274.html">酒高阳</a></li> <li><a target="_blank" href="b542275.html">酒鬼</a></li> <li><a target="_blank" href="b542276.html">酒鬼喝汽水</a></li> <li><a target="_blank" href="b542277.html">酒鬼喝汽水——不过瘾</a></li> <li><a target="_blank" href="b542278.html">酒鬼掉进酒池里</a></li> <li><a target="_blank" href="b542279.html">酒鬼掉进酒池里——求之不得</a></li> <li><a target="_blank" href="b542280.html">酒鬼走路——东倒西歪</a></li> <li><a target="_blank" href="b542281.html">酒魁</a></li> </ul> </td> </tr> </table> <p> </p> <p>科学优质学术资源、百科知识分享平台,免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。<p> </p> <div class="foot">Copyright © 2004-2023 puapp.net All Rights Reserved<BR> <span class="updatetime"> 更新时间:2025/10/14 15:20:00</span><script src="/js/count.js" type="text/javascript"></script></div> </body> </html>