HTML+CSS基础
第一章 HTML常用标签
1、标题标签：h1-----h6 双标签
格式：
<p>文字</p> 常用属性：align 对其方式 取值 left左边 center 中 right 右
2、段落标签：p 双标签
格式：
<p>文字</p>p tab快速创建标签
常用属性：align对齐方式 ：同上
3、水平线：hr 单标签
格式：
<hr 属性=“属性值”>常用属性：
颜色： color 取值： 红色 red 黄色yellow 蓝色 blue 粉红色 pink 绿色 green
宽度： width 取值：数字 如：200 指的是200px 百分比：50% 屏幕宽度一半
尺寸 ： size 取值 1-7
对齐方式： align： 取值 left center right
4、图片标签：img 单标签
格式：
<img 属性=“值”>常用属性：
src:路径属性 值： 绝对路径 (从盘符开始查询，不建议使用)
相对路径(文件相对于html页面的位置，建议将图片复制到项目中)
其中如 文件夹/文件名 / 代表下一级
width:宽度 值：像素
height:高度 值：像素
title：提示文字信息
align: 对其方式：left center right top上面 middle垂直居中 bottom下面
5、table标签
表格标签：table
表格行标签：tr
表格列标签：td/th
基本结构：
<table>
<tr>
<td>文字</td>
<td>文字</td>
</tr>
</table>渲染出一个没有边框的一行两列表格
重要属性：
border 边框 如 border="1" 表格设置1px的边框
cellspacing 单元格间距 如cellspacing="0" 表格所有单元格之间的间距设置为0
bgcolor 背景颜色 注意：可以设置三个标签中 table tr td
bordercolor 边框颜色
background 背景图片
colspan 跨列 合并同一行中某几个单元格
rowspan 跨行 合并不同行的某几个单元格
6、列表
列表分为两种：ol 有序列表 (order list)
ul无序列表 (unorder list)
有序列表结构
<ol>
<li>文字</li>
</ol>重要属性：type 设置选项的类型 默认是 数字 设置 A a I
无序列表结构
<ul>
<li>文字</li>
</ul>重要属性：type 默认：disc（实心圆） circle 空心圆 square 正方形
7、超链接标签
定义：超链接标签 a
格式：
<a href="网页地址">文字</a>功能：1、将修饰文字变成带有下划线的蓝色字体
2、跳转页面，实现网站各个页面的相互跳转
注意：
1、网页网址如果是互联网的网址 格式如：http://www.baidu.com
2、网页网址是本地格式如：网页文件相对路径
第二章 表单标签
一、表单标签
定义：form
功能：将用户数据收集统一发送给服务器
重要属性：
method: 提交方式 get:明文提交，对应数据会显示在地址栏
post:匿名提交，对应数据不会显示在地址栏中
action :提交服务器地址
二、input标签
定义：文本框标签
格式：
<input 属性=“属性值"/>重要属性：
type: 当前文本框类型
type="text" 普通文本框 输入姓名 手机 身份证等文本信息
type="password” 密码框 将信息自动转化为*显示
type="checkbox" 多选框 变成空心正方形显示
type="radio" 单选框 变成空心的圆圈 需要设置同一个name属性
type="date" 日期文本框
type="file" 文件文本框
注意：type 四种类型按钮
type="button" 普通按钮 需要额外设置 value 给按钮显示文本
type="submit" 具备提交表单功能按钮
type="image" 具备提交功能的图片按钮 需要额外设置 src 引用图片的路径
type="reset" 将同一个 表单中其他文本框的数据清空
单选框 设置三个属性 type="radio" name="" value=""
三、下拉框
<select >
<option>文字</option>
</select>select 重要属性 name
option 重要属性 value
四、多行文本框
<textarea rows="" col="" > </textarea> 第三章 常用标签
一、音频标签
1、定义： audio
2、功能：实现网页中的音频播放
3、重要属性：
1、src 文件路径 建议使用相对路径
2、controls 显示控制面板
3、autoplay 自动播放(兼容性) 以后可以使用JavaScript解决
二、视频标签
1.定义 video
2.作用：页面中显示视频
3.重要属性：
1、src 视频路径
2、control 显示面板
3、poster 视频开始时的海报
三 、自定义标签(图文混编标签)
1、格式：
<dl>
<dt>图片</dt>
<dd>文字</dd>
</dl>四、容器标签
div 标签 一行显示一个的容器标签
span标签 一行显示多个容器标签
五、超级重点：标准文档流
标准文档流定义：HTML页面会将标签从上往下，从左往右进行渲染，绘制
html中所有标签按照标准文档流分为两类：块级标签 ：从上往下画 div
行级标签：从左往右画 span
块级标签包含： p、 div 、h1-h6 ul li ol dl dt dd table
行级标签包含：a、 span、img(?) input
块级标签特点：
1、独占一行
2、从上往下布局
3、设置宽和高，如果不设置宽度的话，宽度是父级标签的宽度，高度是由子标签决定
行级标签特点：
1、一行显示多个
2、从左往右布局
3、不能设置宽高，宽高由内容决定
第四章 css基础
一、css基本介绍
1、定义：Cascading Style Sheet 层叠样式表
2、作用：美化页面
3、特点：1、对页面进行进一步的优化
2、对页面进行精准控制
二、语法：
选择器{
属性1：属性值1；
属性2：属性值2；
}
三、css分类
1、内部样式表 css代码可以写在HTML文件的style标签
2、行内样式表 css代码写某个标签的style属性里面
3、外部样式表 css代码写在一个css文件中 link 标签 引用
四、常用css属性
1、文字属性
文字颜色 color 值 关键字red green 16进制表示法 #ffffff
文字大小 font-size 值 像素20px 百分比 200%
文字粗细 font-weight 值 bold
文字样式 font-family 值 微软雅黑 黑体 草书
2、背景属性
背景颜色 background-color 值 关键字 red green 16进制表示法 #ffffff
3、标签形状
宽度 width 值：像素 百分比(相对于父容器宽度)
高度 height 值： 像素
文本对齐方式 text-align： left center right
行高 line-height 值：像素 当行高等于高度时，文字垂直方向居中
4、边框
border-width 边框宽度 值 像素 1px
border-style 边框类型 值 solid 实线 dashed段虚线 dotted点虚线
border-color 边框颜色 值 关键字 16进制表示法
一般情况下综合三种属性一起写 border:1px solid red;
border-radius 边框圆角
5、选择器
1、定义： css代码去寻找某个html标签
2、标签选择器：将HTML中所有的标签当做选择器的名称
p{
color:red;
}
将页面中所有的p标签中的文字颜色设置为红色
3、ID选择器：找到页面具备id属性的某个标签
#id名称{
color:red
}
将页面中id属性=“id名称”的标签中文字颜色设置为红色
注意：页面中的id属性的值时独一无二
4、class选择器 ：找到页面中具备class属性某些标签
.class名称{
color :red
}
5、并集选择器
语法： 选择器1，选择器2，。。。选择器n{
color:red;
}
将选择器1、选择器2、选择器n所控制的所有标签都设置为统一的样式
6、交集选择器
语法：选择器1选择器2{
color:red;
}
将既满足选择器1又满足选择器2的标签设置为统一的样式
7、伪类选择器
语法：选择器：hover{ color：red;}
当鼠标移入到选择器对应的标签中时设置当前样式，鼠标移出后，恢复到之前的样式
8、转化显示模式
属性名：display
属性值：
第五章 常用样式属性
一、文本属性
文字颜色 color
文字大小 font-size
文字粗细 font-weight
文字样式 font-family
文本对其方式 text-align
行高 line-height
文字间距 letter-spacing
文字划线修饰 text-decoration ：取值 underline 下划线
line-through 中划线
overline 上划线
none 无划线
二、脱离文档流：浮动
1、关键字 ： float
2、功能：将对应的标签脱离文档流的管束，不按照标准文档流进行布局
3、取值：left 水平向左布局 right 向右 none 不浮动
4、浮动缺点：1、子标签的浮动会导致父标签的高度塌陷(高度为0)
解决浮动塌陷的方案：
1、人为设置父标签的高度
2、给父标签设置一个属性 overflow：hidden 溢出隐藏
3、给父标签添加一个小儿子，给小儿子设置一个单独属性 clear：both;
三、盒子模型
1、背景：css认为页面上的任何一个标签都是一个盒子模型
2、盒子模型组成= 内容 + 内填充 + 边框 + 外边距
width/height padding border margin
设置padding四种取值
padding:5px; 设置标签的内边距上、下 、左、右都是5px
padding:5px 10px; 设置标签的内边距 上下5px 左右 10px
padding：1px 2px 3px 设置标签的内边距 上1px 左右2px 下3px
padding:1px 2px 3px 4px; 设置 上 右 下 左 顺时针设置
padding-left 单独设置左内边距
padding-right 单独设置右内边距
padding-top 单独设置上内边距
padding-bottom 单独设置下内边距
设置 margin四种取值
margin语法与padding语法一致
注意：
内容宽度 width 标签中文字 、图片 、子标签活动范围
padding 边框与内容之间距离
margin 边框与另外一个标签边框的距离
注意：
很多标签自带内外边距，在页面设计中，影响标签的页面布局，建议在编程开始时，统一将所有的标签的内外边距清零
代码如下：
* {
margin:0px;
padding:0px;
}
边框：
border: 边框宽度 边框样式 边框的颜色
border-radius:边框圆角
第六章 背景
一、背景基本属性
background-color: 背景颜色
background-image:背景图片 url(图片路径)
background-repeat:背景重复方式： no-repeat 不重复
repeat-x 沿着水平重复
repeat-y 沿着垂直重复
repeat 全部重复 铺满标签
重复的前提是：图片的分辨率小于标签的宽高时，就会重现重复平铺
background-position:背景图片位置 取值 关键字 left center right top center bottom
像素 水平方向 负值 向左
垂直方向 负值 向上
background：综合属性 可以综合 ：背景图片 背景重复 背景位置
二、样式精灵
1、定义：将多张图片合成一张图片发送客户端,提高了网络传输的效率，减小了传输文件的大小，加快了网页打开的速度，提升了用户体验
三、渐变
1、分类：径向渐变 线性渐变
线性渐变 background：linear-gradient(角度||方向，开始颜色，颜色2，。。。，结束颜色)
角度 90deg 从y轴偏移90度
方向 to right to left to top to bottom
重复线性渐变 repeating-linear-gradient(方向||角度，开始颜色1 位置，颜色2，位置，。。结束颜色 位置)
径向渐变 radial-gradient(形状，开始颜色，颜色2，。。。，结束颜色)
形状 :eclipse 椭圆 默认
circle 正圆
阴影：文字阴影 盒子阴影
盒子阴影 box-shadow: x偏移 y偏移 [模糊半径] [扩散半径] [ 阴影颜色]
推荐 box-shadow： 0px 0px 20px red;
第七章 盒子模型
一、盒子模型
盒子模型= 内容 + 内边距 + 边框 + 外边距
width/height padding border margin
后代选择器 ： 父级选择器1 子级选择器2 {color ：red}
第八章 Flex布局
一 、Flex - 组成
设置方式：给父元素设置display : flex，子元素可以自动挤压或拉伸
组成部分：
1.弹性容器
2.弹性盒子
3.主轴：默认在水平方向
4.侧轴/交叉轴：默认在垂直发现
二、主轴对齐方式
属性名：justify-content
三 、侧轴对齐方式
属性名
1. align-items: 当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
2. align-self : 单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
四 、修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名：flex-direction
属性值
五 、弹性伸缩比
属性名：flex
作用：控制弹性盒子的主轴方向的尺寸
属性值：整数数字，表示占用父级剩余尺寸的份数
六 、弹性盒子换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示
属性名： flex-wrap
属性值：
1.wrap ：换行
2.nowrap ：不换行（默认）
七 、行对齐方式
属性名：align-content
属性值：
- 感谢你赐予我前进的力量
-
微信 
支付宝
