前端
这是自己通过B站学习所记录的前端笔记，仅供个人使用
如果你也想学习课程，下面这里是传送门:传 送 门！！！
HTML
网页
网站
网站是指在因特网上更具一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一"页",通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频、等元素组成。通常我们看到的网页，常见以**.htm或.html后缀接吻的文件，因此将其俗称为HTML文件**。
HTML
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言(markup language)。
标记语言是一套标记标签(markup tag)。
所谓超文本，有2层含义：
- 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接(超级链接文本)。
网页的形成
网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。
HTML语法规范
基本语法概述
- HTML标签是由尖括号包围的关键词，例如****。
- HTML标签通常是成对出现的，例如和，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 有些特殊的标签必须是单个标签(极少情况)，例如
，我们称为单标签。
标签关系
双标签关系可以分为两类：包含关系和并列关系。
包含关系
<head>
<title> </title>
</head>
并列关系
<head> </head>
<body> </body>
HTML基本结构标签
HTML网页
每个网页都会有一个基本的结构标签(也称为骨架标签)，页面内容也是在这些基本标签上书写。
HTML页面也成为HTML文档。
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> | HTML标签 | 页面中最大的标签，我们称为更标签。 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主题 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
HTML文档的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出他们。
此时，用浏览器打开这个网页，我们就可以预览我们写的HTML文件了。
VSCode工具生成骨架标签代码
<!DOCTYPE>标签- lang语言
- charset字符集
文档类型声明标签
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
这句代码的意思是:当前页面采取的是HTML5版本来显示网页。
注意：
<!DOCTYPE>声明位于文档中的最前面的位置，处于标签之前。<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。
lang语言种类
用来定义当前文档显示的语言。
- en定义语言为英语
- zh-CN定义语言为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
字符集
字符集(Character set)是多个字符的集合。以便计算机能识别和储存各种文字。
在标签内，可以通过**标签的charset**属性来规定HTML文档应该使用哪种字符编码。
<meta charset="UTF-8" />
charset常用的值由:GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用”UTF-8“编码，尽量统一写成标准的”UTF-8“，不要携程”utf8“或”UTF8“。
HTML常用标签
标签语义
学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
标题标签
为了使网页更具有语义化，我们经常会在页面中用到了标题标签。HTML提供了6个等级的网页标签，即<h1>-<h6>。
<h1>我是一级标题</h1>
标题语义:作为标题使用，并且依据重要性递减。
特点：
- 加了标题的文字会变得加粗，字号也会依次变大。
- 一个标题独占一行。
段落标签
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，
标签用于定义段落，它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
标签语义:可以把HTML文档分割为若干段落。
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落与段落之间保有空隙。
换行标签
在HTML中，一个段落中的文字会从左到右依次排序，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
<br />
标签语义:强制换行。
特点：
<br />是个单标签。<br />标签知识简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
文本格式化标签
在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
| 语义 | 标签 |
|---|---|
| 加粗 | <strong></strong>或者<b></b> |
| 倾斜 | <em></em>或者<i></i> |
| 删除线 | <del></del>或者<s></s> |
| 下划线 | <ins></ins>或者<u></u> |
div和span标签
<div></div>
<span></span>
特点:
- div标签用来布局，但是现在一行只能放一个div。大盒子
- span标签用来布局，一行上可以多个span。小盒子
图像标签
在HTML标签中，标签用于定义HTML页面中的图像。
<img src="图像URL" />
src是标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点：
- 图像标签可以拥有多个属性，必须写在标签名后面。
- 属性之间不分先后，标签名与属性，属性与属性之间均以空格分开。
- 属性采取键值对的格式，即key=”value“格式，属性=”属性值“。
相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 如<img src="baidu.gif" /> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如<img src="images/baidu.gif" /> |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级 如<img src="../baidu.gif" /> |
绝对路径
绝对路径:是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，”D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”
超链接标签
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
两个属性的作用如下:
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。 |
链接分类
- 外部链接，例如
<a href="http://www.baidu.com" target="_blank">百度</a> - 内部链接:网页内部页面之间的相互链接。直接链接内部页面名称即可，例如
<a herf="index.html">首页</a> - 空连接:如果当时没有确定链接目标时，
<a href="#">首页</a> - 下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。
- 网页元素链接:在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。
- 锚点链接:我们点击链接，可以快速定位到页面中的某个位置。
- 在链接文本的href属性中，设置属性值为#名字的形式，如
<a href="#two">第二集</a> - 找到目标位置标签，里面添加一个id属性=刚才的名字，如：
<h3 id="two">第二集介绍</h3>
- 在链接文本的href属性中，设置属性值为#名字的形式，如
HTML中注释和特殊字符
注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“<!--“开头,以”-->"结束。
<!-- 注释语句 --> 快捷键:ctrl+/
特殊字符
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
HTML表格标签
表格是实际开发中非常常用的标签:
- 表格的主要作用
- 表格的基本语法
表格的主要作用
表格主要用于显示，展示数据，因为它可以让数据显示的非常的规整，可读性很好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<table></table>是用于定义表格的标签。<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。- 字母td指表格数据(table data)，即数据单元格的内容。
表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分(table head的缩写)
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为”“，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认为1像素。 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素。 |
| width | 像素值或百分比 | 规定表格的宽度。 |
表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用：<thera>标签 表格的头部区域，<tbody>标签 表格的主题区域。这样可以更好的分清表格结构。
<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。<tbody></tbody>：用于定义表格的主题，主要用于放数据本体。- 以上标签都是放在
<table></table>标签中。
合并单元格
特殊情况下，可以把多个单元格合并为一个单元格。
- 合并单元格方式
- 目标单元格
- 合并单元格的步骤
合并单元格方式
- 跨行合并：rowspan=”合并单元格的个数“
- 跨列合并：colspan=”合并单元格的个数“
目标单元格
- 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲
- 先确定是跨行还是跨列合并。
- 找到目标单元格。写上合并方式=合并的单元格数量。比如：
<td colspan="2"></td> - 删除多余的单元格。
HTML列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐，整洁，有序，它作为布局会更加自由和方便。
根据使用情景的不同，列表可以分为三大类：无序列表，有序列表和自定义列表。
无序列表
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。
无序列表的基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
有序列表
有序列表即为有排序顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中,<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>标签来定义列表项。
有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
-
<ol></ol>中只能嵌套<li></li>,直接在<o></o>标签中输入其他标签或者文字的做法是不被允许的。 -
与之间相当于一个容器,可以容纳所有元素。
-
有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置。
自定义列表
自定义列表的使用场景:
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目名字)一起使用。
其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
-
<dl></dl>里面只能包含<dt>和<dd>。 -
<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>。
HTML表单标签
为什么需要表单
使用表单目的是为了收集用户信息。
在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时就需要表单。
表单的组成
在HTML中，一个完整的表单通常由表单域，表单控件(也被称为表单元素)和提示信息3个部分构成。
表单域
表单域是一个包含表单元素的区域。
在HTML标签中,**<form>**标签用于定义表单域,以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
<form action="uxl地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
-
在我们写表单元素之前应该有个表单域把他们进行包含
-
表单域是form标签
表单控件(表单元素)
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
-
input输入表单元素
-
select下拉表单元素
-
textarea文本域元素
<input>表单元素
在表单元素中**<input>标签用于收集用户信息。**
在<input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本、字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type="属性值" />
- < input/>标签为单标签
- type属性设置不同的属性值用来指定不同的控件类型
除type属性外，<input>标签还有其他很多属性，其常用属性如下：
-
name和value是每个表单元素都有的属性值，主要给后台人员使用。
-
name表单元素的名字，要求单选按钮和复选框要有相同的name值。
-
checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素。
-
maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。
<label>标签
**<label>**标签为input元素定义标注(标签)。
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验。
语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
核心:<label>标签的for属性应当与相关元素的id属性相同。
<select>表单元素
在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表.
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
-
<select>中至少包含一对<option>。 -
在
<option>中定义selected="selected"时,当前项即为默认选中项。
<textarea>表单元素
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用**<textarea>**标签。
在表单元素中,**<textarea>**标签是用于定义多行文本输入的控件。
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
语法:
<textarea rows="3" cols="20">
文本内容
</textarea>
-
通过
<textarea>标签可以轻松地创建多行文本输入框。 -
cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会使用,都是用CSS来改变大小。
查阅文档
经常查阅文档是一个非常好的学习习惯。
推荐的网址：
- 百度
- W3C
- MDN
CSS
CSS语法规范
使用HTML时,需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则。
CSS规则由两个主要的部分构成:选择器以及一条或多条声明。
选择器是用于指定CSS样式的**HTML标签,**花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
- 属性和属性值之间用英文“:"分开
- 多个“键值对”之间用英文“;"进行区分
CSS选择器
作用
选择器(选择符)就是根据不同需求把不同的标签选岀来这就是选择器的作用。简单来说,就是选择标签用的。
CSS做了两件事：
-
找到所有的h标签。选择器(选对人)。
-
设置这些标签的样式，比如颜色为红色(做对事)。
选择器分类
选择器分为基础选择器和复合选择器两个大类,我们这里先讲解一下基础选择器。
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
语法
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
作用
标签选择器可以把某一类标签全部选择岀来,比如所有的<div>标签和所有的<span>标签。
优点
能快速为页面中同类型的标签統一设置样式。
缺点
不能设计差异化样式，只能选择全部的当前标签。
类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
语法
.类名 {
属性1: 属性值1;
...
}
例如，将所有拥有red类的HTML元素均为红色。
.red {
color: red;
}
结构需要用class属性来调用class类的意思
<div class='red'>变红色</div>
类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点“."号显示。
注意
①类选择器使用“."(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
②可以理解为给这个标签起了一个名字,来表示。
③长名称或词组可以使用中横线来为选择器命名。
④不要使用纯数字、中文等命名,尽量使用英文字母来表示。
⑤命名要有意义,尽量使别人一眼就知道这个类名的目的。
类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
简单理解就是一个标签有多个名字。
-
多类名使用方式
<div class="red font20">亚瑟</div>(1) 在标签class属性中写多个类名
(2) 多个类名中间必须用空格分开
(3)这个标签就可以分别具有这些类名的样式
-
多类名开发中使用场景
(1)可以把一些标签元素相同的样式(共同的部分)放到个类里面
(2)这些标签都可以调用这个公共的类然后再调用自己独有的类
(3)从而节省CS代码统一修改也非常方便.
<div class="pink fontWeight font20">亚瑟</div> <div class="font20">刘备</div> <div class="font14 pink">安其拉</div> <div class="font14">貂蝉</div>- 各个类名中间用空格隔开
- 简单理解:就是给某个标签添加了多个类,或者这个标签有多个名字
- 这个标签就可以分别具有这些类名的样式
- 从而节省CSS代码,统一修改也非常方便.
- 多类名选择器在后期布局比较复杂的情况下,还是较多使用的
ID选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义。
语法
#id名 {
属性1:属性值1;
...
}
例如,将id为nav元素中的内容设置为红色。
#nav {
color: red;
}
注意:id属性只能在每个HTML文档中出现一次。
id选择器和类选择器的区别
①类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
②id选择器好比人的身份证号码,全中国是唯一的,不得重复。
③id选择器和类选择器最大的不同在于使用次数上。
④类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。
通配符选择器
在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素(标签)。
语法
* {
属性1:属性值1;
...
}
-
通配符选择器不需要调用，自动就给所有的元素使用样式
-
特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距)
* { margin:0; padding:0; }
CSS字体属性
CSS Fonts(字体)属性用于定义字体系列，大小，粗细，和文字样式(如斜体)。
字体系列
CSS使用font-family属性定义文本的字体系列。
p { font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft YaHei","微软雅黑";}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体加引号.
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体:body{ font-family:‘Microsoft YaHei’, tahoma,aril,‘Hiragino Sans GB’;}
字体大小
CSS使用font-size属性定义字体大小。
p {
font-size: 20px;
}
- px(像素)大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给个明确值大小,不要默认大小
- 可以给body指定整个页面文字的大小
字体粗细
CSS使用font-weight属性设置文本字体的粗细。
p {
font-weight: bold;
}
字体样式
CSS使用font-style属性设置文本的风格
p {
font-style: normal;
}
字体复合属性
字体属性可以把以上文字样式综合来写,这样可以更节约代码:
body {
font: font-style font-weight font-size/line-height font-family;
}
- 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留font-size和font- family属性,否则font属性将不起作用
CSS文本属性
CSS Text(文本)属性可定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。
文本颜色
color属性用于定义文本的颜色。
div {
color: red;
}
对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center;
}
装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线，删除线，上划线等。
div {
text-decoration: underline;
}
文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
div {
text-indent: 10px;
}
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
p {
text-indent: 2em;
}
em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。
行间距
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。
p {
line-height: 26px;
}
行间距包括上间距，文本高度，下间距。
CSS的引入方式
CSS的三种样式表
按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类：
-
行内样式表(行内式)
-
内部样式表(嵌入式)
-
外部样式表(链接式)
内部样式表
内部样式表(内嵌样式表)是写到html页面内部是将所有的CSS代码抽取出来,单独放到一个<style>标签中。
<style>
div {
color: red;
font-size: 12px;
}
</style>
<style>标签理论上可以放在HTML文栏的任何地方,但一般会放在文档的<head>标签中- 通过此种方式,可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰,但是并没有实现结构与样式完全分离
- 使用内部样式表设定CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式
行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式
<div sty1e="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
- style其实就是标签的属性
- 在双引号中间,写法要符合CSS规范
- 可以控制当前的标签设置样式
- 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
- 使用行内样式表设定CSS,通常也被称为行内式引入
外部样式表
实际开发都是外部样式表.适合于样式比较多的情况.核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用.
引入外部样式表分为两步
-
新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中。
-
在HTML页面中,使用
<link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">
- 使用外部样式表设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式
Emmet语法
快速生成HTML结构语法
-
生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成
<div></div> -
如果想要生成多个相同标签加上
*就可以了比如div*3就可以快速生成3个div -
如果有父子级关系的标签,可以用>比如ul>li就可以了
-
如果有兄弟关系的标签,用+就可以了比如div+p
-
如果生成带有类名或者id名字的,直接写.demo或者# two tab键就可以了
-
如果生成的dv类名是有顺序的,可以用自增符号$
-
如果想要在生成的标签内部写内容可以用{}表示
快速生成CSS样式语法
CSS基本采取简写形式即可
-
比如w200按tab可以生成width: 200px
-
比如lh26按tab可以生成line-height: 26px
CSS复合选择器
复合选择器
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素(标签)
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
- 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代
语法：
元素1 元素2 {样式声明}
上述语法表示选择元素1里面的所有元素2(后代元素)。
例如:
ul li { 样式声明 } /* 选择ul里面所有的1i标签元素*/
- 元素1和元素2中间用空格隔开
- 元素1是父级,元素2是子级,最终选择的是元素2
- 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器
子选择器
**子元素选择器(子选择器)**只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
语法:
元素1>元素2{样式声明}
上述语法表示选择元素1里面的所有直接后代(子元素)元素2。
例如:
div > p {样式声明} /*选择div里面所有最近一级p标签元素*/
- 元素1和元素2中间用大于号隔开
- 元素1是父级,元素2是子级,最终选择的是元素2
- 元素2必须是亲儿子,其孙子、重孙之类都不归他管.你也可以叫他亲儿子选择器
并集选择器
**并集选择器可以选择多组标签,同时为他们定义相同的样式。**通常用于集体声明
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法
元素1,元素2{样式声明}
上述语法表示选择元素1和元素2
例如:
u1,div {样式声明} /*选择u1和div标签元素*/
- 元素1和元素2中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素
伪类选择器书写最大的特点是用冒号(:)表示,比如:hover、:first- child
链接伪类选择器
链接伪类选择器注意事项
-
为了确保生效,请按照LVHA的循顺序声明:link- :visited - :hover- :active
-
记忆法: love hate或者LV包包hao
-
因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
链接伪类选择器实际开发中的写法
/* a 是标签选择器 所有的链接*/
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候,由原来的 灰色变成了红色*/
}
: focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说
input: focus {
background-color: yellow;
}
CSS的元素显示模式
元素显示模式
作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型
块元素
常见的块元素有<h1~h6>,<p>,<div>,<ul>,<ol>,<li>等,其中**<div>标签是最典型的块元素**
块级元素的特点:
①比较霸道,自己独占一行
②高度,宽度、外边距以及内边距都可以控制
③宽度默认是容器(父级宽度)的100%
④是一个容器及盒子,里面可以放行内或者块级元素
注意:
- 文字类的元素内不能使用块级元素
<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>- 同理,<h1~h6>等都是文字类块级标签,里面也不能放其他块级元素
行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等,其中<span>标签是最典型的行内元素,有的地方也将行内元素称为内联元素
行内元素的特点:
①相邻行内元素在一行上,一行可以显示多个
②高、宽直接设置是无效的
③默认宽度就是它本身内容的宽度
④行内元素只能容纳文本或其他行内元素
注意:
- 链接里面不能再放链接
- 特殊情况链接里面可以放块级元素,但是给
<a>转换一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签——<img />,<input />,<td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素
行内块元素的特点:
①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)
②默认宽度就是它本身内容的宽度(行内元素特点)
③高度,行高、外边距以及内边距都可以控制(块级元素特点)
元素显示模式转换
特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围
- 转换为块元素: display: block;
- 转换为行内元素; display: inline;
- 转换为行内块: display: inline-block;
单行文字想要垂直居中,令行高等于盒子的高度即可
3301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
