前端的基础知识汇总

创建时间：

2017/8/2 19:39

<!--

1.img标签中的img其实是英文image的缩写

所以img标签的作用, 就是告诉浏览器我们需要显示一张图片

2.img标签格式: <img src="">

其实img标签中的src是英文source的缩写

所以img标签中的src就是用来告诉img标签, 需要显示的图片名称

3.注意点

- 和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行

- 如果我们手动指定了img标签显示的图片的宽度和高度, 有可能会导致图片变形, 那么如果又想指定宽度和高度, 又不想让图片变形. 我们可以只指定宽度和高度其中的一个值即可

- 只要指定了高度, 系统会自动根据高度计算出宽度, 只要指定了宽度, 系统会自动根据宽度计算出高度, 并且都是等比拉伸的, 也就是说不会变形

4.img中的其它属性

width: 宽度

height: 高度

所以在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高

如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示

如果img标签指定的宽高, 那么系统会按照指定的宽高来显示

title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容

alt其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容

--><img src="images/QRCode.jpg"><img src="images/QRCode.jpg" width="300" height="478"><img src="images/QRCode.jpg" width="100" height="478"><img src="images/QRCode.jpg" height="178"><img src="images/QRCode.jpg" width="100"><img src="images/QRCode.jpg" width="100" title="这个是江哥的微信二维码图片"><img src="images/QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了">

<!--

br标签, 如何在HTML中换行? 可以使用br标签

1. br标签作用: 换行

2. br标签格式: <br>

3. br标签的注意点:

3.1多个br标签可以连续使用, 使用了多少个br标签就会换多少行

3.2由于HTML的作用就是用来给文本添加语义, 而br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签

-->
<p>只设置了img标签的src属性</p> <p><img src="images/QRCode.jpg"></p> <p>设置了img标签的src和width以及height属性</p> <p><img src="images/QRCode.jpg" width="300" height="478"></p> <p>设置了img标签的src和width以及height, 但是宽高不是等比拉伸的</p> <p><img src="images/QRCode.jpg" width="100" height="478"></p> <p>设置了img标签的src和height属性</p> <p><img src="images/QRCode.jpg" height="178"></p> <p>设置了img标签的src和width属性</p> <p><img src="images/QRCode.jpg" width="100"></p> <p>设置了img标签的src和width以及title属性</p> <p><img src="images/QRCode.jpg" width="100" title="这个是江哥的微信二维码图片"></p> <p>设置了img标签的src和width以及alt属性</p> <p><img src="images/QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了"></p>

<!--

路径问题

其实想给src属性赋值有两种方式

1.通过相对路径赋值(掌握)

相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径

1.1同级

同级就是"图片"和".html文件"存储在同一个文件夹中

格式: src="QRCode.jpg"

含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片

1.2下级

下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中

格式: src="images/QRCode.jpg"

含义: 在.html文件所在的文件夹中找到名称叫做images的文件夹

然后再在images文件夹中找到名称叫做QRCode.jpg的图片

1.3上级

上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中

格式: src="../QRCode.jpg"

含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫做QRCode.jpg

其中../代表找到当前文件夹的上一级文件夹

2.通过绝对路径赋值(了解)

绝对路径就是每次都从指定的盘符开始查找

格式: src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg"

含义: 在C盘下找到Users文件夹, 然后在Users文件夹中找到Jonathan_Lee文件夹, 然后在Jonathan_Lee文件夹中找到Desktop文件夹, 然后在Desktop文件夹中找到HTML基础文件夹, 然后在HTML基础文件夹中找到名称叫做QRCode.jpg的图片

注意:

1.路径中不要出现中文, 否则可能出现未知问题

2.如果是通过"相对路径"来指定图片, 不能跨盘符

2.1例如.html文件在C盘, 那么不能去查找D盘图片

--><img src="QRCode.jpg"><img src="images/QRCode.jpg"><img src="../QRCode.jpg"><img src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg" >

<!--

什么是a标签?

a标签的作用: 就是用于控制页面与页面之间跳转的

a标签的格式: <a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>

a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转

_self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self

_blank: 用于在新的选项卡中跳转, 也就是新建界面跳转

a标签中还有一个属性, 叫做title. a标签中的title和img标签中的title一样, 都是用来控制鼠标悬停时显示的提示文本的

注意点:

1.a标签不仅可以让文字可以点击, 还可以让图片也能够被点击

2.一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方

3.如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://

4.a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址

-->

<title>11-base标签</title> <base target="_blank"></head><body><!--

base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开

注意点:

1.base标签必须写在head标签的开始标签和结束标签之间

2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行

--><a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>

</head>

<body>

<!--

1.什么是假链接?

就是点击之后不会跳转的链接我们称之为假链接

2.假链接存在的意义:

在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接体会为真链接

3.假链接的格式:

1.#

2.javascript:

4.两者之间的区别:

#的假链接会自动回到网页的顶部, 而javascript:的假链接不会自动回到网页顶部

-->

<br>

</body>

<title>13-锚点</title></head><body><!--

1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置

2.如果和HTML中的标签绑定一个独一无二的身份证号码呢?

在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的

3.所以要想实现通过a标签跳转到指定的位置分为两步

3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值

3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

格式:

<a href="#center">跳转到中部</a>

注意点:

1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置

2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置

格式:

<a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>

<h2 id="bottom">我是锚点测试界面33333</h2>

-->

<a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>

<a href="#center">跳转到中部</a>

<br>

<br>

<br>

</body>

<title>14-无序列表</title> <style type="text/css"> ul {

list-style: none;

}

li {

float: left;

background-color: yellow;

width: 150px;

height:50px;

text-align: center;

line-height: 50px;

}

</style></head><body><!--

1.什么是列表标签?

列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

2.HTML中列表标签的分类

2.1无序列表(最多)(unordered list)

2.2有序列表(最少)(ordered list)

2.3定义列表(其次)(definition list)

3.无序列表作用:

给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分

什么叫有先后之分?

例如: 排行榜

什么叫没有先后之分?

例如: 中国有哪些城市

4.无序列表格式:

<ul>

<li>需要显示的条目内容</li>

</ul>

li其实是英文list item的缩写

list是列表的意思

item是条目的意思

所以结合起来就是列表条目的意思

5.注意点:

1.一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的

2. ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用

3.由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签

无序列表应用场景:

1.新闻列表

2.商品列表

3.导航条

-->

<h2>中国的城市有哪些</h2>

<ul>

</ul>

</body>

<!--

前面我们说过ul中最好只放li标签, 但是在企业开发中, li标签中的内容可能会很复杂, 所以我们可以继续在li标签中添加其它的标签来丰富我的界面

总结:

1.一定更要记住ul标签中最好只放li标签

2.但是li标签中还可以继续放其它的标签

-->

<title>17-无序列表练习3</title></head><body><!--

无序列表中的li标签中除了可以添加其它标签来丰富我们的界面以外, 还可以添加ul标签来丰富我的界面

也就是说ul中有li, li中又可以有ul

在webstorm中如何快速编写一个ul的格式

ul>li

含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签

ul>li*3

含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签

-->

</head>

<body>

<!--

什么是有序列表?

有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分

有序列表格式:

<ol>

</ol>

其它用法和ul都差不多, 也就是应用场景/注意点都和ul差不多

-->

<ol>

<li>女人不应该让男人太累</li>

<li>男人不应该让女人流泪</li>

</ol>

<title>19-定义列表</title></head><body><!--

1.定义列表的作用:

1.1给一堆数据添加列表语义

1.2先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息

2.定义列表的格式:

<dl>

</dl>

其实dt和dd都是英文的缩写

dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题

dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述的

3.定义列表的应用场景

1.做网站尾部的相关信息

2.做图文混排

4.定义列表的注意点

4.1和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现

4.2和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签

4.3一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.

推荐使用一个dt对应一个dd

4.4和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签

-->

<dl>

<dd>中国的首都</dd>

<dd>雾都, 雾霾比较严重</dd>

<dd>富人集中地</dd>

</dl>

</body>

创建时间：

2017/8/2 20:01

<title>24-表格标签的其它标签</title></head><body><!--

1.表格标题

在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中

