从放弃到入门1 ⇒ 从放弃到入门2

了解浏览器

浏览器和服务器(了解)

浏览器是一款软件，浏览器功能：1将网页渲染出来给用户查看，2让用户通过浏览器与网页交互
不同浏览器的内核不同，渲染效果会有小的差别。市面上最常用的浏览器：
IE -内核 Trident
谷歌 - 内核 WebKit/Blink
火狐 - 内核 Gecko
Safarf - 内核 WebKit
欧朋 - 内核 Presto

服务器也是电脑，你可以理解服务器为超级计算机，因为它的配置比家用电脑高，并且服务器不关机不断电。

浏览器访问网页原理(理解)

当用户访问网页时，是会有真实的数据传输，数据会缓存到用户本地缓存文件夹，然后浏览器再渲染出来，所以通常第二次访问网站比首次访问快
网页不是一个文件，是很多类型的文件组成的。

浏览器请求数据的过程(理解)

打开浏览器输入URL敲下回车后，
-> 1 浏览器会发送“请求报文”（Request）给服务器
-> 2 服务器处理请求
-> 3 服务器将处理结果发送“响应报文”（Response ）给浏览器
-> 4 浏览器解析数据渲染出来

Request 请求报文：请求行+请求头+空行+请求体
Response 响应报文：响应行+响应头+响应体

什么是URL(理解)

https:// abc. com/index.html
https： URL协议类型，
abc. com：服务器域名
:80：服务器端口号，
index.html：需要访问的资源

HTTP协议(理解)

超文本传输协议（HTTP, HyperText Transfer Protocol）
什么是协议？

两个人约定要传文件，他们协商好先传文件名，再传文件大小类型时间等信息，最后传内容，那么接收的一方在收到后就会返回一个状态，由于经常要传文件，他们就默认了这种两个人约定的传输方式，这叫原始协议。
随着更多人要传文件，这个协议被不会断的新增完善细节化，慢慢的变成了一种标准协议。

HTTP协议是干什么的？：HTTP协议解决沟通的问题，作用是约束/规范浏览器与服务器之间如何沟通。

其它知识补充(理解)

HTML作用(掌握)

用一些文本来描述另一些文本的语义，而这些文本不会在网页中显示出来，所以我们称这些文本为“超文本”，而这些文本又叫标签，所以HTML被称为“超文本标记语言”。
HTML的作用只有一个，专门用来给纯文本添加语义的，而不是修改文本样式的。

就像《编码》这本书中所讲的盲文，用手去摸“< h1> HTML< /h1>”，这几个字本没有特别之处，但是因为两边有 h1的标记而中间是HTML，那么盲文就会认为这个HTML除本身代表的语义，它还是一个标题。

h1标签它的作用是什么？
-错误：h1标签可以用来修改文字的文本，并且还可以将文字加粗
-正确：h1标签的作用是告诉浏览器，这段文本的语义是标题。

HTML发展史(了解)

1993年发布HTML1.0，1995年W3C接手制定标准发布2.0，2000年转而制定另一种标准XHTML1.0，之后的2.0因为XHTML标准过于严苛，几大浏览器厂商拒绝执行，并在2004年制定HTML5的草案，2008年W3C和几大厂商合并发布HTML5

第一个HTML网页(掌握)

html标签只是用来添加语义，不更改样式。

HTML基本结构详解(掌握)

字符集问题(掌握)

解决乱码问题，在head中加入 < meta charset=“utf-8”>
在实际开发中，使用GBK还是UTF-8呢？ GBK存储的字符比较少，存储了所有汉字和常用外文，体积小。UTF-8存储了全世界所有文字，体积大，如果网站只做中文站那么GBK访问速度会更快，而使用UTF-8会更兼容。
乱码的问题：1浏览器

标签的分类(掌握)

DTD文档声明上(掌握)

HTML有多个版本规范，为了让浏览器能正确渲染，在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：
DTD必须写在第一行、不区分大小分、没有结束标签。
< !DOCTYPE html>

DTD文档声明下(了解)

HTML-XHTML-HTML5区别(了解)

