Where is JavaScript?

HTML进阶-优化设计

时至今日,网页加载的性能已经很大程度影响了网页的体验效果。而提到加载性能的提升点,大部分人会想到`图片优化`、`JavaScript优化`、`服务器配置升级`、`文件压缩`甚至是`CSS压缩`这些方式。反而在前端初学阶段接触的HTML代码的质量,容易被忽视。

网页内容的丰富离不开页面元素的快速累积,举一个典型值,YouTube的首页元素大概有3500个。网页性能的提升无法靠精简元素来实现,特别是HTML5还在多媒体方面增加了更多的标签。但是如果在页面开发之初,就注重HTML代码的清晰,干净,整洁,对提升网页性能十分有益。在初学阶段,就培养良好的开发习惯,不仅能够让你的网页在许多设备上都能快速正常的加载运行,而且会另你的项目易于debug和维护。

HTML用于搭建架构,至少要保证脱离CSS和JavaScript之后页面可基本呈现。
CSS用于美化样式,尽可能在完成需求的前提下精简。
JavaScript用于控制行为,完成上述二者无法完成的附加功能

一、结构至上

网页的总体设计原则是 - “渐进增强,优雅降级”,而HTML作为这一切的基石,在搭建之初就应该最先被考虑,总体而言,在初学阶段,需要注意以下几点:

页面结构的完整性

完整HTML包括“DOCTYPE声明”,“head网页信息” “body网页具体内容”。采用HTML5标准时开头应该加上<!DOCTYPE html>,在<head>标签中引入资源文件,像这样:

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
<!DOCTYPE html> <html> <head> <title>Demo</title> <link rel="/styles/global.css"> </head> <body> ... </body> </html>
标签结构的完备性
  1. 要准备好备用内容:比如给<track>元素添加说明和副标题,给<video><audio>元素添加备用的文字或者图片,视频内容配上相应的截图或海报,每张图片都要加alt属性(如果图片只是用来装饰页面的话可以给alt赋空值)。
  2. 链接要加title属性,title必须要有意义,不要只是链接的复述。
结构顺序和视觉顺序基本保持一致
  1. 按照从上至下、从左到右的视觉顺序书写HTML结构。
  2. 有时候为了便于搜索引擎抓取,可将重要内容在HTML结构顺序上提前。
  3. div代替table布局,可以使HTML更具灵活性,也方便利用CSS控制。
  4. table不建议用于布局,但表现具有明显表格形式的数据,table还是首选。
保持良好简洁的树形结构
  1. 每一个块级元素都另起一行,每一行都使用Tab缩进对齐(headbody的子元素不需要缩进),删除冗余的行尾的空格。
  2. 使用2个空格代替1个Tab(大多数编辑器中可设置)。
  3. 对于内容较为简单的元素,建议将其写成单行。
  4. 大的模块之间用空行隔开,使模块更清晰。
二、语义化设计

语义化的意思是从名称一眼就能看出其内容和作用是什么,HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化。HTML5引进了一些新的语义化元素,比如<header>, <footer><nav>。一定要针对内容使用相应的语义化元素,便于理解代码:

  1. 标题使用<h1>(<h2>, <h3>…),列表使用<ul>或者<ol>
  2. <article>内容中的标题应该从<h1>开始。
  3. 在适当的地方使用HTML5的新元素,比如 <header>, <footer>, <nav><aside>
  4. 正文中的文本内容要用 <p>标签,内容的结构化可以使用HTML5的新元素(或者<div>),不要颠倒。
  5. 修改文字样式时,<em><strong>要比<i><b>更好些,因为前者语义更加明显。
  6. <form>中要包含<label>元素,<input>元素要有 typeplaceholder以及其他必要的属性,即使值为空都可以。
  7. 不要把文字和元素混合在一起,采用完全元素化布局,比如这样:
              
  • 1
  • 2
  • 3
<div> Name: <input type="text"> </div>

写成这样会更好

              
  • 1
  • 2
  • 3
  • 4
<div> <label>Name:</label> <input type="text"> </div>
三、布局

样式一定是由CSS控制的,但HTML的设计中也要考虑到一些便于布局的事项:

  1. <p>元素用来放文字,而不是用来布局,在浏览器自身的样式表中默认<p>有margin和其他样式。
  2. 想实现换行可以使用<block>元素或者CSS的display属性,尽量避免使用<br>来换行。文字内容中的换行可以用<br>,但通常也很少这样用,有时在诗文中会把<br>作为标点来使用。
  3. 避免使用<hr>,因为这个元素对语义和结构都没有太大帮助,反而<hr>极差的灵活性对布局和显示都有很大的影响。
  4. 不要滥用<div>,W3C对<div>的描述是这样的:当没有其他元素可用时才能使用<div>。如果想让<link><img>这类元素能够在结尾换行,可以在样式中添加display: block,这样要比把它们放进<div>或者使用<br>来换行要好得多。
  5. 必须知道哪些是块级元素,这样就可以避免把块级元素放到<div>里面,比如列表就不需要放到<div>里面。
  6. <table>是用来放表格数据的,不是用来布局的。
四、Web三大件的配合
开发顺序
  1. 首先完成HTML的设计,具体的设计准则在之前三点都有所提及。
  2. 然后根据样式需求来设计CSS,会在后续学习记录里更新。
  3. 最后在确实需要的情况下才设计JavaScript,会在后续学习记录里更新。
文件配合
  1. 保持结构、样式、行为的独立性。
    将CSS和JavaScript文件进行归档,与HTML文件分开(这样不仅有助于页面缓存,而且可以使后期Debug更容易),这之后再把CSS和JavaScript链接到HTML中,可以根据需要来对CSS和JavaScript代码进行压缩加密。
  2. 按需加载:
    应在head标签中引入CSS文件,这样浏览器就可以在输出HTML之前获取CSS信息:

                  
    • 1
    • 2
    • 3
    • 4
    <head> <title>Demo</title> <link rel="/styles/global.css"> </head>

    <body>标签的末尾引入JavaScript文件,这样可以在页面显示之后再编译JavaScript文件,以加快页面读取速度,同时有助于JavaScript对页面中的元素进行操作,像这样:

                  
    • 1
    • 2
    • 3
    • 4
    <body> ... <script src="/js/index.js"> </body>
  3. 避免内联样式或内联操作
    例如:
                  
    • 1
    <h2 style="background-color:red;">This is a heading</h2>
                  
    • 1
    <button onclick="handleFoo()">Foo</button>
    这些内联操作会在web项目复杂度提升后给后期扩展和维护带来很多风险,应避免使用。
五、其它、

本文主要给予前端初学者在设计之初的一些借鉴之处,在页面设计的后期工作中,测试特别是对不同屏幕和使用环境的适配也是值得注重的问题,这部分内容会在引入调试和打包工具的介绍之后再进行探讨。

本文于 2015-9-24  发布在  编程  分类下, 当前已被围观 210 次

并被添加「 前端 HTML 」标签

本站使用「 署名 4.0 国际」创作共享协议