2.caption标签的注意点:

2.1caption一定要写在table标签中, 否则无效

2.2caption一定要紧跟在table标签后面

3.标题单元格标签

3.1.在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字

3.2.到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的

-->

<title>25-表格的结构</title></head><body><!--

1.由于表格中存储的数据比较复杂, 为了方便管理和阅读以及提升语义, 我们可以对表格中存储的数据进行分类

表格中存储的数据可以分为4类

1.1表格的标题

1.2.表格的表头信息

1.3.表格的主体信息

1.4.表格的页尾信息

2.表格的完整结构

<table>

<caption>表格的标题</caption>

<thead>

<tr>

<th>每一列的标题</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

caption作用: 指定表格的标题

thead作用: 指定表格的表头信息

tbody作用: 指定表格的主体信息

tfoot作用: 指定表格的附加信息

3.注意点:

3.1.如果我们没有编写tbody, 系统会系统给我们添加tbody

3.2.如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化

-->

<title>26-单元格合并</title></head><body><!--

1.水平方向上的单元格合并

可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)

例如:

含义: 把当前单元格当做两个单元格来看待

注意点:

1.由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示

2.一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并

2.垂直方向上的单元格合并

可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)

例如:

含义: 把当前单元格当做两个单元格来看待

-->

<title>28-表单标签</title></head><body><!--

1.什么是表单?

表单就是专门用来收集用户信息的

2.什么是表单元素?

2.1什么是元素?

在HTML中标签/标记/元素都是指HTML中的标签

例如: <a> a标签/a标记/a元素

表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能

3.表单的格式:

<form>

<表单元素>

</form>

4.常见的表单元素

input标签, input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

5.注意:

表单元素一定要写在表单中

--><form>  账号:<input type="text"><br>  密码:<input type="password"><br>  账号:<input type="text" value="lnj"><br> 密码:<input type="password" value="123"><br> <!--

单选框

注意点:

1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值

2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性

3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值

--> 性别:

<input type="radio" name="xx" checked>男

<input type="radio" name="xx">女

<input type="radio" name="xx" >保密<br>  爱好:

<input type="checkbox">篮球

<input type="checkbox">足球

<input type="checkbox" checked="checked">棒球

<input type="checkbox" checked="checked">足浴

</head>

<body>

账号:<input type="text" name="aa"><br>

密码:<input type="password" name="bb"><br>

<!--

定义普通按钮

可以通过value属性来给按钮指定标题

作用: 配合JS完成一些操作

--> <input type="button" value="我是按钮"> <!--

图片按钮

作用: 配合JS完成一些操作

--> <input type="image" src="images/register.jpg"> <!--

重置按钮

作用: 用于清空表单中已经填写好的数据

注意点:

如果想想改重置按钮默认的按钮标题可以通过value属性来修改

--> <input type="reset" value="清空"> <!--

提交按钮

作用: 将表单中已经填写好的数据, 提交到远程服务器

注意点:

要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件

1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址

2.需要给需要提交到服务器的表单元素添加一个name属性

--> <input type="submit">

<!--

隐藏域

作用 : 配合提交按钮将一些数据默默的悄悄咪咪的提交到服务器

Ajax

--> <input type="hidden" name="cc" value="kukuku"></form>

<title>30-Label标签</title></head><body><!--

1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定

2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签

3.绑定的格式:

3.1将文字利用label标签包裹起来

3.2给输入框添加一个id属性

3.3在label标签中通过for属性和输入框中的id进行绑定即可

-->

<title>31-Datalist标签</title></head><body><!--

1.datalist标签

作用: 给输入框绑定待选项

2.datalist格式:

<option>待选项内容</option>

</datalist>

3.如何给输入框绑定待选列表

1.搞一个输入框

2.搞一个datalist列表

3.给datalist列表标签添加一个id

4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

-->

请输入你的车型:

</datalist>

</body>

<title>32-表单标签-H5

</title>

</head>

<body>

<form>

<!--

可以自动校验输入的内容是否符合邮箱的格式

--> 邮箱:<input type="email"><br>

<!--

可以自动校验输入的内容是否是URL地址

--> 域名:<input type="url"><br>

<!--

输入框中只能输入数字

--> 电话:<input type="number"><br>

<!--

可以通过日历来选择时间

--> 时间:<input type="date"><br>

<!--

可以通过取色板来选择颜色

-->

颜色: <input type="color"><br>

</form>

</body>

textarea{

resize: none;

}

</style>

</head>

<body>

<!--

1.select标签

作用: 用于定义下拉列表

格式:

</optgroup>

</select>

注意点:

1.下拉列表不能输入内容, 但是可以直接在列表中选择内容

2.可以通过给option标签添加一个selected属性来指定列表的默认值

3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

2.textarea标签

作用: 定义一个多行输入框

格式:

</textarea>

注意点:

1.默认情况下输入框可以无限换行

2.默认情况下输入框有自己的宽度和高度

3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入

4.默认情况下输入框是可以手动拉伸的

-->

</optgroup>

</optgroup>

</select>

<hr>

</textarea>

</body>

<!--

fieldset标签：可以给表单添加一个边框

legend标签：可以给边框指定一个标题

--> <fieldset>

</fieldset>

<title>35-video标签</title></head><body><!--

1.什么是video标签?

作用: 播放视频

格式:

</video>

video标签的属性

src: 用于告诉video标签需要播放的视频地址

autoplay: 用于告诉video标签是否需要自动播放视频

controls: 用于告诉video标签是否需要显示控制条

poster: 用于告诉video标签视频没有播放之前显示的占位图片

loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放

preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效

muted:静音

width/height: 和img标签中的一模一样

-->

</video>

</body>

<title>36-video标签的第二种格式</title></head><body><!--

1.格式:

<video>

</video>

2.第二种格式存在的意义:

由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的

这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式

video标签的第二种格式存在的意义就是为了解决浏览器适配问题

video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

3.注意点:

3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放

3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

-->

</video>

</body>

<title>37-audio标签</title>

</head>

<body>

<!--

1.什么是audio标签?

作用: 播放音频

格式:

</audio>

<audio>

</audio>

注意点:

audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样

只不过有3个属性不能用, height/width/poster

-->

</audio>

</body>

<title>38-详情和概要标签</title></head><body><!--

1.什么是详情和概要标签?

作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息

默认情况下是折叠展示, 想看见详情必须点击

格式:

详情信息

</details>

-->

简介：郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。1991年...

</details>

</body>

<title>39-marquee标签</title>

<style>

marquee {

width:200px;

height:200px;

background-color: skyblue;

}

</style>

</head>

<body>

<!--

1.什么是marquee标签?

作用: 跑马灯

格式:

属性:

direction: 设置滚动方向 left/right/up/down

scrollamount: 设置滚动速度, 值越大就越快

loop: 设置滚动次数, 默认是-1, 也就是无限滚动

behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回

注意点:

marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好

-->

<marquee>随便写点内容</marquee>

<marquee direction="right">随便写点内容</marquee>

<marquee direction="up">随便写点内容</marquee>

<marquee direction="down">随便写点内容</marquee>

<hr>

<marquee scrollamount="1">随便写点内容</marquee>

<marquee scrollamount="100">随便写点内容</marquee>

<hr>

<marquee loop="1">随便写点内容</marquee>

<hr>

<marquee behavior="slide">随便写点内容</marquee>

<marquee behavior="alternate">随便写点内容</marquee>

</marquee>

</body>

<title>40-HTML中被废弃的标签</title>

.one {

font-weight: bold;

}

.two {

text-decoration: underline;

}

.three {

font-style: italic;

}

.four {

text-decoration: line-through;

}

</style>

</head>

<body>

<!--

1.为什么HTML中有一部分标签会被废弃?

因为当前的HTML中的标签只有一个作用, 就是用来添加语义

而早期的HTML标签中有一部分标签是没有语义的,

有一部分标签是用来修改样式的

所以这部分标签就被淘汰了

<b> <u> <i> <s>以上标签都是没有语义的,都是用来修改样式的

b(bold) 加粗文本, 没有任何语义的

u(underline) 给文本天津下划线, 没有任何语义的