WebStorm安装(理解)

H标签和P标签以及Hr标签(掌握)

h1 - h6 标签可定义标题。h1 定义最大的标题。h6 定义最小的标题。在企业开发中，一个页面只用一个h1标签，因为关系到SEO

p 标签 (paragraph 美 [pɛrəˌɡræf] )定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
hr标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

标签综合练习(掌握)

在 XHTML 中，< hr> 必须被正确地关闭，比如 < hr />。
在 HTML 中，< hr> 标签没有结束标签。

注释(掌握)

< !–这是一段注释。注释不会在浏览器中显示。–>

img标签(掌握)

img 标签有两个必需的属性：src 属性和 alt 属性。功能显示图像的 URL、图像的替代文本。
让图片等比例放大缩小？宽度和高度只设定一项

br标签(掌握)

br换行，用于一句话还没结束，但是要另起一行来写的情况。段落之间不用br换行，企业开发中不常用 br标签

路径问题(理解)

相对路径，当前项目所在位置开始查找
绝对路径，从最底层目录查找

路径练习(理解)

a标签基本使用(掌握)

href属性指向非当前域名加 http://，属性target="_blank" 在新窗口打开页面，属性download当链接地址指向二进制文件时下载此文件

a标签其它属性(掌握)

base标签(掌握)

< base> 标签为页面上的所有链接规定默认地址或默认目标。
注释：标签必须位于 head 元素内部。
属性有 href 和 target

假链接(掌握)

点击之后不跳转，#号点击返回页面顶部，javascript:点击没有反应

<a href="#">#号</a>
<a href="javascript:">javascript:</a>

锚点(掌握)

应用场景，线在阅读的书籍，一整本书都在一个页面，点击目录就会定位到对应的内容
使用方法，在目标锚点加上id，在 a 链路中，href等于# + id
跳转到 HTTP协议

<div id="httppro"><div>
<a href="#httpproto">HTTP协议</a>

跳转到其它页面的指定位置，在目标地址加上#id
示例跳转到网站 W3C 简介页面底部

<a href="http://www.w3school.com.cn/w3c/w3c_intro.asp#p2" target="_blank">W3C简介</a>

无序列表(掌握)

无序列表 unordered list，没有先后顺序，场景：新闻列表，导航条等

<ul><li>新闻一</li><li>新闻二</li>
</ul>

输出：

新闻一
新闻二

无序列表练习(理解)

列表前面的圆，由实心变成空心
type=“circle”

无序列表练习2(理解)

可在列表中，加入其它标签进而丰富界面

<h5>四大名著</h5>
<ul><li><h6>三国演义</h6><p>  故事开始黄巾兵起义，结束于司马氏灭吴开晋，以描写战争为主，反映了魏、蜀汉、吴三。。  </p></li><li><h6>水浒传</h6><p>是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说。。</p></li>
</ul>

输出：

四大名著

三国演义

故事开始黄巾兵起义，结束于司马氏灭吴开晋，以描写战争为主，反映了魏、蜀汉、吴三个。。
水浒传

是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说。。

无序列表练习3(理解)

在 li 里面再添加 ul>li

有序列表(理解)

有序列表 ordered list，所有数据有先后之分
type 属性 a、A、1、i、I五个属性值表示列表以何种方式排序，分别对应小写字母、大写字母、数字、小写罗马字符、大写罗马字符

<ol><li>热点新闻</li><li>热点新闻</li>
</ol>

输出：

热点榜

热点新闻
热点新闻

定义列表(掌握)

<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （description term 定义列表中的项目）和 <dd>（description description 描述列表中的项目）。

应用场景：网站底部的相关信息，图文混排

<dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

输出：

计算机: 用来计算的仪器 ... ...
显示器: 以视觉方式显示信息的装置 ... ...

定义列表练习(了解)

图文混排，左边图片，右边描述

表格标签基本使用(理解)

表格标签和列表标签都属于组合标签，table 表格，th表头，td表单元

<table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr>
</table>

Month	Savings
January	$100

表格标签的属性(了解)

