HTML5+CSS3

meeting77smile2024/9/16frontEnd/HTMLHTML5_CSS3 手写笔记前端框架

1. 基础知识

1.1 网页的相关概念

网站：指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页：是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，一般是以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

1.2 Web标准

为什么要使用Web标准：不同的浏览器显示或者排版会有差异，为了可以让开发人员写出的页面更标准、更统一，因此需要一个统一的标准
构成：主要包括结构（Structure)、表现（Presentation）和行为（Behavior）三个方面。结构类似身体、表现类似外观装饰、行为类似动作，三者中结构最重要。
不同构成的说明：结构用于对网页元素进行整理和分类，一般写在HTML文件里；表现用于设置网页元素的版式、颜色、大小等外观形式，一般写在CSS文件里；行为是指网页模型的定义及交互的编写，现阶段写在JavaScript文件里。

1.3 VSCode常用快捷键

：快速将一行代码复制到下一行。
:选定多个相同的单词。先双击选定一个单词，然后按下ctrl+d可以依次往下选择相同的单词，这样同样修改相同的单词就非常方便。
:在不同行的相同位置添加光标。（若某一行为空，则光标位置为行首）
:全局替换某单词。先按下ctrl+h，再输入需要全局替换的单词，再点击“全部替换”。
如：将“body”全部换为“b“：
：快速定位到某一行。先按下ctrl+g，再输入需要定位到的行数，再按下回车即可。
:选中一个代码区块。
此快捷键可避免只用拖动鼠标时选中空格部分：
：
首先，点击”管理“
其次，点击”键盘快捷方式”
接着，打字输入想要更改的快捷键：
点击需要更改的快捷键，再按照一定次序按下想要更改成的按键（注意：此时是按键盘上的按键，而不是打字输入），即可完成快捷键的更改。

1.4 VSCode在网页中显示运行结果

首先，在VSCode的“扩展”中搜索“Live Server”插件并安装：
安装完后，当代码写完时，右键点击鼠标，再点击”Open with Live Sever“即可在浏览器中看到运行结果。

2. HTML5

2.1 HTML基本结构标签

< html ></ html >：HTML标签，是页面中最大的标签，我们称为根标签。
< head ></ head >：文档的头部，包含了title标签。
< title ></ title >：文档的标题，作用是让页面拥有一个属于自己的网页标题。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是网页标题</title>
</head>

</body>

</html>

运行效果：

< body ></ body >：文档的主体，元素包含文档的所有内容，页面内容基本都是放到body里面的。
<!DOCTYPE>：文档类型声明标签(document type)，作用是告诉浏览器使用哪种HTML版本来显示网页。如< !DOCTYPE html >的作用是告知浏览器当前页面采取的是HTML5版本来显示网页。
< html lang >：用来定义当前文档显示的语言(language)>。如定义en就是英语网页，zh-CN就是中文网页。（注意：实际上，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文，但定义错误可能会出现一些问题，如当定义为en时，若出现的均为中文，则某些浏览器会提示“是否翻译为中文”，或者出现一些翻译错误。）
charset：字符集。常用的值有：GB2312、BIG5、GBK和UTF-8，其中常用的UTF-8也被成为万国码，基本包含了所有国家需要用到的字符。若不设定字符集的值或者设定错了，则会出现乱码，无法正常显示文字。

2.2 HTML常用标签

1.标题标签：HTML共提供了6个等级的网页标签，即< h1 >-< h6 >。
- < h >即head的缩写，意为标题。
- 标签语义：写为标题使用，并且根据重要性递减。
- 使用方法：如：
```
<h1>我是一级标题</h1>
```
- 特点：加了标题的文字会加粗、字体也会变大；一个标题独占一行。
2.段落和换行标签：p标签用于定义段落，br标签用于换行
- 段落标签< p >：
  - p即paragraph的缩写，意为段落；br即break的缩写，意为打断、换行。
  - 当未使用p标签时，用回车或者空格均无法实现换行；文本在一个段落中会根据浏览器窗口的大小自动换行；段落和段落之间保有空隙。
- 换行标签< br >：
  - br标签语义为强制换行，是个单标签；
  - br标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