i(italic) 将文本倾斜, 没有任何语义的

s(strikethourgh) 给文本添加删除线, 没有任何语义的

注意点:

以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签

如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用

strong == b

ins == u

em == i

del == s

strong语义: 定义重要性强调的文字

ins语义(inseted): 定义插入的文字

em语义(emphasized): 定义强调的文字

del语义(deleted): 定义被删除的文字

-->

<hr>

<hr>

</body>

</head><body>

<!--

1.在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理

2.什么是字符实体?

在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体

  空格, 一个 就是一个空格, 有多少个 就有多少个空格

< 小于符号 <

(less than)

> 大于符号 >

(greater than)

-->

<p>到此为止我们的HTML的基础标签就学习完毕了, 例如我们学习了<h1>标签, <table>标签, <img>标签....</p>

</body>

创建时间：

2017/8/2 21:46

<title>01-体验CSS</title>

h1{

text-align: center;

color: red;

font-family: "微软雅黑";

}

text-align: center;

color: blue;

font-size: 20px;

}

</style>

</head>

<body>

<!--

分析:

有一个标题(H1), 还有一些段落(P)

标题是居中的, 段落也是居中的. 所以我们可以设置H标签和P标签的align属性等于center来实现

标题和段落都有颜色,都有字体,都有大小, 所以需要给文字包裹一个font标签, 然后通过font标签来设置颜色和字体以及大小

1.通过标签来修改样式的缺点:

1.需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果

2.当需求变更时我们需要修改大量的代码才能满足现有的需求

3.HTML只有一个作用就是用来添加语义

所以在企业开发中修改样式都是交给CSS来做

2.通过CSS来修改样式有什么好处?

1.不用记忆哪些属性属于哪个标签

2.当需求变更时我们不需要修改大量的代码就可以满足需求

3.在前端开发中CSS只有一个作用, 就是用来修改样式

-->

<p>迟到毁一生</p>

<p>早退穷三代</p>

<p>按时上下班</p>

<p>必成高富帅</p>

</body>

<title>02-CSS的格式</title>

text-align: center;

color: red;

}

</style></head><body><!--

1.格式:

标签名称{

属性名称: 属性对应的值;

...

}

</style>

2.注意点:

1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)

2.style标签中的type属性其实可以不用写, 默认就是type="text/css"

3.设置样式时必须按照固定的格式来设置. key: value;

其中:不能省略, 分号大多数情况下也不能省略

4.CSS怎么学?

CSS的学习一共分为两大部分, 一个是CSS的属性, 另一个是CSS选择器. 也就是说着两部分学完CSS就没有别的东西了

-->

</body>

<style>

font-style: italic;

font-weight: bold;

font-size: 10px;

font-family:"楷体";

}

</style></head><body><!--

1.规定文字样式的属性

格式：font-style: italic;

取值：

normal ：正常的，默认就是正常的

italic : 倾斜的

快捷键：

fs font-style: italic;

fsn font-style: normal;

2.规定文字粗细的属性

格式： font-weight: bold;

单词取值:

bold 加粗

bolder 比加粗还要粗

lighter 细线，默认就是细线

数字取值：

100-900之间整百的数字

快捷键

fw font-weight:;

fwb font-weight: bold;

fwbr font-weight: bolder;

3.规定文字大小的属性

格式：font-size: 30px;

单位：px（像素 pixel）

注意点：通过font-size设置大小一定要带单位，也就是一定要写px

快捷键

fz font-size:;

fz30 font-size: 30px;

4.规定文字字体的属性

格式：font-family:"楷体";

注意点：

1.如果取值是中文，需要用双引号或者单引号括起来

2.设置的字体必须是用户电脑里面已经安装的字体

快捷键

ff font-family:;

-->

<p>abc我是段落</p>

</body>

<title>04-字体属性补充</title>

<style>

被注释掉的内容

/*font-family:"乱七八糟的字体", "微软雅黑";*/

/*font-family: Arial, "微软雅黑";*/

font-family:"Microsoft YaHei";

}

</style></head><body><!--

1.如果设置的字体不存在, 那么系统会使用默认的字体来显示

默认使用宋体

2.如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?

可以给字体设置备选方案

格式:font-family:"字体1", "备选方案1", ...;

3.如果想给中文和英文分别单独设置字体, 怎么办?

但凡是中文字体, 里面都包含了英文

但凡是英文字体, 里面都没有包含中文

也就是说中文字体可以处理英文, 而英文字体不能处理中文

**注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

4.补充在企业开发中最常见的字体有以下几个

中文: 宋体/黑体/微软雅黑

英文: "Times New Roman"/Arial

还需要知道一点, 就是并不是名称是英文就一定是英文字体

因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文

宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft YaHei

-->

<p>abc我是段落</p>

</body>

<title>05-文字属性的缩写</title>

<style>

font-style: italic;

font-weight: bold;

font-size: 10px;

font-family:"楷体";

font:bold italic 10px "楷体";

}

</style></head><body><!--

缩写格式:

font: style weight size family;

例如:

font:italic bold 10px "楷体";

注意点:

1.在这种缩写格式中有的属性值可以省略

sytle可以省略

weight可以省略

2.在这种缩写格式中style和weight的位置可以交换

3.在这种缩写格式中有的属性值是不可以省略的

size不能省略

family不能省略

4.size和family的位置是不能顺便乱放的

size一定要写在family的前面, 而且size和family必须写在所有属性的最后

-->

<p>abc我是段落</p>

</body>

<style>

text-decoration: none;

text-align: left;

text-indent: 2em;

}

text-decoration: none;

}

</style></head><body><!--

1.文本装饰的属性

格式:text-decoration: underline;

取值:

underline 下划线

line-through 删除线

overline 上划线

none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

快捷键:

td text-decoration: none;

tdu text-decoration: underline;

tdl text-decoration: line-through;

tdo text-decoration: overline;

2.文本水平对齐的属性

格式: text-align: right;

取值:

left 左

right 右

center 中

快捷键

ta text-align: left;

tar text-align: right;

tac text-align: center;

3.文本缩进的属性

格式: text-indent: 2em;

取值:

2em, 其中em是单位, 一个em代表缩进一个文字的宽度

快捷键

ti text-indent:;

ti2e text-indent: 2em;

-->

<p>我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段落我是段落我是段落</p>

<a href="#">我是超链接</a>

</body>

<style>

/*color: red;*/

/*color: rgb(255,0,0);*/

/*color: rgba(255,0,0,1);*/

color: #FF0000;

color: #F00;

/*color: rgba(255,0,0,0.2);*/

color: #ffee00;

color: #fe0;

color: #769abb;

}

</style></head><body><!--

1.在CSS中如何通过color属性来修改文字颜色

格式: color: 值;

取值:

1.1英文单词

一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达

1.2rgb

rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)

格式: rgb(0,0,0)

那么这个格式中的

第一个数字就是用来设置三原色的光源元件红色显示的亮度

第二个数字就是用来设置三原色的光源元件绿色显示的亮度

第三个数字就是用来设置三原色的光源元件蓝色显示的亮度

这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮

红色: rgb(255,0,0);

绿色: rgb(0,255,0);

蓝色: rgb(0,0,255);

黑色: rgb(0,0,0);

白色: rgb(255,255,255);

在前端开发中其实并不常用黑色

只要让红色/绿色/蓝色的值都一样就是灰色

而且如果这三个值越小那么就越偏黑色, 越大就越偏白色

例如: color: rgb(200,200,200);

1.3rgba

rgba中的rgb和前面讲解的一样, 只不过多了一个a

那么这个a呢代表透明度, 取值是0-1, 取值越小就越透明

例如: color: rgba(255,0,0,0.2);

1.4十六进制

在前端开发中通过十六进制来表示颜色, 其实本质就是RGB

十六进制中是通过每两位表示一个颜色

例如: #FFEE00 FF表示R EE表示G 00表示B

什么是十六进制?

十六进制和十进制一样都是一种计数的方式

在十进制中取值范围0-9, 逢十进一

在十六进制中取值范围0-F, 逢十六进一

a 10

b 11

c 12

d 13

e 14

f 15

10 16

11 17

12 18