宽度和高度，水平对齐和垂直对齐，外边距和内边距
width and height , algin = left/ center/ right, valgin =top/ middle/ bottom ,
cellspacing=“0” 单元格之间的空白， cellpadding 单元边沿与其内容之间的空白。

细线表格(理解)

cellspacing 边框大小，bgcolor 边框背景颜色

<table bgcolor="black" cellspacing="1" ><tr bgcolor="width"><th>表头</th><th>表头</th></tr><tr bgcolor="width"><td>表单元</td><td>表单元</td></tr>
</table>

表格中的其它标签(理解)

表格的结构(了解)

单元格合并(理解)

colspan = “2” 当前单元格横跨2列

表格练习(了解)

colspan=“2” 当前单元格横向跨2列
rowspan=“2” 当前单元格纵向跨2行

表单标签-input(掌握)

单选按钮默认支持多选，多个按钮设置相同name才会单选，默认选中checked属性

名字：<input type="text"><br>
密码：<input type="password"><br>
性别：<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女<br>
<input type="checkbox" checked="checked">已阅读
<input type="checkbox">同意<br>

表单标签-按钮(掌握)

隐藏表单，点击按钮，重置按钮，提交按钮

<form action=""><input type="hidden" name="" value=""><input type="button" name="" value="按钮" onclick="console.log(111)"><input type="reset" name="" value="重置"><input type="submit" name="" value="提交">
</form>

Label标签(掌握)

让文字关联输入框，点击文字光标出现在输入框，label标签的 for 绑定输入框的 id

<label for="user"> 名字：<input type="text" id="user"></label><br>
<label for="pwd"> 密码：<input type="password" id="pwd"></label><br>

dalist标签(了解)

把输入框和下拉列表绑定，给datalist 添加一个id，给输入框添加一个list，list的值等于id的值。
但是datailst标签众多浏览器不支持，仅作为了解。

请输入您的车型： <input type="text" name="" list="cars">
<datalist id="cars"><option>奔驰</option><option>宝马</option><option>奥迪</option><option>宾利</option><option>路虎</option>
</datalist>

表单标签-H5(了解)

h5新增表单类型，邮箱，域名，数字，时间控件，取色板
目前浏览器对H5的支持不够，

邮箱<input type="email" name="mail" value=""><br>
域名<input type="url" name="url" value=""><br>
手机号<input type="number" name="number" value=""><br>
时间：<input type="date" name="date" value=""><br>
颜色：<input type="color" name="color" value=""><br>

表单标签-非input标签(掌握)

H5下拉列表，默认选中 selected属性，长文本输入框cols文本区域可见宽，rows可见高度

<select name="" id=""><optgroup label="北京"><option value="">朝阳区</option><option value="">大兴区</option></optgroup><optgroup label="广州"><option value="">天河</option><option value="">黄浦</option></optgroup>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>

表单练习上(理解)

表单练习下(理解)

H5完整的form表单， fieldset为表单加上边框，legend让文字出现在边框左上角

<form action="#">
<fieldset><legend>注册</legend><p>账号：<input type="text" name="account"></p><p>密码：<input type="password" name="pwd"></p><p>性别：<input type="radio" checked="" name="gender" value="1"> 男<input type="radio" name="gender" value="0">女</p><p>爱好 :<input type="checkbox" name="hobby" value="a"> a<input type="checkbox" name="hobby" value="b"> b<input type="checkbox" name="hobby" value="c"> c</p><p>简介：<textarea name="desc" id="" cols="30" rows="10"></textarea></p><p>生日：<input type="date" name="birthday"></p><p>邮箱：<input type="email" name="email"></p><p>电话：<input type="number" name="tel"></p><p><input type="submit" value="注册"><input type="reset" value="重置"></p>
</fieldset>
</form>

video标签(掌握)

video标签用于播放视频
属性，src 视频地址，autoplay自动播放，controls显示播放控件，poster播放前的图片，loop循环播放，preload预加载即播放前加载视频与autoplay同时出现会失效，muted静音，width宽，height高

<video src="img/3.mp4" autoplay="" preload="" poster="img/2.jpg" controls="" width="500px" ></video>

