Latest Updates

一、什么是HTML语义化 基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等，根据内容的结构化，选择合适的标签便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析便于SEO推广。二、为什么要语义化 搜索引擎优化和语义的HTML是密不可分的伙伴。他们有时可能有利益冲突，稍后在文章中说明，但总的来说，他们是一致的。搜索引擎优化的目的是为了帮助搜索引擎爬虫更好地了解网页的信息和将网页更好地归类。它需要更多的指引去确定一个网页的结构和主题。好的语义化的HTML能够体现页面的结构。语义的HTML试图通过网页上文字和标记传达网页的含义，也可以这样想：如果网页上的内容是你说的话。那么标签是话的结构，音调，停顿，甚至可以是脸上的表情。基本上标签是一半语言。通俗来说；语义化之后的网页，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。下面我来分几类说说为什么要语义化： 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构。 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用。 考虑到代码的可复用性，可移植性，方便其他设备的解析执行。移动设备、盲人阅读器等 有利于SEO和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重。你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。三、如何语义化 标题＜Hx＞ ＜h1＞、＜h2＞、＜h3＞、＜h4＞、＜h5＞、＜h6＞,在WEB中作为标题使用，并且依据重要性递减。＜h1＞是最高的等级，所以你需要准确确定 每个页面最重要的内容是什么，要优化的关键词在哪里。以我们最常见的博客为例，博客首页罗列最多的通常就是最新博文，而最重要的应该就是博客的名称了，而后面最新文章的链接标题则可以使用＜H2＞或者＜H3＞，一般都使用＜H2＞，表示次级标题。 但是，是不是每个页面的H1标签都包含博客名称呢？我们的建议是次级页面的博客名称链接都放在H2标签里，而你的文章标题则使用H1标签，这样对于整站优 化是很有帮助的，这也是优化到每个页面需要注意的一点。通过合理设置每个页面的hx标题，网站的内容才会更具优势。 强调＜em＞、＜strong＞、＜b＞、＜i＞ ＜em＞、＜strong＞这两个标签对SEO有着较大影响效果，适当使用它们，可使你的网页增色不少。＜em＞、＜strong＞与Hx一样，其区别也 在于重要性不一样。＜em＞ 表示强调，而＜strong＞意为重点强调，较em更重一些。在SEO时，我们可以将最重要的关键词用strong标记，对第二重要的用em标记。结合前 面使用的Hx标签，它们更适合放在文章正文的内部，而Hx理所当然是在用在正文的外部。有些WEB设计者为了达到网页的某些效果，使用＜strong＞纯 粹是为了达到加粗，使用em就是为了倾斜，而这种做法根本没必要，而且相反可能会影响到SEO的效果。在以前，为了达到粗体、斜体的效果，WEB设计者会 使用＜b＞、＜i＞标签，而现在基本不用它们了，它们仅仅是用来表现文本样式的，而最明智和常用的解决方案是用CSS来控制文字样式。段落＜p＞ 当搜索引擎读取网页内容的时候，遇到P标签的时候，立马就知道这是一个段落，而如果使用DIV，就无法体现HTML语义化的优势了。从WEB标准的角度来 看，文章正文使用P是理所当然，也是更值得提倡的。不过如果使用＜div＞代替＜p＞，对SEO的影响还是甚微的，因为它们并没有任何强调的意味在里面。 但是如果你使用P来给网页整体布局，就显得有些怪异了。列表＜ul＞、＜ol＞、＜li＞、＜table＞ ＜ul＞为无序列表，大家广泛使用的，有序列表＜ol＞也挺常用。在web标准化过程中，＜ul＞被更多的用于导航条，这样做是完全正确的，而在文章列表 里面，就可以使用ol了，因为那些列表都是有一定顺序的。当然，这两个对于SEO的影响也是甚微的，但如果你使用表格＜table＞代替列表，不仅会使得

