件引用规范

先说加载的规范，这个规范主要是为了提高页面加载速度或者是首屏的速度。

1 CSS 文件或样式在 head 标签中引用。页面的渲染需要 CSS，所以尽量早的让 CSS 文件加载出来。

2 JS 文件要放在 body 标签尾部。页面里加载和运行 JS 都会阻塞页面的渲染过程，所以把 JS 放在尾部可以加快首屏显示的速度，但对整个页面完成加载的时间没什么影响。

3 使用压缩后的文件。线上使用的静态文件，尽量都是压缩好的，CSS 使用 .min.css 形式，JS 使用 .min.js 形式，这样可以减少文件的体积，从而减少下载的时间。

4 减少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加载并解析后才会去请求, 会拖慢 CSS 文件的加载速度。

属性的书写规范

一、使用缩写

在 CSS 中有很多属性或属性值可以缩写, 在能用缩写的地方尽量使用缩写。

1、属性的缩写。CSS 中有些属性是可以合并的, 如:

margin-top: 10px;
margin-bottom: 0;
margin-left: 5px;
margin-right: 5px;

上面这几组 margin 相关的属性占了四条样式, 我们可以使用一条 margin 属性代替这四个方向的 margin：

margin: 10px 5px 0 5px;

一般带有方向的属性, 缩写的时候各个方向的值都是按着"上 右 下 左"的顺序写的。另外如果四个方向值一样，可以直接用一个值代替四个方向；如果左右方向的值一样，则可以省略最后一个左侧的值。

上面这条缩写也可以写成：

margin: 10px 5px 0;

2、颜色的缩写。在使用十六进制颜色的时候, 如果 rgb 三个颜色位置中, 每两位的颜色值相同, 可以把六位的颜色写成三位。

如：color: #22ffcc;

就可以写成：

color: #2fc;

这两种写法是等效的, 但要注意的是如果需要兼容低版本 IE 浏览器, 还是要用六位的颜色值。

3、数字的缩写。在 CSS 中如果整数部分是 0 的小数, 可以忽略小数点前面的 0; 如果属性值是 0, 则可以忽略属性值的单位。

如: font-size: 0.8rem; padding: 0px;

这两条属性就可以做简写：

font-size: .8rem; padding: 0;

二、属性顺序的规范

理论上, CSS 的属性是一条一条解析执行的。这种情况下, 就要把能确定大小和位置的属性写在前面, 把对布局没什么影响的属性写在后面, 避免返工。

一般说的使用顺序如下:

1. 位置属性 (position, top, right, z-index, display, float等)　　

2. 大小 (width, height, padding, margin)　　

3. 文字系列 (font, line-height, letter-spacing, color- text-align等)　　

4. 背景 (background, border等) 5. 其他 (animation, transition等)

注释规范

一 文件头注释

/*
* @Author: zhangsan
* @Date: 2023-04-18 20:09:21
* @Last Modified by: zhangsan
* @Last Modified time: 2023-05-05 10:21:21
*/

二 普通注释

/* 头部导航 */
.nav-top{
background: #ccc;
}

CSS-Reset

reamweaver的CSS面板分类

type(类型)

background(背景)

block(区块)

box(方框) 或盒子意思

border(边框)

list(列表)

positioning(定位)

extensions(扩展)

共八个部分

1. type(类型)

type面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。

注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。

(1)font-family：设置字体系列。什么叫字体系列呢?是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个

字体或后面的字体显示。

注意:一般英文字体我们用"Verdana, Arial, Helvetica, sans-serif"这个系列比较好看。如果不用这些字体系列，你就需要自己编辑字体系列，

也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。中文网页默认字体是宋体, 一般就空着不要选取任何字体。

默认值： not specified(取决于浏览器,系统默认的字体, 如: 微软雅黑)

注意：

1.如果有汉字, 那么我们要加引号

2.如果有多个英文字母组成的单词, 我们也要加引号; "microsoft yahei" 中间用空格隔开

3.font-family:"黑体","宋体","华文隶书"; 首先找黑体, 没有黑体找宋体...

为了避免在CSS中使用 font 或 font-family 设置中文字体时乱码, 可以使用 Unicode 编码来表示字体。

