HTML+CSS

HTML

基本结构：

<html>
    <head>
        <meta charset=“UTF-8”>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

排版

<!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>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <p>我是一个段落</p>
    <div></div>
</body>
</html>

<div>标签没有实际的用处，CSS中用的多
h1~h6标签不能相互嵌套
<p>标签中不能出现<h1>~<h6>标签、<div>、<p>

语义化标签

概念:
用特定的标签，去表达特定的含义。
原则:
标签的默认效果不重要 (后期可以通过 CSS 随便控制效果) ，语义最重要!
举例: 对于 h1 标签，效果是文字很大 (不重要)，语义是网页主要内容 (很重要)
优势:
- 代码结构清晰可读性强
- 有利于 SEO (搜索引擎优化)
- 方便设备解析 (如屏幕阅读器、盲人阅读器等)

块级元素与行内元素

块级元素：独占一行

<marquee>
<h1>
<p>
<div>

行内元素：不占一行

<input>

规则：

块级元素中能写行内素和块级元素 (简单记: 块级素中几乎什么都能写)
行内元素中能写行内元素，但不能写块级元素
一些特殊的规则:

h1~h6 不能互相嵌套
p 中不要写块级元素

我们以后还会学到一些特殊的规则，但不会很多。

文本标签

用于包裹:词汇、短语等
通常写在排版标签里面
排版标签更宏观 (大段的文字) ，文本标签更微观 (词汇、短语)
文本标签通常都是行内元素

常用的：

标签名	标签语义
em	要着重阅读的内容
strong	十分重要的语气
span	没有语义，用于包裹短语的通用容器

图片

标签名	标签语义	标签属性	单/双标签
img	图片	`src`:图片路径 `alt`:图片描述 `width`:图片宽度，单位是像素 `height`:图片高度(px)	是

像素 ( px )是一种单位，学到 CSS 时，我们会详细讲解
尽量不同时修改图片的宽和高，可能会造成比例失调。
暂且认为 img 是行内元素(学到 CSS 时，会认识一个新的元素分类，目前咱们只知道: 块、行内)。
alt 属性的作用:

搜索引擎通过 alt 属性，得知图片的内容。– 最主要的作用
当图片无法展示时候，有些浏览器会呈现 alt 属性的值
盲人阅读器会朗读 alt 属性的值

常见的图片格式

jpg格式：

概述:扩展名为jpg 或jpeg ，是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。

主要特点:支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图

使用场景:对图片细节没有极高要求的场景，例如: 网站的产品宣传图等。– 该格式网页中很常见。
png格式：
概述:扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片

主要特点:支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图

使用场景:
- 想让图片有透明背景
- 想更高质量的呈现图片，例如:公司logo图、重要配图等
bmp格式：

概述:扩展名为 bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。

主要特点:支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图

使用场景: 对图片细节要求极高的场景，例如:一些大型游戏中的图片。(网页中很少使用)
gif格式：

概述: 扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整

主要特点:支持的颜色较少、支持简单透明背景、支持动态图

使用场景:网页中的动态图片
webp格式：

概述: 扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。

主要特点: 具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题

使用场景: 网页中的各种图片。
base64格式：
1. 本质:一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开
2. 原理: 把图片进行 base64 编码，形成一串文本。
3. 如何生成:靠一些工具或网站。
4. 如何使用: 直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响
5. 使用场景:一些较小的图片，或者需要和网页一起加载的图片。

超链接

标签名	标签语义	常用属性
a	超链接	`href`:要跳转的具体位置；`target`:跳转时如何打开界面

1 2	<a href= "网址" target="_blank">超链接的文字</a>//跳转另一个界面页面 <a href= "网址" target="_self">超链接的文字</a>//跳转当前页面

注意：

代码中的多个空格、多个回车，都会被浏览器解析成一个空格

a标签是行内元素，a元素可以包裹出他自身外的任何元素

跳转到锚点

设置锚点
1
2
3
4

<a name = "test1"></a>

<h1 id="test2">这是第一个位置</h1>
注意点：
1. 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点
2. name 和 id 都是区分大小写的，且 id 最好别是数字开头

跳转锚点

<!--跳转到Test1锚点-->
<a href="#test1">去test1锚点</a>

<!--跳转到页面顶部-->
<a href="#"></a>

<!--跳转到其他页面的锚点-->
<a href = "demo.html#test1"></a>

<!--刷新页面-->
<a href=">刷新页面</a>

列表

有序列表

<ol>
        <li>列1</li>
        <li>列2</li>
        <li>列3</li>
</ol>

无序列表

<ul>
    <li>列1</li>
    <li>列2</li>
    <li>列3</li>
</ul>

自定义列表

<dl>
    <dt>Title_1</dt>
    <dd>content_1</dd>
</dl>

列表嵌套

<ul>
        <li>中国</li>
        <li>
            <span>
                <ul>
                    <li>江苏省</li>
                    <li>
                        <span>
                            <li>
                                邳州市
                            </li>
                        </span>
                    </li>
                </ul>
            </span>
        </li>
    </ul>

表格

包括：表格标题、表格头部、表格主体、表格脚注

<table border="1">
    <!-- 表格标题 -->
    <caption>标题</caption>
    <!-- 头部 -->
    <thead>头部</thead>
    <tr>
        <th>属性1</th>
        <th>属性2</th>
        <th>属性3</th>
        <th>属性4</th>
    </tr>
    <!-- 主体 -->
    <tbody>主体</tbody>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
    </tr>
    <!-- 脚注 -->
    <tfoot>脚注</tfoot>
</table>

常用属性

标签名	标签语义	常用属性
table	表格	`width`:设置表格宽度 `height`:设置表格最小宽度，表格最终高度可能比设置的值大 `boder`:设置表格边框高度`cellspacing`:设置单元格之间的间距
thead	表格头部	`height`:设置表格头部高度 `align`:设置单元格的水平对齐方式`left`:左对齐、`center`:中间对齐、`right`:右对齐 `valign`：设置单元格的垂直对齐方式：`top`:顶部对齐、`middle`:中间对齐、`bottom`:底部对齐
tbody	表格主体	属性与Thread相同
tr	行	属性与Thread相同
tfoot	表格脚注	属性与Thread相同
td	普通单元格	`width`:设置单元格的宽度，同列所有单元格全都受影响 `heigth`:设置单元格的高度，同行所有单元格全懂受影响 `align`:设置单元格的水平对齐方式 `rowspan`:设置要跨的行数 `colspan`:设置要跨的列数
th	表头单元格	属性与`td`相同

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https://baidu.com/s">
        <input type="text" name="wd">
        <button>去百度搜索</button>
    </form>
</body>
</html>

标签名	标签语义	常用属性
form	表单	`action`:用于提交表单的提交地址 `target`:用于控制表单提交后，如何打开页面：`_self`:在本窗口打开、`_blank`:在新窗口打开
input	输入框	`type`:设置输入框的类型，`text`表文本 `name`:用于提交数据的名字
buttom	按钮	暂无

常用表单控价

文本
1
<input type = "text">
name：数据的mingcheng

value：输入框的默认输入值

maxlength：输入框的最大长度
密码
1
<input type="password">
name:数据的名称

value：输入框的默认值

maxlength:输入框输入的最大长度
单选框
1
2
<input type="radio" name = "sex" value = "male">男
<input type="radio" name = "sex" value = "famale">女
name:数据的名称注意：想要单选多个radio的name属性值要保持一致

value:提交的数据值

checked：让该单选按钮默认选中

复选框

1 2	<input type="checkbox" name = "bobby" value = "smoke">抽烟 <input type="checkbox" name = "bobby" value = "drink">喝酒

name:数据的名称

value：提交的数据值

checked：让该复选框默认选中

隐藏域
1
<input type = "hidden" name = "tag" value="100">
用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据

name:指定数据的名称

value:指定真正提交的数据
提交按钮
1
2
<input type = "submit value = “点我提交表单">
<button>点我提交表单</button>
1. button标签type属性的默认值是submit
2. button不要指定name属性
3. input标签编写的按钮，使用value属性指定按钮文字
重置按钮
1
2
<input type = "reset" value = "点我重置">
<buttom type = "reset">点我重置</buttom>
1. buttom不指定name属性
2. input标签编写的按钮，使用value属性指定按钮文字

普通按钮

1 2	<input type = "button" value="普通按钮"> <button type="button">普通按钮</button>

普通按钮的type值为button，默认为submit，记得更改

文本域

1	<textarea name = "msg" rows = "2" cols = "3">这里是文本域</textarea>

rows:行数

cols:列数

下拉框
1
2
3
4
<select name="from">
<option value = "黑">黑龙江</option>
<option value = "苏">江苏</option>
</select>
1. name：指定数据的名称
2. option：设置value属性，如果没有value属性，提交的数据是option之间的文字；如果设置了value属性，提交的数据是value的值
3. option标签设置了selected属性，表示默认选中

框架标签

标签名	功能和语义	属性
iframe	框架	`name`:框架的名字，可以与`target`属性配合 `width`:框架的高度 `height`：框架的高度 `frameborder`:是否显示边框，值为0或1

用途：

在网页中嵌入广告

与超链接或表单的target配合，展示不同的内容

CSS

CSS简介

CSS(Cascading Style Sheets)：层叠样式表
CSS也是一种标记语言，用于给HTML结构样式，例如：文字大小、颜色、元素宽高等等

CSS编写位置

行内样式

写在标签的style属性中
语法：
1
<h1 style = "color:red;font-size:60px;">I'm Lifetime Max</h1>
行内样式表，只能控制当前标签的样式，对其他样式无效

内部样式

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

语法：

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

- <style>：标签理论上可以放在HTML的任何位置，但一般放在<head>标签中
- 样式可以复用、代码结构清晰
问题：
1. 并没有实现：结构与样式完全分离
2. 多个HTML页面无法复用样式

外部样式

写在单独的.css文件中，随后在HTML文件中引用。
语法：
1. 新建一个拓展名为.css的样式文件，把所有的CSS代码放在此文件中
  1
  2
  3
  4
  h1{
  color:red;
  font-size: 40px;
  }
2. 在HTML文件中引入.css文件
  1
  <link rel = "stylesheet" href = "./xxx.css">
注意：
1. <link>标签要写在<head>标签中
2. <link>标签属性说明：
  - href:引入的文件路径
  - rel：说明引入的文档与当前文档之间的关系
3. 外部样式的优势：复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现结构与样式的完全分离

样式表的优先级

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

内部样式、外部样式，这二者的优先级相同，且:后面的会覆盖前面的(简记:“后来者居上”)

同一个样式表中，优先级也和编写顺序有关，且:后面的会覆盖前面的 (简记:“后来者居上”)

分类	优点	缺点	使用频率	作用范围
行内样式	优先级最高	1. 结构与样式未分离 2. 代码结构混乱 3. 样式不能复用	低	当前标签
内部样式	1. 样式可复用 2. 代码结构清晰	1. 结构与样式未彻底分离 2. 样式不能多页面复用	一般	当前页面
外部样式	1. 样式可复用 2. 代码结构清晰 3. 可触发浏览器的缓存机制 4. 结构与样式彻底分离	需要引入才能使用	最高	多个页面

CSS语法规范

CSS语法由两部分构成：

选择器
声明块

代码风格

展开风格
紧凑风格

CSS基本选择器

基本选择器包括：

统配选择器
元素选择器
类选择器
id选择器
交集选择器

统配选择器

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

语法：

1
2
3

* {
	属性名: 属性值
}

例如：

* {
    color: red;
    font-size: 40px;
}

元素选择器

为页面中某种元素统一设置标签

语法：

与以上相类似

例如：

h1 {
    color: orange;
    font-size: 10px;
}
p {
    color: red;
    font-size: 50px;
}

元素选择器无法实现差异化设置，例：以上的标签中，所有的<p>标签样式相同

类选择器

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

语法：

1
2
3

.类名 {
    属性名: 属性值;
}

例如：

.speak {
    color: red;
}
/*为选中的所有class值为speak的元素*/
.answer {
    color: black;
}/*为选中的所有class值为answer的元素*/

`id`选择器

根据元素的id属性值，来选中某个元素

语法：

1
2
3

#id值 {
    属性名: 属性值;
}

例如：