video标签第二种格式(掌握)

当前，video 元素支持三种视频格式：Ogg、MPEG 4、WebM
但没有一种格式是所有浏览器厂商都支持的，为了兼容所有的浏览器，新加了source标签，所以至少要准备两个格式的视频，一个mp4格式加一个ogg或者webm格式的视频
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">
</video>

audio标签(掌握)

audio音频播放
autoplay 音频就绪后马上播放，controls 向用户显示播放控件，
loop 当音频结束后重新开始播放，preload 预备播放页面加载时音频也加载如果使用了autoplay则此属性失效，src 音频的URL。audio没有宽/高属性

<audio src="img/fish_bg.mp3" controls="" autoplay=""></audio>
<audio controls="controls"><source src="img/fish_bg.mp3" type="audio/mp3"><source src="img/song.ogg" type="audio/ogg">
</audio>

详情和概要标签(理解)

details 标签用于描述文档或文档某个部分的细节。目前只有 Chrome 支持 details 标签。

<details><summary>HTML 4.01 与 HTML 5 之间的差异</summary>标签是 HTML 5 中的新标签。
</details>

marquee标签(理解)

让文字从右向左水平滚动，此标签w3c没有出标准，但各大浏览器支持。
属性 direction滚动方向值down,up,right,up，scrollamount移动速度值 number，loop滚动次数，behavior滚动方式，值 slide触到边框就停止了 alternate触到边框就弹回

<marquee direction="left" scrollamount="10" loop="4" >滚滚滚</marquee>
<marquee direction="up" behavior="alternate" >滚滚滚滚</marquee>

HTML中被废弃的标签(掌握)

html标签是用来添加语义的，而在早期，有一部分html标签是用来修改样式的，那些修改样式的标签已经全部废弃。
br, hr, font, b, u, i, s
以上标签只能更改样式并没有任何语义，而新的替代者为文字加了语义
b -> strong 定义重要性强调文字
u -> ins 定义插入的文字
i -> em 强调的文字
s -> del 被删除的文字

<strong>strong定义重要性强调文字 </strong>
<ins>ins定义插入的文字 </ins>
<em>em定义强调的文字 </em>
<del>del被删除的文字 </del>

strong定义重要性强调文字 ins定义插入的文字 em定义强调的文字 ~~del被删除的文字~~

字符实体(理解)

在 HTML 中，某些字符是预留，比如不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签，更多参考w3c字符实体
< > ©

&nbsp; 空格，小于 &lt;，大于 &gt;  显示h1标签合起来就是 &lt;h1&gt; &copy; 版权符号

体验CSS(理解)

CSS的作用，只有一个就是修改样式，css写在head标签之中，
text-algin 让文字居中，font-family 设置字体

CSS的固定格式(掌握)

style写在head标签内，与title同级，属性type="text/css"可写可不写，因为默认就是text/css。属性格式 key: value; 冒号分号不能省

<head><title></title><style type="text/css">p {width: 500px;}</style>
</head>

文字相关属性(掌握)

font-family 字体必须是用户电脑上安装了才会展示这种字体

font-style: italic; //italic 文字倾斜， normal 文字正常
font-weight: blod; // blod文字加粗，bloder 加粗+ ，lighter 细线，值100-900
font-size:  20px; //文字大小， pixels
font-fmaily:

字体属性补充(掌握)2

family可以设置多个字体，如果前面的字体不存在，就会展示后面的字体，以逗号分隔。如果设置的多个字体都不存在，那么就会使用客户端的默认字体。
怎样分别为中英设置字体？但凡是英文字体都不包含中文，但凡是中文字体一定包含英文，所以先设置英文字体，再设置中文字体。
企业开发常用字体，中文：宋体/黑体/微软雅黑，英文: “Times New Roman”, “Arial”

font-family: "宋体","微软雅黑";
font-family: "Arial","宋体";

文字属性的简写(掌握)

font属性
font: style weifht size family;
size family 这两个值不能更改位置，不能删除，style weifht这两个随意

font: italic blod 15px "Arial";

文本属性(掌握)

