好用的组件框架Bootstrop:https://v3.bootcss.com/
前端开源项目 CDN 加速服务器:http://www.bootcdn.cn/
一、HTML结构
- 文档类型doctype
- html5文档类型 <!doctype html>
- 网页头部head
- 标题
- 样式
- javascript
- 网页主体body（按内容分为以下部分）
- 页头（一般是放网站logo和导航链接）
- 主体（就是网页内容部分）
- 页尾（版权申明、使用协议等，也可放一些友情链接）
<!DOCTYPE html>
<html>
<head>
<!--meta：辅助标签 单标记/空标记 -->
<meta charset="UTF-8">
<title>标题</title>
<!--link：引入外部CSS样式 -->
<link href="" rel="stylesheet">
<!--使用内部CSS样式 -->
<style type="text/css">
</style>
<!--使用js -->
<script src=""></script>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
二、标签
-
什么是HTML
超文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言，不需要编译，它有一套完整的标签 用来描述一个网页。
1、标签类型
######1.1、行内元素
特征：设置不上宽高，不独占一行，默认横向排列，当一排排列不完的时候,默认另起一排,它的大小由它的内容来决定.
1.2、行内块元素： img
特征：即具有行内元素的特征，又具有块元素的特征
1.3、块元素
特征：可以设置宽高，独占一行，一般作为容器
元素类型转换
display: block;转成块元素
display:inline;转成行内元素
display:inline-block;转成行内块元素
对于块元素而言，如果宽度没有指定，那么它的宽度等于父元素的宽度；
如果高度没有指定，那么他的高度等于子元素的高度（宽度不给由父元素指定，高度不给由子元素指定）
三、常用html标签
1、双标签
- 标题系列标签：h1~h6
- 作用：把页面上的文字加上标题的语义
- 段落标签：p
- 作用：给页面的上一段文字加上段落的语义
- 文本格式化标签
- strong:加粗 语义：加强语气
- ins:下划线
- em:倾斜
- del:删除线
- 列表
- ul：显示一列没有排列顺序的数据
- ol：显示一段有顺序的数据
- li：用于存放列表内容，一般与ul、ol配合使用
- a：超链接
- 作用：跳转页面
- 属性
- href：点击链接跳转目标地址
- target：设置连接的跳转方式：
- _blank:保留原始页面，再进行跳转(在新窗口中打开新页面)
- _self:在当前页面进行跳转
- div
- 无语义，一般用做容器
- span
- 无语义，一般用于设置字体样式
2、单标签
-
img
- 作用：在页面显示一张图片。
- src：显示图片的路径
- 相对路径
- 绝对路径
-
换行标签：br
- 作用：换行
-
属性
- 写在标签中的字符，一般包含属性值
- 格式：<标签名 属性名="属性值">
- 常用公共属性（专有属性在标签中讲解）
- id
- class
- title
- name
-
meta：辅助标签 单标记/空标记
语义化标签：相应的位置使用合适的标签。
四、表格与表单
table与form作用示意图
1、table
- 格式：<table></table>
- 作用：用来将数据以表格形式显示出来
- 配套标签
- thead 只能有一个
- tbody 可以有多个
- tr 定义表格行
- td 定义表格单元
- th 定义表头
- colspan 设定单元格应该横跨的列数
- rowspan 设定单元格应该横跨的行数
- tr 定义表格行
2、表单form
-
格式：<form></form>
-
作用：用来收集用户的信息，将来提交到服务器
-
配套标签：
-
input
-
type
-
text:文本框
-
password：密码框
-
radio:单选框
-
checkbox:多选框
如果想要多个radio或checkbox组成一个选择集合，那么必须给每个radio以及checkbox都设置相同的name属性
设定选中效果：checked属性 -
hidden:隐藏域
-
button:按钮
-
reset:重置
-
image:图片提交
-
file：文件提交
-
submit是提交按钮 起到提交信息的作用
-
html5新增
-
date 日期控件
-
number
-
email
-
-
value
-
-
select
- option
- 设定选中效果：selected属性
-
textarea 多行文本框
-
button 按钮
-
label 设置表单元素的标题
-
-
表单元素属性
- type
- name
- checked
- selected
- value
<form method="post" action=""> <input type="text" placeholder="Username" name="uname" > <input type="password" placeholder="Password" name="upwd" > </form>
五、css样式
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言
1、样式编写位置
- 内联样式
- style属性
- 内部样式
- style标签
- 外部样式
- link标签
- href: css文件路径
- rel: stylesheet
- link标签
2、选择器
CSS选择器用于选择你想要的元素,并设置相应样式
格式: 选择器{}
-
id选择器
-
class选择器
-
标签选择器
-
属性选择器
-
伪类选择器
-
伪元素选择器
-
复合选择器
#box{} .box{} a{} [type=text]{} :hover{} ::before{} div,p{}
3、选择器权重
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ovmg7RDD-1572948030092)(D:\学习\千锋 python\学习\学习笔记_自己\html\img\quanzhong.png)]
4、css属性与值
格式: 选择器{属性:值}
5、字体font
-
font-size 字体大小
-
常用单位：
%：百分比
px: 像素
em:1em=父元素的font-size
rem:1rem=根元素的font-size
-
font-weight：字粗
- normal
- bold
- bolder
- 100-900
-
font-family
-
font-style
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
6、文本text
- 水平对齐:text-align
- 首行缩进:text-indent
- 字符转换:text-transform
- none 默认不转换
- uppercase 所有字符转成大写
- lowercase 所有字符转成小写
- capitalize 所有单词首字母大写
- 文本装饰：text-decoration 下划线
- none
- underline
7、背景background
- background-color 背景色
- 16进制
- rgb()
- rgba()
- background-image 背景图片
- url(path)
- background-repeat
- repeat 水平垂直平铺(默认)
- no-repeat 不平铺
- repeat-x 水平平铺
- repeat-y 垂直平铺
- background-position
- 水平:left,center,right
- 垂直;top,center,bottom
六、盒模型
页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间。这个盒子由内容（content）、内边距（padding）、边框（border）和外边界（margin）组成
1、盒模型组成部分
2、标准盒模型
3、浏览器调试工具中的盒模型
-
宽高: width/height
-
边框: border
-
border-width:边框宽度
-
border-style:边框类型
- solid 实线
- dashed 虚线
- dotted 点线
- double 双线(宽度为border-width的大小,超3px才有效果)
-
border-color:边框颜色
-
border-radius: 边框圆角
/*border:border-width border-style border-color*/ .box{border:1px solid #ddd;} /*可单独设置某一方向边框*/ .box{border-left:1px dotted #f00;}
-
-
内边距: padding
作用:设定内容到元素的边缘的间距,四个方向,值为整数
- padding:10px; 所有四个填充都是 10px
- padding:10px 5px; 上下填充是 10px，右左填充是 5px
- padding:10px 5px 15px; 上10px， 右左填充是5px，下15px
- padding:10px 5px 15px 20px; 顺时针原则:上 右 下 左
-
外边距: margin
作用:用于设置元素之间的间距,值可以为负数,其他用法同padding
- 垂直外边距合并
- 内外容器垂直边距塌陷
七、溢出处理
-
容器溢出overflow
- visible 溢出可见(默认)
- hidden 溢出隐藏
- scroll 显示滚动条
- auto 当内容超出容器时才显示滚动条
-
文本溢出text-overflow
-
clip 无省略号
-
ellipsis 省略号
一般配合width和overflow:hidden和white-space:nowrap一块使用
-
八、浮动float
块元素默认独占一行,通过设置浮动让其脱离这种限制
float:left;左浮动
float:right;右浮动
特征：添加浮动的元素，它会脱离原本的文档（不占据原本默认的位置）
高度塌陷发生的契机：
当父元素中的子元素全部进行浮动的时候
如何解决：
1、可以给父元素添加：overflow:hidden;
2、清除浮动 clear:both
浏览器解析的bug
在给处于顶部的子元素添加margin-top的时候，浏览器会把
margin-top解析到它的父元素身上
解决：
1、给父元素添加overflow:hidden;
2、给父元素进行设置padding-top:的值
九、选择器：
1、群组选择器
用逗号隔开：选择器1,选择器2,…选择器n{
}
特点：选择器与选择器之间使用逗号进行链接，它的权重等于自身的权重
2、包含选择器
选择器1 选择器2{
}
特点：一定具有包含关系，选择器与选择器之间使用空格隔开，它的权重等于它们的权重之和
3、通配符
*{}
特点：“*”代表选中所有的标签
css属性：
text-decoration:none; 去掉下划线
text-decoration:line-through; 添加删除线
color:字体颜色
border-color:边框的颜色
border-buttom:底部边框
border-top:顶部边框
border-left:左部边框
border-right:右部边框
<link rel="stylesheet" type="text/css" href="../css/work.css"/>
作用：链接外部的css文件
href:链接的css文件的链接地址
十、列表
1、无序列表
语法：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
特点：每一项前面默认会有图标，并且都是对齐的。
使用相当频繁
常用css属性
list-style: none; 去除默认的样式
list-style-position: insert; 更改图标的位置，默认情况下图标的位置在外围
list-style-type: circle; 更改图标的样式
2、有序列表
语法：
<ol type="">
<li></li>
<li></li>
<li></li>
</ol>
type:的取值：a A T i 1,type的默认值为1
3、自定义列表
语法：
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
电商网站使用较多
十一、图片整合
background: #333 url(img/a.jpg) no-repeat left top;
参数一： 背景颜色 background-color
参数二：背景图片的链接地址 background-imge
参数三：背景图片的平铺方式 background-repeat 取值默认为repate
平铺，no-repeat 不平铺， repeat-x水平平铺，repeat-y垂直平铺
参数四：背景图片水平方向的位置 background-position-x
参数五：背景图片垂直方向的位置 background-position-y
取值：top bottom center px %
background-size:背景图片大小
取值： 使用px或者 %的时候取值有两个：参数1：图片宽度 参数2：图片高度
cover:覆盖：图片刚好覆盖容器，这时图片大于等于容器
contain:包裹 容器刚好包裹图片，这时容器大于等于图片
注意：无论使用cover或者contain容器不发生变化，改变的是图片
十二、定位
1、相对定位 position:relative;
特定：参照物是自己原本的位置，不脱离文档流【仍然占据自己原本的位置】
一般作为包含快【容器】
2、固定定位 position:fixed;
特点：参照物是窗口(即html)，不占据原本的位置，跟父元素无关
3、绝对定位 position:absolute;
特点：参照物是具有定位属性的父元素，脱离文档流【不占据自己原本的位置】，若父元素没有定位属性，则参照物为html。
三种定位的定位属性：
left right top bottom,px
z-index:层叠方式
若需要更改元素默认的层叠方式的时候，可以使用z-index，但是在使用z-index的时候，需要先给元素添加定位属性【换句话来说，z-index与position是一起连用的】
当z-index的取值越大，证明它越位于最前方，当取值为-1时，它位于最底层。
十三、锚链接
语法：
<h1 id="back"></h1> <a href="#back"></a>
注意：在使用锚链接的时候需要先定义锚点，定义锚点使用id，使用锚链接时，href属性值指向锚点
超链接与锚链接的区别：超链接是页面与页面之间的跳转，锚链接是页面内的跳转。
overflow: hidden;
把超出元素显示范围的部分隐藏
overflow: scroll;
显示滑动条【无论元素是否超出显示区域】
overflow: auto;
超出元素显示范围时自动添加滑动条
overflow-x: hidden;
隐藏横向的滑动条
overflow-y: hidden;
隐藏纵向的滑动条
十四、动画
语法：
animation:xuanzhuan 1s 2s 3 linear alternate both;
@keyframes xuanzhuan{
from{}
to{}
}
参数一：绑定在keyframes上名称【必须要】
参数二：完成动画所需要的时间，s/ms【必须要】
参数三：动画开始之前的延迟，s/ms【若不写默认为0】
参数四：动画执行的次数【若不写，默认1】
参数五：动画的运动曲线【若不写，默认ease】
参数六：动画是否轮流反向执行【若不写，默认normal】
参数七：是否保留动画结束之后的状态【若不写，默认不保留】
常用参数：参数一、二、四