互联网的时代，说是一个体验为王的时代，一点也不为过。如果在设计一个网页的时候有好的设计技巧，那么将会大大提升这个网站的用户体验，如果一个网站的用户体验提升了那么访问量也就提升了，访问量提升了那么销售额自然也就提升了，一个网站能让一家公司的销售额提升起来，那么这个网站可以说是个非常成功的网站了。今天我们就来讲设计中的10个重要的小技巧吧。1.优化使用的图片，会获得更好的页面加载速度使用正确的网页格式图，能让网站访问速度提升一半。这里有个选择适合的文件格式的技巧：如果图片是单色，那最好储存为PNG或者GIF格式图片；如果是彩色色调图则最好储存为JPG格式的图片。尽量把图片数量减到最低，并且灵活使用图片，并且尽可能地减小文件大小。如此一来，将可以大大的减少页面的读取时间和改善网页的性能。一些方便图片优化的在线工具包括：Optimizilla:  http://optimizilla.com/zh/图好快：www.tuhaokuai.com/色彩笔: http://www.secaibi.com/tools/2.保持干净和简单通常来说，一个干净、简单的网页设计最终会成为一个可用性高的网页设计，因为它在与用户的交互中不会使其产生混淆。当页面上有太多的网站功能和组件时，将会分散网站用户的注意力而失去原本浏览网站的目的。确保每个页面元素都有其目的，然后问自己以下问题：是否真的需要这个设计么？如果我突然删除这个组件，大多数人会希望它“回来”吗？ 这是什么组件是做什么用，它如何协助用户浏览？ 如何把这些元素和目标、消息和网站的宗旨互相结合？3.UI 动效的有效使用UI动效是对实时交互的本质的补充。也就是说，动效可以营造一种跟物理世界的物体交互事的情感体验。通常，UI动效总能带给用户积极的体验。可以通过以下动效带给用户更多满足感：展示进度：这个交互主要展示网页的刷新或者加载状态。 展示关键导航：用户通常希望一眼看到最关键的东西。通过动效暗示导航的选中状态，会立刻将用户引导到指定内容。对网站建立阶层结构，多层次的管理。确保它在父层与子层之间易于导航。此外，不管在哪一个网页当中，也应该能很容易到达最高层的页面（例如网站首页）。在用户滑动到相应阶层则自动展开子层菜单。4.明智和有条理地使用字体保持字体的一致性，确认标题和段落的内容看起来有所不同。使用空白、调整行高、字体大小和字母间距属性，使用户轻松愉快地阅读和扫描内容。尽量保持字体大小12像素以上，特别是对段落内容。虽然很多没有遇到因为字体太小而造成阅读上的困难，但是想想老人家、近视眼和其他类似视觉障碍的族群吧。5.理解色彩无障碍性颜色的合理运用，是至关重要的。一个界面尽量要保证一个主色调，一个辅色调即可。有些色彩组合只适合运用在前景色的部分，而不适合做背景色。不仅要使用良好的色彩组合，而且要把它用在页面中的合适元素上。比如：想让用户点击什么按钮，那么取消按钮最好弱化视觉。此外，使用一些对特殊形式色盲的用户友好的颜色（检查工具名为Vischeck，可以测试某些类型的色盲）。6.要了解如何编写代码虽然各种所见即所得的网页编辑器充斥市场。但是，大多数网页编辑器掺杂了不必要的代码，使你的HTML结构设计不当，难以维护和更新，导致网页膨胀。通过自己编写的网页代码，能得到简洁的代码，能够愉快方便地阅读和维护。你可以自豪地说是自己写出来的代码。但知道如何使用所见即所得的IDE或预览功能并不会妨碍学习HTML和CSS。你要知道发生了什么事情，才能创造有效并高度优化的网页设计。7.谨记搜索引擎优化是非常重要的在设计网站时，一个好的网页设计师应该永远牢记基本的SEO概念。例如，网页内容结构、用文字表示标题（即网页的标题和标志）。此时，以前学习的如何合理编码的能力就派上用场。认识正确、语义和基于标准的HTML/CSS后，你会很快认识到Div比表格布局好得多，不仅更为准确地展现内容，而且对搜索引擎排名也有帮助。另外，知道用CSS更换背景、文字和图片也是一个好主意。8.根据阅读顺序做设计普通人用几秒钟就决定是否要阅读更多网页内容或到另一个网站。因此，作为一个Web设计师，要有个好方法，能在这珍贵的几秒钟鼓励用户选择前者（看更多内容）。所以，遵循人的正常习惯阅读顺序，从上而下，从左到右，在做某些需求的时候，需要考虑阅读顺序这个概念，要让用户最快的时间获取到文字信息。在网页头部很容易看到的地方放置网站上的重要元素，但也不要过度拥挤在上半部分网页，否则会吓到用户，而不会往下继续看内容。记住上半部分网页设计的卖点：视其为推销员，使人们有购买想法，即他们想在你的网站上看到什么。9.清楚的了解浏览器的兼容性当一个网页设计师必须要知道的一件事，就是你的工作环境（浏览器）是挑剔和难以预料的。如果你的网页设计只能运行在的几种网页浏览器，那是不够的，你需要尽可能多浏览器下测试。这里有一款工具Browsershots，可以测试浏览器兼容性。10.使设计有灵活性和可维护性一个好的网页设计师可以确保以后可以很容易更新或修改网站。设计一个有可塑性、易于维护的网站，是一个伟大网页设计师的标志。让你的工作尽可能从结构化转向模块化。 网页设计这个行业是动态的，而且还很“年轻”。事情往往在短暂变化中。牢记这种思想，将推动建立更加灵活的网页设计。掌握了这些技巧，在技术条件相差不大的时候，我们通过产品的体验设计，有效提升用户体验，让用户感觉更愉悦。