HTML代码编写规范

最新推荐文章于 2024-02-24 15:35:13 发布

JIN's

最新推荐文章于 2024-02-24 15:35:13 发布

阅读量625

点赞数

分类专栏：前端文章标签： html代码编写规范

本文链接：https://blog.csdn.net/qq_41653587/article/details/89638169

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用了几个小时把W3School中的前端开发规范大致过了一遍，之前看到的规范大都是各种百度，零散的看博主的文章，但是系统的规范没有全面了解过。

关于HTML规范方面：
*html标签规范
	1. 像img、input、br、hr等类型的标签不需要闭合（也就是不要写成这样：<img src="" /> 要写成这样：<img src="">）
	2. 在写页面的时候尽量减少标签数量
	3. 尽量书写语义化的标签
		(1) 没有css的html应该是一个语义系统，语义化的HTML结构，有助于搜索引擎理解；多人协作开发项目时，能迅速了解开发者意图
		(2) <blockquote>大段文章引用   <cite>一般段落引用
			<b>为样式加粗而加粗        <strong>为强调内容而加粗
			<i>为样式倾斜而倾斜        <em>为强调内容而倾斜
			<code>代码标识            <abbr>缩写
-----------------------------------------------------------------------------------------------------------------------
*html中的class和id
	1. class的应以标签内的功能或者内容命名
	2. class和id命名单词需要小写，如果要由多个单词组成，采用中划线-进行分隔
	3. 避免创建无样式的class，id要唯一
------------------------------------------------------------------------------------------------------------------------
*html标签中书写属性的顺序
	1. id、 
	2. class、 
	3. name、
	4. data-xxx 
	5. src,for,type,href、 
	6. title,alt、 
	7. aria-xxx,role
------------------------------------------------------------------------------------------------------------------------	   
*html标签中属性的属性值统一使用双引号
------------------------------------------------------------------------------------------------------------------------
*html标签嵌套规范
	1. 语义嵌套约束：
	   ul 、li一同使用，
	   ol 、li一同使用，
	   dl、dt、dd一同使用，
	   table、thead、tbody、tfoot、tr、td一同使用
	2. 严格嵌套约束
		行级元素仅可以包含文本或者其他行级元素
		<a>标签中不可以嵌套交互式的元素<a>、<button>、<select>等
		<p>标签中不可以嵌套<div>、h1~h6、p、ul/ol/li、dl/dt/dd、form等
------------------------------------------------------------------------------------------------------------------------		
*html标签中的布尔属性
	HTML5规范中，disabled、checked、selected等属性不用设置值
------------------------------------------------------------------------------------------------------------------------

关于HTML中的HEAD(一个神奇的HEAD)

文档类型：为内分HTML页面的第一行添加标准模式的生民，这样能够确保在每个浏览器中拥有的表现
```
<!DOCTYPE html>
```

语言属性

<html lang="zh-Hans">          <!--中文-->
<!--简体中文，并非我们通常写的lang="zh-CN",详细查看https://www.zhihu.com/question/20797118-->
<html lang="zh-cmn-Hans">     
<html lang="zh-cmn-Hant">      <!--繁体中文-->
<html lang="en">               <!--英语-->

字符编码

以无BOM的UTF-8编码作为文件格式，指定字符编码的meta必须是head的第一个直接子元素

IE兼容模式（优先使用最新版本的IE和chrome内核）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO优化

<title>......</title>
<meta  name="keywords" content="......">
<meta  name="description" content="......">
<meta  name="author" content="author,email,address">

favicon：

在未指定favicon时，大多数浏览器会请求Web Server根目录下的favicon.ico，为避免404:
	1. 可以在WebServer根目录设置facicon.icon文件；
	2. 也可以使用link指定：<link rel="shortcut icon" href=".../favicon.ico">

viewport

1. viewport:一般指的是浏览器窗口内容区的大小，不含工具条、选项卡内容
2. width:浏览器宽度，输出设备中的页面可见区域宽度
3. device-width: 设备分辨率宽度，输出设备的屏幕可见宽度
4. initial-scale:初始缩放比例
5. maximum-scale:最大缩放比例
为移动端设备优化，设备可见区域的宽度和初始缩放比例
<meta name="viewport" content="width=device-width,initial-scale=1.0">

HEAD规范代码

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>......</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<!--IOS图标-->
	<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

	<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
	<link rel="shortcut icon" href=".../favicon.ico">
</head>
<body>
	...
</body>

</html>

JIN's

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML代码编写规范

用了几个小时把W3School中的前端开发规范大致过了一遍，之前看到的规范大都是各种百度，零散的看博主的文章，但是系统的规范没有全面了解过。关于HTML规范方面：*html标签规范 1. 像img、input、br、hr等类型的标签不需要闭合（也就是不要写成这样：<img src="" /> 要写成这样：<img src="">） 2. 在写页面的时候尽量减少标签数...
复制链接

扫一扫