文本装饰 text-decoration，文本水平对齐 text-align，文本缩进 text-indent

text-decoration: //上划线 overline; 删除线line-through;不要线包含超链接下划线none;
text-align: right; // right; left; center;
text-indent: 2em; // 2个字符

颜色控制属性上(理解)

颜色的取值，更多颜色参考 W3C颜色
英文单词。
rgb(red, green, blue)每个颜色取值范围0-255 ，当3个值相同，就是灰色。
rgba是CSS3新增，rgba(红色，绿色，蓝色，透明度)，透明度取值0-1。

color: yello;
color: rgb(255,255,0)
color: rgba(255,255,0,0.5);

颜色控制属性下(理解)

十六进制，本质是rgb，但是更方便书写，十六进制每两位表示一个颜色，例如
#FFEE00 ，FF表示R，EE表示G，00表示B
10=A,11=B,12=C,13=D,14=E,15=F

计算方法
用十六进制的第一位乘以16 ，加十六进制的第二位等于十进制，
21 == 1 * 16 +5 == F5
FF == F *16 + F == 15 *16 + 15 == 255

练习 rgb(0, 112, 255) 的十六进制是多少？
0== 016+0= 00，112= 716+0= 70，255= 15*16+15= 1515= FF
等于 #0070FF

标签选择器(掌握)

id选择器(掌握)

根据ID名称找到标签，在ID前面写一个#号，不过CSS通常不使用ID

<style type="text/css">#desc{}
</style>
<p id="desc" ></p>

类选择器(掌握)

根据class名称找到标签，在class前面写一个"."号，类名是专用于css设置样式的，而ID是JS使用的

.title {
}
<div class="title"></div>

id选择器和类选择器(理解)

一个标签只能设置一个ID名，而一个标签可以设置多个类名，类名之间以空格分隔，在使用类名时，如果多个类名有不同的样式，把这几个类名都添加到标签以实现一个整体样式

.c1 {
color: red;
}
.c2 {
font-size: 30px;
}
<p class="c1 c2">一段文字</p> //这段文字展示效果是 红色 + 加粗

后代选择器(掌握)

后代选择器用空格分隔，后代选择器会查找所有p标签内的span标签，而不管有多少层级
示例，选择div 标签内的p标签，选择p标签内的a标签内的span标签

div p{
}
p a span{
}

子元素选择器(掌握)

子元素选择器使用大于 >符号分隔，子元素只会选择元素下的第一层，如果在这个元素下面还有第二层第三层，它是不会选择的。
以下示例中，div> p 第一层会被选择，第四层不会， div>li不会选中任何标签，ul 才是div的第一层，正确做法 div>ul>li

div> p {width: 300px;color: red;
}
div>li{border: 1px solid red;
}
<div><p>第一层<ul><li><p>第四层</p></li></ul></p><p>第一层</p>
</div>

后代选择器和子元素选择器(理解)

后代选择器使用空格连接，会选择标签内的儿子，孙子，更内层的指定标签
子元素选择器使用大于 >连接，只选择第一层指定的标签

交集选择器(理解)

选中标签中相交的那部分，选择器之间没有任何连接符号
示例，选择P标签中类名等于rr的标签，选择p标签中类名等于rr且id名等于two的标签，

p.rr{color: red;
}
p.rr#two{font-size: 3em;
}
<p>我是段落</p>
<p class="rr" id="two">我是段落</p>
<p class="rr">我是段落</p>
<p>我是段落</p>

并集选择器(掌握)

以逗号连接
示例，选择类名等于union，和类名等于selector的标签

.union,.selector{color: blue;
}
<div class="union">并集</div>
<p class="selector">选择器</p>
<span>选择</span>

兄弟选择器(掌握)

相邻选择器，用加号 + 连接，即选择同级标签中，紧跟在指定标签之后的指定标签，如选择h5之后的p，当a标签将h5和p隔开就无法选中
兄弟选择器，用波浪号 ~ 连接，同级标签中，选择在指定标签后面的所有标签。例如选择h5后面的所有p，

