WEBUI设计之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多种，详见http://www.w3.org/TR/html5/spec.html#contents第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 ol elements.
Inside ul elements.
Inside menu 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> 当前名称：<a href="http://www.csdahua.cn/qtweb/news48/266298.html">WEBUI设计之HTML标签以本来意义</a> <br> 文章网址：<a href="http://www.csdahua.cn/qtweb/news48/266298.html">http://www.csdahua.cn/qtweb/news48/266298.html</a> </p> <p> 网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等 </p> <p class="adpic"> <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a> <a href="" target="_blank" class="adimg"><img src=""></a> </p> <p class="copy"> 声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： <a href="http://www.csdahua.cn/" target="_blank">快上网</a> </p> </div> <div class="newsmorelb"> <p>成都快上网为您推荐相关内容</p> <ul> <li> <a href="/qtweb/news47/266297.html">数据库安全模型：保护重要信息(数据库安全模型)</a> </li><li> <a href="/qtweb/news46/266296.html">构建Linux编程全新环境（linux编程环境）</a> </li><li> <a href="/qtweb/news45/266295.html">巧妙编译MySQL代码在Windows平台中</a> </li><li> <a href="/qtweb/news44/266294.html">如何在Linux中使用SVN实现自动版本号管理？(svn自动版本号linux)</a> </li><li> <a href="/qtweb/news43/266293.html">FlexArrayCollection类用法详解</a> </li><li> <a href="/qtweb/news42/266292.html">什么云服务器便宜（哪家云服务器便宜）</a> </li><li> <a href="/qtweb/news41/266291.html">域名管理办法？（域名的服务提供商）</a> </li><li> <a href="/qtweb/news40/266290.html">「主机域名」如何选择「更低域名」？(主机域名的更低域名)</a> </li><li> <a href="/qtweb/news39/266289.html">Linux快捷键大全：手把手教你更高效使用操作系统（linux中的快捷键）</a> </li> </ul> </div> </div> <div class="col-lg-3 noneb"> <div class="bkright" style="margin-top: 0"> <p><a href="https://www.cdcxhl.com/news/host/">虚拟主机知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news7/390857.html">实践出真知布署openvpn环境应注意的事</a> </li><li> <a class="text_overflow" href="/qtweb/news28/497878.html">Linux互斥量：实现线程间同步的必要条件（互斥量linux）</a> </li><li> <a class="text_overflow" href="/qtweb/news5/461405.html">让你体验Win和Linux双系统的模拟器（winlinux模拟器）</a> </li><li> <a class="text_overflow" href="/qtweb/news11/367811.html">作为运维还不会正则表达式？赶快看这篇学习一下</a> </li><li> <a class="text_overflow" href="/qtweb/news42/250692.html">windows双系统设置方法？（在windows双系统）</a> </li><li> <a class="text_overflow" href="/qtweb/news6/116906.html">香港多IP站群服务器的优势有哪些</a> </li><li> <a class="text_overflow" href="/qtweb/news9/108559.html">租用双线服务器，BGP服务器有哪些好处？香港双线服务器</a> </li><li> <a class="text_overflow" href="/qtweb/news5/496755.html">分分钟学会Redis设置指令（redis设置指令）</a> </li><li> <a class="text_overflow" href="/qtweb/news41/191641.html">架构师需把HTML5安全排首位之HTML5安全问题集锦</a> </li><li> <a class="text_overflow" href="/qtweb/news23/59823.html">优化优化单实例Redis的性能表现（单实例redis性能）</a> </li><li> <a class="text_overflow" href="/qtweb/news31/348131.html">A57调试为什么打不开</a> </li><li> <a class="text_overflow" href="/qtweb/news7/552607.html">KeePass被爆安全漏洞：允许攻击者以纯文本形式导出整个数据库</a> </li><li> <a class="text_overflow" href="/qtweb/news12/36312.html">坐java如何学html</a> </li><li> <a class="text_overflow" href="/qtweb/news35/196985.html">如何才能成为一个高级的C++程序员</a> </li><li> <a class="text_overflow" href="/qtweb/news3/187353.html">术语汇编UML语言简介</a> </li> </ul> </div> <div class="bkright tag"> <p><a href="https://www.cdcxhl.com/hangye/" target="_blank">同城分类信息</a></p> <ul> <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/tadiaozulin/" target="_blank">塔吊租赁</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ddcl/" target="_blank">电动窗帘</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/sclsb/" target="_blank">水处理设备</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ggsj/" target="_blank">广告设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/qzgqb/" target="_blank">轻质隔墙板</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bpfhw/" target="_blank">边坡防护网</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/fengyangtai/" target="_blank">封阳台</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/shipenji/" target="_blank">湿喷机</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/weixiufdj/" target="_blank">发电机维修</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/zsljbc/" target="_blank">自上料搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bgcl/" target="_blank">办公窗帘</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/yupeng/" target="_blank">雨棚定制</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jiudiansj/" target="_blank">酒店设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/hntjbc/" target="_blank">混凝土搅拌罐车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jizhuangxiang/" target="_blank">集装箱</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/fadianjihs/" target="_blank">发电机回收</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://www.cdxwcx.cn/tuoguan/neijiang.html" target="_blank">内江托管服务器</a> <a href="http://www.scwawayu.com/" target="_blank">娃娃鱼鱼苗</a> <a href="https://www.cdcxhl.com/shoulu/" target="_blank">分类目录网站</a> <a href="http://www.cdxwcx.cn/tuoguan/cdbgp.html" target="_blank">成都多线服务器托管</a> <a href="https://www.cdcxhl.com/ssl/chengdu.html" target="_blank">成都申请ssl证书</a> <a href="http://www.cdxwcx.cn/" target="_blank">成都网站制作公司</a> <a href="http://m.cdcxhl.com/" target="_blank">成都网站建设</a> <a href="http://www.cxjianzhan.com/seo/" target="_blank">成都网站排名</a> <a href="https://www.xwcx.net/" target="_blank">机柜租用</a> <a href="https://www.cdcxhl.com/yunying.html" target="_blank">成都网站托管</a> <a href="https://www.hayoumeiju.com/" target="_blank">深圳惠宜防蚊纱窗</a> <a href="http://www.scjbgc.com/" target="_blank">四川搅拌罐车</a> <a href="https://www.cdcxhl.com/shop.html" target="_blank">成都商城网站开发</a> <a href="http://www.myzitong.cn/" target="_blank">绵阳梓潼网站建设</a> <a href="http://www.scmintian.com/" target="_blank">珉田数据中心</a> <a href="https://www.cdxwcx.com/400/" target="_blank">400电话办理</a> <a href="https://www.cdxwcx.com/jifang/zongshu.html" target="_blank">棕树数据中心</a> <a href="http://seo.cdkjz.cn/quanwang/" target="_blank">百度推广公司</a> <a href="https://www.cdcxhl.com/xiaochengx.html" target="_blank">成都微信小程序</a> <a href="http://www.cdwuji.cn/" target="_blank">成都网站建设</a> </div> </div> <footer> <div class="carousel-inner footjz"> <div class="container"> <i class="icon iconfont zbw"></i> 高品质定制 <i class="icon iconfont"></i> 跨终端自动兼容 <i class="icon iconfont"></i> 节约开发成本 <i class="icon iconfont"></i> 开发周期短 <i class="icon iconfont"></i> 一体化服务 <button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始2800定制网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</button> </div> </div> <div class="carousel-inner bqsy"> <div class="container"> <div class="lxfs"> <h4 class="yutelnone">028-86922220 13518219792</h4> <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4> <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>：532337155</a> <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>：631063699</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>：532337155</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>：631063699</a> <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a> <div class="dz">成都快上网专注： <a href="http://www.csdahua.cn/" target="_blank">网站优化</a> <a href="http://www.csdahua.cn/" target="_blank">网络推广</a> <a href="http://www.csdahua.cn/" target="_blank">网站建设</a> <address>地址：成都太升南路288号锦天国际A幢10楼</address> </div> </div> <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联"> <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br> Tel：028-86922220（7x24h）</p></div> </div> </div> </footer> </body> </html> <script> $.getJSON ("../../qtwebpic.txt", function (data) { var jsonContent = { "featured":data } var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)]; $(".adpic .adimg").attr("href",random.link) $(".adpic img").attr("src",random.pic); }) </script>