/* 示例:使用Unicode字体编码设置字体为"微软雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定义文字的大小。你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。

最好使用pixels作为单位，这样不会在浏览器中文本变形。一般字体用比较标准的12px或14px, 默认值为16px。

注意：CSS中长度的单位分绝对长度单位和相对长度单位:

绝对长度单位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根据显示的实际尺寸来确定长度。

此类单位不随显示器的分辨率改变而改变。

相对长度单位有：

px：(像素)根据显示器的分辨率来确定长度。

em：当前文本的尺寸。例如：{font-size:2em}是指文字大小为原来的2倍。

比如自身font-size: 30px; 那么此时1em=30px;

ex：当前字母"x"的高度，一般为字体尺寸的一半。

%：是以当前文本的百分比定义尺寸。例如：{ font-size:300%}是指文字大小为原来的3倍。

small、large：表示比当前小一个级别或大一个级别的尺寸。

默认值：medium(标准大小)

(3)font-style：定义字体样式为normal、italic、oblique。默认设置为normal。

注意： italic 斜体 oblique 歪斜体 italic和oblique实际效果是一样的。

默认值:normal

(4)line-height：设置文本所在行的行高。默认为normal。可以是行内元素、行内块元素, 通常与height设置的高度值相同, 可以做到垂直居中的作用。

你也可以自己键入一个精确的数值并选取一个计量单位。

比较直观的写法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行间距,相对数值,1.5倍行距,*/ 可有效的避免文字发生重叠

默认值： normal

(5)text-decoration：在文本中添加underline(下划线)、overline(上划线)、line-through(中划线)、blink(闪烁效果)。

这些效果可以同时存在，将效果前的复选框选定即可。

注意：链接的默认设置是underline，我们可以通过选none去除下划线。blink(闪烁效果)只在mozilla浏览器里可以看到, IE、opera不支持

默认值： none

(6)font-weight：给字体指定粗体字的磅值。

normal 默认值。定义标准的字符。

bold 定义粗体字符。

bolder 定义更粗的字符。

lighter 定义更细的字符。

100

200

300

400

500

600

700

800

900

inherit 规定应该从父元素继承字体的粗细。

定义由粗到细的字符。400 等同于 normal, 而 700 等同于 bold。

默认值: normal

(7)font-variant：允许你选取字体的变种, 选small-caps(小型大写字母)时, 此样式区域内所有字母大写。

normal表示正常的字体, 为默认值；

默认值: normal

(8)text-transform：将选区中每个单词的第一个字母转为大写, 或者令单词全部大写或全部小写。

参数：capitalize(单词首字母大写)、uppercase(转换成大写)、lowercase(转换成小写)、none(不转换)。

默认值：none

(9)color：定义文字颜色。包括对表单输入的文字颜色。

CSS中颜色的值有三种表示方法：

#RRGGBB格式，是由红绿蓝三种颜色的值组合，每种颜色的值为"00 – FF"的两位十六进制正整数。

例如：#FF0000表示红色，#FFFF00表示黄色。

rgb(R,G,B)格式, RGB为三色的值, 取0~255, 例如：rgb(255,0,0)表示红色, rgb(255,255,0)表示黄色。

用颜色名称。CSS可以使用已经定义好的颜色名称。例如：red表示红色, yellow表示黄色。

颜色值的缩写:

p{color:#000000} 可以缩写为：p{color:#000}

p{color:#336699} 可以缩写为：p{color:#369}

默认值： not specified

color: transparent; 透明色

rgba() 解释: rgba(红0-255, 绿0-255, 蓝0-255, 透明度0-1)

注意: 如果文字的颜色通过单独的类选择去设置没有改变颜色, 则应该通过组合选择器(.header .top .topR .blue)去设置, 改变它的优先级。

2. background(背景)

background面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。

一般是对body(页面)、table(表格)、div(区域)的设置。

(1)background-color：设置元素的背景色。包括对input表单输入框的背景颜色;

默认值: transparent(背景颜色为透明)

rgba() 解释: rgba(红0-255, 绿0-255, 蓝0-255, 透明度0-1) 一般用于背景色

(2)background-image：设置元素的背景图像。

默认值:none

CSS3支持多重背景图,只要加上一个url指定图片路径,并用逗号(,)将两组url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：确定背景图像是否以及如何重复。

repeat 默认值。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

inherit 规定应该从父元素继承background-repeat属性的设置。

注意：如果定义的元素的body，可以控制页面背景是否重复。

默认值: repeat

(4)background-attachment：固定背景图像或者跟随内容滚动。

参数fixed表示固定背景(不随屏幕滚动而滚动，决定背景图像是否要固定在原来的位置), scroll表示跟随内容滚动的背景。

注意：如果定义的元素的body, 可以使页面背景固定。

默认值: scroll

(5)background-position(X)：指定背景图像的水平位置。

可以指定为left(左边), center(居中)，right(右边)；

也可以指定数值，如20px是指背景距离左边20象素。

background-position(Y)：指定背景图像的垂直位置。

可以指定为top(顶部), center(居中), bottom(底部)；也可以指定数值。

background-position属性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您仅规定了一个关键词，那么第二个值将是"center"。

注意:采用英文单词的水平位置和垂直位置的属性值可以调换

x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。

xpos ypos 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值，另一个值将是50%。

您可以混合使用 % 和 position 值。

默认值：0% 0%

用html标签使用介绍

本文主要记录常用的html标签使用说明，用起来的时候偶尔查查。

常用html标签列表

常用标签使用说明

• 常用写法：​​<img src="" alt="" title=""width="" height=""​​>
• src：图片的来源（必写属性）
• alt：图像不显示时的替代文本
• title：鼠标在移动到元素上的文本提示
• width/height：图片宽高，没有定义宽高的时候，图片按照百分之百比例显示，更改图片的宽度或者高度，图片等比例缩放

普通用法

• 常用写法：​​<a href="" title="" target="">填写内容</a>​​
• href：去往的路径（必写属性）
• title：鼠标在移动到元素上的文本提示
• target：规定在何处打开路径

• _blank：新页面打开
• _parent：在父窗口中打开链接
• _self：当前页面跳转（默认值）
• _top：在当前窗体打开链接，并替换当前的整个窗体

• 当href的值为javascript：void(0); 或 javascript：; ，表示超链接不做任何事情，不做任何跳转
• 当href的值为#，表示超链接为空链接，点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接，自动跳转到我们设置锚点的位置，类似于word的目录导航。建立锚点的元素必须要有id或name属性，最好两个都有。这里只跳转本页面元素，其他页面跳转自行搜索。
具体做法如下：

1. 给目标元素设置id值，如​​<p id="id1"></p>​​
2. 设置锚点超链接，锚点的超链接路径一定包含"#"，后面紧跟元素的id或者name，如​​<a href="#id1"></a>​​

示例如下。为了显示效果，通过使用lorem自动生成随机文本（具体使用方法搜索，一般直接输入就行），lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

• 常用写法： ​​<meta charset="UTF-8">​​
• charset：定义文档的字符编码

• ASCII/ANSI/Unicode：英语
• GBK：亚洲通用字符集
• GB2312：中文简体
• Big5：台澳港繁体
• UTF-8：世界通用字符集

name

1. 关键字

• 常用写法： ​​<meta name="keywords" content="">​​
• 描述：告诉搜索引擎网页的关键字，尽量将重要的关键词放在前面

2. 网页描述

• 常用写法： ​​<meta name="keywords" content="">​​
• 描述：告诉搜索引擎网页的主要内容

3. 作者

• 常用写法： ​​<meta name="author" content="">​​
• 描述：告诉搜索引擎网页的作者

4. 文件检索

• 常用写法： ​​<meta name="robots" content="all | none | index | noindex | follow | nofollow">​​
• 描述：有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。
• content: 文件检索方式

• all：文件将被检索，且页面上的链接可以被查询 （默认值）
• none：文件将不被检索，且页面上的链接不可以被查询
• index：文件将被检索；
• noindex：文件将不被检索，但页面上的链接可以被查询
• follow：页面上的链接可以被查询
• nofollow：文件将不被检索，页面上的链接可以被查询

网页自动跳转

• 常用写法： ​​<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />​​
• 描述：网页5秒后自动跳转到谷歌主页
• url：为空则刷新本页
• 常用写法：
• 描述：规定当前文档与被链接文档/资源之间的关系
• rel：定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写（必写属性）
• type：规定被链接文档的类型
• href：链接的文件路径
• 示例：

• 链接外部样式表：​​<link rel="stylesheet" type="text/css" href="a.css">​​
• 设置网页icon图标：​​<link rel="icon" href="a.ico">​​

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记，我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

• 常用写法：​​<table width="" height="" border="" cellspacing="" cellpadding=""></table>​​
• width：表格宽度
• height：表格高度
• border：边框宽度
• cellspacing：单元格间距
• cellpadding：内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

• 常用写法：​​<td colspan=“” rowspan=“”></td>​​
• 描述：告诉表格该单元格可以横跨colspan列，纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于​​<input>​​不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

• 常用写法：​​<input type="text" name="" maxlength="" readonly="" disabled="" value="">​​
• type：规定输入字段的类型
• name：输入框的名字
• maxlength：输入文本长度
• readonly：输入框是否只读
• disabled：输入框是否未激活
• value：输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

• 常用写法：​​<input type="password" name="">​​
• type：规定输入字段的类型
• name：输入框的名字
• 密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

• 常用写法：​​<input type="radio" name="" checked="checked">​​
• type：规定输入字段的类型
• name：输入框的名字
• checked：设定该输入框被预先选定
• 想要多个单选框只能有一个被选中，设置所有单选框的name值相同即可实现

示例一，两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

​​<select>​​

• 常用写法：​​<select multiple=""></select>​​
• multiple：当该属性为true时，可选择多个选项。

​​<optgroup>​​

• 常用写法：​​<optgroup label=""></optgroup>​​
• label：设定选项组的描述。

​​<option>​​

• 常用写法：​​<option value="" selected="">选项值</option>​​
• value：定义送往服务器的选项值。
• selected：当该属性为true时，该选项被默认选择。

示例一，单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二，带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

• 常用写法：​​<input type="checkbox" checked="">​​
• type：规定输入字段的类型
• checked：设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

• 常用写法：​​<textarea cols="" rows="" placeholder=""></textarea>​​
• cols：控制可见文本的列数
• rows：控制可见文本的行数
• placeholder：提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

• 常用写法：​​<input type="file" accept=""/>​​
• accept：规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一，普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

与

​​<progress>​​​与​​<meter>​​主要区别和用法见​​HTML5 progress和meter控件​​

​​<progress>​​

• 常用写法：​​<progress value="" max=""></progress>​​
• value：规定进程的当前值
• max：规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

​​<meter>​​

• 常用写法：​​<meter min="" low="" high="" max="" value="" optimum=""></meter>​​
• value：规定度量的当前值
• max：规定被界定为高的值的范围
• min：规定被界定为低的值的范围
• low：规定被界定为低的值的范围
• high：规定被界定为高的值的范围
• optimum：规定度量的最优值
• 具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

​​<audio>​​

• 常用写法：​​<audio src="" controls autoplay loop></audio>​​
• src：规定音频文件的url
• controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
• autoplay：如果出现该属性，自动播放音频
• loop：如果出现该属性，循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

​​<video>​​

• 常用写法：​​<video src="" width="" height="" poster="" controls autoplay loop></video>​​
• src：规定视频文件的url
• width：设置视频播放器的宽度（pixels）
• height：设置视频播放器的高度（pixels）
• poster：设置视频未播放时展示的画面
• controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
• autoplay：如果出现该属性，自动播放音频
• loop：如果出现该属性，循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

​​<source>​​

• 常用写法：​​<source src="" type="">​​
• src：规定媒体文件的url
• type：规定媒体文件的类型
• 因为不同浏览器支持的媒体格式不同，当添加媒体文件时，需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件，然后使用source 标签，让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

​​HTML特殊字符编码对照表​​

参考

• ​​HTML基础​​
• ​​HTML 参考手册​​
• HTML中标签对应的英文
• meter标签改变颜色规则
• HTML5 progress和meter控件