一、HTML介绍–（结构）
二、关键单词讲解
1、Doctype–告诉浏览器，我们要使用什么规范
2、关键单词讲解
3、各种标签符号
4、在网页中插入图片
5、对图片的描述
6、链接标签–
内容介绍
锚链接
功能性链接
7、行内元素和块元素
8、列表（ul,li,ol…）
9、表格table， 行tr, 列td，，，border=“1px”–边框（写在table里面）
跨行跨列
10、音频和视频
src :资源路径
controls :控制条
autoplay :自动播放
<video src=*"../resources/video/ 片头。mp4" controls autoplay></video>
<audio src="../resources/ audio/萤火虫和你. mp3" controls autoplay>< /audio>
11、页面结构分析
12、iframe内联框架
13、表单结构
补充：action–表单提交的位置，可以是网站，也可以是一个请求处理地址
method–方法，post（加密提交），，get（不加密）提交方式
input–文本输入框–input type=“。。。” name=“。。。”
属性
输入性别选择
多选框，，框内加checked–默认该选项
按钮标签
下拉框，，框内加selected–默认该选项
文本域
文件域--input type="file" name ="files"
<input type="file" name="files">
<input type="button" value="" 上传" name="upload">
验证
注意：
（1）13的内容都需要对其命名，，name=“”
（2）在表单中加上readonly–即该内容为只读模式，，加上disabled–即为禁用模式，，加上hidden–将会隐藏该文本框，，
（3）
<!--增强鼠标可用性- ->，，增加后点击鼠标可以锁定文本框
<label for='"'mark"> 你点我试试 </label>
<input type="text" id="mark">，，此处的ID为鼠标点击后光标所指位置
（4）表单验证
placeholder="请输入用户名"--一个提示信息
（5）表单验证 ： required–输入不能为空，，直接使用单词，无语法
表单验证： 正则表达式
三、CSS讲解–（表现）–Cascading Style Sheet层叠级联样式表
**1、**字体，颜色，边距，网页浮动、宽度，高度，网页定位，背景定位
2、CSS发展史
3、标签在head里面写
4、CSS的优势
5、CSS的三种导入方式
（1）内部样式
<style>
h1{
color: bisque;
}
</style>
（2）外部样式
1.链接式
<link rel="stylesheet" href="1、3种导入方式.html">
2.导入式
<style>
@import url("css/style.css");
</style>
（3）行内元素
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
6、标签选择器
（1）类选择器
（2）ID选择器
（3）层次选择器
注意：1.相邻弟选择器：只能选一个，向下选
2.通用兄弟选择器，是指当前选中元素的向下的所有兄弟元素
（4）结构伪类选择器
<!--避免使用，class，id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: aquamarine;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: bisque;
}
/*选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素中的第一个，并且是当前元素才有效！（即当前标签），顺序
*/
/*法一*/
/*p:nth-child(1){*/
/* background: burlywood;*/
/*}*/
/*法二，选中父元素下的p元素的第二个，类型*/
p:nth-of-type(2){
background: red;
}
演示伪类：出现类似于动画的效果，鼠标移向1233421时，颜色会变化
/*演示伪类*/
。。。
a:hover{
background: aqua;
}
</style>
。。。
<body>
<a href="">1233421</a> /*演示伪类*/
8.美化网页
（1）字体样式
（2）文本样式
（3）超链接伪类
（4）列表样式
（5）背景颜色范围
（6）背景色
（7）盒子模型
（8.1）边框
（8.2）边框2
（9.1）阴影
（9.2）居中
（10）浮动
9、对比
- display–方向不可以控制
- float–浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
10、父级边框塌陷的问题
1、clear：right；–右侧不允许有浮动元素
clear：left；–左侧不允许有浮动元素
clear：both；–两侧都不允许有浮动元素
clear：none；–什么都没有
2、解决方案
（1）增加父级元素的高度
#father {
border:1px #000 solid;
height:800px;
}
(2）增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
（3）overflow–在父级元素中增加一个 overflow：hidden；
（4）父类添加一个伪类：after—(推荐）
#father:after{
content: '';
display: block;
clear: both;
}
11、定位
相对定位–相对于自己原来的位置，进行指定的偏移，相对定位的话，任然在标准文档流中，原来的位置会被保留
#first{ position:relative;/*相对定位，shangxiazuo*/ top：-20px;/*向上移动20*/ left:20px; bottom: -10px; right: 20px;绝对定位–上下左右—position:absolute;
（1）没有父级元素定位的前提下，相对于浏览器定位
（2）假设父级元素存在定位，我们通常会相对于父级元素进行偏移
（3）在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，不在标准文档流中，原来的位置不会被保留固定定位 fixed
body{ height: 1000px; } div:nth-of-type(1){ /*绝对定位*/ /*指定的第几个盒子*/ width: 200px; height: 200px; background: red; position: absolute; right: 0; left: 0; } div:nth-of-type(2){ /*固定定位*/ /*指定的第几个盒子*/ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; left: 0; }
- z-index–背景透明–默认是0，最高无限
（1）z-index:0;
(2)opacity:0.5;–背景透明度
(3)filter:Alpha(opacity=50;)