HTML+CSS
一、网页
1.1、网页组成
网页是由: 文字,图片,输入框,按钮,视频,音频....元素组成的
总结：网页就是由HTML组成的
1.2、网页规范/web标准构成
1、结构标准：网页按照HTML的标准结构去写网页
2、表现标准：用来美化网页css
3、行为标准：用js来实现网页中的动作处理
二、为什么要遵循web标准
浏览器内核不同，他们渲染或者排版的模式就有些许差异，显示就会有差别。导致用户在不同的浏览器看到同一个页面是不同的效果。
三、HTML
HTML：Hyper Text Markup Language
是一种超文本标记语言
四、常用标签
4.1.格式化修饰标签（双标签）
设置文字颜色或者设置文字大小: <font></font>
设置文字是否加粗: <strong> </strong> 或者 <b> </b>
设置文字斜体显示: <em></em> 或者 <i> </i>
设置文字删除线效果: <del></del> 或者 <s></s>
设置文字下划线效果: <ins></ins> 或者 <u></u>
4.2. img-图片标签【多媒体标签-重点】
属性:
src:设置要显示的图片路径 <img src="1.jpg">.
width: 设置标签宽度.
height: 设置标签高度.
title: 鼠标悬停到图片上的文字提示.
alt: 当图片无法正常显示时候的文字提示.
4.3.a-超链接
属性:
target:设置目标页面打开方式(默认在当前页面中打开_self | _blank 新窗口中打开)
总结:
如果希望当前页面中所有超链接跳转页面的时候,都在新窗口中打开,那么只需要在head标签中设置 base标签,给base标签设置target属性即可.
4.4.锚点跳转
本质: 在当前页面中跳转. 网页中的返回顶部效果
<a href="#"></a>
"#": 返回当前页面开始位置
五.路径
绝对路径:
1. 如果路径中包含具体的磁盘目录: d:/img/1.jpg
2. 如果路径中具有具体的网址: www.baidu.com/img/1.jpg
相对路径: 必须在同一个根目录下.
1. 如果当前页面和被访问的资源在同一个文件夹中,路径=直接设置文件名称
2. 如果当前页面在被访问资源的下一级目录中, 路径=文件所在的文件夹名称/文件名
3. 如果当前页面在被访问资源的上一级目录中,路径=../文件名称
六.编辑器的几个插件
1.Chinese (Simplified) Language Pack for
2.Auto Rename Tag（自动重命名标签）
3.AutoFileName（自动补全文件名）
二 CSS简介
一、列表
无序列表(unordered-list)
<ul>
<li> 列表项 </li>
<li> 列表项 </li>
...
</ul>
有序列表： (order-list)
<ol>
<li> </li>
<li> </li>
<li> </li>
</ol>
自定义列表(defined-list)
<dl>
<dt> </dt>
<dd> 列表项 </dd>
<dd> 列表项 </dd>
<dd> 列表项 </dd>
</dl>
（一般在网页的结尾使用自定义列表）
二、CSS简介
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言 （css的学习其实就是学一堆的属性）
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、
边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p{color：red；} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav{color:red} |
| id选择器 | 一次只能选择1个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav{color：red；} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | *{color：red；} |
四、css字体属性
font字体的综合写法
语法：
font: 字体样式 字体粗细 字体大小/行高 字体家族;
body { font: font-style font-weight font-size/line-height font-family;}
注意：
1. 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，
2. 并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），
3. 但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
五、css文本属性
5.1、文本颜色-color
color 属性用于定义文本的颜色。
选择器 {
color: red;
}
5.2、文本修饰线-text-decoration:
选择器 {
text-decoration：underline；
}
5.3、行间距-line-height：
line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
选择器 {
line-height: 26px;
}
六、css样式表
6.1、行内样式表（行内式）
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
语法：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
6.2、内部样式表（嵌入式）
内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中
语法：
<style>
div {
color: red;
font-size: 12px;
}
</style>
6.1、外部样式表（链接式）
实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
引入外部样式表分为两步：
1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用<link> 标签引入这个文件。
语法：
<link rel="stylesheet" href="css文件路径">
三 CSS选择器和标签模式
一、css复合选择器
1.1、后代选择器
概念：
后代选择器又称为包含选择器
作用：
用来选择元素或元素组的**子孙后代**
其写法就是把外层标签写在前面，内层标签写在后面，中间用**空格**分隔，先写父亲爷爷，在写儿子孙子。
父级 子级{属性:属性值;属性:属性值;}
.class h3{color:red;font-size:16px;}
1.2、子代选择器
作用：
子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 `>` 进行连接
语法：
class>h3{color:red;font-size:14px;}
1.3、交集选择器
条件
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
1.4、并集选择器
并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。
比如 .one, p , #test {color: #F00;}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。
1.5、伪类选择器
链接伪类选择器
-
a:link /* 未访问的链接 */
-
a:visited /* 已访问的链接 */
-
a:hover /* 鼠标移动到链接上 */
-
a:active /* 选定的链接 */
二、标签显示模式
2.1、块级元素（block）
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
-
块级元素的特点
（1）比较霸道，自己独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。
-
注意：
-
只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
-
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不建议放其他块级元素。
-
2.2、行内元素（inline）
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素
-
行内元素的特点：
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）**行内元素只能容纳文本或则其他行内元素。
注意：
-
链接里面不能再放链接。
-
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
2.3、行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个 （2）默认宽度就是它本身内容的宽度。 （3）高度，行高、外边距以及内边距都可以控制。
三、css背景（background）
-
background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
-
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
-
语法：
background: transparent url(image.jpg) repeat-y scroll center top ;
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
| 背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |
四 CSS特性和盒子模型
一、css三大特性
1.1 CSS层叠性
概念：
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则：
-
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
-
样式不冲突，不会层叠
1.2 CSS继承性
-
概念：
子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
-
注意：
-
恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
-
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
-
1.3 CSS优先级
概念：
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
-
选择器相同，则执行层叠性
-
选择器不同，就会出现优先级的问题。
权重计算公式
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类(:hover) | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
二、盒子模型
总结：
-
盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
-
盒子里面的文字和图片等元素是 内容区域
-
盒子的厚度 我们成为 盒子的边框
-
盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
-
盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
三、外边距（margin)
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
3.1. 文字居中和盒子居中区别
-
盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
-
块级盒子水平居中 左右margin 改为 auto
3.2.清除元素的默认内外边距(重要)
为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除
代码：
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意：
-
行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。
3.3.外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
(1). 相邻块元素垂直外边距的合并
-
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
-
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
-
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。
(2). 嵌套块元素垂直外边距的合并（塌陷）
-
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
-
父元素的上外边距会与子元素的上外边距发生合并
-
合并后的外边距为两者中的较大者
解决方案：
-
可以为父元素定义上边框。
-
可以为父元素定义上内边距
-
可以为父元素添加overflow:hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。
五 CSS样式补充
一、其他样式
1、圆角边框
border-radius 属性用于设置元素的外边框圆角。
语法：
border-radius:length;
-
参数值可以为数值或百分比的形式
-
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
-
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
-
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
2、盒子阴影
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。 语法：
box-shadow: h-shadow v-shadow blur spread color inset;
3、文字阴影
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。 语法：
text-shadow: h-shadow v-shadow blur color;
4、过渡
当元素的样式发生变化时,我们希望可以缓慢完成看到一个过渡的效果
transition: 发生变化的属性 过渡完成的时间;
/*例如*/
transition: height 1s;
5、缩放
transform: scale(数字,数字);
/*第一个数字表示宽度的倍数，第二个数字表示高度的倍数*/
二、浮动
1、特性
-
浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)
-
浮动的元素会一行内显示并且元素顶部对齐
-
浮动的元素会具有行内块元素的特性
浮动元素的大小根据内容来决定
浮动的盒子中间是没有缝隙的
2、浮动布局注意点
1、浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
2、一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
七 CSS清除浮动和定位
一、清除浮动
1.1为什么要清除浮动
因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
1.2、清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
1.3、清除浮动方法
1).额外标签法(隔墙法)
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
-
优点： 通俗易懂，书写方便
-
缺点： 添加许多无意义的标签，结构化较差。
2).父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3).使用after伪元素清除浮动
:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
使用方法：
.clearfix::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
二、定位
定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：
| 值 | 语义 |
|---|---|
static |
静态定位 |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定位 |
2.1、相对定位（relative）
相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。
语法：
position:relative;
left | right | top | bottom: 值;
特点：
1. 可以改变元素位置
2. 相对定位的元素与父元素是否是定位的元素无关
3. 相对定位的元素是相对元素自己原来的位置
4. 相对定位的元素没有脱标
相对定位使用场景：
✔ 一般情况下，只要子元素设置了绝对定位后，父元素就要设置相对定位【子绝父相】
1. 因为给父元素设置了相对定位后，绝对定位的子元素会以父元素为参照
2. 父元素是相对定位的时候，父元素没有脱标，父元素占位置
3. 子元素设置了绝对定位，父元素就设置相对定位
2.2、绝对定位（absolute）
语法：
position: absolute;
left | right | top | bottom: 值;
特点：
1. 可以通过绝对定位改变元素位置
2. 如果一个元素设置了绝对定位，默认会以body【浏览器】左上角为参照进行位置改变
3. 如果一个子元素是绝对定位，如果其父元素设置了除静态定位以外的其他定位，那么该绝对定位的子元素就会参照父元素左上角进行位置改变。
4. 绝对定位可以让元素脱标不占位置
使用场景：
✔ 在网页布局中（结构中），如果我们发现有一个标签（盒子） 压着 另外一个标签（盒子）。 我们需要用到绝对定位
-
完全脱标 —— 完全不占位置；
-
父元素没有定位，则以浏览器为准定位（Document 文档）。
-
父元素要有定位
元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
2.3、定位居中
margin: 0 auto； 只能让标准流下的盒子居中显示
如何实现绝对定位盒子居中：
先通过 left | right | top | bottom ： 50% 【相对父元素移动一半】
通过margin 设置负数 移动 当前元素宽度或高度一半
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
2.4、固定定位（fixed）
语法：
position: fixed;
left | right | top | bottom: 值;
特点：
1. 可以改变元素位置
2. 固定定位的元素始终都是以body（浏览器）左上角为参照设置位置。
3. 固定定位的元素也是脱标不占位置的元素
使用场景：
1. 网页中的广告
三、定位层级关系
注意：
✔只有定位的元素才有层级关系【标准流元素和浮动的元素都没有成绩关系】
总结：
1. 如果一个元素设置了定位（除静态定位），那么该元素的层级就要比其他元素的层级高
2. 如果希望提高元素的层级，那么给定位的元素设置 z-index 属性，提高层级
3. 如果元素都设置了定位，那么最后的定位元素的层级比前面定位的元素的层级要高【后来居上】
4. 如果z-index值不同，那么值越大该元素的层级越高，反之层级越低【可以设置负数】
5. 如果一个元素的父元素也设置了定位，那么层级关系的高低，以父元素为准。
八 表格和表单
一.表格
◆ 组成
行 tr
列 td
表格 table
◆ 写法：
<table>
<tr>
<td></td>
</tr>
</table>
1.1、表格属性
1. border属性： 设置边框
2. width属性： 改变宽度
3. height属性： 改变高度
4. 去掉td与td之间的距离 cellspacing的默认是2
5. 设置内容居中显示 align: left | center | right
◆如果希望表格中的内容对齐，那么将align属性设置给tr或者td
◆如果将align属性设置给table，只能改变table整体的对齐方式，不会影响内容的对齐方式
6. 如果希望给表格设置表头，那么请使用th标签替代td标签，th在表格中就是表示表头，默认实现文字居中加粗显示
7. 设置背景颜色属性： bgcolor="颜色"；
8. 设置表格的标题： <caption>人员信息表</caption>
<table border="1" width="400" height="400" cellspacing="0" align="center" bgcolor="pink">
<caption>人员信息表</caption>
<tr bgcolor="red">
<th bgcolor="green">姓名</th>
<th>年龄</th>
<th>职业</th>
<th>性别</th>
</tr>
</table>
注意：
1. 在浏览器中所有的元素（文字，图片），默认都是左对齐
1.2、表格合并单元格：
1. 横向合并： colspan="2"
2. 纵向合并： rowspan="3"
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
1. 找出要合并的单元格（th 、 td）确定目标单元格，明确合并方式
水平方向（最左边的那个） ，（要合并是不同列的单元格，就是跨列合并colspan）
垂直方向（最上边的那个），（要合并是不同行的单元格，就是跨行合并rowspan）
2. 在目标单元格上写 合并的个数
<td colspan="3"></td>
3. 把多余单元格删除
1.2、表格的细线边框
通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，
-
但是两个单元格之间的边框会出现重叠，从而使边框变粗
-
通过css属性：
table{ border-collapse:collapse; }
二、表单
☞ 作用： 收集信息(通过表单控件收集信息)
☞ 表单组成：
1. 表单域 （form）
2. 提示信息
3. 表单控件
☞ 表单域（form）:
◆属性 action 设置一个后台程序，处理表单控件中的数据
◆属性 method 设置一个提交数据方式 （get | post）
<form action="1.js" method="post">
用户名: <input type="text" name="username">
<br>
<br>
密码: <input type="password" name="pwd">
<br>
<br>
<input type="submit" name="">
</form>
☞ 表单控件：
1. 输入框：<input type="text">
属性： name设置控件名称
maxlength设置当前控件最多能输入多少个字符
readonly="readonly" 设置当前控件为只读模式（不能输入）
disabled="disabled" 当前控件没有被渲染成功（没有被激活）【不能输入】
value设置控件默认值
2. 密码输入框： <input type="password" name="" value="">
属性：与输入框的属性一样
3. 下拉列表框：
<select>
<optgroup label="中国">
<option>北京</option>
<option>上海</option>
<option>南京</option>
<option>河北</option>
</optgroup>
</select>
或者：
<select>
<option>北京</option>
<option>上海</option>
<option>南京</option>
<option>河北</option>
</select>
属性： selected="selected" 设置默认选中项
例如：
<option>北京</option>
<option>上海</option>
<option selected="selected">南京</option>
<option>河北</option>
4. 复选框： <input type="checkbox">
属性：
checked="checked" 设置默认选中项
<input type="checkbox" checked="checked">爱好
<input type="checkbox" checked="checked">旅游
<input type="checkbox" checked="checked">学习
5. 单选控件：<input type="radio">
注意：
1. 如果要实现单选效果，那么需要设置相同的name值
<input type="radio" name="abc">男
<input type="radio" name="abc">女
2. checked="checked" 设置默认选中项
6. 上传控件： <input type="file">