Heim >Web-Frontend >HTML-Tutorial >还html标签以本来意义_html/css_WEB-ITnose
还html标签以本来意义_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:07980Durchsuche
说句实话，“div+css”这个词汇不知道害了多少人，也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是div+css文件的组合。这样做，对于视觉上并没有什么影响，因为还原了之前设计的页面效果图，但如果这种html文档交给机器（例如蜘蛛）去分析，它可能根本找不到重点，你整个页面对它来说，就如同一个白蚁窝，它第一件要做的事情可能就是把这些相同的东西给去掉，然后再做内容的筛选。
搜索引擎的的发展让互联网业诞生了一个职业“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表示其含义，不同于
标签，也不要认为与有任何关系。这里仅仅是突出文档内容的标题。 <p>注意，搜索引擎如果发现页面中存在h标签，会认为其中的内容比较重要，重要程度从1到6逐渐降低。</p> <p>label:label（针对表单控件的标签），它的名字就叫标签，只不过在这里，w3c给的定义是，用作表单的描述，例如我们喜欢在input标签前或后加上它。</p> <p>em:emphasized（加重，强调），为强调其包含的文本。默认样式是斜体。其展示效果与<i>标签相似，但搜索引擎不认为它们是相同的，因为搜索引擎往往尊重w3c给出的定义，而忽略你的展示效果。</i></p> <p>strong:strong（加强加重，重点强调），为重点强调其包含的文本。默认样式是粗体。其强调效果比em还要强一点。虽然<b>标签也能起到加粗的展示效果，但搜索引擎同样不认为它们是相同的，理由同上。</b></p> <p>img:image（图片，图像）；</p> <p>a:anchor（锚）创造超级链接中的基本的链。</p> <p>u：underline（文本下划线），即将淘汰。</p> <p>s/strike：strikethrough（删除线），在文字上拦腰划一条线。</p> <p>按显示样式分：</p> <p>块级元素或块状元素，（默认样式为block）的标签有：</p> <p>div,ul,ol,li,p,dl,dt,dd，h1-h6...</p> <p>它们在默认情况下，会独占一行。除非你用样式改变它们。</p> <p>内联元素，（默认样式为inline，不过我觉得称之为“行内元素”更易于理解）的标签有：</p> <p>span,label,em,strong,img,a,u,b,i,s...</p> <p>它们在默认情况下，会老老实实和其它元素并存于一行，当给它们加上一些特定的样式，例如：display:block，它们也会霸道地占用一行。但这里要提前说明的是，并非所有display:block就一定占一行，如果有宽度，又有float作推手把它们往前面赶，这样它们也会乖乖和其它元素挤在一行里。</p> <p>按组合方式分：</p> <p>固定的团体：</p> <p>ul--li</p> <p>ol--li</p> <p>dl--dt--dd</p> <p>分散的个体：</p> <p>其它...</p> <p>需要作一些说明的地方：</p> <p>1、内联元素，它们本身没有被“框”起来，也就是它们本身的大小受其内容控制，在它没有变成块级元素之前，你对它的width和height进行控制都是徒劳的。变成块级元素的途径：一、display:block（直接霸占整行）二、float不会霸占整行，但是你可以控制其width或height了。</p> <p>2、一些不能包含或嵌套的元素（从w3c抄来的）：</p> <p>a：不能包含其它a标签。</p> <p>must not contain other a elements.</p> <p>pre：（preformatted 预定义格式（文本 ））不能包含img, object, big, small, sub, 或 sup 元素</p> <p>must not contain the img, object, big, small, sub, or sup elements.</p> <p>button 按钮，不能包含input, select, textarea, label, button, form, fieldset, iframe 或 isindex 元素.</p> <p>must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements.</p> <p>label 不能包含其它的label元素</p> <p>must not contain other label elements.</p> <p>form 不能包含其它的form元素</p> <p>must not contain other form elements.</p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p>