前端HTML➕CSS - overfit.cn

前序知识

浏览器

五大浏览器，四大核心

Chrome:webkit→Blink

Safari:webkit

IE:Trident

Firefox：Gecko

Opera：Presto→Blink

网页

HTML:用于搭建网页的结构

CSS：让结构更具有表现性

JavaScript：让网页有交互的效果，如点开一个按钮随后弹出一个窗口

HTML

简介

全称：HyperText Markup Language

译为：超文本标记语言

“超”有两层含义：1、超链接
                    2、超越文本，不单单指的文本，包括图片音视频等等
超文本:是一种组织信息的方式，通过超链接将不同空间的文字，图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容(页面，文件，锚点，应用)

标记：文本要变成超文本就需要用到各种标记符号。
      有了标记符号浏览器就会自动转译
语言：每一个标记的写法、读音、使用规则，构成标记语言。

准备工作

文件扩展名：方便知道文件类型

如何让文件以特定的方式打开：鼠标右击文件，选择打开类型（一次性的，只有当时有用）

右击，选择属性，更改打开方式，选择应用（永久性，仅修改的文件）

如何让电脑打开不论是什么类型的“照片”都用同一个应用：开始菜单-设置-搜索默认（默认应用）-照片查看器-点击选择应用（永久）

标签属性

1、用于给标签提供附加信息。

2、可以写在起始标签和单标签中，形式如下：

3、有些特殊的属性，没有属性名，只有属性值

4、注意：

1.不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写）。

2.属性名、属性值不能乱写，都是W3C规定好的。

3属性名、属性值，都不区分大小写，但推荐小写。

4.双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。

5.标签中不要出现同名属性，否则后写的会失效，

基本结构

1、在网页中，如何查看某段结构的具体代码?--点击鼠标右键，选择检查

2、【检查】和【查看网页源代码】的区别：

【查看网页源代码】看到的是：程序员编写的源代码。

【检查】看到的是：经过浏览器“处理”后的源代码。

备注：日常开发中，【检查】用的最多。

网页的基本结构如下:

1.想要呈现在网页中的内容写在 body 标签中。

2.head 标签中的内容不会出现在网页中。

3、head 标签中的title 标签可以指定网页的标题。

4、图示

5.代码

<html>

    <head>

             <title>网页标题</title>

    </head>

    <body>

      ……

    </body>

</html>

注释

1.特点:注释的内容会被浏览器所忽略，不会呈现在页面中，但源代码中依然可见。

2.作用:对代码进行解释和说明。让某段代码临时不参与运行。

3.写法:

<marquee loop="1">尚硅谷</marquee>

<marquee>尚硅谷123</marquee>

4.注释不可以嵌套，以下这么写是错的。（反例）

-->

文档声明

1.作用:告诉浏览器当前网页的版本。

2.写法:

      旧写法:要依网页所用的HTML版本而定，写法有很多。

具体有哪些写法可以参考:W3C官网--文档声明(了解即可)

       新写法:一切都变简单，W3C推荐使用HTML5的写法

<!DOCTYPE html>
或<!DOCTYPE HTML>

或<!doctype html>

3.注意:文档声明，必须在网页的第一行，且在html标签的外侧。

字符编码

1.计算机对数据的操作:

    存储时，对数据进行：编码。

    读取时，对数据进行：解码。

2.编码、解码，会遵循一定的规范-— 字符集。

3.字符集有很多中，常见的有（了解）：

1.ASCII：大写字母、小写字母、数字、一些符号，共计128个。

2.ISO 8859-1：在ASCII基础上，扩充了一些希腊字符等，共计是256个。

3.GB2312：继续扩充，收录了6763个常用汉字、682个字符。

4.GBK：收录了的汉字和符号达到 20000+，支持繁体中文。

UTF-8：包含世界上所有语言的：所有文字与符号。—- 很常用。

4.使用原则是怎样的?

原则1:存储时，务必采用合适的字符编码

