【无标题】

head标签

作用是：设置网站的源信息
charset属性：用来定义文本的编码格式
UTF-8:万国码，目前开发中最常用
gb2312：中文码
author属性：用来定义网站的作者，一般是公司的名字
keywords属性：用来定义网站的关键字，如果有多个关键字，用英文逗号隔开，关键字最好不要超过10个
description属性：用来简单的描述网站的内容

块属性标签

1.div标签：没有意义，通常用来进行页面的布局
2.h标签（h1-h6）
在一个页面中，h1最多只能出现一次，h2最多只能出现20次，h3-h6次数不限。
h1的用法：
1.logo处
2.资讯详情页的大标题
3.p标签段落标签，里面一般包含一端文字
4.分割线 hr br换行符
5.ul>li 无序列表
可以设置它的list-style-type属性
square:实心方块
circle:空心圆
dotted:实心圆
none：取消列表样式
disc:高版本系统下的默认样式
6.ol>li 有序列表
可以设置它的list-style-type属性
lower-alpha:小写字母
upper-alpha:大写字母
lower-roman:小写的罗马文
upper-roman:大写的罗马文
ol,ul,li都是快属性标签，li是列表项并且ol,ul,li的子元素必须是li标签
7.dl>dt dl>dd 定义列表
dl:块标签，定义列表的父元素
dt:块标签，定义列表的 标题项
dd:块标签，定义列表的 列表行
8.address 地址标签一般的，他的内容是一个地址
9.blockquote 引用标签 一般引用的是一段文字，它的cite属性表示该文字引用的文献名目

行标签

1.span 标记标签 没有实际意义，通常用来渲染文字
2.a标签
作用：

1. 设置一个超链接
2. 设置锚点
   最常见的效果是 回到顶部
   如果在开发中需要设置a标签点击没有效果，则可以设置href
   属性为## 即是： href=“##”
   如果需要设置回到顶部 则 href=“#”
   不要设置href为空，这样会导致页面刷新
3. 下载文件
   a.如果设置的下载文件是音频、视频、图片、文档等，z都需要经过压缩之后，在再href上设置文件的路径
   b.如果是文本类型的文件，可以直接把文件路径设置在href属性上，直接由浏览器打开
   href 属性：用来设置超链接的地址
   target 属性：设置标签页的打开方式
   _blank ：在新标签页打开
   _self :默认值，在当前页面打开
   3. strong 强调标签
   em 强调并且斜体
   b 文本加粗（不常用，h5中即将废弃）
   i 文本斜体
   var 文本斜体
   4. q 标签,引用标签，他引用的内容都比较简短的
   pre 标签，格式化输出，
   code 标签，一般是嵌套代码使用
   <在html中渲染为<
   >在html中渲染为>
    在html中渲染为 空格

   img

   5.img标签，是一个单标签
   src属性：用来设置图片的资源路径（资源路径：网络路径，绝对路径，相对路径）
   a.网络路径
   图片的网络地址
   b.绝对路径
   从服务根目录开始直到找到需要的文件的整个路径,一般不使用
   c.相对路径
   相对于当前文件所在的资源路径
   ./ 代表的是当前目录
   …/ 代表的是上一级目录
   相对路径开发当中最常用
   alt属性，用来解释图片的内容
   作用：
   1.当图片没有被加载出来的时候，会显示alt的内容
   2.通过alt属性，告诉浏览器当前图片的内容
   width/height 设置图片的宽和高，在实际的开发当中，一般只设置单个的宽或者高，另一侧会根据比例进行显示大小。

1.块属性标签
a.独占一行，支持宽和高的设置,设置完宽和高以后，仍然独占一行
b.支持上下padding和上下margin
2.行属性标签
a.不会独占一行，从左到右横向排列
b.无法设置宽高，它的宽高由内容撑开
c.不支持上下padding和上下margin

emmet语法

E代表标签名
E*n 创建n个E标签
E{内容}*n 创建n个内容E标签
E{内容KaTeX parse error: Expected 'EOF', got '}' at position 1: }̲*n 创建n个内容为“内容”+…表示序号，从1开始
>表示的下一个层级元素（子元素）
E>a 在E标签中添加子元素a标签
+ 表示同级
E+p 同时创建兄弟元素E和p
^ 表示上一级
E>^div 创建div标签和E标签同级，也就是创建p标签的上一级
使用[]设置属性

嵌套规则

标签嵌套规则
1.块标签可以作为一个布局标签，嵌套所有的标签
2.行标签不能嵌套块标签
以下标签不能嵌套：
1.p标签，h1-h6都不能相互嵌套，并且他们也不能嵌套块标签
2.a标签不能相互嵌套

CSS样式表

/* 设置类名
.类名{
样式内容
}
text-align:文本排布，一般放在块标签上，用来控制块标签中行标签和文本的对齐位置
值：
left：左对齐（默认）
center:居中对齐
right:右对齐

css 层叠式样式表，它是用来给html结构添加样式的
引入方式：
1.行间样式
在标签上设置style属性，在style中设置样式
2.内部样式表

CSS的引入方式

<link rel=“stylesheet” href=“./css/style.css”

/* 使用@import导入css */
@import url(‘./css/goods.css’）

css 层叠式样式表
css 引入方式
1.行间引入
2.内部方式表
3.外部样式表（开发的时候常用）
link和@import引入css的区别
1.@import是css2.1之后才推出的，因此可能存在兼容问题，link不存在兼容问题
2.link不仅可以引入css，也可以引入其他类型的文件，功能更加强大，推荐使用link

CSS文本操作

border 属性
border-width 设置border的宽度
border-color 设置border的颜色
border-style 设置border的样式
他们三个也可以和写：
border:width style color;

可以给单独某一个边设置border
border-top 设置上边
border-left 设置左边
border-bottom 设置下边
border-right 设置右边

常用的border-style 的值
1.solid 实线
2.dotted 圆点虚线
3.dasshed 短线虚线
4.none 隐藏border
5.dobble 双实线（一下不常用）
6.groove 3d凹槽（3d边框）
7.gridge 3d凸槽（3d边框）
8.inset 内嵌（3d边框）
9.outset 外嵌（3d边框）

color属性：设置文本颜色
值：
1.英文单词
2.十六进制颜色 0-F ，#后面跟6位表示颜色的数字，前两位表示红色，中间两位表示绿色，后面两位表示蓝色 #aabbcc
如果两两相等，则可以简写为#abc
3.rgb(),rgba()设置颜色
（）中设置对应位置的数字是0-255,0表示黑色，255表示白色
rgb(255,0,0)红色
rgba中的a表示透明度，取值范围是0-1,0表示完全透明，1表示完全不透明

文本的修饰 text-decoration
值：
1.underline 下划线
2.overline 上划线
3.line-through 删除线（中划线）
4.none 去掉线（没有文本修饰线）
文本的转化 text-transform
值：
1.lowercase 全部小写
2.uppercase 全部大写
3.capitalize 单词的首字母大写

标记文本