鲨鱼网
WEB UI设计之HTML标签以本来意义
创始人
2024-08-01 06:30:40
0次

说句实话，“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>原文链接：http://www.cnblogs.com/CoreCaiNiao/archive/2011/06/19/2084651.html</p> <p>【编辑推荐】</p> <ol> <li>微软发布Web标准更新 增加VS 2010中的HTML5支持</li> <li>每个Web设计师背后都有一群指点江山的神(20P)</li> <li>HTML 5来袭：Web前端开发面临十字路口</li> <li>最受Web前端开发者欢迎的五大开发工具</li> <li>高性能WEB开发应用指南</li> </ol> <!--end::Text--> </div> <!--end::Description--> <div class="mt-5"> <!--关键词搜索--> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/chengxu/85863.html">实例 Qt 自定义控件捕获鼠标消息</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/chengxu/85865.html">代账行业谁主沉浮 友商网召集代账精英</a> </p> </div> <!--begin::Block--> <div class="d-flex flex-stack mb-2 mt-10"> <!--begin::Title--> <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3> <!--end::Title--> </div> <div class="separator separator-dashed mb-9"></div> <!--end::Block--> <div class="row g-10"> </div> </div> <!--end::Table widget 14--> </div> <!--end::Col--> <!--begin::Col--> <div class="col-xl-4 mt-0"> <!--begin::Chart Widget 35--> <div class="card card-flush h-md-100"> <!--begin::Header--> <div class="card-header pt-5 "> <!--begin::Title--> <h3 class="card-title align-items-start flex-column"> <!--begin::Statistics--> <div class="d-flex align-items-center mb-2"> <!--begin::Currency--> <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span> <!--end::Currency--> </div> <!--end::Statistics--> </h3> <!--end::Title--> </div> <!--end::Header--> <!--begin::Body--> <div class="card-body pt-3"> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/241137.html" class="text-dark fw-bold text-hover-primary fs-6">如何允许远程连接到MySQL数...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">[[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/61017.html" class="text-dark fw-bold text-hover-primary fs-6">如何利用交换机和端口设置来管理...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/119031.html" class="text-dark fw-bold text-hover-primary fs-6">施耐德电气数据中心整体解决方案...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202407/da6c51fc268b.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/82595.html" class="text-dark fw-bold text-hover-primary fs-6">Windows恶意软件20年“...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202409/eb2e03366045d9f.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/139440.html" class="text-dark fw-bold text-hover-primary fs-6">20个非常棒的扁平设计免费资源</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/27164.html" class="text-dark fw-bold text-hover-primary fs-6">2009 IBM动态架构新动力...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/225.html" class="text-dark fw-bold text-hover-primary fs-6">通过 XML 进行内容发布</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/130901.html" class="text-dark fw-bold text-hover-primary fs-6">德国电信门户网站可实时显示全球...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202403/3888b00968de30e.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/884.html" class="text-dark fw-bold text-hover-primary fs-6">着眼MAC地址，解救无法享受D...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在安装了DHCP服务器的局域网环境中，每一台工作站在上网之前，都要先从DHCP服务器那里享受到地址动...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202503/5fe82cca6c5ff78.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/246646.html" class="text-dark fw-bold text-hover-primary fs-6">为啥国人偏爱 Mybatis，...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">关于 SQL 和 ORM 的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行...</span> </div> <!--end::Title--> </div> </div> <!--end::Body--> </div> <!--end::Chart Widget 35--> </div> <!--end::Col--> </div> </div> <!--end::Content container--> </div> <!--end::Content--> </div> <!--end::Content wrapper--> <!--begin::Footer--> <div id="kt_app_footer" class="app-footer"> <!--begin::Footer container--> <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3"> <!--begin::Copyright--> <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2025 ©</span> <a href="/" target="_blank" class="text-gray-800 text-hover-primary">鲨鱼网</a> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-800 text-hover-primary"></a> <a href="http://spbjmm.com.shayuweb.com">上品网</a><a href="http://www.zzszq.net/">深知网</a><a href="http://www.taiyangwa.net/">太阳生活网</a><a href="http://baike.taiyangwa.net/">太阳百科网</a><a href="http://ypkjmy.com.shayuweb.com/">一品科技</a><a href="http://www.yuansudz.com/news/">元素网</a><a href="http://www.xn--i6qw12a.com/">帛典网</a><a href="http://xldmm.com.shayuweb.com/">星链岛</a> </div> <!--end::Copyright--> <!--begin::Menu--> <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news/" target="_blank" class="menu-link px-2">科技资讯</a> </li> <li class="menu-item"> <a href="/chengxu/" target="_blank" class="menu-link px-2">程序开发</a> </li> <li class="menu-item"> <a href="/sitemap.xml" target="_blank" class="menu-link px-2">sitemap</a> </li> </ul> <!--end::Menu--> </div> <!--end::Footer container--> </div> <!--end::Footer--> </div> <!--end:::Main--> </div> <!--end::Wrapper--> </div> <!--end::Page--> </div> <!--end::App--> <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true"> <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg--> <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span> <!--end::Svg Icon--> </div> <!--begin::Javascript--> <script>var hostUrl = "/static/default/pc/";</script> <!--begin::Global Javascript Bundle(mandatory for all pages)--> <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script> <!--end::Global Javascript Bundle--> <!--end::Javascript--> </body> <!--end::Body--> </html>