十六进制和十进制转换的公式

用十六进制的第一位*16 + 十六进制的第二位 = 十进制

15 == 1*16 + 5 = 21

12 == 1*16 + 2 = 18

FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255

00 == 0*16 + 0 = 0

1.5十六进制缩写

在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位

例如:

#FFEE00 == #FE0

注意点:

1.如果当前颜色对应的两位数字不一样, 那么就不能简写

#123456;

2.如果两位相同的数字不是属于同一个颜色的, 也不能简写

#122334

-->

</body>

创建时间：

2017/8/2 21:56

<title>08-标签选择器</title>

<style>

color: red;

}

h1{

color: blue;

}

</style></head><body><!--

1.什么是标签选择器?

作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

格式:

标签名称{

属性:值;

}

注意点:

1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签

2.标签选择器无论标签藏得多深都能选中

3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

-->

<title>09-id选择器</title>

<style>

#identity1{

color: red;

}

#identity2{

color: green;

}

#identity3{

color: blue;

}

#identity4{

color: yellow;

}

</style></head><body><!--

1.什么是id选择器?

作用: 根据指定的id名称找到对应的标签, 然后设置属性

格式:

#id名称{

属性:值;

}

注意点:

1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id

2.在同一个界面中id的名称是不可以重复的

3.在编写id选择器时一定要在id名称前面加上#

4.id的名称是有一定的规范的

4.1id的名称只能由字母/数字/下划线

a-z 0-9 _

4.2id名称不能以数字开头

4.3id名称不能是HTML标签的名称

不能是a h1 img input ...

5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的

-->

<p id="identity1">迟到毁一生</p>

<p id="identity2">早退穷三代</p>

<p id="identity3">按时上下班</p>

<p id="identity4">必成高富帅</p>

</body>

<style>

.pp{

color: red;

}

.ppp{

color: green;

}

.pppp{

color: blue;

}

.ppppp{

color: yellow;

}

.para1{

font-size: 100px;

}

.para2{

font-style: italic;

}

</style></head><body><!--

1.什么是类选择器?

作用: 根据指定的类名称找到对应的标签, 然后设置属性

格式:

.类名{

属性:值;

}

注意点:

1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名

2.在同一个界面中class的名称是可以重复的

3.在编写class选择器时一定要在class名称前面加上.

4.类名的命名规范和id名称的命名规范一样

5.类名就是专门用来给CSS设置样式的

6.在HTML中每个标签可以同时绑定多个类名

格式:

<标签名称 class="类名1 类名2 ...">

错误的写法:

-->

<p class="pp">迟到毁一生</p>

<p class="ppp">早退穷三代</p>

<p class="pppp">按时上下班</p>

<p class="ppppp">必成高富帅</p>

</body>

<title>11-id选择器和class选择器</title>

<style>

.para1{

color: red;

font-size: 30px;

}

.para2{

font-size: 30px;

text-decoration: underline;

}

.para3{

color: red;

text-decoration: underline;

}

.colorR{

color: red;

}

.size30{

font-size: 30px;

}

.line{

text-decoration: underline;

}

</style></head><body><!--

1.id和class的区别?

1.1

id相当于人的身份证不可以重复

class相当于人的名称可以重复

1.2

一个HTML标签只能绑定一个id名称

一个HTML标签可以绑定多个class名称

2.id选择器和class选择器区别?

id选择器是以#开头

class选择器是以.开头

3.在企业开发中到底用id选择器还是用class选择器?

id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式

4.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平

一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

--><!--

<p class="para1">第一段文字</p>

<p class="para2">第二段文字</p>

<p class="para3">第三段文字</p>

-->

<p class="colorR size30">第一段文字</p>

<p class="size30 line">第二段文字</p>

<p class="colorR line">第三段文字</p>

</body>

<title>12-后代选择器</title>

<style>

div p{

color: red;

}

#identity p{

color: red;

}

.para p{

color: blue;

}

#identity #iii{

color: skyblue;

}

#identity .ccc{

color: purple;

}

div ul li p{

color: red;

}

</style>

</head>

<body>

<!--

1.什么是后代选择器?

作用: 找到指定标签的所有特定的后代标签, 设置属性

格式:

标签名称1 标签名称2{

属性:值;

}

先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性

div p{}

注意点:

1.后代选择器必须用空格隔开

2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代

3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器

4.后代选择器可以通过空格一直延续下去

-->

<ul>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

<title>13-子元素选择器</title>

<style>

div>p{

color: red;

}

#identity>p{

color: blue;

}

div>ul>li>p{

color: purple;

}

</style></head><body><!--

1.什么是子元素选择器?

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

格式:

标签名称1>标签名称2{

属性:值;

}

先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:

1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签

2.子元素选择器之间需要用>符号连接, 并且不能有空格

3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器

4.子元素选择器可以通过>符号一直延续下去

-->

<ul>

<li>

</li>

</ul>

</div>

</body>

<title>15-交集选择器</title>

<style>

p.para1{

color: red;

}

.para1#identity{

color: blue;

}

</style></head><body><!--

1.什么是交集选择器?

作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性

格式:

选择器1选择器2{

属性: 值;

}

注意点:

1.选择器和选择器之间没有任何的连接符号

2.选择器可以使用标签名称/id名称/class名称

3.交集选择器仅仅作为了解, 企业开发中用的并不多

-->

</body>

<title>16-并集选择器</title>

<style>

.ht{

color: red;

}

.para{

color: red;

}

.ht,.para{

color: red;

}

</style></head><body><!--

1.什么是并集选择器?

作用: 给所有选择器选中的标签设置属性

格式:

选择器1,选择器2{

属性:值;

}

注意点:

1.并集选择器必须使用,来连接

2.选择器可以使用标签名称/id名称/class名称

-->

</body>

<title>17-兄弟选择器</title>

<style>

h1+p{

color: red;

}

h1~p{

color: green;

}

</style></head><body><!--

1.相邻兄弟选择器 CSS2

作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性

格式:

选择器1+选择器2{

属性:值;

}

注意点:

1.相邻兄弟选择器必须通过+连接

2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2.通用兄弟选择器 CSS3

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性

格式:

选择器1~选择器2{

属性:值;

}

注意点:

1.通用兄弟选择器必须用~连接

2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

--><!--

<a href="#">我是超链接</a>

-->

<a href="#">我是超链接</a>

<a href="#">我是超链接</a>

</body>

<style>

p:first-child{

color: red;

}

p:first-of-type{

color: blue;

}

p:last-child{

color: red;

}

p:last-of-type{

color: blue;

}

p:nth-child(3){

color: red;

}

p:nth-of-type(3){

color: blue;

}

p:nth-last-child(2){

color: red;

}

p:nth-last-of-type(2){

color: red;

}

p:only-child{

color: purple;

}

p:only-of-type {

color: red;

}

.para:only-of-type {

color: red;

}

</style></head><body><!--

CSS3中新增的选择器最具代表性的就是序选择器

1.同级别的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

注意点: 不区分类型

2.同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type 选中同级别中同类型的最后一个标签

:nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签

--><!--

<div>

</div>

-->

</div>

</body>

<title>19-序选择器下</title>

<style>

p:nth-child(odd){

color: red;

}

p:nth-child(even){

color: blue;

}

p:nth-of-type(odd){

color: red;

}

p:nth-of-type(even){

color: blue;

}

p:nth-child(2n+0){

color: red;

}

p:nth-child(2n+1){

color: blue;

}

p:nth-child(3n+0){

color: red;

}

</style></head><body><!--

:nth-child(odd) 选中同级别中的所有奇数

:nth-child(even) 选中同级别中的所有偶数

:nth-child(xn+y)

x和y是用户自定义的, 而n是一个计数器, 从0开始递增

-->

</body>

<title>20-属性选择器上</title>

<style>

p[id]{

color: red;

}

p[class=cc]{

color: blue;

}

</style></head><body><!--

1.什么是属性选择器?

作用: 根据指定的属性名称找到对应的标签, 然后设置属性

格式:

[attribute]

作用:根据指定的属性名称找到对应的标签, 然后设置属性

[attribute=value]

作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性

最常见的应用场景, 就是用于区分input属性

