代码规范

1. 概述

欢迎使用优购代码规范，这是我借鉴京东前端代码规范组织的内部产品采购规范。旨在加强团队开发合作，提高代码质量，建立开发基石的编码规范，

以下规范是团队必须严格遵守的基本协议。

HTML规范

基于 W3C、苹果开发者等待官方文件，结合团队业务和开发过程中总结的规范协议，让页面HTML代码更具语义性。

图片规范

了解各种图片格式特征，根据特征制定图片规范，包括但不限于图片质量协议、图片介绍、图片合并处理等，旨在从图片层面优化页面性能。

CSS规范

统一规范团队 CSS 代码书写风格及使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块引用。

命名规范

从 目录、图片、HTML/CSS文件、ClassName 规范团队的命名习惯，提高团队代码的可读性。

2. HTML 规范

DOCTYPE 声明

HTML必须添加文件 DOCTYPE 声明，统一使用 HTML5 文档声明：

<!DOCTYPE html>

HTML5标准模版

<!DOCTYPE html>  <html lang="zh-CN">  <head>  <meta charset="UTF-8">  <title>HTML5标准模版</title>  </head>  <body>   </body> </html>

页面语言lang

属性值推荐使用 cmn-Hans-CN（简体, 但考虑到浏览器与操作系统的兼容性，中国大陆仍在使用 zh-CN 属性值

<html lang="zh-CN">

更多地区语言参考:

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

charset 字符集合

一般统一使用 “UTF-8” 编码

<meta charset="UTF-8">

由于历史原因，可能会使用一些业务 “GBK” 编码

<meta charset="GBK">

请尽量统一写标准 “UTF-八、不要写 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 写某些编程系统中，如 .NET framework 的类 System.Text.Encoding 其中一个属性名称叫 UTF8。

书写风格

HTML代码大小写

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

推荐：

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

不推荐：

<div class="DEMO"></div>      <DIV CLASS="DEMO"></DIV>

类型属性

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

推荐：

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

不推荐：

<link rel="stylesheet" type="text/css" href="" > <script type="text/javascript" src="" ></script>

元素属性

元素属性值采用双引语法
可以写上所有的元素属性值

推荐：

<input type="text"> <input type="radio" name="name" checked="checked" >

不推荐：

<input type=text>    <input type='text'> <input type="radio" name="name" checked >

引用特殊字符

文本可以与字符引用混合。这种方法可以用来转换文本中不能合法出现的字符。

在 HTML 不能使用小于号 “<” 和大于号 “>浏览器将特殊字符作为标签分析，如果要正确显示，则在 HTML 在源代码中使用字符实体

推荐：

<a href="#">more&gt;&gt;</a>

不推荐：

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

代码缩进

代码缩进统一使用四个空间，使编辑器性能一致（编辑器有相关配置）

<div class="jdc">   <a href="#"></a> </div>

代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选

推荐：

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

不推荐：

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

段落元素和标题元素只能嵌套内联元素

推荐：

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

不推荐：

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

3. 图片规范

内容图

内容图多以商品图等照片形式存在，色彩丰富，文件体积大

优先考虑 JPEG 如果条件允许，优先考虑格式和条件 WebP 格式
尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
PC平台单张图片的大小不应大于 200KB。

背景图

背景图多为图标等颜色简单、文件体积小、起修饰作用的图片

