前端规范-HTML

最新推荐文章于 2022-10-20 10:37:37 发布

judy_1118

最新推荐文章于 2022-10-20 10:37:37 发布

阅读量150

点赞数

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

本文链接：https://blog.csdn.net/judykang123/article/details/108493756

版权

规范专栏收录该内容

2 篇文章 0 订阅

订阅专栏

看W3Cschool中腾讯alloyteam团队前端代码规范的笔记

一、HTML代码规范

1、DOCTYPE 声明

<!DOCTYPE html>

2、页面语言

<html lang="zh-CN">
其他地区语言参考：

zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾)

3、CHARSET

<meta charset="UTF-8">

4、标签闭合

单标签不加“/”
双标签一定要有起止标签

5、书写风格

①HTML代码大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写：

<div class="demo"></div>

HTML文本、CDATA（被<![CDATA[]]>这个标记所包含的内容将表示为纯文本）、JavaScript、meta标签某些属性等内容可大小写混合：

<!-- 优先使用 IE 最新版本和 Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<!-- HTML文本内容 -->
<h1>I AM WHAT I AM </h1>

<!-- JavaScript 内容 -->
<script type="text/javascript">
	var demoName = 'demoName';
	...
</script>
	
<!-- CDATA 内容 -->
<script type="text/javascript"><![CDATA[
...
]]></script>

②类型属性

CSS、JS的类型不需要写，HTML5已默认，直接写别的属性就好，例：

<link rel="stylesheet" href="" >
<script src=""></script>

③元素属性

元素属性值使用双引号语法
元素属性值可以写上的都写上

<input type="text">

<!-- 有的时候会写成<input type="radio" name="name" checked >，最好写成下面这种 -->
<input type="radio" name="name" checked="checked" >

④特殊字符

可以写&gt ;这种(怕markdown解析，把逗号前面加了个空格)，但是标签中间不能直接写>，会被浏览器解析，<同理。

⑤代码缩进

统一是四个字符，如果正在使用的编辑器默认两个字符，可以再设置里更改

⑥纯数字输入框

input使用 type=“tel” 而不是 type=“number”

<input type="tel">

⑦代码嵌套

块状元素独立一行，内联元素（比如span）可选
推荐：

<div>
    <h1></h1>
    <p></p>
</div>	
<p><span></span><span></span></p>

段落元素与标题元素只能嵌套内联元素
推荐：

<h1><span></span></h1>
<p><span></span><span></span></p>

二、HTML 注释规范

1、单行注释

注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

<!-- Comment Text -->
<div>...</div>

2、模块注释

注释内容前后各一个空格字符，表示模块开始，表示模块结束，模块与模块之间相隔一行

<!-- S Comment Text A -->   
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
    
<!-- S Comment Text B -->   
<div class="mod_b">
    ...
</div>
<!-- E Comment Text B -->

3、嵌套模块注释

当模块注释内再出现模块注释的时候，为了突出主要模块，改为以下格式


注释写在模块结尾标签底部，单独一行。例：

<!-- S Comment Text A -->
<div class="mod_a">
        
    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->
        
</div>
<!-- E Comment Text A -->

三、 HTML 文件模版（！直接拿过来用的）

1、移动端

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" >
<meta name="format-detection" content="telephone=no" >
<title>移动端HTML模版</title>
    
<!-- S DNS预解析 -->
<link rel="dns-prefetch" href="">
<!-- E DNS预解析 --> 

<!-- S 线上样式页面片，开发请直接取消注释引用 -->
<!-- #include virtual="" -->
<!-- E 线上样式页面片 -->

<!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --> 
<link rel="stylesheet" href="css/index.css" >
<!-- /本地调试方式 -->

<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /开发机调试方式 -->
<!-- E 本地调试 -->

</head>
<body>

</body>
</html>

2、PC端

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>PC端HTML模版</title>

<!-- S DNS预解析 --> 
<link rel="dns-prefetch" href="">
<!-- E DNS预解析 --> 

<!-- S 线上样式页面片，开发请直接取消注释引用 -->
<!-- #include virtual="" -->
<!-- E 线上样式页面片 -->

<!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --> 
<link rel="stylesheet" href="css/index.css" >
<!-- /本地调试方式 -->

<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /开发机调试方式 -->
<!-- E 本地调试 -->

</head>
<body>

</body>
</html>

四、HTML WebApp Meta（移动端几个meta标签）

1、通用设置

*width—— viewport的宽度，默认宽度是 980px，范围从 200px 到 10000px
*height—— viewport的高度
*initial-scale—— 初始的缩放比例，范围值是从 >0 到 10 之间
*minimum-scale—— 允许用户缩放到的最小比例，默认值是 0.25
*maximum-scale—— 允许用户缩放到的最大比例，默认值是 5
*user-scalable ——是否允许用户缩放，默认值是 yes，设置 no 还可以在文本框输入文本的时候阻止页面滚动
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2、apple-mobile-web-app-capable

设置 WebApp 是否进入全屏模式，该设置需要添加到主屏幕才生效

*content设置 yes 进入全屏模式
*默认会启动 Safari 应用，使用 Safari 应用浏览
*通过检测 window.navigator.standalone 的 Boolean 值可以判断 web 应用是否处于全屏模式
<meta name="apple-mobile-web-app-capable" content="yes">

3、apple-mobile-web-app-status-bar-style

为 webapp 设置状态栏样式
*此 meta 设置只在全屏模式生效
*默认值是 default
*content=”black”，状态栏背景黑色，网页内容在状态栏下面
*content=”black-translucent”，状态栏半透明，背景黑色，网页内容占满全屏

<meta name="apple-mobile-web-app-status-bar-style" content="black">

注：只适用于IOS8之前

4、format-detection

自动识别页面中有可能是电话格式的数字
<meta name="format-detection" content="telephone=no">

iOS中的 Safari 会默认识别与电话格式相似的数字并生成一个可以拉起电话应用并将该数字作为电话号码拨打的链接。定义 telephone=no 可以屏蔽该功能

提一句：a标签可以直接拨打电话：

<a href="tel:150xxxxxxxx">

judy_1118

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端规范-HTML

目录一、HTML代码规范1、DOCTYPE 声明2、页面语言3、CHARSET4、标签闭合5、书写风格①HTML代码大小写②类型属性③元素属性④特殊字符⑤代码缩进⑥纯数字输入框⑦代码嵌套二、HTML 注释规范1、单行注释2、模块注释3、嵌套模块注释三、 HTML 文件模版（！直接拿过来用的）1、移动端2、PC端四、HTML WebApp Meta（移动端几个meta标签）1、通用设置2、apple-mobile-web-app-capable①看W3Cschool中腾讯alloyteam团队前端代码规范的
复制链接

扫一扫