HTML结构 语义化思想

总体思想:用正确的标签做正确的事情

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

主要体现:

1. 对用户而言,更好的用户体验,例如:在没有样式CCS或图片的情况下也以一种文档格式显示;title、alt用于解释名词或解释图片信息、label标签的活用。

2. 对机器而言,更利于机器识别,更利于SEO,搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。

3. 对开发而言,更利于团队开发和维护,使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解,

编写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关联起来。

雅虎一道面试题:

<P>  哥写的不是HTML,是寂寞。<br><br>  我说:<br>不要迷恋哥,哥只是一个传说

其中存在的问题:

1.  html与xhtml标准的区别,xhtml有严谨的结构,标签必须关闭,单标签最后需要添加/来关闭,并且标签都必须小写;

2. 结构和样式的分离,不应该使用<br/>来控制样式,合理设计结构,换行的段落需要为每个段落都添加p,样式需要利用css实现;

3. 合理利用标签,注重标签语义化,缩略可以用<abbr>标注,“我”可以用<cite>标注,引用的说话内容可以用<q>标记;

//代码参考如下
<p>哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>,是寂寞。</p>
<p><cite>我</cite>说:<q>不要迷恋哥,哥只是一个传说</q></p>
时间: 2024-10-24 06:46:39

HTML结构 语义化思想的相关文章

语义化HTML

一.怎样语义化html结构 语义化是指用合理HTML标记以及其特有的属性去格式化文档内容. 正确语义化----结构(html)才是重点,样式(css)是用来修饰结构的.所以要先确定html,确定标签,再来选用合适的css. 一般来说,所有的标签都会有一个默认的样式,所以一个简单的判断网页标签语义是否良好的方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性. 正确语义化最实用的几条: 1.头部的页面声明,如定义meta, 页面title 2.提高关键词密度,如图片替换alt,链

HTML5学习笔记(三):语义化和新增结构元素

在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义化的概念,同时提供了新的标签来指定对应的内容类型. 语义化的好处 语义化的html只用来搭建网页的结构,去掉css后,网页结构不会变: 屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页: 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重: 你的页面是否对爬虫容易理解非常重要,因

语义化的html结构的好处

HTML是提供网页文档内容的上下文结构和含义:html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以首先我们要知道html和页面的表现是没有关系的,这些是css的事情.HTML在页面中的作用就是结构和含义,通俗点说就是划分内容,这里放什么,我们放的是什么. 语义化的HTML结构首先要强调HTML结构 HTML结构是页面的骨架,一个页面就好像一幢房子,HTML结构

.使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css淘宝测试练习题</title> <style type="text/css"> *{margin: 0;padding: 0;font-size:

[html] HTML结构的语义化

原文链接:http://www.cnblogs.com/freeyiyi1993/p/3615179.html 1.什么是html语义化 选择合适的html标签,便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 2.为什么要语义化? 为了在没有CSS的情况下,页面也能呈现出很好地内容结构.代码结构:为了裸奔时好看: 用户体验:例如title.alt用于解释名词或解释图片信息.label标签的活用: 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖

表单,音视频,语义化标签与属性选择器,结构伪类选择器,伪元素选择器(按钮禁止点击)

HTML5简介 万维网的核心语言,标准通用标记语言的写一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素,属性和行为:广义的HTML是包含HTML5本身 + CSS3 + JavaScript,虽然不被所有浏览器所支持,但它是一种趋势: 新增语义化标签 <header></header> <!-- 头部标签 --> <nav></nav> <!-- 导航标签 --> <article>&l

如何让你的JavaScript代码更加语义化

语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.起作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形式会显得不够直接,而且在一定程度上也有冗余. 优化搜索引擎(SEO),结构良好的网页对搜索引擎的亲和力是很高的,百度和 google 也给出了很多网页结构化的建议(规范),方便他们抓取网页. 利于设备解析,如盲人阅读器对页面的分析,目前淘宝很多网页都是支持盲人阅读的,这种体验上的优化得利于网页的良好

经典总结!语义化HTML和前端架构

这是一篇我喜欢的思想,经验,理念,以及过去几年中我所试验的理念的集合.它覆盖了HTML语义,前端架构的组件和方法,类命名模式,和HTTP内容压缩. 我们不会停止探索而我们一切探索的终点将会到达我们出发的地方于是我们第一次认识了这个地方. T.S. Eliot — “一人”关于语义语义是对标记与符号之间的关系,以及它们的含义的研究.在语言学中,这主要是对语言中的符号(如单词,短语,或声音)意义的研究.在前端web开发的上下文中,语义大多是与元素,属性,和属性值(包括像Microdata之类的扩展)

语义化 JavaScript 代码

语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形式会显得不够直接,而且在一定程度上也有冗余. 优化搜索引擎(SEO),结构良好的网页对搜索引擎的亲和力是很高的,百度和 google 也给出了很多网页结构化的建议(规范),方便他们抓取网页. 利于设备解析,如盲人阅读器对页面的分析,目前淘宝很多网页都是支持盲人阅读的,这种体验上的优化得利于网页的良好