PNG 与 GIF 格式，优先使用 PNG 格式,PNG格式允许更多的颜色和更好的压缩率
图像颜色相对简单，如纯色块线图标，优先使用 PNG8 避免不使用格式 JPEG 格式
图像颜色丰富，图像文件不太大(40KB 以下)或具有半透明效果的优先级 PNG24 格式
图像颜色丰富，文件大(40KB - 200KB）优先考虑 JPEG 格式
条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

4. CSS规范

代码格式化

一般有两种风格：一种是紧凑的格式 (Compact)

.jdc{ display: block;width: 50px;}

一种是扩展格式（Expanded）

.jdc {     display: block;     width: 50px;}

团队约定

统一使用展开格式书写样式

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

/* 推荐 */
.jdc{
	display:block;
}
	
/* 不推荐 */
.JDC{
	DISPLAY:BLOCK;
}

选择器

尽量少用通用选择器 *
不使用 ID 选择器
不使用无具体语义定义的标签选择器

/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推荐 */
*{}
#jdc {}
.jdc div{}

代码缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

.jdc {
    width: 100%;
    height: 100%;
}

分号

每个属性声明末尾都要加分号；

.jdc {
    width: 100%;
    height: 100%;
}

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

推荐：

.jdc { 
    width: 100%; 
}

不推荐：

.jdc{ 
    width:100%;
}

逗号分隔的取值，逗号之后一个空格

推荐：

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推荐：

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

为单个css选择器或新申明开启新行

推荐：

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav {
    color: #fff;
}

不推荐：

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0

推荐：

.jdc {
    color: rgba(255,255,255,.5);
}

不推荐：

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

属性值十六进制数值能用简写的尽量用简写

推荐：

.jdc {
    color: #fff;
}

不推荐：

.jdc {
    color: #ffffff;
}

不要为 0 指明单位

推荐：

.jdc {
    margin: 0 10px;
}

不推荐：

.jdc {
    margin: 0px 10px;
}

属性值引号

css属性值需要用到引号时，统一使用单引号

/* 推荐 */
.jdc { 
	font-family: 'Hiragino Sans GB';
}

/* 不推荐 */
.jdc { 
	font-family: "Hiragino Sans GB";
}

属性书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
1. 自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

mozilla官方属性顺序推荐

命名规范

由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。

目录命名

项目文件夹：shoping
样式文件夹：css
脚本文件夹：js
样式类图片文件夹：img
产品类图片文件夹： upload
字体类文件夹： fonts

ClassName命名

ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接

.nav_top

常用命名推荐

注意：ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此

<div class="ad"></div>

这种广告的英文或拼音类名不应该出现

另外，敏感不和谐字眼也不应该出现，如：

<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div> 
<div class="ass"></div> 
<div class="KMT"></div> 
...

ClassName	含义
about	关于
account	账户
arrow	箭头图标
article	文章
aside	边栏
audio	音频
avatar	头像
bg,background	背景
bar	栏（工具类）
branding	品牌化
crumb,breadcrumbs	面包屑
btn,button	按钮
caption	标题，说明
category	分类
chart	图表
clearfix	清除浮动
close	关闭
col,column	列
comment	评论
community	社区
container	容器
content	内容
copyright	版权
current	当前态，选中态
default	默认
description	描述
details	细节
disabled	不可用
entry	文章，博文
error	错误
even	偶数，常用于多行列表或表格中
fail	失败（提示）
feature	专题
fewer	收起
field	用于表单的输入区域
figure	图
filter	筛选
first	第一个，常用于列表中
footer	页脚
forum	论坛
gallery	画廊
group	模块，清除浮动
header	页头
help	帮助
hide	隐藏
hightlight	高亮
home	主页
icon	图标
info,information	信息
last	最后一个，常用于列表中
links	链接
login	登录
logout	退出
logo	标志
main	主体
menu	菜单
meta	作者、更新时间等信息栏，一般位于标题之下
module	模块
more	更多（展开）
msg,message	消息
nav,navigation	导航
next	下一页
nub	小块
odd	奇数，常用于多行列表或表格中
off	鼠标离开
on	鼠标移过
output	输出
pagination	分页
pop,popup	弹窗
preview	预览
previous	上一页
primary	主要
progress	进度条
promotion	促销
rcommd,recommendations	推荐
reg,register	注册
save	保存
search	搜索
secondary	次要
section	区块
selected	已选
share	分享
show	显示
sidebar	边栏，侧栏
slide	幻灯片，图片切换
sort	排序
sub	次级的，子级的
submit	提交
subscribe	订阅
subtitle	副标题
success	成功（提示）
summary	摘要
tab	标签页
table	表格
txt,text	文本
thumbnail	缩略图
time	时间
tips	提示
title	标题
video	视频
wrap	容器，包，一般用于最外层
wrapper	容器，包，一般用于最外层

常用模块类名命名

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	dropdown 包含.dd .dt
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright

网站TDK三大标签SEO优化

SEO（Search Engine Optimization) 汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合SEO优化。

