一、HTML5相关理论知识

1.什么是H5？

（1）H5是HTML第五个版本

（2）H5是一门技术的总称

2.H5能做什么？

（1）网页开发（2）桌面软件（3）小程序 公众号

（4）小游戏（5）后端相关的（6）APP—混合开发和原生开发

3.一个网页的组成部分有哪些？

（1）用HTML实现页面结构

（2）用CSS实现页面美化

（3）用JavaScript实现页面功能

4.什么是HTML？

HTML就是超文本标记语言

5.HTML的语法是什么？

（1）常规标记也叫双标签

<标记 属性="属性值"> </标记>

         */不能丢失

（2）单标记也叫空标记

<标记 属性="属性值"/>

/可以写可以不写

二、HTML标签

（1）文本标题

<H1></H1>---<H6></H6>

（2）段落

<p></p>

（3）加粗

<b></b>

<strong></strong>---有加粗和强调作用

（4）倾斜

<i></i>

<em></em>---有加粗和强调作用

（5）上标



（6）下标



（7）下划线

<u></u>

（8）删除线

<del></del>

<s></s>

（9）强制换行

<br></br>

（10）水平线

<hr></hr>

（11）列表

1.无序列表

<ul><li></li></ul>

默认符号是实心圆，如果想要改变，给ul添加属性 type

type="disc"——默认值

type="square"——方形

type="circle"——空心圆

type="none"——清楚符号

2.有序列表

<ol><li></li></ol>

默认的符号是数字1 2 3...想要改变符号样式，给ol添加属性type

type="1"——数字1

type="A"——大写A

type="a"——小写a

type="I"——大写罗马数字

type="i"——小写罗马数字

想要改变开始的位置，给ol添加start="数字"

<ol type="a" start="4"><li></li><ol>

3.自定义列表

<dl>

       <dt>相当于标题 提出的问题 什么是HTML?

              <dd>

                       这个区域是内容，回答上面的问题 HTML是超文本标记语言

              </dd>

        </dt>

</dl>

*在规范上规定dt只能有一个，dd可以有多个

（12）划分区域

<div></div>

（13）文本节点

<span></span>

（14）特殊字符

 （15）插入图片

<img src=""width="宽度" height="高度 title=""" alt="">

tittle="设置鼠标哦悬停上去之后的提示信息"

alt="设置图片丢失之后的信息"

*width和height属性单位可以不写，默认的单位是px像素

src书写目标图片的路径

1.绝对路径

<img src="D:\tt.jpg">

*不建议使用，由于是你电脑的D盘里的图片，因此只有在你的电脑操作可以看到图片，别人的电脑是看不到的。

2.相对路径

【1】当前文件和目标文件在同一目录

<img src="目标文件的名字.扩展名">

【2】当前文件和目标文件所在的文件夹在同一目录

<img src="目标文件所在的文件夹名字/目标文件的名字.扩展名">

【3】当前文件所在的文件夹和目标文件夹在同一目录

<img src="../目标文件的名字.扩展名">

*../后退一步 ../../后退两步 ../../../后退三步

（16）超链接a

<a href=""title=""target=""></a>

target="设置窗口的打开方式"

<a href=""target="-self"></a>

<a href=""target="-blank"></a>---新窗口打开

tittle="设置鼠标悬停上去之后的提示信息"

href路径

（1）绝对路径

<a href="D:\tt.jpg"></a>

*不推荐使用，与插入图片一样

（2）相对路径

【1】当前文件和目标文件在同一目录

<a href="目标文件的名字.扩展名"></a>

【2】当前文件和目标文件所在的文件夹在同一目录

<a href="目标文件所在的文件夹名字/目标文件的名字.扩展名"></a>

【3】当前文件所在的文件夹和目标文件夹在同一目录

<a href="../目标文件的名字.扩展名"></a>

*../后退一步 ../../后退两步 ../../../后退三步

（16）表单

<form>

           <input  type="" placeholder=""  name=""  value="">

</form>

*作用是用来收集数据的

第一步：创建一个表单

<form action="设置提交的目的地" method="设置提交方式"></form>

(1).method="get"

<form action="http://www.baidu.com" method="get"></form>

【1】默认值

【2】get是获取数据

【3】get在数据传送的时候，用户可以在地址栏上哦看见传递的过程

【4】get安全性比较低

【5】get传送的数据比较小

（2）.method="post"

<form action="http://www.baidu.com" method="post"></form>

【1】post是传递数据

【2】post在数据传送的时候，用户不可以在地址栏上看到传送过程

【3】post安全性比较高

【4】post传送的数据量较大

第二步：输入框

<input  type="" placeholder="书写提示信息"  name="必须填写，如果不写，那么数据传送的时候接收不到"  value="值">

type="类型"

（1）type="text"---文本框
（2）type="password"---密码框

（3）type="submit"---<button></button>---提交按钮

（4）type="button"---单纯的按钮

（5）type="reset"---重置按钮

value="值"

（1）type="text"---文本框

（2）type="password"---密码框

                  *给初始值

（3）type="submit"---提交按钮

（4）type="button"---单纯的按钮

（5）type="reset"---重置按钮

               *修改文本内容

三、css基础

1.什么是css？

css是层叠样式表

2.css能做什么？

css是用来修饰页面的

3.css的引入方式

（1）行内样式（内联样式 嵌入式样式）

<标签 style="width：200px；height：200px；"></标签>

（2）内部样式

【1】先在body里面创建想要修饰的对象<p></p>

【2】在head里面创建<style type="texy/css"></style>

【3】在style里面修饰过程

1.p{width：200px}

2.选择器（选择符）{属性；属性值}

（3）外部样式

