几年前，用于网页布局一般都用div元素，但语义化并不好。HTML5引入了大量新的块级元素来帮助提升网页的语义，使页面具有逻辑性结构、容易维护，并且对数据挖掘服务更友好。本文将详细介绍HTML5结构元素
　　结构元素，又称为区块型元素，是用来定义区块内容范围的元素。之前，区块型元素只有&div&一个，HTML5新增了7个语义化结构元素，包括&article&、&aside&、&nav&、&section&、&header&、&footer&、&main&
　　Section元素(&section&)表示文档中的一个区域(或节)，是区块级通用元素。比如，内容中的一个专题组，一般来说会有包含一个标题(heading)。一般通过是否包含一个标题(&h1&-&h6& element)作为子节点，来辨识每一个&section&
　　[注意]如果元素内容可以分为几个部分的话，应该使用&article&而不是&section&；再有，不要把&section&元素作为一个普通的容器来使用，这是本应该是&div&的用法。 一般来说，一个&section&应该出现在文档大纲中
　　&article&元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当&article&元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的&article&元素可嵌套在代表博客文章的&article&元素中
　　&article&元素的作者信息可通过&address&元素提供，但是不适用于嵌套的&article&元素；&article&元素的发布日期和时间可通过&time&元素的pubdate属性表示
　　[注意]对于&article&和&section&来说，是必须要加上标题的
　　&aside&元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。一般用于表示不直接相关内容的侧边栏，&aside&里面的内容与它所关联的内容相互独立，谁缺了谁都不影响各自文本含义的理解。如一篇文章的广告、相关背景和引述内容等
　　HTML导航栏(&nav&)描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表
　　并不是所有的链接都必须使用&nav&元素，它只用来将一些热门的链接放入导航栏，例如&footer&元素就常用来在页面底部包含一个不常用到，没必要加入&nav&的链接列表
　　一个网页也可能含有多个&nav&元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表
　　&header&元素表示页面头部或区块头部，用于将介绍内容和区块的辅助导航分组到一起，所以它有可能包含区块的标题元素以及其他的介绍内容(目录、logo等)
　　&[注意]由于&header&和&footer&元素不是分节内容，所以不会引入新的分节到大纲中
　　&footer&元素表示最近一个章节内容或者根节点(sectioning root)元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息
　　[注意]&footer&元素内的作者信息应包含在&address&元素中
　　&main&元素放在最后说，是因为&main&不常用，最主要的原因是IE浏览器都不支持
　　main元素(&main&)呈现了文档&body&或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容
　　&main&标签不能是以下元素的继承，包括&article&、&aside&、&footer&、&header&、或&nav&。 在一个文档中不能出现一个以上的 &main&标签
　　所以，一个正常的最外层布局应该是下面这样
&header&&/header&
&section&&/section&
&section&&/section&
&section&&/section&
&footer&&/footer&
　　但现在，一般地，布局如下&
&header&&/header&
&section&&/section&
&section&&/section&
&section&&/section&
&footer&&/footer&
　　想找一个规范使用html5新标签的网站不是很容易，国内大多数网站由于各种各样的原因，依然还是div布局，最终，案例选择使用苹果官网
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&苹果首页&/title&
&li&&a href="#"&Apple&/a&&/li&
&li&&a href="#"&Mac&/a&&/li&
&li&&a href="#"&iPad&/a&&/li&
&li&&a href="#"&iPhone&/a&&/li&
&li&&a href="#"&Watch&/a&&/li&
&li&&a href="#"&Music&/a&&/li&
&li&&a href="#"&技术支持&/a&&/li&
&li&&a href="#"&搜索&/a&&/li&
&li&&a href="#"&购物袋&/a&&/li&
&section&展示1&/section&
&section&展示2&/section&
&section&展示3&/section&
&section&展示4&/section&
&li&按钮1&/li&
&li&按钮2&/li&
&li&按钮3&/li&
&li&按钮4&/li&
&/article&
&li&&a href="#"&Watch&/a&&/li&
&li&&a href="#"&Pencil&/a&&/li&
&li&&a href="#"&iPad&/a&&/li&
&li&&a href="#"&MacBook&/a&&/li&
&div&选购及了解&/div&
&div&商店&/div&
&div&应用&/div&
&div&账户&/div&
&div&关于&/div&
&div&其他杂项&/div&
&/section&
阅读(...) 评论()如何写一个美观漂亮的 Word 文档？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。<strong class="NumberBoard-itemValue" title="2被浏览<strong class="NumberBoard-itemValue" title=",032,599分享邀请回答2.1K38 条评论分享收藏感谢收起weixin.qq.com/r/QXWdhRzEjUHyrVjm9yBT (二维码自动识别)----------------------------------------------------------------------------------------------------------------------------------谢谢大家，文档编辑是工作学习当中的一个基础技能点，一般来说掌握空格和回车就可以轻松hold住文档，如果你还有更高的需求，就要费更多心思了，我上面说的是也是比较基础的东西，把字体、字号、行距、颜色这几样控制住就可以完成不错的文档，但你要用word输出设计级别的文档，就没那么容易了，首先你要掌握大量的word操作技能，然后，你要有设计能力。在我们这里一般是先策划样式，再让设计师用PS出图，然后应用到word里去，这里面要考虑很多东西，比如说文档的易用性，要保证用户拿到这个文档后还能轻松的编辑，用户应用情景匹配，美观性等。看到很多人吐槽字体设计，我简单说一下，1.为什么用微软雅黑首先我考虑文档是用于电脑上传阅，PC端的阅读体验优先，所以你选用的字体是要大家都有的，因此只剩下几个可以选了，宋体、楷体、雅黑、华文中宋和细黑这些，我编辑过很多文档，这些字体都用过，但最终我还是认为雅黑是在PC端上最好的阅读体验，包括我们网站的字体也是用雅黑。对了，打印的话，雅黑跟宋体的差别并不是太大。2.设计问题有人吐槽我们的简历设计的太花哨，这点我觉得是很正常的，我们的设计面向大众，面向大众就会有众口难调的问题出现，所幸大部分人还是认可我们的，我们提供了几百套模板供大家选择，这里面确实有些花过头了，我也批评过我们的设计师，但大部分还是在能接受范围之内，我们会继续努力的，接下来会出很多清爽风格的模板。最后忍不住吐槽一下某些人，别来我们这酸了，专心搞好自己的产品，咱们走的不是一条路，你们从豆瓣贴吧酸到这里，有意思吗？幼稚！8.1K204 条评论分享收藏感谢收起注册 | 登录
85后，PM，在邪恶的黑暗里冥想争扎。
从零开始学运营，10年经验运营总监亲授，2天线下集训+1年在线学习，做个有竞争力的运营人。
上网在线阅读，是大多人获取信息的重要途径。用户会在网上阅读到大量的新闻及各类文章，特别是网络小说，这些页面展示的主体就是通篇大段的文字。对于这种看似简单的文字堆砌的页面，有没有人抱怨过：“这样的页面还需要出效果图啊？”作为网页设计师的你是怎样处理这样的界面的？
是习惯性的使用宋体字或者微软雅黑？
是直接设为12px或者14px的字号？
你有想过为什么要使用这种字体、字号吗？
你有考虑过文字排布与阅读效率的关系吗？
你的页面背景会影响到用户的浏览舒适度吗？
让我们从以下5个元素具体分析。
字体、字号
字体和字号这两个元素必须捏在一起说。
字体分为衬线体（serif）与非衬线体（sans serif）。简单的说，衬线体（serif）就是带有衬线的字体，笔画粗细不同并带有额外的装饰，开始和结尾有明显的笔触（如下图）。常用的英文衬线体有Times New Roman和Georgia，中文即是我们在windows下最常见的中易宋体。
与衬线体相反，无衬线装饰，笔画粗细无明显查差异的字体就是非衬线体（sans serif）。Arial、Helvetica、Verdanad都是我们熟悉的英文非衬线体，中文有微软雅黑和mac下默认的中文－华文细黑。
在过去，普遍认为有笔触装饰的衬线体，可提高辨识度和阅读效率，更适合做为阅读的字体。多用于报纸、书籍等印刷品的正文。非衬线体饱满醒目，常用做标题或者用于较短的段落。
很长一段时间里，在互联网上我们会注意这样的一个现象，国外网站大部分以非衬线体为主，而中文网站基本就是宋体。其实不难理解，衬线字体笔画有粗细之分，很小字的情况下细笔画就被弱化，受限于电脑的分辨率，10-12px的衬线字体在显示器上是相当难辨认的（见下图）；同字号的非衬线体笔画简洁而饱满，更适于做网页字体。windows下，中文宋体小字点阵的特性，12px、14px的字号显示仍然相当清晰美观，便于阅读。这也就是为什么大多网页设计制作人员容易机械性的选用特定字号或英文或中文的字体。
如今随着显示器越来越大，分辨率越来越高，经常会觉得看12px的文字有点吃力，做为设计师也会不自觉的开始大量使用14px的字体，而且越来越多的网站开始使用15、16px甚至18px以上的字号做正文文字。大字号的使用，对英文字体来讲，衬线体的高辨识度和流畅阅读的优势就体现出来了。中文宋体在显示14号以上字体时，单线条大字总是看上去有些单薄不那么协调，特别是这款点阵字在ClearType（） 强制平滑显示状态下尤其显得模糊不清。微软雅黑就是微软在这个字体显示问题上的解决方案。
让我们分别对比下中英文的衬线体与非衬线体在不同字号时的显示效果。
英文以Times和Verdanad为例，中文以宋体和微软雅黑为例。
我们随手拿起一本书或者一份报纸，数一数每行的文字，一般情况下都不会超过40个汉字。这是因为如果每行文字过长，读者会不停的转动脖子，感到疲惫的同时也会降低阅读效率；目光从行尾移至下一行首，也很容易串行，影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的，我们更要注意划分阅读区域。
文本宽度控制在450-700px为宜，此范围内参照字号大小；
英文每行80-100个字母（空格算一个字母）为宜；
中文每行30-40个汉字为宜。
通过设置间距，我们就可以控制文字的密度。如果每行间距太小，与文字过长一样，读者浏览文章时也容易串行；如果行距过宽，阅读时就会感觉文章不够连贯。
间距没有固定的值，通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示，不管是中文网站还是英文网站，大家多喜欢用1.5em－1.8em的行距。以1.6em的行距为例，字号16px的字，行距就是25.6px。
如（图）所示，1.5-1.8em的行距的确是非常适于阅读的文字密度。
关于段距，我们要考虑一下具体实际情况。比如文章篇幅较短，就不需要很宽的段距；二文章篇幅很长，特别是那些偏学术的比较枯燥的文章，就要多利用段距把握文章的节奏，给阅读者喘息和思考的机会，且使文章更有层次和可读性。
白色是全频光，全放射光对人眼睛的最有刺激，所以很多印刷品读物的纸张都选用乳白色或者淡黄色的纸张。由于显示器本身就发光，所以同是纯白色背景的文字，在电脑上比在纸上阅读会使眼睛更容易疲乏，另有研究表明：在电脑上阅读只有在纸上阅读速度的78%，阅读效率大大减低。因此，为了提高页面浏览的舒适度和效率，越来越多的页面采用浅灰色和淡黄色做为页面背景。
另外，印刷品以文字为主的出版物往往会采用低光泽度的纸张，也是因为光泽度高的纸张反射度高，导致阅读质量下降，容易使人视觉疲劳。页面背景仿造低光泽度的纸张（纸张纹理）也能否提高阅读的舒适度呢？
我曾做过这样一个小调研，同样一段文字放在不同颜色的背景上（仅考虑自然光源），其中有两个背景加了纸张纹理的效果。结果75%的人认为带有纸张纹理的背景长时间阅读舒适度最高。
结语：实际工作中，我们需要思考的更多，仅仅这5个元素是不够的。浏览环境、设备、网站特点、用户人群、个人偏好等等都需要设计师根据具体情况来把握界面文字的展示效果。差别也许是细微的，就像蝴蝶效应，多一点点的思考，就能为用户带来更好的体验感受。
出自 百度MUX
赞赏是对原创者的最大认可
收藏已收藏 | 3赞已赞 | 0
85后，PM，在邪恶的黑暗里冥想争扎。
产品经理群
运营交流群
品牌营销群
文案交流群
Axure交流群
关注微信公众号
大家都在问
47个回答59人关注
52个回答57人关注
14个回答34人关注
18个回答27人关注
30个回答35人关注
53个回答88人关注【图文】第5章__JSP的页面元素_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
第5章__JSP的页面元素
&&JSP的页面元素
阅读已结束，下载本文到电脑
想免费下载本文？
登录百度文库，专享文档复制特权，积分每天免费拿！
你可能喜欢2016公需第3章答案(完整版)_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
2016公需第3章答案(完整版)
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
&#xe64e;加入VIP
还剩1页未读，
定制HR最喜欢的简历
你可能喜欢