HTML和CSS的标签

<p>段落标签

<em>斜体不换行

<strong>加粗不换行

特殊符号

空格 &nbsp；      大于号 &gt；  小于号  &lt；    引号 &quot；    注册商标 &reg；

<img> 标签属性：

src：引用路径

alt：在图片不能正常加载时候显示的提示语

title：鼠标划上去显示的内容

width/height：设置图片的宽度和高度

get和post请求方式的区别

1、get

​		（1） 以URL地址栏发送数据

​		（2） 发送数据不安全

​		（3） 发送数据量小

2、post

​		（1） 通过http/https 以body直接将表单数据发送到后台

​		（2） 发送数据安全

​		（3） 发送数据量大小理论上有限制（很大）

​		（4） 需要服务器支持

#### 表单form

主要包括文本域、按钮、单选框、复选框、选项菜单

input标签中type的属性

属性值：text,password
作    用：text,表单中键入字母、数字等内容。
               password，输入密码字段。

属性值：file
作    用：file,定义了文件选择。

属性值：button
作    用：button,定义了普通按钮。

属性值：checkboxes,radio
作    用：checkboxes,表单复选框。
              radio,表单单选框。

属性值：submit，image
作    用：submit,定义了提交按钮。
              image,定义了图片提交按钮。

属性值：reset
作    用：reset,定义了重置按钮。

checked

type为radio或checkbox时，指定按钮是否是被选中

maxlength

type为text 或 password 时，输入的最大字符数

select 标签用于声明下来列表
option 标签用于声明列表项

textarea 多行文本域



#### 音频播放器

audio 音频播放器

video 视频标签

​		src		   路径

​		controls  显示播放器控件

​		autoplay 自动播放

​		loop         循环播放

​		width       宽度

​		height      高度

#### 换行标签和不换行标签的区别

换行标签默认展示100%，可以直接设置宽高属性

不换行标签大小是由文字撑开的，不能直接设置宽高属性

## CSS基础样式

#### 字体样式

字体类型 font-family:"隶书";

字体大小 font-size: 20px;

字体样式 font-style: normal支持默认/italic斜体

字体粗细 font-width:100-900之间

字体属性 font

#### 文本样式

设置文本颜色 color： red / #362596 /rgb(32,250,50)

设置文本的行高 line-height :20px;

设置元素水平对齐方式 text-align : left/center/right

设置首行文本的缩进 text-indent：20px;

设置文本的装饰 text-decoration:

​	none:默认，标准文本
​	underline：定义文本下划线
​	overline：定义文本上划线
​	line-through：定义穿过文本的一条线

鼠标样式

属性名cursor：

属性值 defalut 默认光标      pointer  超链接指针       wait  等待状态   help  指示可用的帮助    text   指示文档   crosshair   鼠标呈现十字状

#### 背景样式

背景颜色   background-color

背景图片地址   background-image:url(图片路径)

背景图片重复方式  background-repeat   ：no-repeat   不重复  repeat-x      水平重复  repeat-y      垂直重复
repeat         默认重复

背景定位  background-position  ：像素：px
															水平方向：left、center、right
															垂直方向：top、center、bottom

#### 列表样式

list-style-type  ：（1）无序列表
     disc 实体圆心（默认）
      circle 空心圆
      square 实体方心
      none   无列表标记
（2）有序列表
     1 / a / A / i  /  I

list-style-image  ：自定义列表标记为图片
属性值：url(图片路径)

list-style-position  ：列表标记定位  outside   inside

#### CSS伪类

link : 单击访问前

visited : 单击访问后

hover : 鼠标悬浮其上

active : 单击未释放

#### CSS高级选择器

并集选择器   ： 多个选择器通过逗号连接而成
示例：

```css
div,p,span,.codeup,#helloid{`
          `color:red;`
          `font-size:20px;`
     `}`


```

交集选择器   ： 由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格

第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

示例：

```css
div.codeup{
          color:red;
          font-size:20px;
    }

div#codeup{
       color:red;
       font-size:20px;
}
```

后代选择器   ： 外层的选择器写在前面 内层的选择器写在后面 之间用空格分隔

子元素选择器  ： 通过  >  连接在一起而成   仅作用于子元素

属性选择器  ： 选取带有指定属性的元素



#### 定位

​    position  定位
​        一、fixed  固定定位
​            (1) 使用了固定定位的元素 【会】脱离标准文档流
​            (2) 基于 浏览器窗口进行定位
​            (3) 所有定位都基于 top、left、right、bottom四个方位进行偏移

​        二、 relative 相对定位
​            (1) 使用了相对定位的元素 【不会】脱离标准文档流
​            (2) 基于 自身原来在网页中的位置 进行定位
​            (3) 所有定位都基于 top、left、right、bottom四个方位进行偏移

​        三、 absolute  绝对定位
​            (1) 使用了相对定位的元素 【会】脱离标准文档流
​            (2) 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位
​            (3) 所有定位都基于 top、left、right、bottom四个方位进行偏移