三大标签：title（标题）、description（网站说明）、keywords（关键字）

1. title网站标题

title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

建议：网站名（产品名）—网站的介绍（尽量不要超过30个汉字）

京东（JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站

2. description网站说明

简要说明我们网站主要是做什么的。

我们提倡，description作为网站总体业务和主题概括，多采用“我们是...."、“我们提供...”、xxx网作为...“、”电话：010....“之类语句。

例如：

3. keywords 关键字

keywords是页面关键词，是搜索引擎的关注点之一。

keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式。

例如：

对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的SEO人员准备。

LOGO SEO 优化

logo里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来
- 方法1：text-indent 移到盒子外面（text-indent: -999px），然后 overflow: hidden；，淘宝的做法
- 方法2：直接给 font-size：0；就看不到文字了，京东的做法
最后给链接一个 title 属性，这样鼠标放到logo上就可以看到提示文字了

<div class="logo">
    <h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
</div>

.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
}

.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* font-size: 0; 京东的做法 */
    /* 淘宝的做法 */
    /* text-indent: -9999px;
    overflow: hidden; */
    color: transparent;
}

盒子阴影

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* box-shadow: 阴影水平位置 阴影垂直位置 模糊程度 阴影大小 */
            /* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .5) inset; */
        }
        /* 原先没有影子，当我们鼠标经过盒子就添加阴影效果 */
        
        div:hover {
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .5) inset;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

文字阴影

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字阴影</title>
    <style>
        div {
            font-size: 30px;
            color: red;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .4)
        }
    </style>
</head>

<body>
    <div>
        你是阴影，我是火影
    </div>
</body>

</html>