h5+p{color: blue;
}
h5~p{font-size: 2em;
}
<h5>标题一</h5>
<a href=""></a>
<p>段落</p>
<h5>标题二</h5>
<p>段落</p>
<p>段落</p>
<span><p>段落</p></span>

序选择器上(掌握)

css3新增，
选中同级别第一个标签，即是第一个，且为指定的标签
选中同级别同类型的第一个，即同级别中的第一个标签
选择同级别的第N个标签，
下面的示例，last 同理

p: first-child{ //同级中，P的标签等于第一个的标签（在同级别中找第一个，如果刚好是p标签就选中了）
}
p:first-of-type{ //同级中，第一个P标签（在同级众多P标签中，找第一个P标签）
}
p:nth-child(2){ //同级中，P的标签等于第二个的标签（在同级别中找第二个，如果刚好是p标签就选中了)
}
p:nth-of-type(2){ //同级中，第一个P标签（在同级众多P标签中，找第二个P标签）
}
p:only-child{ // 标签等于p，且是这一级别中唯一的标签（如果同级别中有一个P,一个a标签，那就不会选中）
}
p:only-of-type{ // 同级别中，p标签只有一个，那这个P标签就选中了（）
}

序选择器下(掌握)

child和of-type的不同点，child查找所有标签，而of-type只查找目标标签
odd奇数，even偶数，n计算器x和y自定义(xn+y)

p:nth-child(odd){ //选择同级别所有的奇数标签
}
p:nth-child(even){ // 选择同级别所有偶数标签
}
p:nth-of-type(odd){  //同级别所有等于p的奇数标签
}
p:nth-of-type(even){/同级别所有等于p的偶数数标签
}
p:nth-child(5n){// 选择同级别5的倍数的标签
}
p:nth-of-type(3n){ // 同级所有等于p的3n数标签，也就是3的倍数，3\6\9\12。。，5n即选择5的倍数
}

属性选择器上(理解)

用中括号 [] 括号的统称属性选择器
[attribute] 有这个属性的标签, [attribute = value ] 有这个属性并且值等于多少的标签

