标签分类：按是否独占一行分类
块级标签 block 自带换行，独占一行
h标签，p标签，hr水平线，div标签，tr标签，ul标签，ol标签，li标签
内联标签 inline 不会换行，按内容扩展
b标签，strong标签，em标签，sub标签，sup标签，strike标签，span标签，a标签，img标签,th标签，td标签
列表 最常用无序列表
<ul></ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
<li></li>
<ol></ol>: 有序列表
<li></li>:列表中的每一项.
<dl></dl> 定义列表
<dt> 列表标题
<dd> 列表项
表单标签<from></from>
功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单属性
action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get默认取值就是get
<input>系列标签
表单类型 type:
text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
reset 重置按钮
button 按钮(需要配合js使用.) button和submit的区别
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
上传文件注意两点：请求方式必须是post enctype="multipart/form-data"
表单属性:
name: 表单提交项的键.
注意和id属性的区别：name属性是和服务器通信时使用的名称；
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.
placeholder 做一个提示效果 只能用在input标签中
提交数据是以键值对的形式提交的，name就是键，value就是值
在text、password中：
name是一定要写的，当写了value值的时候，重新写的话就会覆盖默认值
checkbox中,每一项的name要是一样的，value值也必须要写
radio中，每一项的name是一样的的时候，就限制了只能选择一个，value值也是必须要写
file中，name属性要写
<textarea> 多行文本框 name也需要写
<textarea cols=“宽度” rows=“高度” name=“名称”>
默认内容
</textarea>
select标签
<select> 下拉选标签属性 name和value都要写
name:表单提交项的键 放在select中
size：选项个数
multiple：多选
<optgroup>为每一项加上分组
<option> 下拉选中的每一项 属性：
value:表单提交项的值 放在每个选项中
<label>标签 ---- for 要关联的id
<label>要关联的内容</label>
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
css部分
功能：渲染，布局
过程：先查找标签 再操作标签
--------------查找标签--------------
四种引入css的方法
1、行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
3 链接式---推荐使用
将一个.css文件引入到HTML文件中
<link href="css文件路径" rel="stylesheet" type="text/css"/>
4.导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中
< style type = "text/css" >
@import "css文件路径";#此处要注意.css文件的路径
</style>
导入式和链接式的区别：
导入式引入文件数有限制
导入式会在整个网页装载完后再装载CSS文件，网页内容很大的时候，css来不及加载就会导致没有css只有一些页面内容
链接式是它会以网页文件主体装载前装载CSS文件，这样可以保证显示页面内容的时候就有css样式，效果更好
基本选择器
标签选择器 直接通过标签名去加属性
id选择器 #+id名 来控制，只能设置一个
class选择器 .+ class名 来控制，可以设置多个
class 可以跟多个名字，中间用空格分开
通配选择器 * 对所有的标签都控制
组合选择器
E, F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔: div, p {color: # f00; }
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔: li a {font - weight: bold;｝
E > F子元素选择器，匹配所有E元素的子元素F: div > p {color: # f00; }
同级，都是只能往下找：
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F: div + p {color: # f00; }
E ~ F 普通兄弟选择器（以破折号分隔）:.div1~ p {font - size: 30px;}
标签.标签名{属性} ---唯一对应的该类标签下的对应的标签名的属性
属性选择器
标签[属性名="属性值"]{配置属性} 只要有该属性的标签下的内容都能匹配到
标签，属性值，可以不写
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
E[attr^=val] 匹配属性值以指定值开头的每个元素
E[attr$=val] 匹配属性值以指定值结尾的每个元素
E[attr*=val] 匹配属性值中包含指定值的每个元素
选择器的优先级
当多个叠加到一起的时候，就是加到一起的谁大听谁的
当优先级一样的时候，谁后加载的话就听谁的
只有id，class的时候不会比较，只有混合的时候才会叠加
在属性值后面加!important; -- 就听该属性的，规则之外的
style 1000
id 100
class 10
element标签 1
继承
color 可以继承，但是优先级权限是最低的
-------------操作标签----------------
文本操作
width height 只有块级标签可以设置
color -- 文本颜色
单词
十六进制
rgb(red,green,blue) --调色
text_align 文本位置，左右中，justify两端对齐（两边不留白）
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
background-color 背景色
font-size: 10px; 字体大小
text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线
font-family: 'Lucida Bright' 字体
font-weight: lighter/bold/border/ 字体粗细
font-style: oblique 斜体设置
text-indent: 150px; 首行缩进150px
letter-spacing: 10px; 字母间距
word-spacing: 20px; 单词间距
text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
margin:用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
margin 数值;
margin-top/right/bottom/left 数值;
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。
padding:用于控制内容与边框之间的距离；
padding 数值;
padding-top/right/bottom/left 数值;
margin/padding 10px; 一个值表示上下左右都设为这个值
margin/padding 10px 20px; 两个值表示上下为10px,左右为20px
margin/padding 10px 20px 30px; 三个值表示上为10px,左右为20px，下为30px
margin/padding 10px 20px 30px 40px; 四个值表示上为10px,右为20px，下为30px，左为40px
Border(边框):围绕在内边距和内容外的边框。
border-color/style/width
border-top/right/bottom/left-color/style/width
Content(内容):盒子的内容，显示文本和图像。
float
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
继承：子标签继承父标签的属性
html/css 开始就设置body的外边距为0，以防影响之后自己的设置
浙公网安备 33010602011771号