input[type=password]{}

-->

</body>

<title>21-属性选择器下</title>

<style>

img[alt^=abc]{

color: red;

}

img[alt|=abc]{

color: red;

}

img[alt$=abc]{

color: blue;

}

img[alt*=abc]{

color: red;

}

img[alt~=abc]{

color: red;

}

</style></head><body><!--

1.属性的取值是以什么开头的

[attribute|=value] CSS2

[attribute^=value] CSS3

两者之间的区别:

CSS2中的只能找到value开头,并且value是被-和其它内容隔开的

CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

2.属性的取值是以什么结尾的

[attribute$=value] CSS3

3.属性的取值是否包含某个特定的值得

[attribute~=value] CSS2

[attribute*=value] CSS3

两者之间的区别:

CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的

CSS3中的只要包含value就可以找到

-->

<!--

-->

</body>

<title>22-通配符选择器</title>

<style>

.cc{

color: red;

}

color: red;

}

</style></head><body><!--

1.什么是通配符选择器?

作用: 给当前界面上所有的标签设置属性

格式:

属性:值;

}

注意点:

由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

--><!--

<a href="#" class="cc">我是超链接</a>

-->

<a href="#">我是超链接</a>

</body>

<title>23-选择器练习</title>

<style>

/*标签选择器

color: red;

}

/*id选择器

#identity1{

color: red;

}

#identity2{

color: red;

}

/*类选择器

.para{

color: red;

}

/*后代选择器

div p{

color: red;

}

/*子元素选择器

div>p{

color: red;

}

/*交集选择器

p.para{

color: red;

}

/*并集选择器

#identity1,#identity2{

color: red;

}

/*通用兄弟选择器

h1~p{

color: red;

}

/*序选择器

p:nth-of-type(n+1){

color: red;

}

/*属性选择器*/

p[id]{

color: red;

font-size: 10px;

text-decoration: underline;

}

</style>

</head>

<body>

<div>

</div>

</body>

创建时间：

2017/8/2 22:36

<title>24-CSS三大特性之继承性</title>

<style>

div{

color: red;

text-decoration: none;

font-size: 30px;

}

</style></head><body><!--

1.什么是继承性?

作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性

注意点:

1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承

2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承

3.继承性中的特殊性

3.1a标签的文字颜色和下划线是不能继承的

3.2h标签的文字大小是不能继承的

应用场景:

一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

body{}

-->

<div>

<ul>

<li>

</li>

</ul>

</div>

<div>

<a href="#">我是超链接</a>

</div>

<div>

<h1>我是大标题</h1>

</div>

</body>

<title>25-CSS三大特性之层叠性</title>

<style>

color: red;

}

.para{

color: blue;

}

</style></head><body><!--

1.什么是层叠性?

作用: 层叠性就是CSS处理冲突的一种能力

注意点:

层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

CSS全称 Cascading StyleSheet

-->

</body>

<title>26-CSS三大特性之优先级</title>

<style>

li{

color: blue;

}

ul{

color: red;

}

color: blue;

}

color: red;

}

#identity{

color: purple;

}

.para{

color: pink;

}

color: green;

}

color: blue;

}

li{

color: red;

}

</style></head><body><!--

1.什么是优先级?

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

2.优先级判断的三种方式

2.1间接选中就是指继承

如果是间接选中, 那么就是谁离目标标签比较近就听谁的

2.2相同选择器(直接选中)

如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

2.3不同选择器(直接选中)

如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠

id>类>标签>通配符>继承>浏览器默认

-->0

<ul>

<li>

</li>

</ul>

</body>

<title>27-优先级之important</title>

<style>

#identity{

color: purple;

font-size: 50px;

}

.para{

color: pink ;

}

color: green;

}

color: blue !important;

font-size:10px;

}

li{

color: red ;

}

</style></head><body><!--

1.什么是!important

作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高

注意点:

1.!important只能用于直接选中, 不能用于间接选中

2.通配符选择器选中的标签也是直接选中的

3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升

4.!important必须写在属性值得分号前面

5.!important前面的感叹号不能省略

-->

<ul>

<li>

</li>

</ul>

</body

<title>28-优先级之权重问题</title>

<style> /*

#identity1 .box2{

color: red;

}

.box1 .box2{

color: green;

}

div ul li p{

color: blue;

}

.box1 .box2{

color: blue;

}

div .box2{

color: green;

}

#identity1 ul li p{

color: red;

}

#identity1 ul p{

color: green;

}

.box1 li #identity2{

color: blue;

}

#identity1 ul .box2{

color: red;

}

.box2{

color: red;

}

li{

color: blue;

}

</style></head><body><!--

1.什么是优先级的权重?

作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

2.权重的计算规则

2.1首先先计算选择器中有多少个id, id多的选择器优先级最高

2.2如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高

2.3如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高

2.4如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的

也就是说优先级如果一样, 那么谁写在后面听谁的

注意点:

1.只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

-->

<ul>

<li>

</li>

</ul>

</div>

</body>

<title>29-div和span标签</title>

<style>

.header{

width: 980px;

height: 100px;

background: red;

margin: auto;

margin-bottom: 10px;

}

.content{

width: 980px;

height: 500px;

background: green;

margin: auto;

margin-bottom: 10px;

}

.footer{

width: 980px;

height: 100px;

background: blue;

margin: auto;

}

.logo{

width: 200px;

height: 50px;

background: pink;

float: left;

margin: 20px;

}

.nav{

width: 600px;

height: 50px;

background: yellow;

float: right;

margin: 20px;

}

.aside{

width: 250px;

height: 460px;

background: purple;

float: left;

margin: 20px;

}

.article{

width: 650px;

height: 460px;

background: deepskyblue;

float: right;

margin: 20px;

}

span{

color: red;

}

</style></head><body><!--

1.什么是div?

作用: 一般用于配合css完成网页的基本布局

2.什么是span?

作用: 一般用于配合css修改网页中的一些局部信息

3.div和span有什么区别?

1.div会单独的占领一行,而span不会单独占领一行

2.div是一个容器级的标签, 而span是一个文本级的标签

4.容器级的标签和文本级的标签的区别?

容器级的标签中可以嵌套其它所有的标签

文本级的标签中只能嵌套文字/图片/超链接

容器级的标签

div h ul ol dl li dt dd ...

文本级的标签

span p buis strong em ins del ...

注意点:

哪些标签是文本级的哪些标签是容器级的, 我们不用刻意去记忆, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套

-->

<!--

</div>

</div>

-->

<!--

-->

<!--

<div>我是div</div>

<span>我是span</span>

-->

<!--

<div>

<ul>

<li>

</li>

</ul>

</div>

-->

<!--

<p>我是段落

</p>

-->

<h1>我是标题

</h1>

</body>

<title>30-CSS元素的显示模式</title>

<style>

div{

background: red;

width: 200px;

height: 200px;

}

span{

background: blue;

width: 200px;

height: 200px;

}

img{

width: 50px;

height: 50px;

}

</style></head><body><!--

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级

在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素

1.什么是块级元素, 什么是行内元素?

块级元素会独占一行

行内元素不会独占一行

容器级的标签

div h ul ol dl li dt dd ...

文本级的标签

span p buis stong em ins del ...

块级元素

p div h ul ol dl li dt dd

行内元素

span buis strong em ins del

2.块级元素和行内元素的区别?

2.1块级元素

独占一行

如果没有设置宽度, 那么默认和父元素一样宽

如果设置了宽高, 那么就按照设置的来显示

2.2行内元素

不会独占一行

如果没有设置宽度, 那么默认和内容一样宽

行内元素是不可以设置宽度和高度的

2.3行内块级元素

为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

-->

<div>我是div</div>

<hr>

<span>我是span</span>

<hr>

</body>

<title>31-CSS元素显示模式转换</title>

<style>

div{

display: inline;

background: red;

width: 200px;

height: 200px;

}

span{

display: block;

background: green;

width: 200px;

height: 200px;

}

.cc{

background: blue;

width: 200px;

height: 200px;

display: inline-block;

}

</style>

</head>

<body>

<!--

1.如何转换CSS元素的显示模式?

设置元素的display属性

2.display取值

block 块级

inline 行内

inline-block 行内块级

3.快捷键

di display: inline;

db display: block;

dib display: inline-block;

-->

<div>我是div</div>

<span>我是span</span>

</body>

创建时间：

2017/8/2 23:02

<title>33-背景颜色</title> <style> div{

width: 500px;

height: 500px;

}

.box1{

background-color: red;

}

.box2{

background-color: rgb(0,255,0);

}

.box3{

background-color: rgba(0,0,255,0.7);

}

.box4{

background-color: #0ff;

}

</style></head><body><!--

1.如何设置标签的背景颜色?

在CSS中有一个background-color:属性, 就是专门用来设置标签的背景颜色的

取值:

具体单词

rgb

rgba

十六进制

快捷键:

bc background-color: #fff;

-->

</body>

<title>34-背景图片</title> <style> div{

width: 500px;

height: 500px;

}

.box1{

/*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/

}

</style></head><body><!--

1.如何设置背景图片?

在CSS中有一个叫做background-image: url();的属性, 就是专门用于设置背景图片的

快捷键:

bi background-image: url();

注意点:

1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址

2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充

3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

-->

</body>

<title>35-背景平铺属性</title>

<style>

div{

width: 500px;

height: 500px;

}

.box1{

background-repeat: repeat-y;

}

body{

}

div{

width: 980px;

height: 60px;

}

</style></head><body><!--

1.如何控制背景图片的平铺方式?

在CSS中有一个background-repeat属性, 就是专门用于控制背景图片的平铺方式的

取值:

repeat 默认, 在水平和垂直都需要平铺

no-repeat 在水平和垂直都不需要平铺

repeat-x 只在水平方向平铺

repeat-y 只在垂直方向平铺

快捷键

bgr background-repeat:

应用场景:

可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度

-->

</div>

</body>

<title>36-背景定位属性</title>

<style>

div{

/*width: 500px;*/