粘性定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性定位</title>
    <style>
        body {
            height: 3000px;
        }
        
        .nav {
            /* 粘性定位 */
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="nav">我是导航栏</div>
</body>

</html>

前端笔记导读

HTML标签是由尖括号包围的关键字
HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签
有些特殊的标签必须是当标签（极少情况），列如<br />，我们称之为单标签（在下面的笔记中双标签我只写一个并且不会有尖括号，只有单标签的时候才会写尖括号）

软件开发架构

cs 客户端 服务端
bs 浏览器 服务端
ps：bs本质也是cs

浏览器窗口输入网址回车发生了几件事

浏览器朝服务端发送请求
服务端接受请求（eg：请求百度页面）
服务端返回相应的响应（eg：返回百度页面）
浏览器接收相应，根据特定的规则渲染页面然后展示给用户看

标签关系

包含关系
并列关系

<div>
    <p>grandpa</p>
</div>
<!-- 包含关系 -->
<p>grandpa</p>
<p>grandpa</p>
<!-- 并列关系 -->

基本结构标签总结

<!-- html最大的标签，根标签 -->
<html lang="en">
<!-- 文档的头部 -->
<head>
  <!-- 网页标题 -->
  <title></title>
</head>
<!-- 主题内容，文档的主体，以后我们的网页内容基本都是放在body里面的 -->
<body>
</body>
</html>

<!-- 文档类型的声明，作用就是告诉浏览器使用哪种HTML版本来显示网页，这个页面必须写在页面的开头，而且这个标签不是html标签，它就是文档类型的声明标签 -->
<!DOCTYPE html>
<!-- lang语言种类，en表示的是英语的意思，zn-CN定义语言为中文，但是对于文档的显示的时候定义成en的文档也可以显示中文，定义成zn-CN的文档也可以显示英文 -->
<html lang="en">

<head>
    <!-- charset表示的是字符集的意思可以通过修改这个来指定网页的编码格式，如果没有定义字符集的话很容易出现乱码的情况 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签

HTML中的注释以""结束

在vs里面注释的快捷键为crtl+/

HTML中的特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方2（上标2）	²
³	立方3（上标3）	³

HTML常用标签

标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即h1到h6

标签语义：作为标题使用，并且依次重要性递减

特点

加了标题的文字会变的加粗，字号也会依次变大
一个标题独占一行

标签名	语义
h1	一级标题
h2	二级标题
h3	三级标题
h4	四级标题
h5	五级标题
h6	六级标题

段落标签和换行标签

段落标签

在网页中，要把文字有条理显示出来，就需要将这些文字分段显示。在HTML标签中，p标签用于定义段落，它可以将整个网页分为若干个段落

特点

文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保有空隙

换行标签

在HTML中，一个段落中的文字会从左到右一次排列，直到浏览器窗口的右端，然后才自动换行。如果希望其某段文本强制换行显示，就需要使用换行标签<br >

特点

只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

标签名	语义
p	段落
<br \>	换行

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示

标签语义：突出重要性，比普通文字更重要，注意一般不写后面的简写，因为简写内容语义不明确

标签	语义
label或者b	加粗
em或者i	倾斜
del或者s	删除线
ins或者u	下划线

div标签和span标签

div和span是没有语义的，它们就是一个盒子，用来装内容的

特点

div标签用来布局，但是现在一行只能放一个div
span标签用来布局，一行上可以多个span

标签名	语义
div	大盒子
span	小盒子

图像标签和路径

在HTML标签中，img标签用于定义html页面中的图像

src是img标签的必须属性，它用于指定图像的路径和文件名

所谓属性：简单理解就是属于这个图像标签的特性

标签	语义
img	图像

图像标签的属性设置

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图像标签属性注意点

图像标签可以拥有多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式，即key=“value”的格式，属性=“属性值”
图像属性的src是必须写的
alt和title来说alt是在图片无法显示的时候出现的文字描述，而title是在图片能显示的时候鼠标放到图像之后才显示的文字

目标文件夹

就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等
根目录

打开目录文件夹的第一层就是根目录

路径

相对路径

以引用文件所在位置为参考基础，而建立出的目录路径（图片相对于html页面的位置）

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src="baidu.gig" />
下一级路径	/	图像文件位于HTML文件下一级如<img src="images/baidu.gif" />
上一级路径	../	图像文件位于HTML文件上一级如<img src="../baidu.gif" />

注意：

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置

绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

超链接标签

在HTML标签中，a标签用于定义超链接，作用是从一个页面链接到另一个页面

链接的语法格式
链接的分类

标签	语义
a	超链接

链接的语法格式

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其实_self为默认值，_blank为在新窗口中打开方式

链接分为几大类

外部链接

<a src="http://www.4399.com">4399</a>

内部链接：网站内部网页之间的相互链接，直接链接内部页面名称即可

<a src="index.html">首页</a>

空链接：如果当时没有确定链接目标时，<a href="#">首页</a>

<a src="#">首页</a>
<!-- 注意空链接不会跳转任何页面 -->

下载链接：地址链接的是文件.exe或者是zip等压缩包形式

<a src="img.zip">下载文件</a>

网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

<a href="http://www.baidu.com"><img src="img.jpg" /></a><!-- 这个时候是通过图片来进入链接 -->

锚点链接：点我们点击链接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

<!--- 在点击锚点链接的时候会直接跳转套对应的id位置 ---><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        div {            height: 1000px;        }    </style></head><body>    <a href="#two">第二集</a>    <div></div>    <h3 id="two">第二集介绍</h3></body></html>

表格标签

作用：

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

总结：

表格不是用来布局页面的，而是用来展示数据的

表格

标签	语义	作用
table	表格	用于定义表格的标签
thead	头部	用于将写表格的头部区域，添加代码的可读性，在使用的时候tr是在这个标签里面的
tbody	主体	用于将写表格的主体区域，添加代码的可读性，在使用的时候tr是在这个标签里面的
tr	一行	标签用于定义表格中的行，必须嵌套在table标签中
th	表头单元格	用于书写表格中的表头，通常放在第一行tr中，常用于表格第一行，突出重要性，表头单元格里面的蚊子会加粗居中显示
td	数据单元格	用于书写表格中的数据，必须嵌套在tr标签中这个标签里面是表格中书写表格数据的

表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认为1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素或百分比	规定表格的宽度

单元格属性

属性名	属性值	描述
rowspan	个数	跨行合并，根据属性值指定的个数向右合并指定的单元格数量
colspan	个数	跨列合并，根据属性值指定的个数向下合并指定的单元格数量

案例：

 <table border="1" cellpadding="0" cellspacing="0" align="center">        <thead>            <tr>                <th>名字</th>                <th>年龄</th>                <th>性别</th>                <th>国家</th>            </tr>        </thead>        <tbody>            <tr>                <td>小明</td>                <td>18</td>                <td>男</td>                <td rowspan="2">中国</td>            </tr>            <tr>                <td>小红</td>                <td>17</td>                <td>女</td>            </tr>            <tr>                <td>小方</td>                <td colspan="3">保密</td>            </tr>        </tbody></table>

列表标签

作用：

表格是用来显示数据的，那么列表就是用来布局的

列表最大的特点就是整齐、整洁、有序，它作为布局会更加的自由方便

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表

无序列表

ul标签显示html页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用li标签定义

标签	语义	作用
ul	无序列表	用于定义有序列表的标签
li	单元格	用于填写数据，必须放在ul标签中

注意：

无须列表的各个列表项之间没有顺序级别之分，是并列的
ul中只能嵌套li，直接在ul标签中输入其他标签或者文字的做法是不被允许的
li相当于一个容器，可以容纳所有元素
无序列表会带有自己的样式数据，但在实际使用中时，我们会使用CSS来设置

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义

在HTML标签中，ol标签用于定义有序列表，列表排序以数字来显示，并且使用li标签来定义列表项

标签	语义	作用
ol	有序列表	用于定义有序列表的标签
li	单元格	用于填写数据，必须放在ol标签中

注意和无序列表一样

自定义列表

在HTML标签中，dl标签用于定义描述列表（或定义列表），该标签会与dt（定义项目/名字）和dd（描述每一个项目/名字）一起使用

注意：

dl里面只能包含dt和dd
dt和dd个数没有限制，经常是一个dt对应多个dd

标签	语义	作用
dl	自定义列表	用于定义自定义序列表的标签
dt	单元格	用于填写无缩进数据，必须放在dl标签中
dd	单元格	用于填写有缩进数据，必须放在dl标签中

<dl>    <dt>小明</dt>    <dd>个人介绍。。。</dd>    <dd>个人名言。。。</dd>    <dt>小红</dt>    <dd>个人介绍</dd>    <dd>个人名言</dd></dl>

表单标签

使用表单目的是为了收集用户信息

在我们的网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单

表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成

表单域

表单域是一个包含表单元素的区域

在HTML标签中，form标签用于定义表单域，以实现用户信息的收集和传递

form会把它范围内的表单元素信息提交给服务器

标签	语义	作用
form	表单	定义表单域

表单的属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

input表单元素

在表单域中可以定义各种表单元素，这些表单元素就是运行用户在表单中输入或者选择的内容控件

input表单元素

表单元素<input />标签常用于收集用户信息

标签	语义	作用
<input />	输入框	用来在表单中填写信息

input表单元素的属性

属性	属性值	描述
type	在下面	用来选择input输入框输入的数据类型
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的默认值
checked	checked	规定此input元素首次加载时应该被选中
maxlength	正整数	规定输入字段中的字符的最大长度
placeholder	由用户自定义	规定在输入框中为空的时候出现的提示性文本

type属性值和描述

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，提供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清楚表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务端
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

label标签

label标签为input定义标注标签

label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

注意：label标签的for属性应当与相关元素的id属性相同

标签	语义
label	选中标签

label属性

属性	属性值	描述
for	由用户自定义	用来对对应的元素进行匹配

案例：

<label for="sex">    <div style="width:200px;height:200px;background:red;">        <p>            你今天必死        </p>    </div></label><input type="text" name="sex" id="sex" />

注意：

label标签是可以使用其他标签的，并且效果是没有变化的

select表单元素

在页面中国，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用select标签控件定义下拉列表

标签	语义	作用
select	下拉表	定义一个下拉框用来提供用户选择的
option	选项	书写给用户选择的数据

注意：

select中至少包含一对option
在option中定义selected="selected"时，当前项即为默认选中项

textarea表单元素

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用textarea标签

在表单元素中，textarea标签是用于定义多行文本输入的控件

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论

标签	语义	描述
textarea	文本域	当文本内容比较多的情况下使用这个标签

textarea属性

属性	属性值	描述
cols	由用户自定义	用来显示每行中的字符数
rows	由用户自定义	用来显示行数

注意：

我们一般都是使用css来改变textarea每行显示的字符串和数据的行数

css

HTML和css 的作用：

HTML主要做结构，显示网页元素内容
CSS美化HTML，布局网页
css最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离

传统网页布局的三种方式

网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)∶