否则：无法存储，数据会丢失!(一堆❓

原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码。

否则：数据错乱（乱码）!(有救

5.总结：

平时编写代码时，统一采用UTF-8 编码（最稳妥）。

      为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指定字符编码

<head>

        <meta charset="UTF-8"/>

</head>

设置语言

1.主要作用:让浏览器显示对应的翻译提示，有利于搜索引擎优化。

2.具体写法:

<htmllang=“zh-CN”>

标准结构

HTML标准结构如下:

输入!，随后回车即可快速生成标准结构

生成的结构中，有两个meta标签，暂时用不到，可以先删掉。

配置VScode的内置插件emmet，可以对生成结构的属性进行定制。

在存放代码的文件夹中，存放一个favicon.ico图片，可配置网站图标。

排版标签

h1-h6:标题双标签

p:段落双标签

div:没有任何含义，用于整体布局(生活中的包装袋) 双标签

1.h1最好只写一个，h2-h6能适当多写。

2.h1-h6不能互相嵌套，例如:h1标签中最好不要写h2标签

3.p标签很特殊!里面不能有:h1-h6，p，div标签

彩色部分加其它标签出错

##〈div〉可以把段落打包在一起

语义化标签

1.概念：用特定的标签，老表达特定的含义。

2.原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要!

3.举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。

4.优势：

代码结构清晰可读性强。

有利于 SEO （搜索引擎优化）。

方便设备解析（如屏幕阅读器、盲人阅读器等）。

理解语义化

不是追求段与段之间的缝隙

块级元素与行内元素

块级元素：独占一行（排版标签都是块级元素）
行内元素：不独占一行（目前只学了： input，稍后会学习更多）

3.使用规则

块级元素中能写行内元素和块级元素（简单记：块级元素中几乎什么都能写）

行内元素中能写行内元素，但不能写块级元素。

一些特殊的规则：

h1~h6 不能互相嵌套。

p中不要写块级元素。

文本标签

1.用于包裹:词汇，短语等

2.通常写在排版标签里面。

3.排版标签更宏大(大段的文字)，文本标签更微观(词汇，短语)。

4.文本标签通常都是行内元素。

常用的:

生活中的例子:div是大包装袋，span是小包装袋

图片标签

路径的分类

1.相对路径:以当前位置作为参考点，去建立路径。

2.绝对路径:以根位置作为参考点，去建立路径。

图片格式

超链接

跳转页面

主要作用:从当前页面进行跳转。

跳转文件

跳转锚点

什么是锚点?--网页中的一个标记点。

具体使用方法:

第一步:设置锚点

第二步:跳转锚点

唤起指定应用

通过a标签，可以唤起设备应用程序。

列表

1.有序列表

概念:有顺序或侧重顺序的列表。

2.无序列表

概念:无顺序或者不侧重顺序的列表。

3.列表嵌套

概念:列表中的某项内容又包含一个列表(注意:嵌套时，请务必把解析写完整)。

4.自定义列表

1.概念:所谓自定义列表，就是一个包含术语名称以及术语描述的列表。

2.一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述(可以是多个)。

表格

基本结构

1.一个完整的表格由:表格标题，表格头部，表格主体，表格脚注，四个部分组成。

2.表格涉及到的标签:

table：表格

caption ：表格标题

thead ：表格头部

tbody：表格主体

tfoot：表格注脚

tr：每一行

th、td：每一个单元格（备注：表格头部中用th，表格主体、表格脚注中用：td）

3.编码

〈table border=“1”〉给表格设置边框

常用属性

跨行与跨列

1.rowspan:指定要跨的行数

2.colspan:指定要跨的列数

常用标签的补充

表单

基本结构

文本框与密码框

1.文本输入框:

2.密码输入框:

多选框与单选框

隐藏域

提交与重置

普通按钮

文本域和下拉框

禁用表单控件

不恰当的使用：将男选项设置为默认，且禁用，那点击切换为女之后则无法再切换回去性别

〈input disabled type="radio" name="gender" value="male" checked〉男

〈input type="radio" name="gender" value="female”〉女〈br〉

把烫头设置为默认，且禁用，那就无法取消勾选了

〈input disabled type="checkbox" name="hobby" value="perm" checked〉烫头

label标签

fieldset与legend

框架标签

字符实体

在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

字符实体由三部分组成：一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个分号 ; 。

常见字符实体总结：

全局属性

meta元信息

CSS

简介

编写位置

行内样式

•写在标签的 style 属性中，（又称：内联样式）。

•语法：

欢迎来到尚硅谷学习

•注意点：

style 属性的值不能随便写，写要符合 CSS 语法规范，是名:值; 的形式。

行内样式表，只能控制当前标签的样式，对其他标签无效。

•存在的问题：

书写繁琐、样式不能复用、并且没有体现出：结构与样式分离的思想，不推荐大量使用，只

有对当前元素添加简单样式时，才偶尔使用。

内部样式

•写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中。

•语法：

<style> h1 { color: red; font-size: 40px; } </style>

注意点：

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般都放在 <head> 标签

中。

此种写法：样式可以复用、代码结构清晰。

存在的问题：

并没有实现：结构与样式完全分离。

多个 HTML 页面无法复用样式。

外部样式

写在单独的 .css 文件中，随后在 HTML 文件中引入使用。

语法：

新建一个扩展名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

h1{
  color: red;

   font-size: 40px;

 }
在 HTML 文件中引入 .css 文件。

<link rel="stylesheet" href="./xxx.css">

注意点：

<link> 标签要写在 <head> 标签中。

<link> 标签属性说明：

href ：引入的文档来自于哪里。

rel ：( relation ：关系）说明引入的文档与当前文档之间的关系。

外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速

度，实现了结构与样式的完全分离。

实际开发中，几乎都使用外部样式，这是最推荐的使用方式！

样式表的优先级

优先级规则：行内样式 > 内部样式 = 外部样式

内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（简记：“后来

者居上”）。

同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：“后来

者居上”。

语法规范

代码风格

基本选择器

通配选择器

作用：可以选中所有的 HTML 元素。

语法：

{

属性名: 属性值;

}

举例

/* 选中所有元素 */

{

color: orange;

font-size: 40px;

}

备注：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助，后面会详细

讲。

元素选择器

作用：为页面中某种元素统一设置样式。

语法：

标签名 {

          属性名: 属性值;

}

举例

备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的 p 元素效果都一样。

类选择器

作用：根据元素的 class 值，来选中某些元素。

class 翻译过来有：种类、类别的含义，所以 class 值，又称：类名。

语法：

.类名 {

      属性名: 属性值;

}

举例：

注意点：

元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。

class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用

英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名

要有意义，做到 “见名知意”。

一个元素不能写多个 class 属性，下面是错误示例：

一个元素的 class 属性，能写多个值，要用空格隔开，例如：

ID选择器

作用：根据元素的 id 属性值，来精准的选中某个元素。

语法：

#id值 {

        属性名: 属性值;

}

举例：

注意：

id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空

格、区分大小写。

一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。

一个元素可以同时拥有 id 和 class 属性。

总结

复合选择器

复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。

复合选择器可以在复杂结构中，快速而准确的选中元素。

交集选择器

作用：选中同时符合多个条件的元素。

交集有并且的含义（通俗理解：即......又...... 的意思），例如：年轻且长得帅。

语法：选择器1选择器2选择器3...选择器n {}

举例：

注意：

有标签名，标签名必须写在前面。

id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。

交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素。

用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。

所谓并集就是或者的含义（通俗理解：要么......要么...... 的意思），例如：给我转10万块钱

或者我报警。

语法：选择器1, 选择器2, 选择器3, ... 选择器n {}

多个选择器通过 , 连接，此处 , 的含义就是：或。

举例

注意：

并集选择器，我们一般竖着写。

任何形式的选择器，都可以作为并集选择器的一部分。

并集选择器，通常用于集体声明，可以缩小样式表体积。

HTML元素间的关系

后代选择器

作用：选中指定元素中，符合要求的后代元素。

语法：选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代）

选择器之间，用空格隔开，空格可以理解为：" xxx 中的"，其实就是后代的意思。

选择器 1234....n ，可以是我们之前学的任何一种选择器。

举例

注意：

后代选择器，最终选择的是后代，不选中祖先。

儿子、孙子、重孙子，都算是后代。

结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

子代选择器又称：子元素选择器、子选择器。

语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

选择器之间，用 > 隔开， > 可以理解为：" xxx 的子代"，其实就是儿子的意思。

选择器 1234....n ，可以是我们之前学的任何一种选择器。

举例：

注意：

子代选择器，最终选择的是子代，不是父级。

子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。

兄弟选择器

相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素。

所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。

语法：选择器1+选择器2 {} 。

示例

通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）

语法：选择器1~选择器2 {} 。

实例：

注意：两种兄弟选择器，选择的是下面的兄弟。

属性选择器

作用：选中属性值符合一定要求的元素。

语法：

[属性名] 选中具有某个属性的元素。

[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。

[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。

[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。

[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

举例

伪类选择器

作用：选中特殊状态的元素。

如何理解“伪” ? — 虚假的，不是真的。

如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。

动态伪类

1.:link 超链接未被访问的状态。

:visited 超链接访问过的状态。
:hover 鼠标悬停在元素上的状态。
:active 元素激活的状态。

什么是激活？—— 按下鼠标不松开。

注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。

:focus 获取焦点的元素。

表单类元素才能使用 :focus 伪类。

当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获得焦点。

结构伪类

常用的：

:first-child 所有兄弟元素中的第一个。
:last-child 所有兄弟元素中的最后一个。
:nth-child(n) 所有兄弟元素中的第 n 个。
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中的第n个。

关于 n 的值：

0 或不写：什么都选不中 —— 几乎不用。

n ：选中所有子元素 —— 几乎不用。

1~正无穷的整数：选中对应序号的子元素。

2n 或 even ：选中序号为偶数的子元素。

2n+1 或 odd ：选中序号为奇数的子元素。

-n+3 ：选中的是前 3 个。

了解即可：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
:only-child 选择没有兄弟的元素（独生子女）。
:only-of-type 选择没有同类型兄弟的元素。
:root 根元素。
:empty 内容为空元素（空格也算内容）。

否定伪类

:not(选择器) 排除满足括号中条件的元素。

UI伪类

:checked 被选中的复选框或单选按钮。

:enable 可用的表单元素（没有 disabled 属性）。

:disabled 不可用的表单元素（有 disabled 属性）。

目标伪类（了解）

:target 选中锚点指向的元素。

语言伪类（了解）

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

伪元素选择器

作用：选中元素中的一些特殊位置。

常用伪元素：

::first-letter 选中元素中的第一个文字。

::first-line 选中元素中的第一行文字。

::selection 选中被鼠标选中的内容。

::placeholder 选中输入框的提示文字。

::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。

::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

选择器的优先级（权重）

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。

简单描述：

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

详细描述：

计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)

a : ID 选择器的个数。

b : 类、伪类、属性选择器的个数。

c : 元素、伪元素选择器的个数。

例如：

比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

(1,0,0) > (0,2,2)

(1,1,0) > (1,0,3)

(1,1,3) > (1,1,2)

特殊规则：
行内样式权重大于所有选择器。
!important 的权重，大于行内样式，大于所有选择器，权重最高！

三大特性

层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。

继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

规则：优先继承离得近的。

常见的可继承属性：

text-?? ， font-?? ， line-?? 、 color ......

优先级

简单聊：

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。

详细聊：需要计算权重。

计算权重时需要注意：并集选择器的每一个部分是分开算的！

常用属性

像素

概念：我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。

规律：像素点越小，呈现的内容就越清晰、越细腻。

注意点：如果电脑设置中开启了缩放，那么就会影响一些工具的测量结果，但这无所谓，因为我们工作中都是参考详细的设计稿，去给元素设置宽高。

颜色的表示

颜色名

编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：

红色：red
绿色：green
蓝色：blue
紫色：purple
橙色：orange
灰色：gray

......

颜色名这种方式，表达的颜色比较单一，所以用的并不多。

具体颜色名参考 MDN 官方文档

rgb或rgba

写方式：使用红、黄、蓝这三种光的三原色进行组合。

r 表示红色

g 表示绿色

b 表示蓝色

a 表示透明度

举例：

小规律：

若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。

rgb(0, 0, 0) 是黑色， rgb(255, 255,255) 是白色。

对于 rbga 来说，前三位的 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是百分比。

HEX或HEXA

HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色进行组合，只不过要用 6位（分成3组）来表达，

格式为：# rrggbb

每一位数字的取值范围是： 0 ~ f ，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f ）

所以每一种光的最小值是： 00 ，最大值是： ff

注意点： IE 浏览器不支持 HEXA ，但支持 HEX。

HSL或HSLA

HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)

色相：取值范围是 0~360 度，具体度数对应的颜色如下图：

饱和度：取值范围是 0%~100% 。（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有灰）

亮度：取值范围是 0%~100% 。（ 0% 亮度没了，所以就是黑色。 100% 亮度太强，所以就是白色了）

HSLA 其实就是在 HSL 的基础上，添加了透明度。

标签： 1024程序员节

本文转载自: https://blog.csdn.net/lovvvl/article/details/143129173
版权归原作者 lovvvl 所有，如有侵权，请联系我们删除。