height: 500px;

}

.box1{

/*background-color: red;*/

/*background-image: url(images/girl.jpg);*/

/*background-repeat: no-repeat;*/

/*background-position: left top;*/

/*background-position: right top;*/

/*background-position: right bottom;*/

/*background-position: left bottom;*/

/*background-position: center center;*/

/*background-position: left center;*/

/*background-position: center top;*/

/*background-position: 100px 0;*/

/*background-position: 100px 200px;*/

/*background-position: -100px -100px;*/

background-position: center top;

}

</style></head><body><!--

1.如何控制背景图片的位置?

在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置

2.格式:

background-position: 水平方向垂直方向;

3.取值

2.1具体的方位名词

水平方向: left center right

垂直方向: top center bottom

2.2具体的像素

例如: background-position: 100px 200px;

记住一定要写单位, 也就是一定要写px

记住具体的像素是可以接收负数的

快捷键:

bp background-position: 0 0;

注意点:

同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色

-->

</div>

</body>

-------

<title>37-背景缩写</title> <style> div{

/*width: 500px;*/

/*height: 500px;*/

background-color: red;

background-repeat: no-repeat;

background-position: left bottom;

/*background: red url(images/girl.jpg) no-repeat left bottom;*/

/*background: red;*/

/*background: url(images/girl.jpg);*/

}

body{

background-repeat: no-repeat;

/*background-attachment: scroll;*/

background-attachment:fixed;

}

</style></head><body><!--

1.背景属性缩写的格式

background: 背景颜色背景图片平铺方式关联方式定位方式;

快捷键:

bg+ background: #fff url() 0 0 no-repeat;

2.注意点：

background属性中，任何一个属性都可以被省略

3.什么是背景关联方式？

默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条的滚动而滚动，那么我们就可以修改背景图片和滚动条的关联方式

4.如何修改背景关联方式？

在CSS中有一个叫做background-attachment的属性，这个属性就是专门用于修改关联方式的

格式

background-attachment：scroll;

取值：

scroll 默认值，会随着滚动条的滚动而滚动

fixed 不会随着滚动条的滚动而滚动

快捷键:

ba background-attachment:;

-->

<title>38-背景图片和插入图片区别</title> <style> div{

/*width: 150px;*/

/*height: 170px;*/

width: 300px;

height: 300px;

background-color: red;

}

.box1{

background-repeat:no-repeat;

background-position: right bottom;

}

</style></head><body><!--

1.背景图片和插入图片区别?

1.1

背景图片仅仅是一个装饰, 不会占用位置

插入图片会占用位置

1.2

背景图片有定位属性, 所以可以很方便的控制图片的位置

插入图片没有定位属性, 所有控制图片的位置不太方便

1.3

插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

-->

<img src="images/girl.jpg" > 我是文字

</div>

</body>

<title>40-CSS精灵图</title> <style> .box{

width: 86px;

height: 28px;

background-position: -425px -200px;

}

</style></head><body><!--

1.什么是CSS精灵图

CSS精灵图是一种图像合成技术

2.CSS精灵图作用

可以减少请求的次数, 以及可以降低服务器处理压力

3.如何使用CSS精灵图

CSS的精灵图需要配合背景图片和背景定位来使用

--><div class="box"></div></body>

<title>42-边框属性上</title> <style> .box{

width: 100px;

height: 100px;

background-color: red;

/*border: 5px solid blue;*/

/*border: 5px solid;*/

/*border: 5px blue;*/

/*border: solid blue;*/

border-top:5px solid blue;

border-right:10px dashed green;

border-bottom:15px dotted purple;

border-left:20px double pink;

}

</style></head><body><!--

1.什么边框?

边框就是环绕在标签宽度和高度周围的线条

2.边框属性的格式

2.1连写(同时设置四条边的边框)

border: 边框的宽度边框的样式边框的颜色;

快捷键:

bd+ border: 1px solid #000;

注意点:

1.连写格式中颜色属性可以省略, 省略之后默认就是黑色

2.连写格式中样式不能省略, 省略之后就看不到边框了

3.连写格式中宽度可以省略, 省略之后还是可以看到边框

2.2连写(分别设置四条边的边框)

border-top: 边框的宽度边框的样式边框的颜色;

border-right: 边框的宽度边框的样式边框的颜色;

border-bottom: 边框的宽度边框的样式边框的颜色;

border-left: 边框的宽度边框的样式边框的颜色;

快捷键:

bt+ border-top: 1px solid #000;

br+

bb+

bl+

--><div class="box"></div></body>

<title>43-边框属性下</title> <style> .box{

width: 500px;

height: 500px;

background-color: red;

/*border-width: 5px 10px 15px 20px;*/

/*border-style: solid dashed dotted double;*/

/*border-color: blue green purple pink;*/

/*border-color: blue green purple;*/

/*border-color: blue green;*/

/*border-color: blue;*/

border-top-width: 5px;

border-top-style: solid;

border-top-color: blue;

border-right-width: 10px;

border-right-style: dashed;

border-right-color: green;

border-bottom-width: 15px;

border-bottom-style: dotted;

border-bottom-color: purple;

border-left-width: 20px;

border-left-style: double;

border-left-color: pink;

}

</style></head><body><!--

2.3连写(分别设置四条边的边框)

border-width: 上右下左;

border-style: 上右下左;

border-color: 上右下左;

注意点:

1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右

2.这三个属性的取值省略时的规律

2.1上右下左 > 上右下 > 左边的取值和右边的一样

2.2上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样

2.3上右下左 > 上 > 右下左边取值和上边一样

3.非连写(方向+要素)

border-left-width: 20px;

border-left-style: double;

border-left-color: pink;

-->

</body>

<title>45-内边距属性</title> <style> div{

width: 98px;

height: 90px;

border: 1px solid #000;

background-color: red;

}

.box1{

padding-top: 20px;

}

.box2{

padding-right:40px;

}

.box3{

padding-bottom:80px;

}

.box4{

padding-left:160px;

}

.box5{

/*padding:20px 40px 80px 160px;*/

/*padding:20px 40px 80px;*/

/*padding:20px 40px;*/

padding:20px;

}

</style></head><body><!--

1.什么是内边距?

边框和内容之间的距离就是内边距

2.格式

2.1非连写

padding-top: ;

padding-right: ;