普通流（标准流)
浮动
定位

注意:实际开发中，一个页面基本都包含了率三种布局方式（后面移动端学习新的布局方式）。

标准流（普通流/文档流）

所谓的标准流:就是标签按照规定好默认方式排列.

块级元素会独占一行，从上向下顺字排列。

常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺字排列，碰到父元素边缘则自动换行。

常用元素: span、a、i、em等

css选择器

选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的

小结

找到所有的对应标签
设置这些标签的样式

选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器

标签选择器（元素选择器）是指HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

格式	作用
标签名	修改这个文件中所有这个标签名的样式

作用

标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签

优点

能快速为页面中同类型的标签统一设置样式

缺点

不能设计差异化样式，只能选择全部的当前标签

<head>    <style>        div {            width: 100px;            height: 100px;        }    </style></head><body>    <div></div>    <div></div></body>

类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器

注意

结构里需要用class属性来调用class类的意思

格式/属性	属性值	描述
.类名		用来改变一个或多个指定类名的样式
class	由用户自定义	给你一个或多个标签添加类，这些类的类名可以重复使用

注意：

标签： 2d型位移变送器 5压力变送器cyb

锐单商城拥有海量元器件数据手册、 IC替代型号，打造电子元器件IC百科大全！

代码规范及html5+css3基础知识