3.文本格式化标签

加粗：
```
<strong></strong>或者<b></b>
```
倾斜：
```
<em></em>或者<i></i>
```
删除线：
```
<del></del>或者<s></s>
```
下划线：
```
<ins></ins>或者<u></u>
```

3.CSS

3.1 了解CSS

CSS是层叠样式表（Cascading Style Sheets）的简称，有时也会称之为CSS样式表或级联样式表，其也是一种标记语言。
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。简而言之，CSS可以美化HTML。

3.2 语法规范

CSS规则主要由两个部分构成：选择器（要改变谁的样式）以及一条或多条声明（要改变成什么样式）。
- 选择器 是用于指定CSS样式的HTML标签 ，花括号内是对该对象的具体样式
- 属性和属性值以"键值对"的形式出现。
- 属性和属性值之间用英文的冒号隔开。
- 多个键值对之间用英文的分号隔开。（区别：HTML中不用）
示例：
```
<style>
    p {
        color: rebeccapurple;
    }
</style>

<body>
    <p>
        这是段落标签
    </p>
</body>
```
注意：
- 通常把CSS写在style标签中，把常用的网页元素标签写到body标签中，实现结构和样式分离。
- 此时p就是选择器，color: rebeccapurpl 就是声明。

3.3 选择器

3.3 CSS中的常用属性

3.3.1 CSS字体属性

1. font-family设置字体系列

CSS使用font-family属性定义文本的字体类型，如：

p {
     font-family:"微软雅黑"; 
}

注意：
- 各种字体之间必须使用英文状态下的逗号隔开。
- 一般状态下，如果有空格隔开的多个单词组成的字体，需要加引号，如：
```
div{font-family:Arial,"Microsoft yahei","微软雅黑";}
```
- 尽量使用系统默认的自带字体，以保证在任何用户的浏览器中都能正常显示字体。
- 字体的属性值既可以写中文，也可以写英文，如"微软雅黑"也可以写为"Microsoft yahei"（"yahei"也可以用大写"Yahei"）
- 一个选择器可以设置多种字体类型，当程序运行时，将按顺序选择字体，若用户电脑上安装了该种字体，则选择改字体；若没有，则按顺序继续选择；若所有字体都没有安装，则使用浏览器默认的字体。（如谷歌浏览器默认的字体是"微软雅黑"）
- 在实际开发过程中，经常把字体属性定义给body标签，这样页面中的主要元素就都会以body的字体来显示了。如：
```
body{font-family:Arial,"Microsoft yahei","微软雅黑";}
```

2. font-size设置字号大小

CSS使用font-size 属性定义字体大小，如：

p {
    font-size: 20px;
}

注意：
- px（像素） 大小是我们网页中最常见的单位。
- 谷歌浏览器默认的字体大小为16px；
- 不同浏览器默认的字体大小可能不一致，所以我们尽量给一个明确值大小。
- 可以给body指定整个页面文字的大小。
- 标题标签比较特殊，需要单独指定文字大小。如：
```
h1 {
    font-size: 20px;
}
```

3. font-weight设置文本字体的粗细,如：

p {
    font-weight: bold;
}

属性值
- 100-900的数字
- normal：正常粗细，与400 等价。
- bold ：加粗，与700等价。
- lighter ：比从父元素继承来的值更细 (处在字体可行的粗细值范围内)。
- bolder ：比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。
注意：
- 默认加粗的标签（如h1、strong标签）均可使用font-weight 使字体变细。
- 实际开发中，更习惯用数字来表达粗细。

4. font-style设置文本的风格（如斜体），如：

p {
    font-style: normal;
}

属性值
- normal：默认值，使得浏览器显示标准的字体样式。
- italic：使得浏览器显示斜体的字体样式。
注意：
平时我们很少通过该标签给文字加斜体，反而经常要给斜体标签（< em >，< i >）通过normal设置不倾斜字体。

5. font字体复合属性

