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> <br> 当前名称:WEBUI设计之HTML标签以本来意义 <br> 转载来源:<a href="http://csdahua.cn/article/djhedie.html">http://csdahua.cn/article/djhedie.html</a> </div> <div class="view-qrocde cl"> <div class="m z"><img src="/Public/Home/images/ew.jpg"/></div> <div class="text"> <h6>扫二维码与项目经理沟通</h6> <p>我们在微信上24小时期待你的声音</p> <p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p> </div> </div> <div class="othernews cl"> <h3>其他资讯</h3> <ul> <li><a href="/article/dhjdidi.html">论坛被黑怎么办,下面黑怎么办啊</a></li><li><a href="/article/dhjdigd.html">云服务器ecs有哪些特点?云服务器ecs好在哪?</a></li><li><a href="/article/dhjdiep.html">云服务器快照免费?(云服务器快照免费吗)</a></li><li><a href="/article/dhjdiji.html">Redis实现高并发扣减库存(高并发扣减库存redis)</a></li><li><a href="/article/dhjdigg.html">搭建服务器详细流程?(dedeampz怎么进数据库)</a></li> </ul> </div> </div> </div> <div class="sidebar"> <div class="tuijian"> <a href="#"> <h2 class="cl"><span>行业动态</span></h2> <h3>企业网站建设的重要性!</h3> <p>现在虽然是移动互联网时代,但企业网站依然重要,包含PC站点,移动站。可以说企业网站关系企业的未来发展和前途,尤其对中小企业更是如此,一些中小企业老板,对自己的名片很在乎,因为这是个门面。...</p> </a> </div> <div class="ser sidesub"> <h2>服务项目</h2> <ul class="ebox"> <li class="sub sub-1"> <div> <h3>网站建设</h3> <p></p> <a class="btn" href="/serve/website/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>移动端/APP</h3> <p></p> <a class="btn" href="/serve/moblie/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>微信/小程序</h3> <p></p> <a class="btn" href="/serve/small/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>技术支持</h3> <p></p> <a class="btn" href="/serve/tech/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>其它服务</h3> <p></p> <a class="btn" href="/serve/othe/">查看详情</a> </div> </li> <li class="sub sub-5"> <div> <h3>更多服务项目</h3> <p> <a>用我们的专业和诚信赢得您的信赖,从PC到移动互联网均有您想要的服务!</a></p> <a class="btn" href="/serve/">获取更多</a> </div> </li> </ul> </div> <div class="contact" id="fix"> <h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2> <h3>电话:13518219792</h3> <p>如遇占线或暂未接听请拨:136xxx98888</p> <div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div> </div> </div> <script> //固定滚动 (function () { var oDiv = document.getElementById("fix"); var H = 120, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function () { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "contact fixed"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "contact "; } }; } })(); </script> </div> <div class="footer"> <div class="wp"> <div class="wpss cl"> <dl class="about"> <dt>网站制作</dt> <dd><a href="http://www.cxhljz.cn/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="http://www.cqcxhl.com/" target="_blank" title="网站制作">网站制作</a></dd><dd><a href="http://chengdu.kswjz.com/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="http://www.kswcd.com/mobile/" target="_blank" title="手机网站制作">手机网站制作</a></dd> </dl> <dl class="about"> <dt>网站建设</dt> <dd><a href="http://www.myzwz.com/" target="_blank" title="绵阳网站建设">绵阳网站建设</a></dd><dd><a href="http://chengdu.cdcxhl.cn/jianshe/" target="_blank" title="品牌网站建设">品牌网站建设</a></dd><dd><a href="http://m.cdcxhl.cn/mobile/" target="_blank" title="网站建设公司">网站建设公司</a></dd><dd><a href="http://www.kswcd.com/solution/" target="_blank" title="网站建设方案">网站建设方案</a></dd> </dl> <dl class="about"> <dt>网站设计</dt> <dd><a href="http://www.kswcd.com/" target="_blank" title="成都企业网站设计">成都企业网站设计</a></dd><dd><a href="http://www.cdkjz.cn/fangan/led/" target="_blank" title="LED网站设计方案">LED网站设计方案</a></dd><dd><a href="http://www.4006tel.net/vision/website.html" target="_blank" title="网站设计">网站设计</a></dd><dd><a href="http://www.cdkjz.cn/fangan/response/" target="_blank" title="响应式网站设计方案">响应式网站设计方案</a></dd> </dl> <dl class="contact"> <dt>联系我们</dt> <dd>电话:13518219792</dd> <dd>邮箱:631063699@qq.com</dd> <dd>地址:成都青羊区锦天国际1002号</dd> <dd>网址:www.csdahua.cn</dd> </dl> <dl class="flow"> <dt></dt> <div class="ma cl"> <div class="m"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </div> </dl> </div> </div> <div class="footer-link wp"> <ul class="wpss cl"> <li class="fisrt">友情链接</li> <li><a href="http://www.hfjike.cn/" title="成都画册印刷" target="_blank">成都画册印刷</a></li><li><a href="http://www.cdxwcx.cn/weihu/" title="成都网站维护" target="_blank">成都网站维护</a></li><li><a href="http://www.rlvva.com/" title="成都工商注册" target="_blank">成都工商注册</a></li><li><a href="https://www.cdcxhl.com/tuoguan.html" title="成都服务器托管" target="_blank">成都服务器托管</a></li><li><a href="https://www.cdcxhl.com/city/chengdu.html" title="四川成都网站建设" target="_blank">四川成都网站建设</a></li><li><a href="http://www.fadianjidian.com/" title="成都柴油发电机" target="_blank">成都柴油发电机</a></li><li><a href="http://www.wxfdjsc.com/" title="四川发电机维修" target="_blank">四川发电机维修</a></li><li><a href="http://www.sclushan.com/" title="芦山网站制作" target="_blank">芦山网站制作</a></li><li><a href="http://www.wcggcd.com/" title="wcggcd.com" target="_blank">wcggcd.com</a></li><li><a href="http://www.rlvva.com/" title="成都公司注册" target="_blank">成都公司注册</a></li> </ul> </div> </div> <div class="bot-footer"> <div class="wp"> <p class="wpss"> <em>Copyright © 2002-2023 www.csdahua.cn 快上网建站品牌 QQ:244261566 版权所有</em> <em>备案号:<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em> </p> <p class="wpss" style="line-height:30px !important;"> </p> </div> </div> <div class="footer-kefu"> <ul> <li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a> </li> <li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li> <li class="wx"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </li> <li class="m"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>移动版官网</p> </div> </li> <li class="top"><em></em></li> </ul> </div> <script src="/Public/Home/js/all.js"></script> </body> </html> <script> $(".cont img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>