全部栏目

首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置：首页正文

如何写出高效率的HTML_html/css_WEB-ITnose

2020-11-27 来源：二三四教育网

Web三基友

HTML的含义应该不多解释了，请自行百度百科。
首先要说的是，HTML和CSS两兄弟虽然彼此充满基情，但是也不能把关系搞得太复杂，样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式，比如不要仅仅为了使文字变大而使用

、

、

这些标题标签，也不要仅仅为了缩进而使用标签。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默认样式表，HTML元素默认的显示方式都是由这些默认样式表来决定的。比如，Chrome中

默认的样式是32px bold，字体是Times.
基友三原则：

  • HTML用于建立结构，CSS用于渲染样式，JavaScript用于控制行为；
  • 首先完成HTML的设计，然后根据样式需求来设计CSS，最后在确实需要的情况下才设计JavaScript；
  • 将CSS和JavaScript文件进行归档，与HTML文件分开（这样不仅有助于页面缓存，而且可以使后期Debug更容易），这之后再把CSS和JavaScript链接到HTML中，可以根据需要来对CSS和JavaScript代码进行压缩加密。

    • 结构的搭建

    HTML在结构上搭建上需要注意这些：

  • 采用HTML5标准时开头应该加上，像这样：

      Recipes: pesto   
    Pesto
     
    Pesto is good!

  • 应在head标签中引入CSS文件，这样浏览器就可以在输出HTML之前获取CSS信息：

     My pesto recipe

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

     ... 
    javascriptinit(); var fooButton = document.querySelector('#foo');fooButton.onclick = handleFoo();

    • 代码校验

    虽然现在浏览器的容错力越来越高，但这不能成为代码粗制滥造的借口。不管什么时候，正确的HTML代码都更易于debug、体积更小、运行更快、渲染时消耗资源更少，而错误的HTML代码只会使页面的最终设计难以实现想要的效果。特别是在使用模板来开发时，正确有效的HTML就更显得尤为重要，也许一个正常运行的模块会在其他环境中出现可怕的异常。
    如何才能提高HTML的正确性呢？可以有这些方式：

  • 在项目中加入校验过程：可以在代码编辑器中使用HTMLHint、SublimeLinter这类代码校验插件，也可以在build的时候使用HTMLHint with Grunt这类校验工具，还可以通过W3C HTML validator等网站来在线检测代码；
  • 尽量采用HTML5标准；

  • 确保正确的HTML层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug，特别是在使用模板的时候，如下所示：

     ...

  • 在所有不能自动结束的元素末尾添加结束标签；

  • 比如这个例子，这样写也可以可以正常运行：
    • Pesto is good to eat...
    ...and pesto is easy to make.
  • 不过还是下面这样比较不容易出错：
    • Pesto is good to eat...
    ...and pesto is easy to make.

    • 结束标签不是必须的，所以有些人认为可以不写，这可以接受，但是和标签一定要加：

     
  • Basil 
  • Pine nuts 
  • Garlic

    • 另一方面，要去掉冗余代码：

  • 像和这一类元素可以不加结束标签;

  • 布尔型的属性可以不赋值，只要该属性出现，值就为true；

  • 下面这样是可以运行的（没有加autoplay和controls）：
  • 这样就不能运行，因为这两个属性值必须是true：
  • 这样改一下就可以运行了：
  • 这样写会更易读：
  • CSS和 JavaScript链接不需要type属性，他们就是他们；

  • 外部链接可以省略协议部分（如http,ftp），这样可以避免内容太长而引起问题。像这样写是可以的：

    Tag soup

    • 良好的代码排版

    保持一致的代码排版可以使HTML代码更易于理解、优化和debug，要做到良好的代码排版应注意以下这几点：

  • 在项目中保持统一的HTML代码风格；
  • 使用代码编辑器来帮助你自动排版，比如在Sublime Text中可以使用自带的Reindent，也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如CSS Beautifier和JS Beautifier；
  • 在HTML中用缩进来分层更易于阅读，如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候，那就表示你需要重构一下你的HTML了；
  • 缩进可以通过空格或者Tab来实现，但一定不要两者同时使用；

  • 用更直接易读的方式写HTML代码，比如这句话，就可以很明显的看出这是个标题：

    Contact

    这样写的话就更像是一个链接：

    Contact
  • 元素要按常规放置，比如footer元素最好是放在HTML页面的底部，虽然理论上把它放在任何地方都可以正常运行；
  • 统一所有引号的使用规则，不要这里用双引号，那里又单引号；

  • 使用小写字母来写标签和属性，大写字母很不易读，像这样：

    Home

    混合式的写法简直就是反人类：

    Pesto

    • 语义化设计

    语义化的意思是从名称一眼就能看出其内容和作用是什么，HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素，比如

    ,