HTML
CSS
编程规范

HTML 和 CSS 代码结构如何写更加规范？

项目前期html代码结构写的不规范，后期导致浏览器兼容出现大量问题，大家分享下经验（代码规范方面），谢谢
关注者
205
被浏览
19,251

5 个回答

规范，规范，一个优秀的公司必然有一个优秀的团队，一个优秀的团队必然要有一个好的规范来 约束和执行。国内基本各大互联网公司的前端都有自己的开发规范，但总的宗旨基本都是：代码简、易维护、性能高。对于一个大型项目经常会多人协作，这时必须 要有一个好的规范才能顺利便捷地进行下去。

基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

html书写规范 1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset=”gbk” />, 书写时利用IDE实现层次分明的缩进;

2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;

3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:

<link rel=”stylesheet” href=”…” />

<style>…</style>

<script src=”…”></script>

4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括 br (<br />), hr(<hr />)等; 属性值必须用双引号包括;

6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式;

7. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;

8. 尽可能减少div嵌套, 如<div><div class=”welcome”>欢迎访问XXX, 您的用户名是<div class=”name”>用户名</div></div></div>完全可以用以下代码替代: <div><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;

9. 书写链接地址时, 必须避免重定向，例如：href=”itaolun.com/”, 即须在URL地址后面加上“/”；

10. 在页面中尽量避免使用style属性,即style=”…”;

11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

12. 能以背景形式呈现的图片, 尽量写入css样式中;

13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;

14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(&gt;) & 空格( ) & »(») 等等;

16. 书写页面过程中, 请考虑向后扩展性;

17. class & id 参见 css书写规范.

css书写规范 1. 编码统一为utf-8;

2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由分发框架文件时命名的（如#header #footer #content #nav 等）, 为JavaScript预留钩子的除外;

4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show(淘宝是用的J_开头);

5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.

6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):

a） 通过从属写法规避, 示例见d;

b）取父级元素id/class命名部分命名, 示例见d;

c）重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;

d）a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id=”mainnav”></div>中加入新的div元素,

按a命名法则: <div id=”mainnav”><div>…</div></div>,

样式写法: #mainnav .firstnav{…….}

按b命名法则: <div id=”mainnav”><div>…</div></div>,

样式写法: .main_firstnav{…….}

..............

这个很多。。。具体请参阅本人博客的文章《Web前端开发规范文档》


smallni.com/?







如果想学会爬虫，熟悉HTML代码是必须的，如果不会HTML代码我们就没有办法分析页面结构，也就没有办法更好的做解析了。

一、HTML工作原理

  • 原理
  • html是hypertext markup lanaguage缩写 超文本标记语言，是一种解释性语言，不需要编译，由浏览器解释执行
  • html组成
    • html 负责数据展示
    • css 负责美化页面
    • js 页面的动态效果

二、认识标签

marquee标签的引入，学习标签应该：

  • 记住功能
  • 标签写法
    • 可分为：单标签和对标签
<!--单标签 -->
    <标签名 属性1='属性值'  属性2="属性值"  属性3=属性值>
      
    <!--对标签 -->
     <标签名   属性1='属性值'  属性2="属性值"  属性3=属性值>内容</标签名>

注意事项：

  • 标签不能创造
  • 书写标签的时候应该用英文半角
  • 属性值可以单引号、双引号引起来，也可以不写引号，推荐使用单引号括起来
  • 属性必须写在开始标签里
  • 标签可以嵌套，一个标签要完全嵌套到另外一个标签里

三、全局架构标签（重点）

<!doctype html>   文档类型，html表名是html5的文档
<html>   根标签
<head>   头部
 <meta charset="UTF-8"> 告诉浏览器用utf-8编码格式解释文档
 <title>Document</title>  文档标题
</head>
<body>
 
</body>
</html>

3.1 title标签

  <title>Document</title>

设置文档标题，显示窗口的标题栏

3.2 设置字符集

<meta charset="UTF-8">

字符集是告诉浏览器用那种编码格式解读html文档，注意html文档本身有一个编码格式，这两个编码格式必须一致，不一致就乱码

3.3 body

(了解)内容显示区，有些常用属性：

  • topmargin 上外边距
  • leftmargin 左外边距
  • text 文字颜色
  • bgcolor 背景颜色
  • background 背景图片，和bgcolor冲突，设置了背景图片，背景颜色就是不显示