form [name]{  //选择from子元素中有name属性的标签
}
form [name=user]{  //选择from子元素中属性name等于user的标签
}
input[type=text]{ //所有input标签type等于text的标签}

属性选择器下(理解)

*css2 |= 以什么开头 ,~=包含某个值的 *
css2查找条件太苛刻比如必须要空格" “隔开必须要横杆”-" 隔开才能找到，不建议使用。

css3 没有任何限制，只要包含这个字的就找的到
^=以什么开头，$=以什么结束，*=包含某个值的

input[value^=z]{   //查找value以 z 开头的标签
}
input[value$=abc]{   //查找value以 abc 结束的标签
}
input[value*=w]{   //查找value包含 w 的标签
}

属性选择器下-js(掌握)

下拉列表值等于 10，值以7开头，值以5结束，值的引号可不加

$('select option[value="10"]').css('color','red');
$('select option[value^=7]').css('color','blue');
$('select option[value$=5]').css('color','green');<select name="" id=""><option value="10">10</option><option value="72">72</option><option value="55">55</option>
</select>

通配符选择器(理解)

* 通配符标签太多就会性能差

*{ 查找全部标签
}

选择器练习(理解)

用所有学过的选择器选中两个p标签

<div><h1>我是一个标题</h1><p id="identity1" class="para">我是一个段落1</p><p id="identity2" class="para">我是一个段落2</p>
</div>

p{} 标签选择器
#identity1{} id选择器
.para{} 类选择器
div p{} 后代选择器
div>p{} 子元素选择器
p.para{} 交集选择器
#identity1,#identity2{} 并集选择器
h1~p{} 兄弟选择器
p:nth-child(2),p:last-child{} 序选择器上
p:nth-child(odd),p:nth-child(even){},p:nth-child(n+1) 序选择器下
p[class]{},p[class=para]{} 属性选择器上
p[class^=par] 属性选择器下
*{} 通配符选择器

谷歌开发者工具其它使用(理解)

CSS样式学习

CSS三大特性继承性、层叠性、优先级

继承性(掌握)

给父元素设置属性，所有子元素也会继承，在浏览器的审查元素可看到 inherited from ***
但继承仅限于以color/font/text/line开头的属性
也有特殊的标签不会继承某些特性，比如H标签不继承父元素的字体大小，A标签不继承下划线文字颜色

层叠性(掌握)

如果p标签被设置了红色，p标签的class又设置了蓝色，这时候类的属性就会层叠掉P设置的属性值，最终显示是蓝色，这是CSS的层叠性
CSS全称层叠样式表 Cascading StyleSAheet

优先级(掌握)

谁离标签最近，就是最优先的，直接选中》继承。当优先级相同，最后执行覆盖前面执行
完整优先级（为何通配符高于继承？因为通配符是直接拿到了标签）

ID 》 Class  》标签 》通配符* 》 继承 》浏览器默认

!important(掌握)

把优先级别提升到最高，
示例中的ID优先级是最高的，但是标签选择器在属性值后面加了 !important ，最终文字颜色是红色

<style>p { color: red !important ;     }#para {    color: blue;    }
</style>
<p id="para">段落</p>

权重问题(掌握)

当多个选择器混合在一起使用，都指向同一个标签，我们就计算权重判断哪个选择器优先级最高
计算规则：

1、首先计算有几个ID，ID多的选择器优先级最高
2、当ID数量一样，就计算有几个类名，最多的选择器优先级最高
3、当类名数量一样，就看标签数量
4、标签数量也一样，那就不会再计算，谁写最后执行谁

从放弃到入门-笔记二

CSS三大特性练习(理解)

div和span标签(掌握)

CSS元素显示模式(掌握)

CSS元素显示模式转换(掌握)

百度首页(理解)

背景颜色(掌握)

背景图片(掌握)

背景平铺(掌握)

背景定位上(掌握)

背景定位下(掌握)

背景关联和缩写(理解)

背景图片和插入图片区别(掌握)

背景图片练习(理解)

CSS精灵图(掌握)

精灵图练习(理解)

边框属性上(掌握)

边框属性下(掌握)

边框练习(理解)

内边距属性(掌握)

外边距属性(掌握)

外边距合并现象(掌握)

盒子模型(理解)

盒子宽度和高度(理解)

盒子宽度和高度练习1(理解)

盒子宽度和高度练习2(理解)

盒子box-sizing属性(理解)

盒子模型练习3(理解)

盒子居中和内容居中(理解)

清空默认边距(掌握)

行高和字号(掌握)

还原字体和字号(掌握)

文字界面(理解)

网页布局方式(掌握)

浮动流基本概念(掌握)

浮动元素脱标(理解)

浮动元素排序规则(理解)

浮动元素贴靠现象(理解)

浮动元素字围现象(理解)

浮动练习上(理解)

浮动练习中(理解)

浮动练习下(理解)

浮动元素高度问题(掌握)

清除浮动方式一(理解)

清除浮动方式二(理解)

margintop失效原因(理解)

清除浮动方式三(理解)

清除浮动方式四(理解)

伪元素选择器(掌握)

清除浮动方式五(理解)

清除浮动方式六(理解)

网易注册界面-基本结构搭建(理解)

网易注册界面-完成顶部左边(理解)

网易注册界面-完成顶部右边(理解)

网易注册界面-完成中间顶部(理解)

网易注册界面-完成中间右边(理解)

网易注册界面-完成中间左边顶部(理解)

网易注册界面-完成中间左边底部中(理解)

网易注册界面-完成中间左边底部下(理解)

网易注册界面-完善(理解)

定位流-相对定位(掌握)

相对定位-注意点(掌握)

定位流-绝对定位(掌握)

绝对定位0参考点(掌握)

绝对定位-注意点(掌握)

绝对定位-子绝父相(掌握)

绝对定位-水平居中(理解)

定位练习-团购界面(理解)

定位练习-焦点图(理解)

定位流-固定定位(掌握)

定位练习-新浪首页(理解)

定位流-z-index属性(掌握)

a标签伪类选择器(掌握)

a标签伪类选择器注意点(掌握)

a标签伪类选择器-练习(理解)

过渡模块基本使用(掌握)

过渡模块-其它属性(理解)

过渡模块-连写(掌握)

过渡模块-弹性效果(理解)

过渡模块-手风琴效果(理解)

2D转换模块(掌握)

2D转换模块-形变中心点(掌握)

2D转换模块-旋转轴向(理解)

2D转换模块-透视属性(理解)

2D转换模块-相片墙(理解)

盒子阴影和文字阴影(掌握)

翻转菜单-综合练习(理解)

动画模块(掌握)

动画模块-其它属性上(理解)

动画模块-其它属性下(理解)

动画模块-连写(掌握)

动画模块-云层动画(理解)

动画模块-无限滚动上(掌握)

动画模块-无限滚动下(掌握)

3D转换模块(掌握)

3D转换模块-正方体(理解)

3D转换模块-长方体(理解)

3D转换模块-练习(理解)

3D播放器上(理解)

3D播放器下(理解)

背景尺寸属性(掌握)

背景图片定位区域属性(理解)

背景绘制区域属性(理解)

多重背景图片(掌握)

多重背景图片-练习(理解)

CSS书写格式(掌握)

努比亚-准备工作(掌握)

努比亚-基本结构(理解)

努比亚-顶部logo(掌握)

努力比-顶部导航(理解)

努力比-广告区域(理解)

努比亚-广告区域导航(理解)

努比亚-轮播图(掌握)

努比亚-序号(理解)

努比亚-视频区域(掌握)

努比亚-内容区域(掌握)

努比亚-最新产品(理解)

努比亚-精品配件(理解)

【HTML/CSS】从放弃到入门-笔记1相关推荐

【HTML/CSS】从放弃到入门-笔记2
从放弃到入门1 >> 从放弃到入门2 CSS三大特性练习(理解) div和span标签(掌握) DIV配合CSS完成网页的搭建 span常用来配合修改局部样式区别:DIV一个容器级别的标 ...
前端「HTML+CSS」零基础入门学习笔记
HTML+CSS入门笔记目录一.HTML 简介 1.HTML是什么? 2.什么是HTML标签? 二.HTML 文档结构 1.HTML基本结构 2.文档类型声明标签 3.lang语言属性 4.字符集与 ...
Web-HTML+CSS入门笔记
一. Web-HTML入门笔记 1.注释无法嵌套. 2.a标签:可做跳转.下载.锚点. 属性href必须有: 属性target的值: _blank:在新的标签页打开连接: _self:在当前页面打开连 ...
十年公务员转行IT，自学AI三年，他淬炼出746页机器学习入门笔记
整理 | Jane 编辑 | Just 出品 | AI科技大本营(ID:rgznai100) 近期,梁劲传来该笔记重大更新的消息.<机器学习--从入门到放弃>这本笔记的更新没有停止,在基于 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
嵌入式OS入门笔记-以RTX为案例：四.简单的时间管理
嵌入式OS入门笔记-以RTX为案例:四.简单的时间管理上一节简单记录了进程task.有了进程以后,我们需要关心怎么样分配CPU资源(或者运行时间)给每个进程.那么就要引入排程(scheduling) ...
500多页的机器学习入门笔记，下载超5万次，都讲了些什么？
导读:今年 4 月,梁劲在百度云盘上传了一份自己整理的学习笔记--<机器学习--从入门到放弃>.这份学习笔记 540 多页,图文并茂,而且全部用英文撰写,如今这份文档的下载量已超过 500 ...
Python数据分析入门笔记4——数据预处理之重复值
系列文章目录 Python数据分析入门笔记1--学习前的准备 Python数据分析入门笔记2--pandas数据读取 Python数据分析入门笔记3--数据预处理之缺失值 Python数据分析入门笔记 ...
帝君级别纯手写原创 jQuery入门笔记
帝君级别纯手写原创 jQuery入门笔记广治君今天下午整理了一下jQuery的入门学习思路,以及学习内容一.学习jQuery的目的为什么要学习jQuery,低程度的一定是你在学前端或者后端, ...