要把一个标签的字体设置多种属性，一般会想到这么做：
```
    p {
        font-style: italic;
        font-weight: 700;
        font-size: 20px;
        font-family: "宋体";
    }
```
可这样需要写较多的代码，为了节约代码，可采取字体复合属性 ，按照以下格式综合来写：
```
body {
    font: font-style属性值 font-weight属性值 font-size/line-height
属性值 font-family属性值;}
```
- 注意 :
  - 使用font属性时，必须按照上面的语法格式及顺序书写，每个属性之间以隔开，。
  - 不需要设置的属性可以省略（取默认值）。其中可以省略的属性有font-style，font-weight，line-height，但，否则font属性将不起作用。

3.3.2 CSS文本属性

1. color定义文本颜色

格式，如：
```
div {
    color: red;
}
```
属性值有三种形式：
- 英文字母：如red、green、blue。
- “ #” + “ (六位)十六进制 ” ：如#FF0000。
- RGB代码：如rgb(255,0,0)。
其中，开发中最常用的是十六进制。此外，三种形式均可自定义选择颜色：
- 首先，先任选一种形式输入任意一种颜色作为属性值。
- 接着鼠标双击属性值。
- 最后即可在跳出的色盘上手动选择自己想要的颜色。

2. text-align对齐文本

text-align属性仅用于设置元素内文本内容的水平对齐方式，不能用于设置垂直方向。
属性值：
- leftt：左对齐（默认值）。
- right：右对齐。
- center：居中对齐。
应用：使图片居中
不能直接对img标签进行操作，而是应该：
- 先将img标签放在其他标签中，如< p >标签
- 再对该标签，如此时的< p >标签的text-align属性设定center属性值。

3. text-decoration装饰文本（通常用于给文字添加下划线、下划线、删除线）

属性值
- none：无装饰线（默认值），最常用。
- underline：下划线（链接标签a会自带）。、
- overline：上划线（几乎不用）。
- line-through：删除线（不常用）。

应用例子：用于删除链接标签a自带的下划线.。

<style>
    a {
        text-decoration: none;
    }
</style>

<body>
    <a href="">去除链接标签的下划线</a>
</body>

重点记如何添加、删除下划线即可。

4. text-indent文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进 。
属性值
- 像素单位px
- 相对单位em：即当前元素1个文字的大小（font-size）。如果当前元素没有设置大小，则会按照父元素的一个文字大小。
注意：
属性值也可以为负值，意为向左缩进（正值则为向右缩进）。

5. line-height行间距：

line-height用于设置行间的距离（行高），可以控制行与行之间的文字距离。
行高的组成：上间距、文本高度、下间距。
属性值
像素单位px
查询网页元素里的行高：
在网页中点击鼠标右键，点击“检查”，再用鼠标对准相应的代码区域，即可显示出行高。

3.4 CSS的引入方式

按照CSS样式书写的位置（或者引入方式），CSS样式表可以分为三大类：

内部样式表（嵌入式）
行内样式表（行内式）
外部样式表（链接式）

内部样式表
内部样式表（内嵌样式表） 是写到html页面内部，将所有的CSS代码抽取出来，单独放到一个< style >标签中。
- < style >标签理论上可以放在HTML文档的任何地方，但一般会放在文档的 < head >标签中。
- 通过此种方式，可以方便控制当前整个页面中的元素样式设置。
- 该样式代码结构清晰，但是并没有实现结构与样式完全分离。
- 此样式表是我们练习时常用的方式。
行内样式表
行内样式表（内嵌样式表） 是在元素标签内部的style属性中设定CSS样式。
- 代码样例：
```
    <p style="color: red;font-size: 20px;">行内样式表测试</p>
```
- 此时style是作为标签的属性。
- 属性和属性值要写在双引号中间，写法要符合CSS规范。
- 行内样式表只能控制当前的标签设置样式。
- 该样式表由于书写频繁，并且没有体现结构与样式分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。
- 使用行内样式设定CSS吗，通常也被称为行内式引入。
- 外部样式表
  实际开发通常都是使用外部样式表，适合于需要设置的样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
  - 引入外部样式表分为两步：
    1. 新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中。
    2. 在HTML页面中，使用< link >标签引入这个文件中：
      <link rel="stylesheet" href="css文件路径">
      如当.css文件与当前.html文件在同一级路径时：
      <link rel="stylesheet" href="style.css">
    此时该.css样式文件的路径为style.css