代码规范

1. 概述

2. HTML 规范

DOCTYPE 声明

页面语言lang

charset 字符集合

书写风格

类型属性

元素属性

引用特殊字符

代码缩进

代码嵌套

3. 图片规范

内容图

背景图

4. CSS规范

代码格式化

代码大小写

选择器

代码缩进

分号

代码易读性

属性值引号

属性书写顺序

命名规范

目录命名

ClassName命名

网站TDK三大标签SEO优化

1. title网站标题

2. description网站说明

3. keywords 关键字

LOGO SEO 优化

盒子阴影

文字阴影

粘性定位

前端笔记导读

软件开发架构

浏览器窗口输入网址回车发生了几件事

标签关系

基本结构标签总结

注释

HTML中的特殊字符

HTML常用标签

标题标签

段落标签和换行标签

文本格式化标签

div标签和span标签

图像标签和路径

超链接标签

外部链接

内部链接：网站内部网页之间的相互链接，直接链接内部页面名称即可

空链接：如果当时没有确定链接目标时，<a href="#">首页</a>

下载链接：地址链接的是文件.exe或者是zip等压缩包形式

网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

锚点链接：点我们点击链接，可以快速定位到页面中的某个位置

表格标签

表格

表格属性

单元格属性

列表标签

无序列表

有序列表

自定义列表

表单标签

表单域

input表单元素

label标签

select表单元素

textarea表单元素

css

传统网页布局的三种方式

标准流（普通流/文档流）

css选择器

标签选择器

类选择器

关于STC单片机的一些牢骚

最近热搜

历史搜索 清除历史记录

历史搜索清除历史记录