WEB,UI篇,还HTML标签以本来意义
来源: 阅读:1170 次 日期:2015-04-16 16:05:41
温馨提示: 小编为您整理了“WEB,UI篇,还HTML标签以本来意义”,方便广大网友查阅!

说句实话,“DIV+CSS”这个词汇不知道害了多少人,也许其提出者本意并没有错,但是跟风者从表现曲解了其意思,认为整个页面就应当是DIV+CSS文件的组合。这样做,对于视觉上并没有什么影响,因为还原了之前设计的页面效果图,但如果这种HTML文档交给机器(例如蜘蛛)去分析,它可能根本找不到重点,你整个页面对它来说,就如同一个白蚁窝,它第一件要做的事情可能就是把这些相同的东西给去掉,然后再做内容的筛选。

搜索引擎的的发展让互联网业诞生了一个职业“SEO”,因为要做“关键字”,所以几乎所有的“SEO”都把“技术核心”放在研究关键字上,除了让标题,keywords,description及整个文档布满可能被搜索引擎感兴趣的关键字外。甚至于图片的alt属性,文字容器的title属性都是“关键字”,这样看似完美的“SEO技术”往往忽略了2个重要的地方:1、HTML标签的定义。2、页面的精简。前者让搜索引擎对整个页面各处的“含义”有所“了解”,后者提高了访问速度,降低了服务器负载。可惜的是“SEO”们往往不懂HTML及负载为何物,写代码的人往往又不懂“SEO技术”,这可能造成了相当大的职业瓶颈,而急功近利的心态驱使又使得这两种职业互不学习、各行其是。

我的开发经历中,曾经遇到过通篇HTML标签全DIV的,貌似除了之上及之外,其它全是