3.4 全局属性

每一个标签都有的属性，常用的有id、class、name、style

四、html常用标签

html文件显示特点：多个空格、换行、tab键用一个空格代替；如果英文字符间没有空格，会看成一个单词，不会自动折行

4.1 常用标签

  • h1~h6 标题，一般一个页面只设置一个h1标题
  • hr （单标签） 水平分割线
    • width 可以使用绝对值，300，不带单位，也可以使用百分比 50%
    • align 对齐方式：left center（默认） right
  • p 段落标签，有段前间距和段后间距
  • br （单标签） 换行
  • nobr （双标签） 不换行，所修饰内容无论多长，不会自动换行，显示不下，会有滚动条
  • pre 保持原来的样式，无论空格还是换行都会正常显示
  • b（strong) 加粗
  • i（cite,em） 斜体
  • u 下划线
  • sub/sup 下标/上标，看圈在那边，在下边就是下标
  • font (face/color/size) 字体
    • face 字体名称，到window目录下font子目录下查看
    • color 字体颜色
    • size 值取1~7,7最大
  • blockquote 引用，会从正常的文本中分离，留有左右边距

4.2 注释和实体引用

  • 注释
  <!--我是注释 -->
  <!--
  我是注释 
  
  -->
  注释的作用：
  1 提高代码的可读性，主要给其他团队成员看的，方便维护
  2 方便调试
  • 实体引用
  空格    &nbsp;
  <       &lt;
  >       &gt;
  &       &amp;
  "       &quot;
  '       &apos;

五、列表

5.1 有序列表（ol/li）

  • type: 数字，a ,A,I ,i
  • start 开始标号，默认从1开始

5.2 无序列表(ul/li)

  • type 项目符号：
    • disc 默认 实心圆圈
    • square 实心方块
    • circle 空心圆圈

5.3 自定义列表（dl/dt/dd)

六、超级连接（重点）

  • 超链接的写法
<a href="http://www.baidu.com/">百度</a>
  • url 统一资源定位符
  https://baike.baidu.com：80/item/%E6%9D%A8%E5%B9%82/149851?fr=aladdin#4
  第一部分： 协议   http   https  ftp  news  magnet（磁力链接）
  第二部分：主机，服务器地址   可以是域名或ip地址
  第三部分：冒号后面的数字，端口  http 80(默认)  https :443  ftp:21  mysql：3306
           端口编号从0~65535 其中0~1023归操作系统使用
  第四部分：从端口后的斜线到？，中间这部分叫路径，请求文件的路径
  第五部分：从？到#中间这部分，是请求参数，query string ；写法： 键=值&键2=值
  第六部分：锚点 也就是同一个页面内的跳转，必须用#开头
  • href 所请求的url，注意url必须写协议
  • title 鼠标放到超链接上时显示的提示
  • target
    • _blank 新窗口打开
    • _self 当前窗口打开，默认

七、img标签（单标签）

img是单标签，<img src='' title='' alt='' border='' width='' height=''>

  • 绝对路径和相对路径
  本机绝对路径：file:///C:/python/web/1/ym.jpg
  网络绝对路径：https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=32ceb0ef04d79123f4ed9c26cc5d32e7/7c1ed21b0ef41bd55520081359da81cb38db3de2.jpg
  网站绝对路径（了解）：  /代表网站根目录
  
  相对路径：相对于html文档所在目录  ../上级目录 ./当前目录  ./3/index.html    ../1.html
  • src 图片来源，可以是相对路径也可以是绝对路径
  • title 图片提示文字
  • alt 图片不显示的时候的提示文字
  • border 图片边框大小，一般默认为0
  • width/height 一般只设置一个，另外一个等比例缩放

八、表格

  • table 表
    • border 表格线
    • cellspacing：单元格的间距
    • cellpadding：单元格到内容距离
    • align：水平对齐 left、center、right
    • height可以不用设置，自动撑开
  • tr 行
    • align :水平对齐 left center right
    • valign：垂直对齐 top middle bottom
    • 注意：如果没有给该表格设置高度，那么设置valign无效,在以后布局页面的时候，一般不使用valign，只有一种情况使用到，就是图片和文字并排排放的时候，需要设置图片的valign为middle
  • td 单元格
    • colspan 跨列 向右合并
    • rowspan 跨行 向下合并
    • width/height
  • th
    • 就是表格的表头，内容会加粗，和td用法相同
  • caption 表格标题，跟随表格移动
  <table border=1 width=100>
   <tr align='left'>
      <td>A</td>
      <td>A</td>
      <td>A</td>
   </tr>
   <tr align='left'>
      <td>B</td>
      <td>B</td>
      <td>B</td>
   </tr>
  </table>

