还html标签以本来意义_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了还html标签以本来意义_html/css_WEB-ITnose,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含6165字,纯文字阅读大概需要9分钟。
内容图文
![还html标签以本来意义_html/css_WEB-ITnose](/upload/InfoBanner/zyjiaocheng/402/2009f9c67e3240edaa6988840875e881.jpg)
搜索引擎的的发展让互联网业诞生了一个职业“seo”,因为要做“关键字”,所以几乎所有的“seo”都把“技术核心”放在研究关键字上,除了让标题,keywords,description及整个文档布满可能被搜索引擎感兴趣的关键字外。甚至于图片的alt属性,文字容器的title属性都是“关键字”,这样看似完美的“seo技术”往往忽略了2个重要的地方:1、html标签的定义。2、页面的精简。前者让搜索引擎对整个页面各处的“含义”有所“了解”,后者提高了访问速度,降低了服务器负载。可惜的是“seo”们往往不懂html及负载为何物,写代码的人往往又不懂“seo技术”,这可能造成了相当大的职业瓶颈,而急功近利的心态驱使又使得这两种职业互不学习、各行其是。
我的开发经历中,曾经遇到过通篇html标签全div的,貌似除了
之上及之外,其它全是- 结构的(我的理解是:这个页面所有元素全是列表)。事实上这两种情况还相当普遍,因为曲解了“div+css”的真实含义,也许根本就不应该有这个说法,因为一个完整页面几乎不可能仅仅div+css就能完成;这个名词的本义可能是“以div进行分割的html + css呈现”,我相信如果说“html+css”更加靠谱,但这样说又不能体现“流布局”的“普及程度”...真是伤透脑筋。
html标签有50多种,详见第4章节,我们常用的html标签(除了表单标签)主要有以下一些:
div,ul,ol,li,dl,dt,dd,p,span,h1-h6,label,em,strong,img,a,u,b,i,s...
我觉得有必要说出它们的定义,之后给它们分分组,w3c的分组比我这科学,但没我这好懂:
div:division(分开, 分割, 区分,分配, 分界线),标签可以把文档分割为独立的、不同的部分。作为块级元素的代表,因为没有固定的格式表现,目前滥用情况最严重。
ul:unordered list(无序列表)与li元素组合成团体。
ol:ordered list (有序列表)与li元素组合成团体。
li:list item(列表的项目)必须在父级ul或ol容器之内,这个必须是我自己加的。w3c只是这样说:
contexts in which this element can be used: inside elements. inside elements. inside elements.
我在其前面加了个must,以表示此问题的严峻性^^
dl:definition list(定义列表)与dt(definition term定义的项目)及dd(definition description定义的描述)组合成一个团体。
p:paragraph(段落)用于存放文章的一段。
span:span(范围)标签是被用来组合文档中的小节内容。作为内联元素,也因其没有固定的格式表现,目前滥用也比较多。
h1-h6:head(标题1到标题6),请注意这里的head表示其含义,不同于
标签,也不要认为与注意,搜索引擎如果发现页面中存在h标签,会认为其中的内容比较重要,重要程度从1到6逐渐降低。
label:label(针对表单控件的标签),它的名字就叫标签,只不过在这里,w3c给的定义是,用作表单的描述,例如我们喜欢在input标签前或后加上它。
em:emphasized(加重,强调),为强调其包含的文本。默认样式是斜体。其展示效果与标签相似,但搜索引擎不认为它们是相同的,因为搜索引擎往往尊重w3c给出的定义,而忽略你的展示效果。
strong:strong(加强加重,重点强调),为重点强调其包含的文本。默认样式是粗体。其强调效果比em还要强一点。虽然标签也能起到加粗的展示效果,但搜索引擎同样不认为它们是相同的,理由同上。
img:image(图片,图像);
a:anchor(锚)创造超级链接中的基本的链。
u:underline(文本下划线),即将淘汰。
s/strike:strikethrough(删除线),在文字上拦腰划一条线。
按显示样式分:
块级元素或块状元素,(默认样式为block)的标签有:
div,ul,ol,li,p,dl,dt,dd,h1-h6...
它们在默认情况下,会独占一行。除非你用样式改变它们。
内联元素,(默认样式为inline,不过我觉得称之为“行内元素”更易于理解)的标签有:
span,label,em,strong,img,a,u,b,i,s...
它们在默认情况下,会老老实实和其它元素并存于一行,当给它们加上一些特定的样式,例如:display:block,它们也会霸道地占用一行。但这里要提前说明的是,并非所有display:block就一定占一行,如果有宽度,又有float作推手把它们往前面赶,这样它们也会乖乖和其它元素挤在一行里。
按组合方式分:
固定的团体:
ul--li
ol--li
dl--dt--dd
分散的个体:
其它...
需要作一些说明的地方:
1、内联元素,它们本身没有被“框”起来,也就是它们本身的大小受其内容控制,在它没有变成块级元素之前,你对它的width和height进行控制都是徒劳的。变成块级元素的途径:一、display:block(直接霸占整行)二、float不会霸占整行,但是你可以控制其width或height了。
2、一些不能包含或嵌套的元素(从w3c抄来的):
a:不能包含其它a标签。
must not contain other a elements.
pre:(preformatted 预定义格式(文本 ))不能包含img, object, big, small, sub, 或 sup 元素
must not contain the img, object, big, small, sub, or sup elements.
button 按钮,不能包含input, select, textarea, label, button, form, fieldset, iframe 或 isindex 元素.
must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements.
label 不能包含其它的label元素
must not contain other label elements.
form 不能包含其它的form元素
![](http://www.gxlcms.com/Public/aiod/ts.jpg)
html代码热搜
- 关于type="file"的input框样式修改小结
- HTMLcellpadding与cellspacing属性图文详解
- 详解HTML编程的标记与文档结构
- 用DIV遮罩解决鼠标直接勾选checkbox无效的问题
- 在网页上调用桌面exe程序的简单方法
- html借助marquee实现文字左右滚动
- 关于分割线hr在各浏览器中的差异
- a标签的target链接指向iframe的方法
- 使用overflow:hidden来禁用页面滚动条
- 使用SWFObject完美解决HTML插入Flash的各浏览器兼容性方案
- 如何使用图片按钮作为重置(reset)表单按钮
- 超链接的宽度和高度直接设置不起作用的解决方法
- textarea的disabled与readonly属性具体用法介绍
- 空格在Html中如何表示( 有什么含义)
- 在js或css后加?v=版本号不让浏览器缓存
- 块级元素和内联元素及可变元素汇总
- HTML的结束标签问题与w3c标准
- iframe框架在IE浏览器下将白色背景设为透明色
- AdobeBrackets简单使用图文教程
- 如何去除表单的回车即提交即回车!=提交
- Readonly和Disabled之间的微小区别详解
- 如何设置select只读不可编辑且select的值可传递
- html中radio值的获取、赋值、注册事件示例详解
- textarea标签大小不可变不能通过鼠标拖动的方式来拖动
- HTML中select标签单选多选用法详解
![](http://www.gxlcms.com/ad/tx500x500.jpg)