padding-bottom: ;

padding-left: ;

2.2连写

padding: 上右下左;

2.这三个属性的取值省略时的规律

2.1上右下左 > 上右下 > 左边的取值和右边的一样

2.2上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样

2.3上右下左 > 上 > 右下左边取值和上边一样

注意点:

1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化

2.给标签设置内边距之后, 内边距也会有背景颜色

-->

<title>46-外边距属性</title> <style> *{

padding:0;

margin:0;

}

span{

display: inline-block;

width: 100px;

height: 100px;

border: 1px solid #000;

background-color: red;

}

div{

height: 100px;

border: 1px solid #000;

}

.box1{

margin-top:20px;

margin-right:40px;

margin-bottom:80px;

margin-left:160px;

/*margin:20px 40px 80px 160px;*/

/*margin:20px 40px 80px;*/

/*margin:20px 40px;*/

margin:20px;

}

</style></head><body><!--

1.什么是外边距?

标签和标签之间的距离就是外边距

2.格式

2.1非连写

margin-top: ;

margin-right: ;

margin-bottom: ;

margin-left: ;

2.2连写

margin: 上右下左;

2.这三个属性的取值省略时的规律

2.1上右下左 > 上右下 > 左边的取值和右边的一样

2.2上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样

2.3上右下左 > 上 > 右下左边取值和上边一样

注意点:

外边距的那一部分是没有背景颜色的

<title>48-CSS盒子模型</title> <style> span,a,b,strong{

display: inline-block;

width: 100px;

height: 100px;

border: 6px solid #000;

padding: 20px;

margin: 20px;

}

</style></head><body><!--

1.什么是CSS盒子模型?

CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

结论

1.在HTML中所有的标签都可以设置

宽度/高度 == 指定可以存放内容的区域

内边距 == 填充物

边框 == 手机盒子自己

外边距 == 盒子和盒子之间的间隙

-->

<title>51-盒子box-sizing属性</title> <style> .content{

width: 300px;

height: 300px;

background-color: red;

}

.aside{

width: 100px;

height: 200px;

background-color: green;

float: left;

}

.article{

1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变

和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度

3.box-sizing取值

3.1content-box

元素的宽高 = 边框 + 内边距 + 内容宽高

3.2border-box

元素的宽高 = width/height的宽高

box-sizing: border-box;

width: 200px;

height: 200px;

background-color: blue;

float: right;

border: 20px solid #000;

padding: 20px;

<title>49-盒子模型宽度和高度</title></head><body><!--

1.内容的宽度和高度

就是通过width/height属性设置的宽度和高度

2.元素的宽度和高度

宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框

高度同理可证

3.元素空间的宽度和高度

宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距

高度同理可证

<title>52-盒子模型练习2</title> <style> .big{

/*width: 350px;*/

/*height: 350px;*/

width: 500px;

height: 500px;

background-color: red;

box-sizing: border-box;

padding-top:150px;

padding-left:150px;

border: 5px solid #000;

}

.small{

width: 200px;

height: 200px;

background-color: blue;

注意点:

1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性

3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin

margin本质上是用于控制兄弟关系之间的间隙的

margin-top:150px;

margin-left:150px;

注意点:

1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中

2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效

margin:150px auto;

}

</style></head><body><!--

需求

有一个大盒子, 元素的宽高是500

有一个小盒子, 元素的宽高是200

要求将小盒子放到大盒子中, 并且让小盒子在大盒子中水平垂直居中

-->

</div></div>

</body>

<title>53-盒子居中和内容居中</title> <style> .father{

width: 800px;

height: 500px;

background-color: red;

/*text-align: center;*/

margin:0 auto;

}

.son{

width: 100px;

height: 100px;

background-color: blue;

}

</style></head><body><!--

1.text-align:center;和margin:0 auto;区别

text-align: center;作用

设置盒子中存储的文字/图片水平居中

margin:0 auto;作用

让盒子自己水平居中

--><div class="father"> 我是文字<br/> <img src="images/girl.jpg" > </div></body>

创建时间：

2017/8/3 14:35

<title>54-清空默认边距</title>

<style> /*

margin: 0;

padding: 0;

}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

margin:0;padding:0

}

width: 610px;

height: 110px;

background-color: #cdcdcd;

border: 1px solid #000000;

}

</style></head><body><!--

1.为什么要清空默认边距(外边距和内边距)

在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距

2.如何清空默认的边距

格式

margin: 0;

padding: 0;

}

3.注意点

通配符选择器会找导(遍历)当前界面中所有的标签, 所以性能不好

企业开发中可以从这个网址中拷贝

http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

<title>54-清空默认边距</title>

<style>

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

margin:0;padding:0

}

width: 610px;

height: 110px;

background-color: #cdcdcd;

border: 1px solid #000000;

}

div{

box-sizing: border-box;

width: 100px;

height: 80px;

border: 1px solid #000;

line-height: 20px;

/*line-height: 80px;*/

padding-top:20px;

padding-bottom:20px;

}

</style></head><body><!--

1.什么是行高?

在CSS中所有的行都有自己的行高

注意点:

行高和盒子高不是同一个概念

行高指的是每行内容的高度

盒子高指的是元素的高度

规律:

1.文字在行高中默认是垂直居中的

2.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的

简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可

3.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中

-->

<div>我是文字我是文字我是文字</div>

</body>

<!--

1.什么是网页的布局方式?

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

1.标准流(文档流/普通流)排版方式

1.1其实浏览器默认的排版方式就是标准流的排版方式

1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素

1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版

垂直排版, 如果元素是块级元素, 那么就会垂直排版

水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

2.浮动流排版方式

2.1浮动流是一种"半脱离标准流"的排版方式

2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

注意点:

1.浮动流中没有居中对齐, 也就是没有center这个取值

2.在浮动流中是不可以使用margin: 0 auto;

特点:

1.在浮动流中是不区分块级元素/行内元素/行内块级元素的

无论是级元素/行内元素/行内块级元素都可以水平排版

2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

1.什么是浮动元素的脱标?

脱标: 脱离标准流

当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标

2.浮动元素脱标之后会有什么影响?

如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素

-->

<!--

1.浮动元素排序规则

1.1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

1.2不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

1.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

-->

<!--

1.什么是浮动元素贴靠现象?

1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示

2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠

3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

-->

<!--

1.什么是浮动元素字围现象?

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

-->

<!--

1.企业开发中什么时候使用标准流什么时候使用浮动流?

垂直方向使用标准流, 水平方向使用浮动流

2.拿到一个很复杂的界面如何入手?

2.1从上至下布局

2.2从外向内布局

2.3水平方向可以先划分为一左一右再对左边或者右边进行进一步布局

-->

<title>64-浮动元素高度问题</title> <style> *{

margin: 0;

padding: 0;

}

div{

border: 1px solid #000;

}

float: left;

width: 50px;

height: 50px;

background-color: red;

}

</style></head><body><!--

1.在标准流中内容的高度可以撑起父元素的高度

2.在浮动流中浮动的元素是不可以撑起父元素的高度的

-->

<div>

<p></p>

</div>

</body>

<!--

1.清除浮动的第二种方式

给后面的盒子添加clear属性

clear属性取值:

none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)

left: 不要找前面的左浮动元素

right: 不要找前面的右浮动元素

both: 不要找前面的左浮动元素和右浮动元素

注意点:

当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效

-->

<!--

1.清除浮动的第三种方式

隔墙法

2.外墙法

2.1在两个盒子中间添加一个额外的块级元素

2.2给这个额外添加的块级元素设置clear: both;属性

注意点:

外墙法它可以让第二个盒子使用margin-top属性

外墙法不可以让第一个盒子使用margin-bottom属性

3.内墙法

3.1在第一个盒子中所有子元素最后添加一个额外的块级元素

3.2给这个额外添加的块级元素设置clear: both;属性

注意点:

内墙法它可以让第二个盒子使用margin-top属性

内墙法它可以让第一个盒子使用margin-bottom属性

4.外墙法和内墙法区别?

外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

5.在企业开发中不常用隔墙法来清除浮动

-->

1.什么是伪元素选择器?

伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

2.格式:

标签名称::before{

属性名称:值;

}

给指定标签的内容前面添加一个子元素

标签名称::after{

属性名称:值;

}

给指定标签的内容后面添加一个子元素

-->

<!--

1.清除浮动的第四种方式

利用伪元素选择器清除浮动

本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样

注意点:

IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

-->

<!--

1.overflow: hidden;作用

1.1可以将超出标签范围的内容裁剪掉

1.2清除浮动

1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

-->

<!--

1.定位流分类

1.1相对定位

1.2绝对定位

1.3固定定位

1.4静态定位

2.什么是相对定位?

相对定位就是相对于自己以前在标准流中的位置来移动

3.相对定位注意点

3.1相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

3.2在相对定位中同一个方向上的定位属性只能使用一个

3.3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

3.4由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

4.相对定位应用场景

4.1用于对元素进行微调

4.2配合后面学习的绝对定位来使用

-->

<!--

1.什么是绝对定位?

绝对定位就是相对于body来定位

2.绝对定位注意点

2.1绝对定位的元素是脱离标准流的

2.2绝对定位的元素是不区分块级元素/行内元素/行内块级元素

<!--

1.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

2.一个绝对定位的元素会忽略祖先元素的padding

-->

<!--

1.如何让绝对定位的元素水平居中

只需要设置绝对定位元素的left:50%;

然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

-->

<!--

1.什么是固定定位?

固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动

注意点:

1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间

2.固定定位和绝对定位一样不区分行内/块级/行内块级

-->

-------------

<!--

1.什么是z-index属性?

默认情况下所有的元素都有一个默认的z-index属性, 取值是0.

z-index属性的作用是专门用于控制定位流元素的覆盖关系的

1.默认情况下定位流的元素会盖住标准流的元素

2.默认情况下定位流的元素后面编写的会盖住前面编写的

3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面

注意点:

1.从父现象

1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面

1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面

-->

<title>86-a标签的伪类选择器</title>

<style>

a:link{

color: tomato;

}

a:visited{

color: green;

}

a:hover{

color: orange;

}

a:active{

color: pink;

}

// 简写格式

color: green;

}

/*a:link{*/

/*color: green;*/

/*}*/

/*a:visited{*/

/*color: green;*/

/*}*/

a:hover{

color: orange;

}

a:active{

color: pink;

}

</style></head><body><!--

1.通过我们的观察发现a标签存在一定的状态

1.1默认状态, 从未被访问过

1.2被访问过的状态

1.3鼠标长按状态

1.4鼠标悬停在a标签上状态

2.什么是a标签的伪类选择器?

a标签的伪类选择器是专门用来修改a标签不同状态的样式的

3.格式

:link 修改从未被访问过状态下的样式

:visited 修改被访问过的状态下的样式

:hover 修改鼠标悬停在a标签上状态下的样式

:active 修改鼠标长按状态下的样式

4.注意点

4.1a标签的伪类选择器可以单独出现也可以一起出现

4.2a标签的伪类选择器如果一起出现, 那么有严格的顺序要求

编写的顺序必须要个的遵守爱恨原则 love hate

4.3如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写

-->

<a href="http://www.taobao.com">taobao</a>

</body>

<title>87-a标签的伪类选择器练习</title>

<style>

margin: 0;

padding: 0;

}

ul{

width: 960px;

height: 40px;

background-color: green;

margin: 100px auto;

}

ul li{

list-style: none;

width: 120px;

height: 40px;

float: left;

background-color: purple;

text-align: center;

line-height: 40px;

}

1.在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面

2.在企业开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)

3.在企业开发中和a标签文字/背景相关的都写在伪类选择器中

ul li a{

width: 120px;

height: 40px;

display: inline-block;

}

ul li a:link{

background-color: pink;

color: white;

text-decoration: none;

}

ul li a:hover{

color: red;

background-color: #ccc;

}

ul li a:active{

color: yellow;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

创建时间：

2017/8/3 15:48

<style>

margin: 0;

padding: 0;

}

div{

width: 100px;

height: 50px;

background-color: red;

/*告诉系统哪个属性需要执行过渡效果*/

transition-property: width, background-color;

/*告诉系统过渡效果持续的时长*/

transition-duration: 5s, 5s;

/*transition-property: background-color;*/

/*transition-duration: 5s;*/

}

/*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/

div:hover{

width: 300px;

background-color: blue;

}

</style></head><body><!--

1,过渡三要素

1.1必须要有属性发生变化

1.2必须告诉系统哪个属性需要执行过渡效果

1.3必须告诉系统过渡效果持续时长

2.注意点

当多个属性需要同时执行过渡效果时用逗号隔开即可

transition-property: width, background-color;

transition-duration: 5s, 5s;

--><div>

</div>

</body>

<title>89-过渡模块-其它属性</title> <style> *{

margin: 0;

padding: 0;

}

div {

width: 100px;

height: 50px;

background-color: red;

transition-property: width;

transition-duration: 5s;

/*告诉系统延迟多少秒之后才开始过渡动画*/

/*transition-delay: 2s;*/

}

div:hover{

width: 300px;

}

ul{

width: 800px;

height: 500px;

margin: 0 auto;

background-color: pink;

border: 1px solid #000;

}

ul li{

list-style: none;

width: 100px;

height: 50px;

margin-top: 50px;

background-color: blue;

transition-property: margin-left;

transition-duration: 10s;

}

ul:hover li{

margin-left: 700px;

}

ul li:nth-child(1){

/*告诉系统过渡动画的运动的速度*/

transition-timing-function: linear;

}

ul li:nth-child(2){

transition-timing-function: ease;

}

ul li:nth-child(3){

transition-timing-function: ease-in;

}

ul li:nth-child(4){

transition-timing-function: ease-out;

}

ul li:nth-child(5){

transition-timing-function: ease-in-out;

}

</style>

</head>

<body>

<ul>

<li>linear</li>

</ul>

</body>

<style>

margin: 0;

padding: 0;

}

div {

width: 100px;

height: 50px;

background-color: red;

/*transition-property: width;*/

/*transition-duration: 5s;*/

/*transition: width 5s linear 0s,background-color 5s linear 0s;*/

/*transition: background-color 5s linear 0s;*/

/*transition: width 5s,background-color 5s,height 5s;*/

transition: all 5s;

}

div:hover{

width: 300px;

height: 300px;

background-color: blue;

}

</style>

</head>

<body>

<!--

1.过渡连写格式

transition: 过渡属性过渡时长运动速度延迟时间;

2.过渡连写注意点

2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可

2.2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素

2.3如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为

transition:all 0s;

-->

</body>

<style>

margin: 0;

padding: 0;

}

div{

height: 100px;

background-color: red;

margin-top: 100px;

text-align: center;

line-height: 100px;

}

div span{

font-size: 80px;

/*transition-property: margin;*/

/*transition-duration: 3s;*/

transition: margin 3s;

}

div:hover span{

margin: 0 20px;

}

</style>

</head>

<body>

<!--

1.编写过渡套路

1.1不要管过渡, 先编写基本界面

1.2修改我们认为需要修改的属性

1.3再回过头去给被修改属性的那个元素添加过渡即可

-->

<div>

</div>

</body>

<title>92-过渡模块-手风琴效果</title>

<style>

margin: 0;

padding: 0;

}

ul{

width: 960px;

height: 300px;

margin: 100px auto;

border: 1px solid #000;

overflow: hidden;

}

ul li{

list-style: none;

width: 160px;

height: 300px;

background-color: red;

float: left;

/*border: 1px solid #000;*/

/*box-sizing: border-box;*/

/*transition-property: width;*/

/*transition-duration: 0.5s;*/

transition: width 0.5s;

}

ul:hover li{

width: 100px;

}

ul li:hover{

width: 460px;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

时间： 2024-10-14 20:55:46

前端的基础知识汇总

前端的基础知识汇总的相关文章

Delphi基础知识汇总

PB编程基础知识汇总

沉淀，再出发：Java基础知识汇总

C++ 基础知识汇总持续更新

Web前端之基础知识

前端photoshop基础知识之切图

go语言基础知识汇总

前端应该知道的基础知识汇总

前端自动化基础知识