九、表单（重要）

用途：收集用户信息，提交给服务器

基本使用：

  • 不是所有的标签都可以提交，能够向服务器提交信息的表单项，只有表单项：input、select、textarea才可以向服务器提交信息
  • 表单项必须放到form标签中才可以提交信息
  • action：提交地址，一般是服务器的页面
  • method：提交方式，最重要的两种为get方式和post方式，默认是get提交
get和post的区别：
  1.get用于向服务器请求数据，post一般用于向服务器提交数据
  2. get请求通过url传递数据，数据会暴露在浏览器地址栏里，不安全；
    post请求数据在请求体中，不会在浏览器地址栏里出现，相对安全
  3. get传参，数据大小受url限制，一般几k大小
    post传参理论上无限制
  • enctype：用于文件上传，值为：multipart/form-data，现在了解
  • input框
    • type：text
    • placeholder：占位符，一般用于提示用户，当用户输入时，会自动消失
    • maxlength：最大字符数
    • type 类型：单行文本框（text）、密码框（password）、复选框（checkbox）、单选框（radio）、文件上传（file）、按钮（button）、重置按钮（reset）、提交（submit)
    • name：名称，要提交，必须设置name
    • value 默认值
    • readonly 只读
    • disabled 不可用
    • size
    • 公有属性：type、name、value、readonly、disabled、size
    • 单行文本框
<input type='text' value='重置' />
  • 提交按钮
    • type：submit
    • value：提交按钮的标题
<input type='submit' value='提交' />
  • 重置按钮
    • 清空用户输入
    • type：reset
<input type='reset' value='重置' />
  • 密码框
    • type：password
<input type='password' name='password' />
  • 单选框
    一般用于多选一，name相同是一组，一组中只能选一个
    • type：radio
    • checked：是否选中
    • value：一般用0或1表示，必须设置，否则服务器无法区别选中是哪一个
<input type='radio' name='ball1' checked value ='basketball'/> 篮球
  • 复选框
    一般name值相同
    • type：checkbox
    • value：必须设置
    • checked: 是否选中
<input type='checkbox' name='ball1' checked/> 篮球
<input type='checkbox' name='ball2' checked/> 足球
  • 文件上传
    • type：file
<input type='file' name='upload' enctype=''/>
  • 隐藏按钮
    一般用于提交无需用户输入的数据
    • type：hidden
    • name和value值必须设置
<input type='hidden' name='a' value='123'/>
  • button 一般配合js代码使用
<button>按钮</button>
  • 下拉框（select）
    • selected：是否选中
    • value 需要设置，否则值就是option中间的文字
    • name 必须设置
    • size：显示的行数，如果设置这个属性，下拉框会变成列表框
    • multiple：是否可以选择多行
    • 下拉框选项（option）
  <select name=''>
   <option>1</option>
   <option>2</option>
   <option>3</option>
  </select>
  • 多行文本（textarea）
    • cols：列数
    • rows：行数
    • 注意textarea标签的内容不能有任何值，否则便会显示
<textarea cols=10 rows=6>  </textarea>
  • label标签
    • 配合radio、checkbox使用，方便用户选中
<input type='radio' name='sex'  value='男' checked id='man'> <label for='man'>男</label>

十、开发者工具的使用

当然一个标准的网页中CSS和JavaScript也是必不可少的。我们如何分析一个网页呢？以chrome为例我们访问：movie.douban.com/

每一个页面的元素定位都是按照如下的步骤完成的。下面我们再来看看Network的使用。此时的Network是空白的，我们需要再次刷新一下页面。

接下来查看请求和相应内容

通过这些的查看可以设置爬虫的请求头等信息。

系列文章

最后，推荐一套Python视频，非常适合初学者和想深入了解Python语言的小伙伴，让你学习无忧！

期待大家学习完爬虫的全部课程之后，能有一个不错的收获~~~，Good Luck！！！