1.1 web与html基本介绍
1 web：world wide web缩写，为全球广域网，俗称 WWW。
2 web 可以理解为当前的一种互联网。网站服务。
3 网站由多个网页组合后形成一种服务。
4 web 前端就是来负责一个网站当中前台网页里的内容。
5 网页就是由前端工程师使用 HTML 语言编写而成的一种文件，它里面会包含 文字 图片 超链接 声音 视频......（ 网页本质就是一个 html 文件 ）
1.2 HTML基本介绍（HyperText markup language 超文本标记语言，超意味着表达的内容不仅仅只是文字 ）html5
1.3 HTML网页骨架
1 网页是我们通过 HTML 语言来书写。
2 因为我们需要使用 HTML 语言来书写网页，所以我们要有相应的书写代码工具。 ( Hbuilder )
3 在我们使用 HTML 语言去书写网页的过程我们会发现有一些结构是默认必须存在的， 这个结构我们就叫做 网页(html)骨架
️ DocType html : 向浏览器声明当前的文档是 Html 类型。 ️ html ： 它是网页当中最大的一个标签，我们称之为根标签 <html>开始 </html>结束 ️ head : 网页头的部，它里面的内容是写给浏览器看的。 ️ meta : 如果有 charset 那就表示在设置当前网页的显示编码 ️ title： 网页的标题，它里面的内容会在浏览器的标签页上显示 ️ body： 网页主体，它里面的内容会显示在浏览器的空白区域内。
1.4 Hbuilder工具使用
一、设置主题（工具--视觉主题设置）
二、设置字体【若用电脑中不存在的字体，需要先安装】
三、安装字体
1.5 HTML语法和标签基本介绍
一、HTML 标签：就是 HTML 语言的发明者人为定义好的一些"单词"，它就相当于我们汉语中的字。
二、语法：用来定义这些 "字" 应该如何去解析或者书写的规则。
三、HTML 标签中的常见标签及基本语法
1．我们人为的将 HTML 标签分为单标签 和 双标签 二种
<标签名称> [在英文输入法下输入]
<标签名/>
2．常见的标签：
（1）标题标签 :在 html 当中人为定义了六种标题分别 h1-h6,它们都是双标签。在一个网 页当中，我们只允许出现一个 h1。
（2）段落标签：p 双标签
（3）换行标签： br 单标签 手动换行无用
（4）空格： 敲几个都只显示一个空格
注释：选中内容 contrl+？ 或直接敲出来<!- -内容- -> 整体表示一个空格 三个空格表示基本是一个汉子
3．标签书写语法：在 HTML 当中允许多个标签互相嵌套使用，但是不允许交叉嵌套。
1.6 图片标签
<img src="地址" /> <img />
注意：
1 img 是一个单标签，作用是可在网页中插入图片。
2 src 是 img 标签的属性，它里面的值称之为属性值，具体用来表示想要加载的图片存在哪里。
3 标签的身上可以有属性，属性名与标签名之间用空格隔开。
4 属性值与属性名之间用 单等号 连接
5 一个标签的身上可以有多个属性，之间都用空格隔开。
二、图片常见的属性
1．Src 设置图片所在位置
2．Alt 当图片加载失败时会显示它里面的文字
3．Width宽度/height高度 分别用来设置图片宽和 高，如果只设置了宽度或者高度，那么另外一边会自动缩放。
4．Title 当鼠标悬停在图片上的时候会显示它里面的文字
1.7链接标签
一、语法
<a href="目标地址"> </a>内容；目标地址 http://baidu.com
二、作用 当前页跳转
可以实现在当前页面向新页面进行跳转的操作
三、属性
1．Target 这个属性可以设置新页面在哪个窗口打开，当值为_blank 的时候可以在新窗口打开。打开新的网页
2．Href 的属性值设置为 # 的时候，可以设置为空链接，它的作用就是当用户点的时候不会发生跳转。
2.1 路径
路径可以看做在程序代码中用来查找某个具体的资源所 "走"过的路。例如：C:/Users/Administrator/Desktop/_book\img\2.png.
一、绝对路径
绝 对 路 径 一 般 是 以 盘 符 为 起 点 来 进 行 查 找 ， 或 者 就 是 一 个 绝 对 URL 地 址 。https://www.baidu.com/img/bd_logo1.png ，但是在实际的工作中，我们不建议大家使用绝对路径。
二、相对路径
相对路径就是相对某一个已知的文件为起点进行资源的查找。
2.2相对路径用法
路径是一个通用的存在，我们当以查找图片为例来讲解路径的使用。在实际工作中 相对路径使用的频率是最高的。我们人为的将相对路径分为三种：同级路径、下级路径、上级路径。(以查找图片为例的含义就是我们要在一个 HTML网页中插入一张 HTML文件之外的图片，同时采用的是相对路径，所以这里的相对起点就是 HTML网页)
1. 同级路径：同级指的就是 HTML 网页和目标图片在同一级目录里。对于同级路径的使用，我们只需要在 src 中写入目标图片的名称即可。
2. 下级路径：下级指的就是图片在 html 文件的下级目录中。此时我们需要使用一个 / 来向下进行穿透查找。（***下的***）
3. 上级路径： 图片在 html 文件的上级目录里，此时我们需要使用 ../ 来向上回退进行查找。
注：
01 上述的路径规则虽是以查找图片为例，但总结出的规律适用于其它类型资源的查找。
02 / 表示向下级查找，可以无限级穿透。 ../ 表示向上级返回，同样可以无限级返回。
2.3 表单基本介绍
表单是一种在互联网上用于收集用户信息的一种结构，在HTML 当中事先定义好一个标签来完成这件事。标签名称叫 form ，它是一个双标签,我们称之为表单域。 <form action="" method="">
eg: 用户名:<input type="text"/> <input type="submit"/>
注：
01 form 标签就是 HTML 当中定义好的一个用来表示整个表单结构的双标签，我们称之为表单域。
02 form 默认就相当于一张"白纸"，如果想让它收集用户的相关信息，HTML 里又准备了很多的表单标签。这些标签里 使用最多的一个叫 input,type是input的属性
03 action 属性值表示将当前表单中的数据提交到哪些。
04 method 属性值表示以 什么样试来提交当前表单中的数据。最常见的是get、post 。其中 get 方式是指将数据在 URL 中进行提交，这种方式是明文，所以相对不安全。而 POST 方式就是指将数据写在 HTTP 请求的 请求体当中( )。
2.4常见的表单元素
From 标签只负责定义具体的表单整体，它里面如果想要收集用户数据，就必须再有一些能够让用户进行输入填写的模块，此时 HTML 当中就定义许多的 表单标签 来让用户完成输入。最常见的表单标签就是 Input ，因为标签名称都叫 input ，所以 HTML 当中就设置通过 type 属性来进行区分。
01 文本输入框：<input type="text"/>
02 密码输入框: <input type="password"/>
03 提交按钮：<input type="submit"/>
04 单选框： <input type="radio"/>
eg:<input type="radio" name="xingming"/> 男 <input type="radio" name="xingming"/>女
<input type="radio" name="xingming" checked/>女(checked系统会默认选女)
05 复选框: <input type="checkbox"/>
eg:<input type="radio"/>吃饭 <input type="radio"/>学习
06 文本域: <textarea rows="行数" cols="列数"> </textarea>
07 下拉框：
<select>
<option value="">选项1 </option>
...........
</select>
08 重置按钮： <input type="reset"/>
09 普通按钮: <input type="button" value="按钮" />
2.5表单元素注意细节
1 name 属性：form 表单通过不同的表单元素来收集数据，在这个过程中很多的表单元素名称都叫 input ,此时如果直接将这些数据提交到后台，就会出现这些数据无法区分的问题，此时为了分别哪个数属于什么样的表单项。我们就人为的在 Input 身上设置 name 属性。这样一来数据到达后端之后就会变成以下格式： username="syy" pwd="123" gender="男"....
2 value: 它的作用就是定义某些表单元素的默认显示内容（ 文本输入框、提交按钮、重置按钮、普通按钮 ）
3 checked: 这是一个属性并且它的属性值就等于这个属性名。用来设置单选和复选框中的默认被选中的某些。
4 selected：这也是一个属性值等于属性名的属性，添加在下拉选项身上实现某个选项被默认选中。
2.6 CSS基本介绍
一、web 标准，规范网页书写的要求，由 W3C 组织制定，即网页的 结构、样式、行为 三者相分离。
二、名词解释
1．结构：就是通过 HTML 标签搭建的网页的结构。
2．样式：就是通过 CSS 对当前的网页结构进行修饰和美化
3．行为：通过 JS 让网页可以理解用户的一些操作。从而用户与网页之间产生交互。
2.7 CSS基本使用
一、定义：Css 在国内被称之为级联样式表、层叠样式表、样式表，作用是修饰当前网页中的 HTML 元素。
二、基本使用步骤
1．CSS 与 HTML 可以看做是二门 互相独立的语言， 此时如果想用 CSS 来操作 HTML 那么就需要先将二者建立关系。
2．在 HTML 当中就准备了一个叫 style 的标签( 它是一个双标签 )，在这个标签对之间就可以用来书写我们的 CSS 代码。常见的存放位置可以是 head 标签里 title 标签下。
3．通过 CSS 的选择器找到我们想要操作的元素然给它设置样式( 写在 style 标签之中)
2.8体验CSS
1. 常见的 CSS 元素属性：width 定义元素宽度单位是 px ， height 定义高度，background-color设置背景颜色。color设置文字颜色
p{
width:200px;
heigh:200px;
background-color:green;
}
2. CSS 代码书写的固定语法: 选择器{ CSS 代码}
3. 建议大家在开发阶段将 CSS 样式分行写，且每行的结尾用 ; 结束。
2.9 CSS选择器
一、定义
CSS 选择器即 CSS 中已经定义好的用来选中某些元素的固定语法。它的作用就是选中我们想要设置样式的元素。
二、CSS 选择器的分类
在 CSS 中有很多种选择器，我们人为的分成二大类： 简单选择器 + 复合选择器。
三、简单选择器：
1．标签名选择器：通过具体的 HTML 标签名称来选择元素。【会将当前网页中所有叫该名字的标签都选中】
2．类名选择器：通过标签类名来选择元素
3．Id 选择器：通过 id 名称选择元素。
2.10类名选择器
一、为什么需要类名选择器:一个完整的网页需要很多标签组合在一起进行编写实现，因为 HTML 标签的种类有限，所以同名的一个标签有可以会在一个网页中出现多次。 此时如果想对这些同名的标签分别设置不相同的样式。那么直接使用标签名选择器就没有办法实现。这种情况下我们就可以使用类名选择器。
二、类名选择器的基本使用步骤
1．定义 HTML 网页结构，然后在我们想选中的元素身上设置 class 属性。
2．将我们想要一起选中的元素们 身上设置相同的 class 属性值( 类名)
3．此时我们只需要在 style 标签中按着固定的语法来调用我们的类名: .类名 eg:.aa
2.11 Id选择器
一、为什么需要 id 选择器
如果我们只想从一堆元素当中选中其中的某一个元素，那么就可以使用 id 选择器。这个 id 就和人的身份证号是一样的。
二、Id 选择器使用
1．在我们想要选中的元素身上设置一个 id 属性。
2．给这个 id 属性设置一个值，我称为 id 名。
3．在 style 当中通过固定的语法来进行调用： #id 名{} eg #aa{}
4．注：要求在一个网页当中不能出现同名的 id 值【虽然有效果但也不能这么做】
2.12简单选择器总结
1. 标签名选择器和类名选择器一般一次可选中多个元素，id 名选择器一次只能选中一个元素。
2. 一个标签的身上可以既具有类名又具有 id 名，且这二个属性值是可以相同的。
3. 允许一个标签的身上同时设置多个类名，要求多个类名之间用空格隔开。
4. 关于 id 选择器要求一个页面当中同一个 id 名称只能出现一次。
2.13 id名与类名命名规则
1. 名称不能是纯数字或者以数字开头( 但是我们经常会以数字结尾)
2. 名称不能使用中文
3. 名称不能以特殊字符开头或包含特殊字符（但是可以出现-_）
4. 起名字时要做到见名知意
3.1元素展示类型
在 HTML 当中本身定义了很多的元素，这些元素默认在网页上展示的时候会存在自已默认的状态，例如有些元素默认情况下宽高属性不起作用，有些元素默认情况下都独占一行显示。 这种现象我们就称之为元素展示类型，为了记忆我们人为的将元素展示类型分为三种：块元素、行内元素、行内块元素。
1. 块元素：当同时存在多个块元素的时候，每个块元素都会独占一行显示，且默认情况下它的宽高属性可以起作用。
2. 行内元素：当同时存在多个行内元素的时候，这些元素都会显示在一行，如果一行放不下自动折行。默认情况下它的宽高属性不起作用
3. 行内块元素：当同时存多个行内块元素的时候，这些元素会显示在一行，默认情况下它的宽高属性起作用。
4. 注：不需要去死记哪些元素是行内，哪些是块，哪些是行内快
3.2布局标签补充
1. div 标签，是 HTML 当中定义好的一个双标签( DIV+CSS )。我们人为的认为它是一个体积最大的标签。 （里面可放很多的其它标签）（块元素）
2. span 标签，它也是一个双标签，主要用来放文字，我们人为的认为这体积很小。 （行内元素）
3. 段落标签里不能包裹标题，因为浏览器不能正常解析。
3.3元素展示类型转换
在我们进行网页布局过程中往往会遇到一些"特殊的模块"，对于这种模块来说我们之前的一些常见标签在使用的时候就会显示 "语义" 有些不对应，所以我们可以使用相应的标签进行强制的类型转换，从而让它可以展示成 设计稿 上的样子。在 CSS 当中有一个 display 属性，可以设置不同的值来完成元素类型的转换。
1. 转成块元素：display:block;
2. 转成行内块：display:inline-block
3. 转成行内元素：display:inline; none
3.4简单选择器权重
权重：我们就可以理解为是不同类型的 CSS 选择器在对同一个元素进行样式设置的时候，出现的控制能力不同的现象。
对于简单选择器来说 ： id 选择器 》 类名选择器 》 标签名选择器
3.5 CSS特性
1. 在权重相同的情况下，同一个元素后写的 CSS 样式会覆盖先写的 CSS 样式。【覆盖性】
2. CSS 的定义存在继承的特点，子元素会继承父元素的一些样式【继承性】
(1) 不是所有的 CSS 属性都可以被继承。
(2) 不是所有类型的元素都会去继承祖先元素的样式( 继承一般发生在块元素的身上)
(3) 继承指的就是子元素可以使用祖先元素的一些样式
3. 不同选择器对同一个元素的 CSS 控制能力存在着强弱。【优先级】
3.6复合选择器
一、为什么需要复合选择器
在实际的网页制做过程中往往会出现很多结构层级嵌套很深的现象， 而这种结构模块又很多，大家使用的标签名称又一样。所以此时我们就可以通过复合选择器，将这些简单选择器进行组合。从而让我们选择元素变得简单。
二、常见的复合选择器：
1．后代选择器：这种选择器就是以某一个元素为起点，将它做为祖先然后不停的向下进行穿透查找，去选择它下面的后代元素。 （eg:div span{};div为祖先 查找后代中标签为span的元素）
起点元素 后代元素 .....{ 设置样式}
注： 01 后代选择器当中的每个部分都可以采用任意的简单选择器代替。 02 不同的部分之间要用空格隔开。 03 ...... 就表示可以不停的向下层查找。
2．并列选择器：就是将多个选择器使用 逗号 （英文,）进行连接，表示同时选中这些元素，然后设置相同的样式。其中每个部分的选择器都可以由任意类型的选择器构成。
3.7选择器权重总结
1 简单选择器: id 名 》 class 名 》 element 名
2 复合选择器: 需要在大家明白的就是复合选择器由多个其它类型选择器组合而成，为了方便比较，我们人为的给每个简单选择器都定义了一个数值，分别是： Id(100) 类名class(10) 标签名ele(1),这三个数值我们也称之为权重值，有了它们之后只需要将当前选择器中出现的权重值进行相加求，最终的结果就是该选择器的权重。数值越大的权重越大
3 切记权重比的就是不同选择器对同一个元素的控制力比较（ 区别继承的影响 ）
3.8 CSS文件存放位置
CSS 代码可以被我们放在很多的地方，习惯性的有三种写法：内嵌 CSS 、外链 CSS、行内CSS 。
1. 内嵌 CSS 指的就是将 CSS 代码写在 html 网页中。
2. 外链 CSS 指的就是就将 CSS 代码写在外部的独立 CSS 文件中。
3. 行内 CSS 指的就是将 CSS 代码写在具体的 HTML 标签身上 。
注：
01 依据浏览器渲染页面原理，我们选将 CSS 代码写在 HTML 文件靠前的位置。
02 使用外链 CSS 写法的时候，外部独立的 CSS 文件当中不需要写 style 标签，同时还需通过 link 标签将某个 CSS 文件引入到具体的 HTML 文件当中。 rel 属性对不要省略 】 【<link href="目录 CSS 文件路径" type="text/css" rel="stylesheet" />
03 对于上述的三种 CSS 文件存放位置来说，行内 CSS 的权重是最高，但是外链与内嵌并不存在谁一定大于谁的现象( 权重 )，它的控制能力完全取决于各自所使用的选择器权重。
04 如果想要直接将某一个样式的权提至最高，我们只需要在该句 CSS 代码的最后设置!important .
P{ color:pink!important; }
3.9音频标签
<audio autoplay controls loop>
降级的说明性文字
<source src="格式 1 路径" />
.......
</audio>
注：
01 audio 是一个双标签，用来定义一个声音资源模块。
02 autoplay 用来设置自动播放（有的浏览器都不支持）。
03 controls 调用当前设备的播放控制。
04 loop 设置当前音频循环播放。
05 默认 audio 里的文字不显示，只有在当前浏览器不支持这个标签的时候会显示文字。
视频标签：video，特点基本与音频标签相同
3.10常见的文字样式
1. 行高： line-height, 当我们将行高的大小设置成当前元素的高度时，可以实现单行文本在当前元素中垂直方向居中显示的效果。
2. 水平对齐方式：text-align: left | center | right ，分别表示设置文字在当前盒子当中水平的对齐。
3. 字体大小： font-size ,单位是 px ，一般情况下浏览器都会有一个最小的显示字体。
4. 字体粗细： font-weight,可以设置关键字，或者数值( 100-900 ). 关键字有 normal 表示正常，还有 bold 表示加粗。
5. 字体名称： font-family ，一般常用的就是 "微软雅黑""黑体"
6. 字体颜色： color ，可以设置颜色单词，还可以是十六进制的数字。
4.1文字阴影
一、字体样缩写
Font: 文字粗细 大小/行高 字体名称;
Font: bold 20px/200px '微软雅黑';
二、CSS3 中的文字阴影
Text-shadow: x y r color;
Text-shadow: 0px 0px 0px red;
注：
01 x 表示阴影在水平方向的偏移量，可以设置负值，正负不表示大小，只表示方向。水平向右为正，向左为负，单位是px
02 y 表示阴影在垂直方向的偏移量，垂直向上为负，向下为正
03 r 表示阴影的模糊程度，数值越大阴影越模糊 ，单位px
04 color 表示阴影的颜色
05 C3 允许一段文字有多层阴影，多层之间用逗号隔开，每一层内，不同参数之间用空格隔开。
4.2过渡属性
过渡属性的作用就是在元素的默认样式与最终样式变化之间产生一个过程。在 C3 中新增了一个属性叫transition
Transition: all 1s linear 0s;
注：
01 第一个参数的作用是设置元素身上的哪些属性产生过渡，一般用 all 表示所有的属性都过渡。
02 第二个参数的作用设置过渡需要时长，单位是 s 不要省略
03 第三个参数的作用设置过渡的动画形式，linear 表示匀速
04 第四个参数设置当前过渡等待多久之后才会执行( 延时 )。即使为 0 ，单位也不能省。
05 :hover 选择某个元素被鼠标移上时的状态。
06 transition 这个属性既可以添加在元素默认状态，也可以添加在鼠标移上状态，区别就是第二种做法在鼠标离开的时候不会在有过渡变化。
:hover就是一个选择器
div:hover选中的就是div元素被鼠标移上时的状态
网友评论