/*选中id值为earth的那个元素*/
#earth {
    color: red;
    font-size: 50px;
}

id属性值：尽量由数字、字母、下划线、短杠组成，以字母开头、区分大小写、中间不空格
一个元素只能拥有一个id属性，多个元素的id属性值不能相同
一个元素可以同时拥有id与class属性

CSS复合选择器

交集选择器

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

语法：

选择器1 选择器2 选择器3 …n{}

例如：

p.beatufy {
    color: blue;
}
.rich.beauty{
    color: green;
}

注意：
1. 有标签名，标签名必须写在前面。
2. id 选择器、理论上可以作为交集的条件，但实际应用中几乎不用–因为没有意义
3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p 元素又是 span 元素
4. 用的最多的交集选择器是: 元素选择器配合类名选择器，例如: p.beauty 。

并集选择器

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

与以上相似

多个选择器通过“,”连接，“,”的含义就是或

例子：

#peiqi,
.rich,
.beauty {
    font-size: 10px;
    width: 200px;
}

1. 并集选择器，我们一般竖着写.
2. 任何形式的选择器，都可以作为并集选择器的一部分
3. 并集选择器，通常用于集体声明，可以缩小样式表体积

后代选择器

作用：选中指定元素中，符合要求的后代元素
语法：选择器1 选择器2 选择器3 …选择器n{} (先写祖先，后写后代)

以上语法中，选择器之间用空格隔开

例如：

/*选中ul中的所有li*/
ul li{
    color: red;
}
/*选中ul中所有li中的a*/
ul li a {
    color: red;
}
/*选中类名为subject元素中的所有类名为font-end的li*/
.subject li.font-end {
    color: blue;
}

1. 后代选择器，最终选择的是后代，不选中祖先。
2. 儿子、孙子、重孙子，都算是后代。
3. 结构一定要符合之前讲的 HTML 嵌套要求，例如:不能p 中写 h1 ~ h6。

子代选择器

作用：选定指定元素中，符合要求的子元素（儿子元素）

子选择器又称：子选择器、子选择器
语法：选择器1> 选择器2>选择器3>…选择器n{}

选择器之间，用>隔开

例如：

/* div中的子代a的元素 */
div>a{
    color: red;
}
/*类名为person的元素中子代a元素*/
.person>a{
    color: red;
}

子代选择器，最终选择的是子代，不是父级
子、孙…统称为后代

兄弟选择器

相邻兄弟选择器
- 作用：符合条件的相邻兄弟元素
- 语法：
  1
  选择器1+选择器2{}
  1
  2
  3
  div+p{
  color:red;
  }
通用兄弟选择器
- 作用：选中指定元素后，符合条件的所有兄弟元素
- 语法：
  1
  2
  3
  选择器1~选择器2{
  
  }
  1
  2
  3
  div~p{
  color:red;
  }
两种兄弟选择器，选中的是下面的兄弟元素

属性选择器

作用：选中属性值具有一定要求的元素
语法：
1. [属性名]：选中具有某个属性的元素
2. [属性名="值"]：选中包含某个属性，且属性值等于指定值的元素
3. [属性名^="值"]：选中包含某个属性，且属性值以指定的值开头的元素
4. [属性名$ ="值"]：包含某个属性，且属性值以指定的值结尾的元素
5. [属性名*="值"]：包含某个属性，属性包含指定值的元素

伪类选择器

作用：选中特殊状态的类

CSS选择器优先级

行内样式>id选择器>类选择器>元素选择器>统配选择器
样式的权重：(a,b,c)

a: ID 选择器的个数

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

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

例如：

比较规则：按照从左到右的顺序，依次比较大小
特殊规则：

行内样式权重大于所有选择器

!important的权重，大于所有的样式

CSS三大特性

层叠性

如果发生了样式冲突，就按照(选择器优先级)进行样式的层叠

冲突：元素的同一个属性，被设置了不同的值
继承性

元素会自动拥有其父元素、或其祖先元素上所设置的某些样式
- 规则：优先继承离得近的
- 常见的可继承属性：
  
  text-??、font-??、line-??、color…
优先级

!important>行内样式>id选择器>类选择器>元素选择器>统配选择器

CSS颜色 `HEX`或`HEXA`

HEX的原理同与RGB一样，依然是通过: 红、绿、蓝色进行组合，只不过要用 6个数字，分成3组来表达
格式为: #rrggbb

每一个数字的取值范围是0~f，最大值是ff，最小值是00

CSS常用的字体属性

字体风格

属性名：font-style
常用值：
- normal: 正常
- italic:斜体
- oblique:倾斜
使用斜体，推荐使用italic

字体的粗细

属性名：font-size
常用值：
- 关键词：
  1. lighter:细
  2. normal:正常
  3. bold:粗
  4. bolder:很粗
- 数值：
  1. 100~1000且无单位，数值越大，字体越粗
  2. 100~300等于lighter,400~500等于normal,600及以上等同于bold

语法：

div {
    font-weight: bold;
}
div {
    font-weight: 600;
}

字体复合

属性名：font,可以把上述字体合并成一个属性
规则
1. 字体大小、字体族必须都写上
2. 字体族必须是最后一位、字体大小必须是倒数第二位
3. 各个属性之间，用空格隔开

字体颜色

属性名：color
可选值：
1. 颜色名
2. rgb或rgba
3. HEX或HEXA(十六进制)
4. HSL或HSLA

文本间距

字母间距：letter-spacing
单词间距：word-spacing(通过空格识别此)
属性值为像素(px),正值间距增大，负值间距缩小

文本修饰

属性名：text-decoration
可选值：
1. none: 无修饰线(常用)
2. underline: 下划线
3. overline: 上划线
4. line-through: 删除线
可搭配如下值使用：
1. dotted: 虚线
2. wavy: 波浪线

div {
    text-decoration: overline dotted green;
}
1
2
3
4
5
6
7
8
9
10
11

#### 文本缩进

+ 属性名：`text-indent`

+ 属性名：`CSS`中的长度单位，`mm,cm,px`

+ ```css
  div {
      text-indent: 40px;
  }

文本水平对齐

属性名：text-align
常用值：
1. left: 左对齐(默认值)
2. right: 右对齐
3. center:居中对齐

行高

属性名：line-height
可选值：
1. normal: 由浏览器根据文字大小决定的一个默认值
2. 像素(px)
3. 数字：参考自身font-size的倍数
4. 百分比：参考自身font-size的百分比
由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
```
div {
    line-height: 90px;
}
```

垂直对齐

属性名：vertical-align
作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式
常用值：
1. baseline （默认值）:使元素的基线与父元素的基线对齐
2. top：使元素的顶部与其梭子行的顶部对齐
3. middle：使元素的中部与其父元素的基线加上父元素的字母x的一般对齐
4. bottom:使元素的底部与其所在行的底部对齐

列表属性

可作用于ul、ol、li元素

CSS属性名	功能	属性值
list-style-type	设置列表符号	`none`:不显示前面的标识(常用) `square`:实心方框 `disc`:圆形 `decimal`:数字 `lower-roman`:小写罗马字 `upper-roman`:大写罗马字 `lower-alpha`:小写字母 `upper-alphe`:大写字母
list-style-position	设置列表符号的位置	`inside`:在`li`的里面 `outside`:在`li`的外面
list-style-image	自定义列表符号	`url`
list-style	符合属性	没有数量、顺序的要求

表格属性

属性名	功能	属性值
`boder-width`	边框宽度	CSS中可用的长度值
`boder-color`	边框颜色	CSS中可用的颜色值
`boder-style`	边框风格	`none`:默认值 `solid`:实线 `dashed`:虚线 `dotted`:点线 `double`:双实线
`boder`	边框复合属性	没有数量、顺序的要求

表格独有的属性

CSS属性名	功能	属性值
`table-layout`	设置列宽度	`auto`:自动，列宽根据内容计算 `fixed`:固定列宽、平局分
`boder-spacing`	单元格间距	CSS中可用的长度值（边框不合并）
`boder-collapse`	合并单元格边框	`collapse`:合并 `separate`:不合并
`empty-cells`	隐藏没有内容的单元格	`show`: 显示 `hide`: 隐藏单元格不合并
`caption-side`	设置表格标题位置	`top`:上面（默认） `bottom`:下