web前端及HTML语义化的理解

1.什么是web前端

  WEB前端是由网页设计与制作发展而来的,随着工作的细化,需要有人完成美工图到网页的制作,从而出现了WEB前端开发这个词。WEB前端开发主要是使用HTML、CSS、JavaScript技术,将美工提供的美工图转化为网页。同时,需要顾及SEO以及后台的数据。WEB前端,相当于是一个连接美工、后台以及用户的中间平台。

2、什么是HTML语义化?

  1.)基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等

  2.)根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

3、为什么要语义化?

  1.)为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;

  2.)用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;

  3.)有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

  4.)方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

  5.)便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

4、写HTML代码时应注意什么?

  1.)尽可能少的使用无语义的标签div和span;

  2.)在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

  3.)不要使用纯样式标签,如:b、font、u等,改用css设置。

  4.)需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);

  5.)使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;

  6.)表单域要用fieldset标签包起来,并用legend标签说明表单的用途;

  7.)每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

时间: 2024-10-24 19:42:30

web前端及HTML语义化的理解的相关文章

Web语义化的理解

Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可以认出哪些是页面重要内容,予以较高的权值.HTML5的一大革新就是语义化标签的完善. 写语义化的HTML结构其实很简单,首先掌握html中各个标签的语义,<div>是一个容器:<strong>是表示强调:<ul><li>是一个无序列表等等-在看到内容的时候想想用什么标签能更

前端编程,语义化

什么是语义化?其实简单说来就是让机器可以读懂内容. 先随便扯扯.对于当前的 Web 而言,HTML 是联系大多数 Web 资源的纽带,也是内容的载体.在 Web 被刚刚设计出来的时候,Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面.也许起初的想法很简单:用来发布 Web 内容和资源的索引,方便人们查看. 但是随着 Web 规模的不断扩大,信息量之大已经不在人肉处理的范围之内了.这个时候人们开始用机器来处理 Web 上发布的各种内容,搜索引擎就诞生了.

谈谈对HTML语义化的理解

什么是HTML语义化? HTML标签可以分为有语义的标签,和无语义的标签.比如table表示表格,form表示表单,a标签表示超链接,strong标签表强调.无语义标签典型的有<div>,<span>等.HTML语义化我的理解就是在页面中尽量多滴结合场景多使用含有语义的标签,少使用div,span等无语义的标签. why?为什么要进行语义化? 1,现在的开发基本上都是一个团队合作进行开发.这种情况下,我们写的代码不仅要让我们自己能看懂,而且也应该让别人也容易理解和阅读,要保证代码的

HTML语义化的理解

一.HTML语义化的概念 1.主要的标签,有标题(H1~H6).列表(li).强调(strong em)等 2.根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读,以及在写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 二 .语义化的必要 1.为了在没有CSS的情况下,页面也能呈现出很好地内容结构.代码结构: 2.提升用户体验 例如 : title.alt用于解释名词或解释图片信息.label标签的使用 3.有利于SEO优化 1)搜索引擎建立良好沟通,有助于爬虫抓取

对html语义化的理解

所有人都知道html即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言. html标签中的大部分都是由"语义化"标签所担任 那么,它有什么用呢? 我认为,它主要有以下四点用处: 1,去掉或者丢失样式的时候能够让页面呈现出清晰完整的结构 2,有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重: 3,让页面的内容结构化,方便其他设备解析(如屏幕阅读器.盲人阅读器.移动设备) 4,便于

说一说你对HTML5语义化的理解

本题地址:https://github.com/YvetteLau/Step-By-Step/issues/8 语义化意味着顾名思义,HTML5的语义化指的是合理使用语义化的标签来创建页面结构,如header,footer,nav,从标签上即可以直观的知道这个标签的作用,而不是滥用div. 语义化的优点有: 代码结构清晰,易于阅读,利于开发和维护 提高用于体验,在样式加载失败时,页面结构清晰 方便其他设备解析(如屏幕阅读器)根据语义渲染网页. 有利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同

web语义化

一:web语义化的原因 HTML 是联系大多数 Web 资源的纽带,也是内容的载体.设计起初的想法也许很简单:用来发布 Web 内容和资源的索引,方便人们查看.规模并不是太大,也不能遍及我们生活的方方面面.但是随着 Web 规模的不断扩大,信息量之大已经不在人肉处理的范围之内了.这时候人们开始用机器来处理 Web 上发布的各种内容,搜索引擎就诞生了.再后来,人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘.所以让机器能够更好地读懂 Web 上发布的各种内容就变得越来越重要. 如下图表示:

Web前端面试之HTML

1. 对WEB标准以及W3C的理解与认识 web标准规范要求,书写标签闭合.小写.不乱嵌套,可提高搜索机器人对网页内容的搜索几率.--- SEO 使用外链css和js脚本,结构与行为.结构与表现分离,提高页面的渲染速度,更快地显示页面的内容. 样式与标签的分离,更合理的语义化标签,使内容能被更多的用户所访问.内容能被更广泛的设备所访问.更少的代码和组件, 从而降低维护成本.改版更方便 不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性 遵循w3c制定的web标准,能够使用户浏览

WEB前端开发 必会的二十五个知识点

1. 常用那几种浏览器测试?有哪些内核(Layout Engine)?(Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera.(Q2) 内核:Trident,Gecko,Presto,Webkit. 2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)(Q1) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效. 块级元素:各占据一行,垂