【1】先在body里面创建想要修饰的对象<p></p>

【2】在外面新建一个css文件

【3】在css文件里面书写修饰过程

1.p{width：200px}

2.选择器（选择符）{属性；属性值}

【4】通过link或者import把html文件和css文件进行连接

1.<link href="" rel="stylesheet" type="text/css">

*link是HTML的语法

link在页面加加载的时候是HTML结构和css样式同时加载的

link是没有兼容问题

2.<style>@import url();</style>

*import 是css的语法书写

import是先加载HTMLA结构，之后在加载css，在网速比较慢的时候会出现闪屏

import是CSS2.1提出的，对于IE5以下不兼容

4.当修饰样式的时候，如果对于同一个标签设置了多次样式，可能会发生冲突，冲突之后的解析规则

（1）规则一：权重相同的时候，谁的CSS样式距离标签近就解析谁的（就近原则）

（2）规则二：权重不同的时候，权重高的覆盖权重低的

权重：行内样式权重值1000>id选择器>class选择器权重是10>类型选择器权重是1

5.css相关的选择器

（1）基本选择器

【1】类型选择器（标签选择器）

语法：div{} p{}

权重是1

【2】想要区分的时候，可以用class或者id

1.class选择器

语法：.box{}

class的属性值可以是多个 class="名字1 名字2"

命名规范：1.不能使用数字开头

                  2.不建议使用中文

                  3.符号可以-或者_，其他字符不可以使用

权重是10

（2）id选择器

语法：#box{}

*id的属性值只能是一个

命名规范：1.不能使用数字开头

                  2.不建议使用中文

                  3.符号可以-或者_，其他字符不可以使用

权重是100

（3）基本选择器

1.通配符

使用场景：想要所有的标签执行该样式

常用于*{margin：0；padding：0；}

清除所有标签自带的外间距和内间距

权重值0000

2.群组选择器

使用场景：想要简化代码

语法：某某1，某某2，某某3{}

这个整体是没有权重的说法，单独看是有的

（4）层次选择器

1.用于包含结构

【1】后代选择器（包含选择器）

语法：某某1 某某2{}

可以选择到某某1 里面的所有的某某2 （包括某某1 里的所有的子元素，就是儿子 孙子 重孙子...所有的子）

权重算和

【2】子选择器

语法：某某1>某某2 {}

可以选到某某1 里面的所有的儿子某某2

权重算和

2.用于并列结构

【1】相邻兄弟选择器

语法：某某1+某某2{}

选择到的是某某1后面紧挨着的某某2

权重算和

【2】通用兄弟选择器

语法：某某1~某某2{}

选择到的是某某1后面所有的某某2

权重算和

6.CSS相关属性

【1】文字大小 font-size

浏览器默认字号是16

谷歌浏览器最小解析的是12px

默认的时候1em=16px 

em相对单位相当于font-size的大小

【2】文颜色 color

【3】字体 font-family

【4】加粗设置

1.加粗

font-weight：bolder；

font-weight：bold；

fongt-weight：600-900；*可以不带单位

2.不加粗

fongt-weight：normal；

font-weight：400-500；常规字

font-weight：100-300；细一些

3.倾斜

倾斜：font-style：italic；

           font-style：oblique：

不倾斜：fongt-style：normal

4.文本水平对齐

text-align：left/right/center/justify；

text-align：jusify；只对多行可以实现2端对齐

text-align-last：justify；实现单行的时候也可以2端对其，如果是多行只是最后一行2端对齐

5.背景颜色

backgroud-color：red/#ffffff/rgb/rgba

取值颜色单词   

    rgb(red green blue) 0-255

    rgba(red green blue alpha): a=alpha

透明度0-1保留小数包括0和1 小数点前的零可简写 0.1 .1

        1不透明

        0透明

        六位十六进制

6.背景图

 background-image: url(middle.jpg路径)

*背景图不占位置

可视图范围由容器决定

图片大于盒子 部分

片小于盒子 多张

插入图片默认平铺

7.背景重复

background-repeat: no-repeat;

repeat 平铺;

no-repeat 不平铺

repeat-x 横向平铺

repeat-y 纵向平铺 

8.背景位置

background-position: 10px 10px;

background-position: top center;

取值==数字

 x水平 +向右 -向左

y垂直方向+向xia -向上

要注意顺序  默认左上角开始显示 

取值可为px 也可取%取值==单词 无需注意顺序相对于参照物的位置 可取关键词

x  left right center

 y  top bottom center

 background-position: top center;

 xy同可简写一个center

9.背景滚动固定

background-attachment: fixed ;

取值 默认scroll滚动

滚动屏幕容器背景一起上去fixed固定

滚动屏幕 容器中背景不会上去但容器都被滚上去图片也会消失 背景图属于盒子此时背景图参照物为浏览器

 background:yellow url()  no-pepeat 无需注意顺序

background: url(1.png)  no-repeat right,url(small.jpg) yellow repeat left ;

*多个背景图逗号链接，如需要颜色颜色放在最后一组，不可往前放

10.背景图尺寸大小

background-size: cover;

background-size: {x y};

取值：px或% 但一般不采用 因为会变形

 Cover==等比例放大，覆盖效果整个铺满会存在图片显示不全的效果 频率高

contain==包含效果 显示完整但会留白

11.背景图固定

background-attachment

取值 默认scroll滚动

滚动屏幕容器背景一起上去

fixed固定

滚动屏幕 容器中背景不会上去但容器都被滚上去图片也会消失 背景图属于盒子此时背景图参照物为浏览器左上角

视觉差 如果盒子过多每一个盒子都插入背景图片并且也添加了背景图片的滚动和固定属性，属性取值fixed背景图片都在左上角