(我的理解是:整个HTML是一万个毫不相干的内容拼装起来);也曾遇到过通篇是
  • 结构的(我的理解是:这个页面所有元素全是列表)。事实上这两种情况还相当普遍,因为曲解了“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> <p>注意,搜索引擎如果发现页面中存在h标签,会认为其中的内容比较重要,重要程度从1到6逐渐降低。</p> <p>label:Label(针对表单控件的标签),它的名字就叫标签,只不过在这里,w3c给的定义是,用作表单的描述,例如我们喜欢在input标签前或后加上它。</p> <p>em:Emphasized(加重,强调),为强调其包含的文本。默认样式是斜体。其展示效果与<i>标签相似,但搜索引擎不认为它们是相同的,因为搜索引擎往往尊重w3c给出的定义,而忽略你的展示效果。</p> <p>strong:Strong(加强加重,重点强调),为重点强调其包含的文本。默认样式是粗体。其强调效果比em还要强一点。虽然<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>以上内容来自本人,本人不清楚的地方查阅并抄袭了w3c及互联网,您如果发现问题,请及时留言鞭策我改正,交流使人变得强大!</p> <p>更多信息请查看<a href="//www.reelogic.com/c2021.aspx" target="_blank">IT技术专栏</a></p> </div> <div class="c_nrgg"></div> <div class="c_nrgdd"> 更多信息请查看 <a href="//www.reelogic.com/c2025.aspx">脚本栏目</a> </div> <div class="c_nrgdd"></div> <div class="c_nrgdd"> <a href="//www.reelogic.com/memberNewsAdd.aspx">【点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】</a> <a href="//www.reelogic.com/n4836c56.aspx">【点此处查询各地各类考试咨询QQ号码及交流群】</a> </div> <div class="c_nrgdds"> 上一篇: <a href="//www.reelogic.com/n1013698c2025.aspx">对于Python的Django框架部署的一些建议</a> </div> <div class="c_nrgdds"> 下一篇: <a href="//www.reelogic.com/n1016336c2025.aspx">来自Individuality纯CSS打造的笔记本样式的菜单导航</a> </div> <div class="c_nrgdds"> 手机网站地址: <a href="//www.reelogic.com/wap/n1016331c2025.aspx">WEB,UI篇,还HTML标签以本来意义</a> </div> <div class="c_nrgdd"> 由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准! </div> <div class="c_nrtja"> <div class="c_nrtja1"> <span class="c_nrtja2">相关阅读</span> <a href="//www.reelogic.com/c2025.aspx">脚本栏目</a> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970373c2025.aspx">Bottle框架中的装饰器类和描述符应用详解</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970372c2025.aspx">Python探索之SocketServer详解</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970368c2025.aspx">Python探索之实现一个简单的HTTP服务器</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970364c2025.aspx">python探索之BaseHTTPServer-实现Web服务器介绍</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970362c2025.aspx">13个最常用的Python深度学习库介绍</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970359c2025.aspx">深入理解Python中的*重复运算符</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970353c2025.aspx">python logging日志模块详解</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963425c2025.aspx">System表空间不足的报警问题浅析</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963424c2025.aspx">Android开发自定义TextView省略号样式的方法</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963423c2025.aspx">MySQL 清除表空间碎片的实例详解</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963422c2025.aspx">Ubuntu下MySQL安装及配置远程登录教程</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963421c2025.aspx">Python 2.x如何设置命令执行的超时时间实例</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963420c2025.aspx">windows 64位下redis安装教程</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963419c2025.aspx">Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963418c2025.aspx">浅谈Node Inspector 代理实现</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963417c2025.aspx">java web开发之购物车功能实现示例代码</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963416c2025.aspx">Android开发中GridView用法示例</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963415c2025.aspx">Django ORM框架的定时任务如何使用详解</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963414c2025.aspx">SpringMail使用过程中的报错解决办法</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963413c2025.aspx">Android 使用自定义RecyclerView控件实现Gallery效果</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> </div> </div> </div> <div class="c_lbright_nr"> <div class="c_nr_lbxx1"> <div class="c_lbright_nr1bt1s"> <a href="//www.reelogic.com/wap/"> 移动网站</a> </div> </div> <div class="c_nr_lbxx1"> <div class="c_lbright_nr1bt1"> 最新信息 </div> <div class="c_nr_lbxx_tui"> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2295186c1087.aspx">2025年中国电信翼智公司校园招聘火热进行中!</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2295185c1757.aspx">2025年中国电信湖南公司校园招聘火热进行中!</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2295184c1748.aspx">2025年中国电信江苏公司校园招聘火热进行中!</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2295183c1754.aspx">2025年中国电信广西公司校园招聘火热进行中!</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2295182c1773.aspx">2025年中国电信甘肃公司校园招聘火热进行中!</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2295181c1756.aspx">2025年中国电信贵州公司校园招聘火热进行中!</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2295180c1087.aspx">2025年中国电信翼康公司校园招聘火热进行中!</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2295179c1087.aspx">2025年中国电信翼金公司校园招聘火热进行中!</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2295178c1087.aspx">2025年中国电信安全公司校园招聘火热进行中!</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2295177c1751.aspx">2025年中国电信山东公司校园招聘火热进行中!</a> </div> </div> </div> <div class="c_nr_lbxx1"></div> <div class="c_nr_lbcd"> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/gwy.svg" width="20" height="20">公考类 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1072.aspx">云南公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1220.aspx">贵州公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1219.aspx">四川公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1311.aspx">广西公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1252.aspx">各省公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1015.aspx">国家公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1253.aspx">选调遴选</a></span> </div> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/zp.svg" width="20" height="20">招聘类 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c934.aspx">188app金宝搏 </a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1431.aspx"></a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1110.aspx">特岗教师</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1291.aspx">三支一扶</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1291.aspx">志 愿 者</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1448.aspx">银行招聘</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1124.aspx">国企招聘</a></span> </div> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/ks.svg" width="20" height="20">各类考试 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c690.aspx">学历升学</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c385.aspx"></a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c921.aspx">职业资格</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c373.aspx">外语考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c375.aspx">医学考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c225.aspx">工程考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c823.aspx">教师资格</a></span> </div> </div> </div> </div> <!-- <img src="http://admyn.ynpxrz.com/adv/hf.png" alt="" srcset=""> --> <div class="c_gywm"> <a href="//www.reelogic.com/n38c56.aspx" target="_blank">关于我们</a>| <a href="//www.reelogic.com/n76555c56.aspx" target="_blank">联系我们</a>| <a href="//www.reelogic.com/n340264c1277.aspx" target="_blank">人才招聘</a>| <a href="//www.reelogic.com/n3452c56.aspx" target="_blank">网站声明</a>| <a href="//www.reelogic.com/n2514c56.aspx" target="_blank">网站帮助</a>| <a href="//www.reelogic.com/memberNewsAdd.aspx" target="_blank">非正式的简要咨询</a>| <a href="//www.reelogic.com/n21580c56.aspx" target="_blank">简要咨询须知</a>| <a href="//www.reelogic.com/n4836c56.aspx" target="_blank">加入群交流</a>| <a href="//www.reelogic.com/wap" target="_blank">手机站点</a>| <a href="https://www.ynbxjy.com/tsjy.html" target="_blank">投诉建议</a> </div> <div class="c_gywm"> <span>工业和信息化部备案号:<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">滇ICP备2023014141号-1</a></span> <span><a href="//www.reelogic.com/n48442c56.aspx" target="_blank">云南省教育厅备案号:云教ICP备0901021</a></span> <span><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=53010202001879" target="_blank" rel="nofollow">滇公网安备53010202001879号</a></span> <span>人力资源服务许可证:(云)人服证字(2023)第0102001523号</span> </div> <div class="c_gywm1"> <div class="c_ga_1" style="width:200px;"> <a href="http://www.yn.cyberpolice.cn:81/RecValidate/RecView.aspx?RecordID=53010203402261" target="_blank" class="wjba" rel="nofollow"><img src="//www.reelogic.com/pic/gonganbeian.jpg" border="0" alt="云南网警备案专用图标" width="45" height="50"></a> </div> <div class="c_ga_2" style="width:700px;"> <span>联系电话:0871-65317125(9:00—18:00)</span> <span>获取招聘考试信息及咨询关注公众号:</span> <br> <span>咨询QQ:526150442(9:00—18:00)</span> <span>版权所有:<span style="font-weight: bold; font-family: arial;" id="iwms_cp"><a href="//www.reelogic.com"></a></span></span> </div> <div class="c_ga_3" style="width:200px;"> <a href="http://www.yn.cyberpolice.cn/" target="_blank" class="wjbj" rel="nofollow"><img src="//www.reelogic.com/pic/gonganbj.jpg" border="0" alt="云南网警报警专用图标" width="48" height="52"></a> </div> </div> <!-- <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://www.reelogic.com/hm.js?e5dabc539f2ab7c2f06ff8fce27ffff8"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> --> <div style="text-align:center;margin-bottom:5px;"><form action="http://www.baidu.com/baidu" target="_blank"><div bgcolor="#FFFFFF" style="text-align:center;"><input name="tn" type="hidden" value="baidu"><a href="http://www.baidu.com/"><img src="http://img.baidu.com/img/logo-80px.gif" width="80px" height="29px" alt="Baidu" align="bottom" border="0"></a><input type="text" name="word" size="30" placeholder="" value=""><input type="submit" value="baidu"></div></form></div><div id="so360" style="text-align:center;margin-bottom:5px;"><form action="https://www.so.com/" target="_blank" id="so360form"><img src="http://p1.qhimg.com/d/_onebox/search.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="so360_keyword" placeholder="" value=""> <input type="submit" id="so360_submit" value="360"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div id="sogou" style="text-align:center;margin-bottom:5px;"><form action="https://www.sogou.com/" target="_blank" id="so360form"><img src="https://www.sogou.com/web/index/images/logo_440x140.v.4.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="sogou.com_keyword" placeholder="" value=""> <input type="submit" id="sogou_submit" value="sougou"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div align="center"><a target="_blank" href="/sitemap.xml">map</a></div></body> </html>