（三）HTML 规范

最新推荐文章于 2024-06-22 23:29:57 发布

lj1530562965

最新推荐文章于 2024-06-22 23:29:57 发布

阅读量218

点赞数

分类专栏：前端开发规范文章标签：前端开发规范

本文链接：https://blog.csdn.net/lj1530562965/article/details/109286297

版权

前端开发规范专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML 规范（Vue Template 同样适用）

HTML 类型

推荐使用 HTML5 的文档类型申明： .
（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。

规定字符编码
IE 兼容模式
规定字符编码
doctype 大写
正例：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="UTF-8" />
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
  </body>
</html>

缩进

缩进使用 2 个空格（一个 tab）

嵌套的节点应该缩进。

分块注释

在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式

语义化标签

HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签

正例

<header></header>
<footer></footer>

反例

<div>
  <p></p>
</div>

引号

使用双引号(" ") 而不是单引号(’ ') 。

正例： ``

反例： ``

样式和脚本代码位置

非特殊情况下样式和脚本代码必须独立于xhtml代码于外部文件中，样式文件必须外链至…之间，渲染执行脚本必须外链至页面底部;

表单元素

必须为含有描述性表单元素(input,textarea)添加label;

图片

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

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

HTML中id命名

(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright