HTML基础

🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界稀土掘金 OR GitHub.

# 网页笔记

[toc]

# 一、HTML

# 1. B/S 和 C/S

B/S：浏览器中的网页（无需安装、无需更新、跨平台）

C/S：移动端的 APP

补充：

客户端：用户通过客户端来使用软件

服务器：服务器负责在远程处理业务逻辑

服务器开发语言：Java、PHP、C#、Python、Node.js

客户端形式：文字客户端、图形化界面、网页

# 2. 特点（B/S）

无需安装
无需更新
跨平台

# 3. 简史

万维网的发明人：蒂姆伯纳斯李，制作网页的标准规范 W3C（万维网联盟）

# 4. 结构–HTML（Hypertext Markup Language）

HTML：超文本标记语言

# 5. 属性

属性在开始标签里面写，属性是一个名值对；

有些属性有属性值，有些属性没有属性值；

属性具有属性值，但是有一些属性没有属性值也对

# 6. 文档声明

<! doctype html> 放在第一行，告诉浏览器网页版本 HTML5

注意：注释不能嵌套

# 7. 进制

所有数据在计算机中底层都是以二进制形式保存

1 byte = 8 bit
1 kb（千字节）= 1024 byte
1 mb （兆字节）= 1024 kb
1 gb （吉字节）= 1024 mb
1 tb （特字节）= 1024 gb
1 pb = 1024 tb

# 8. 编码

网页的头部，标签里面的内容不显示在网页里面，主要帮助浏览器和搜索引擎来解析网页的

将字符转换为二进制码的过程称为编码

将二进制码转换为字符的过程称为解码

字符集（charset）编码和解码所采用的规则称为字符集，编码和解码所采用的字符集的不同会导致乱码现象

常见的字符集：ASCII（美国标准码）、ISO88591（欧洲）、GBK（中国）、GB2312（中国）、UTF-8（万国码，所有国家均适用）

设置编码字符格式：charset=“utf-8”

告诉浏览器编码格式

# 9. 标签文档

目的查看标签的作用，网上可以查看

建议查看 www.w3school.com.cn

# 10. 实体（转义字符）

实体查询和符号参考手册相关链接：https://www.w3school.com.cn/html/html_entities.asp

在网页中编写多个空格会被浏览器默认为一个空格；若写特殊的字符时，需要使用转义字符

//实体的语法
&nbsp;//空格
&gt;//大于号
&lt;//小于号
&copy;//版权符号

# 11. meta 标签

meta：主要用于设置一些网页中的元数据，元数据不是给用户看的
charset：指定网页的字符集
name：指定的数据名称
content：制定的数据内容
keywords：网页关键字
description：用于网页的描述
http-equiv="X-UA-Compatible"：将网页重定向到另一个网站

# 12. 标签元素

块级元素：一般通过块级元素对网页进行布局

页面中独占一行的元素是块级元素

行内元素：一般包裹文字

在页面中不会独占一行的元素为行内元素

<hgroup>标题组标签</hgroup>
<em>加重标签</em>		//内联元素
<blockquote>长引用</blockquote>//引用标签
<q>短引用</q>//使用""包裹起来
<br />换行
<p></p>不能放任何的块级元素
<header></header>网页的头部
<main></main>网页的主体部分
<footer></footer>网页的底部
<aside></aside>侧边栏内容
<nav></nav>网页的导航栏
<article></article>表示一个独立的文章
<section></section>表示一个独立的区块 
<span></span>行内元素，一般用于网页中选中文字
<s></s>有误文本
<ul></ul>无序列表 
<ol></ol>有序列表
<li></li>列表项
<dl></dl>创建一个定义列表
<dt></dt>定义的内容
<dd></dd>对内容进行解释说明
<a herf="目标地址路径" target="打开的页面的属性"></a>行内元素，可以嵌套除自身之外的任何元素超链接，实现网页之间的跳转
<a herf="#id的属性值"></a>锚点跳转
herf:"javascript:;"作为herf的属性，点击超链接什么也不会发生
_self:在当前页面打开超链接
_blank:在新的页面打开超链接
./当前文件所在目录
../当前文件所在目录的上一级目录
锚链接的用法：
1. 本页面锚链接(使用#name跳转到对应锚点)
<a href="#top" target="_self">这是一个超链接</a>
2. 页面间锚链接(跳转到其他页面的指定位置，设置锚点)
<a herf="t.html#nav">跳转到新页面指定部分</a>
块级标签与行级标签的特点与区别:
块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示
块级标签的宽度默认是100%；行级标签的宽度由文字内容撑开
块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性
<img src="图片路径" alt="图片描述" width="" height="" title="图片标识">替换元素，基于块级元素与行内元素之间,成比例缩放，单位像素，一般在PC端不建议修改图片大小，在移动端需要修改图片
title 属性：设置图片的标题，当鼠标指在图片上后显示的文字
alt 属性：设置由于图片无法加载时显示的文字
align属性：设置图片周围文字相对于图片的位置
src：文件路径
1. 相对路径
2. 绝对路径
绝对路径只在当前计算机生效，若将网站转移服务器，则路径会失效。
通过绝对路径打开图片使用的是 file 协议，但网页中使用的是 http 协议，因此会出 现跨域问题，造成图片无法显示
3. 网络地址

图片格式：
jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图；一般用来显示照片
gif：支持的颜色比较少，支持简单透明，支持动图；颜色单一的图片，动图
png：支持颜色丰富，支持复杂透明，不支持动图
webp：谷歌推出的，专门用来显示网页图片的一种格式，具备其他图片格式的所有优点，文件较小，兼容性不好
base64：可以把图片转换为字符，通过字符的形式引入图片
<iframe src="内联网页路径" frameborder="0"></iframe> //frameborder表示内联网页的框架边框
音频文件：
<audio src="视频资源的路径" controls autoplay loop></audio> 
audio相关属性：
controls：是否允许用户控制播放 
autoplay：音频文件是否自动播放，该属性用的较少，一般页面无自动播放，用户体验不好
loop：音频是否循环播放
除了使用src来指定外部文件的路径以外，还可以使用source指定外部文件
<audio>
  <source src="文件路径（MP3）" type="">大部分浏览器
  <source src="文件路径（ogg）" type="">小部分浏览器
</audio>

IE8浏览器，该标签时间较早
<embed src="文件路径" type="文件类型（audio/MP3）">
视频文件：
方式一：
<video src=""></video>    
方式二：
<video>
  <source src="…….webm" type="">
  <source src="…….MP4" type="">
</video>

补充

HTML5 新增结构标签及作用

![截屏 2022-03-30 上午 9.06.20](/Users/xiaoyunfei/Library/Application Support/typora-user-images/ 截屏 2022-03-30 上午 9.06.20.png)

![截屏 2022-03-30 上午 9.07.21](/Users/xiaoyunfei/Library/Application Support/typora-user-images/ 截屏 2022-03-30 上午 9.07.21.png)

表格

行
表头单元格
普通单元格
colspan：占有列（合并列）横向合并单元格
rowspan：占有行（合并行）纵向合并单元格
表格
1. 表头：thead
2. 主体：tbody
3. 底部：tfoot
border-spacing : 指定边框之间的距离
border-collapse : 设置边框的合并
不同行的样式设置： tr:nth-child(odd){}奇数行样式设置
选择器知识点：如果表格中没有使用 tbody 而是直接使用 tr , 那么浏览器会自动创建一个 tbody , 并且将所有的 tr 放到 tbody 中，因此 tr 不是 table 的子元素
display:table-cell 设置为单元格进行居中操作
表格属性

![截屏 2022-03-30 上午 9.08.18](/Users/xiaoyunfei/Library/Application Support/typora-user-images/ 截屏 2022-03-30 上午 9.08.18.png)
行和列的属性 (当表格属性与行列属性冲突时，以行列属性为准)

![截屏 2022-03-30 上午 9.10.13](/Users/xiaoyunfei/Library/Application Support/typora-user-images/ 截屏 2022-03-30 上午 9.10.13.png)
表格的结构化和直列化
HTML5 表单

表单知识

form 的属性 action 表单要提交的服务器地址

文本框

1. 文本框数据要提交到服务器中，必须要为元素指定name属性
2. 表单例子
 <form action="movies.html">
    姓名: <input type="text" name="username">
    <br />
    <br />
    密码: <input type="password" name="password">
    <br />
    <br />
    <!-- 类似选择框，必须要指定一个value属性，value属性最终会作为用户的填写信息发送给服务器，checked默认选中 -->
   <!-- autocapitalize="off":关闭自动补全
         readonly:将表单项设置为只读，数据会提交
         disabled:将表单项设置为禁用，数据不会提交
         autofocus:设置表单项自动获取焦点	-->
    性别: <input type="radio" name="sex" value="男">
         <input type="radio" name="sex" value="女">
    <br />
    <br />
    多选框: <input type="checkbox" name="test" value="11">
           <input type="checkbox" name="test" value="22">
           <input type="checkbox" name="test" value="33">
           <input type="checkbox" name="test" value="44">
    <br />
    <br />
    下拉列表: 
    <select name="demo">
      <option value="111">111</option>  
      <option value="222">222</option>  
      <option value="333" selected>333</option>  
      <option value="444">444</option>  
    </select>
    <br />
    <br />
    颜色选择器: <input type="color" name="color">
    <br />
    <br />
    电子邮件: <input type="email" name="email">
    <br />
    <br />
    时间: <input type="datetime-local" name="time">
    <br />
    <br />
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="按钮">
  </form>

# 二、CSS

# 1. 简介

层叠样式：网页实际上是一个多层的结构，通过 CSS 可以为网页的每一层设置样式，最终我们只看到最上面一层，总之，css 就是设置设置网页中的样式

# 2. CSS 编写位置

1. 内联样式（开发时不推荐使用）
	<p style="color:red;"></p>
2. 内部样式
	<style>相关样式</style>
3. 外部样式（使用浏览器的缓存机制，加快网页的加载速度，提升用户 体验）
	<link rel="stylesheet" href="外部css文件地址">

# 3. 选择器

通过选择器可以选中页面中的指定元素进而设置相关样式
声明块：通过声明块来指定为元素设置样式

元素选择器
1. 作用：根据标签名选择元素
2. 语法： 标签名{}
id 选择器 (id 属性值不能重复)
1. 作用：根据元素的 id 属性值选中一个元素
2. 语法： id属性值{}
类选择器（可以为一个元素设置多个 class 属性值，且使用空格隔开）
1. 作用：根据元素的 class 属性值选中一组元素
2. 语法： .class属性值
通配选择器
1. 作用：选中页面中所有的元素
2. 语法： *
复合选择器 (交集选择器)
1. 选择同时符合多个条件的元素 (注意：交集选择器中如果有元素选择器，必须使用元素选择器开头)
2. 语法： 选择器1选择器2选择器n{}
选择器分组（并集选择器）
1. 同时选择多个选择器对应的元素
2. 选择器1,选择器2,选择器n{}
子元素选择器
1. 作用：选中指定父元素的指定子元素
2. 语法： 父元素 > 子元素
后代元素选择器
1. 作用：选中指定元素内的指定后代
2. 语法： 祖先后代
兄弟选择器 1
1. 作用：选择紧靠后面的兄弟元素
2. 语法： 前一个元素 + 后一个元素
兄弟选择器 2
1. 作用：选择后面所有的兄弟元素
2. 语法： 兄元素~弟元素
属性选择器
1. [属性名] 选择含有指定属性的元素
2. [属性名 = 属性值] 选择含有指定属性和属性值的元素
3. [属性名 ^= 属性值] 选择属性值以指定值开头的元素
4. [属性名 $= 属性值] 选择属性值以指定值结尾的元素
5. [属性名 *= 属性值] 选择属性值中含有某值的元素
伪类选择器 (伪类不存在的类，特殊的类)
1. 伪类用来描述一个元素的特殊状态，例如：第一个元素，被点击的元素、鼠标移入的元素……
2. 一般使用 : 开头
3. :first-child 第一个子元素（参考对象为所有的子元素进行排序）
4. :last-child 最后一个子元素（参考对象为所有的子元素进行排序）
5. :nth-child() 选中第 n 个子元素（参考对象为所有的子元素进行排序）
  1. n 第 n 个，n 的范围是 0~+∞
  2. 2n+1或even 表示选中偶数位的元素
  3. 2n+1或odd 表示选中奇数位的元素
6. :first-of-type 作用同上（同类型元素中进行排序）
7. :last-of-type 作用同上（同类型元素中进行排序）
8. :nth-of-type 作用同上（同类型元素中进行排序）
9. :not() 否定伪类，将符合条件的元素从选择器中去除
10. 超链接的伪类
  1. a:link 表示未访问过的链接（正常链接）
  2. a:visited 表示访问过的链接（由于隐私的原因，所以 visited 伪类只能修改链接颜色）
  3. :hover 表示鼠标移入的状态
  4. :active 表示鼠标点击、激活的状态
伪元素选择器
1. 伪元素：表示页面中特殊的并不真实存在的元素（特殊位置）
2. 一般使用 :: 开头
3. ::first-letter 表示第一个字母
4. ::first-line 表示第一行
5. ::selection 表示选中的内容
6. ::before 元素的开始（必须结合 content 属性使用）
7. ::after 元素的最后（必须结合 content 属性使用）

# 4. 样式的继承

我们为一个元素设置的样式同时也会应用到它的后代元素的上，继承是发生在祖先后代之间

注意：不是所有的元素都会被继承，比如背景相关的样式、布局相关的样式均不会被继承

# 5. 选择器的权重

当通过不同的选择器选中相同元素时，并且给相同的样式设置不同的值时，有可能发生样式冲突，这个时候有选择器的权重决定

内联样式>id选择器>类和伪类选择器>元素选择器>通配选择器>继承的样式（无优先级）
比较优先级时，需要将所有的优先级进行相加运算，最后优先级越高则越优先显示（分组选择器是单独计算的）
选择器的累加不会超过最大数量级，类选择器再高也不会超过id选择器，若是优先级相同，则优先使用靠下的样式
使用!important时，获得最高优先级，超过内联样式的优先级，慎用！

# 6. 单位

像素：屏幕实际是由许多的小点构成，不同屏幕大小的像素是不同的，像素越小的屏幕显示效果越清晰

百分比：属性值设置为相对于父元素属性的百分比，设置百分比可以可以使子元素跟随父元素的改变而改变

em：相对于自身元素的字体大小计算，1em = 1 font-size，em 会根据字体大小的改变而改变（一般默认 font-size = 16 像素）

rem：相对于根元素的字体大小计算

# 7. 颜色

css 里面可以使用颜色名，但是不是很方便描述
常见一般使用 RGB 值，通过三种颜色进行调整，每一种颜色值的范围是 0~255;
rgba：增加了一个值，一共有四个值，最后一个表示不透明度（1 表示完全不透明、0 表示完全透明、.5 表示半透明）
十六进制颜色值（语法：#aabbcc 简写为 #abc）
HSL 值：H: 色相、S：饱和度、L：亮度；HSLA 值：不透明度

# 8. 文档流

文档流是一个位置，在最底层，文档流是网页的基础，我们创建的元素默认都在文档流中进行排列，元素分为两个状态在文档流中、不在文档流中
块级元素
1. 块级元素会在页面中独占一行（自上向下垂直排列）
2. 默认宽度是父级元素的全部（把父元素撑满）
3. 默认高度被内容撑开（子元素撑开）
行内元素
1. 行内元素不会独占页面的一行，只占自身的大小
2. 行内元素在页面里面自左向右水平排列，如果一行之中不能排列完，则元素会换到第二行继续自左向右水平排列
3. 行内元素默认的宽度和高度都是被内容水平撑开的

# 9. 盒子模型

盒子是有四个部分组成分别为：content：内容区、padding：内边距、border：边框、margin：外边距
weith：内容区的宽度、height：内容区的高度
边框属于盒子的边缘，边框的大小会影响盒子的大小，需要设置边框的样式
内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上
外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置，默认情况下设置左和上会影响该元素，若是设置右和下会影响其他的元素，margin 会影响盒子的实际占用空间
水平方向的布局

垂直方向的布局

border-style:dotted;
border-bottom-width: 1px;//专门指定某一个边的宽度
border-color: red;
border-width: 1px;
border: 1px solid red;//边框三个属性简写
padding：1px 1px 1px 1px;//内边距三个属性简写
margin：1px 1px 1px 1px;//外边距三个属性简写

水平方向的布局
margin-left+border-left+padding-left+width+margin-rigth+border-rigth+padding-rigth=父元素内容区的宽度
//若是不够默认会修改margin-rigth,有auto优先auto
//如果两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，可以利用这个特点是子元素在父元素中居中 
width:10px;
margin:0 auto;

垂直方向的布局
如果子元素的大小超过了父元素，则子元素会从父元素中溢出，可以使用是overflow属性进行处理
overflow:hidden;
visible:默认值，子元素会从父元素中显示出来
hidden:隐藏，溢出内容将会被裁减不会显示出来
scroll:生成两个滚动条，通过滚动条进行查看内容
auto:根据需要生成滚动条

overflow-x:10px;//水平大小
overflow-y:10px;//垂直大小

# 10. 垂直外边距折叠（块级 0）

相邻的垂直方向外边距会发生重叠现象
兄弟元素
1. 兄弟元素间的相邻垂直外边距会取两者之间较大值（两者都是正值）
2. 特殊情况
  1. 相邻的外边距一正一负，则取两者之和
  2. 相邻的外边距都是负值，取两者中绝对值较大的
父子元素
1. 父子元素间相邻外边距，子元素会传递父元素（上外边距）
2. 父子外边距的折叠会影响页面的布局，必须进行处理（设置为兄弟元素即可）

行内元素

行内元素不支持设置宽度和高度
行内元素可以设置 padding、border、margin，垂直方向的 padding、border、margin 不会影响页面布局

//display用来设置元素显示的类型

可选值为：

inline 将元素设置为行内元素

block 将元素设置为块元素

inline-block 将元素设置为行内块元素，行内块既可以设置高度和宽度，也不会独占一行

table 将元素设置为一个表格

none 元素不在页面中显示

//visibility 用来设置元素的显示状态

可选值：

visible 元素在页面中正常显示

hidden 元素在页面中隐藏不显示，但依然占据页面中的位置

//去除项目符号

list-style:none;

//去除a链接的下划线

text-decoration: none;

//设置居中

margin:50px auto;

//子元素的行高和父元素高相同，则实现垂直居中效果

line-height: 48px;//父元素

height: 48px;//子元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14

### 11.浏览器的默认样式

1. 通常浏览器会为元素设置一些默认样式，有时候默认样式会影响页面布局，通常情况下会去除浏览器的默认样式（PC端）

### 12.盒子的大小设置

1. ```css
   //默认情况下，盒子的大小是由内容区、内边距、边框共同决定
   //box-sizing用来设置盒子尺寸的计算方法（设置width和height的作用）
   box-sizing: border-box;//默认值，宽度和高度用来设置内容区的大小
   
   //宽度和高度用来设置整个盒子可见框的大小
   box-sizing: content-box;

# 13. 轮廓阴影和圆角

//用来设置元素的轮廓线，使用方法和border一模一样

//区别是轮廓不会影响可见框的大小

outline:1px solid red;//轮廓的设置

outline-offset: //轮廓距离边框的距离

//用来设置元素的阴影效果，阴影不会影响页面布局

//第一个值，水平偏移量，设置阴影的水平位置

//第二个值，垂直偏移量，设置阴影的垂直位置

//第三个值，阴影的模糊半径

//第四个值，阴影的颜色

box-shadow: 10px 10px 10px red;

//用来设置圆角，圆角设置圆的半径大小（若为两个值可以考虑为椭圆）

border-radius: 1px;

border-radius: 50%;//该设置为一个圆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

### 14.浮动元素

1. 通过浮动使一个元素向其父元素的左侧和右侧移动
2. 使用`float`属性设置元素浮动，none：不浮动、left：向左浮动、right：向右浮动
3. 元素使用浮动之后会脱离文档流，不占用文档流的位置，水平布局的等式不需要成立
4. 浮动的特点
   1. 浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，利用浮动实现文字环绕效果
   2. 浮动元素会完全脱离文档流，不再占用文档流的位置
   3. 设置浮动之后元素就会向父元素左侧或者右侧移动，不会从父元素中移出
   4. 浮动元素向左或向右移动时，不会超过它前面的其他浮动元素
   5. 如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移
   6. 浮动元素不会超过上边浮动的兄弟元素，最多和兄弟元素一样高
5. 作用：让页面中的元素水平排列
6. 脱离文档流的特点（不需要区分块级和行内元素）
   1. 块元素
      1. 块级元素不在独占页面的一行
      2. 脱离文档流之后块级元素的宽度和高度默认都被内容撑开
   2. 行内元素
      1. 行内元素脱离文档流之后变成块级元素，特点和块级元素一样

### 15. 块级元素水平排列可以使用浮动设置

### 16.高度塌陷和BFC

```css
// 高度塌陷问题
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失，父元素高度丢失以后，下面的元素会自动上移，导致页面布局混乱，所以高度塌陷是浮动布局中常见的问题，必须进行处理
BFC:(Block Formatting Context)	块级格式化环境
BFC是一个css中的隐含属性，可以为一个元素开启BFC，开启BFC之后该元素变成一个独立的布局区域

元素开启 BFC 的特点：

开启 BFC 的元素不会被浮动元素所覆盖
开启 BFC 的元素子元素和父元素外边距不会重叠
开启 BFC 的元素可以包含浮动的子元素

可以通过一些特殊方式开启 BFC

设置元素的浮动（宽度丢失）【不推荐】 例如：float:left;
将元素设置为行内元素【不推荐】 例如：display:inline-block
将元素的 overflow 设置为一个非 visible 的值 例如：overflow:hidden

使用 after伪类解决高度塌陷即元素名::after

div::after{
  content:'';
  display:bolck;
  clear:both;
}
//after伪元素默认是行内元素，需要设置为块级元素

解决外边距重叠问题

div::before{
  content:'';
  display:table;
}

clearfix类 可以同时解决高度塌陷和外边距重叠

.clearfix::before,.clearfix::after{
  content:'';
  display:table;
  clear:both;
}

# 17. 清除浮动

作用：清除浮动元素对当前元素所产生的影响
可选值：
1. left ：清除左侧浮动元素对当前元素所产生的影响
2. right ：清除左侧浮动元素对当前元素所产生的影响
3. both ：清除两侧浮动元素对当前元素所产生最大影响的那侧
原理

设置清除浮动元素以后，浏览器会自动为元素添加一个上外边距，使其位置不受影响

# 18. 定位：更加高级的布局手段，可以摆放到页面的任何位置

position属性设置
1. static 默认值，元素是静止的，未开启定位
2. relative ：开启元素的相对定位
3. absolute ：开启元素的绝对定位
4. fixed ：开启元素的固定定位
5. sticky ：开启元素的粘滞定位
静态定位 position:static
1. 取消原有定位，对定位进行覆盖
2. 设置不设置有什么区别？？？
相对定位 position:relative
1. 开启相对定位后，不设置偏移量不会发生任何变化
2. 相对定位是参照于元素在文档流中的位置进行定位的
3. 相对定位会提升元素的层级
4. 相对定位元素不会脱离文档流
5. 相对定位不会改变元素的性质，块依然是块，行内依然为行内
6. 偏移量
  1. top：定位元素和定位位置上边的距离
  2. bottom：定位元素和定位位置下边的距离
  3. left：定位元素和定位位置左侧的距离
  4. right：定位元素和定位位置右侧的距离

绝对定位 position:absolute

开启绝对定位后，不设置偏移量不会发生任何变化
绝对定位元素会脱离文档流
绝对定位改变元素的性质，行内元素变成块级元素，块的宽高被内容撑开
绝对定位会提升元素的层级
绝对定位元素是相对于其包含块进行定位的
包含块
1. 正常情况下，包含块就是距离当前元素最近的祖先元素
2. 绝对定位的包含块就是距离当前元素开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块（html：根元素、初始包含块）

补充：水平方向的公式和垂直方向的公式

margin-left 、 border-left 、 padding-left 、 width 、 margin-right 、 border-right 、 padding-right 之和等于包含块内容区的宽度
开启决定定位之后公式左边需要添加 left 、 right 等于包含块内容区的宽度（可设置 auto 的属性 margin 、 width 、 left 、 right ）
如果 left 、 right 的默认值是 auto ，等式不满足的时候自动调整这两个值

垂直方向和水平方向相同

//水平居中
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;

//垂直居中
  position: absolute;
  top:0;
  bottom:0;
  margin-top: auto;
  margin-bottom: auto;
1. 父元素存在相对定位 
.box1{
  width: 300px;
  height: 300px;
  background-color: aqua;
  position: relative;//父元素中要开启相对定位
}
.box2{
  width: 60px;
  height: 60px;
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

固定定位 position:fixed
1. 特殊的绝对定位，部分特点和绝对定位一样
2. 固定定位永远参照与浏览器的视口进行定位
3. 固定定位的元素不会随着网页的滚动条滚动
粘滞定位 position:sticky
1. 兼容性不太好，部分特点和相对定位一样
2. 粘滞定位可以在元素到达某个位置时将其固定

# 19. 元素的层级

定位层级都是相同的，不分绝对定位还是相对定位
设置透明 background-color: rgba(255, 0, 0, .3);
开启定位的元素可以利用 z-index:1; 给元素设置层级（里面是一个整数，值越大元素就越优先显示）
如果元素的优先级相同，那么就优先显示靠下的元素；祖先元素的层级再高也不会覆盖后代元素

# 20. 轮播图练习

<a class="active" href="#"></a>//active默认激活

background-clip: border-box;//将背景颜色设置到内容区，边框和内边距不在有背景颜色

border: 1px solid transparent;//边框为透明色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

### 21.字体族

1. ```css
   问题：
   1. 加载速度
   2. 版权
   3. 字体格式
   @font-face{
   /* 指定字体的名字 */
   font-family: 'Courier New', Courier, monospace;
   /* 服务器中字体的路径 */
   src:url("字体路径");
   }
   字体相关的样式
   1. color		设置字体颜色
   2. font-size		设置字体大小
   		单位：
   				em：相当于当前元素的一个font-size
   				rem：相当于根元素的一个font-size
   3. font-family		字体族（字体的格式）
   		可选值：
   					serif		衬线字体
   					sans-serif		非衬线字体
   					monospace		等宽字体
   指定字体的类型，浏览器会自动使用该类型下的字体
   font-family  可以指定多个字体，多个字体间使用，隔开。若第一个无效时依次尝试去

# 22. 图标字体：将图标直接设置为字体（ `class类` 、实体、伪元素三种方式）

通过伪元素来设置图标字体

找到要设置图标的元素通过 before 和 after 选中
在属性 content 中设置字体编码

设置字体样式

li::before{
	content:'\f1b0';
  font-family:'字体样式';//fab、fas等
  font-weight:900px;
}
或
<span class="fas">&#x图标的编码</span>//另一种方式

阿里图标字体库的使用方式
1. 直接使用类 class = iconfont
2. 使用伪元素的方式 
li::before{
	content:'\f1b0';
  font-family:'字体样式';//fab、fas等
  font-weight:900px;
}

# 23. 文本样式的相关设置

行高的设置
1. 可以将行高和高度设置相同的值，使单行文字在一个元素中垂直居中
  1
  2
  height:100px line-height:100px;
2. 行高是指文字占有的实际高度，可以通过 line-height 来设置行高，行高可以指定一个大小 (em、px), 也可以设置一个整数，表示为字体的整数倍
3. 行高设置文字的行间距，行间距 = 行高 - 字体大小
4. 字体框：字体存在的格子，可以通过 font-size 设置字体框的高度
5. 行高会在字体框的上下平均分配

字体的简写属性

font:字体大小/行高(可省略) 字体族
font-weight:字重(字体的加粗)
	可选值
			normal	默认值，不加粗
			bold	加粗
			100~900级别
font-style:字体的风格
			normal	正常
			italic	斜体

文本的水平和垂直对齐

1. text-align  文本的水平对齐
	可选值
		left		左侧对齐
		right		右侧对齐
		center	居中对齐	
		justify	两端对齐
2. vertical-align	设置元素垂直对齐的方式
	可选值
		baseline	默认值，基线对齐
		top				顶部对齐
		bottom		底部对齐
		middle		居中对齐
附加:若是图片和父元素存在缝隙，可以使用vertical-align:bottom;解决

文本样式的设置

1. text-decoration  设置文本修饰
	可选值
		none	无下划线
		underline		下划线
		line-through	删除线
		overline			上划线
		例:text-decoration:underline red dotted;
2. white-space	设置网页如何处理空白
	可选值
		normal	正常
		nowrap	不换行
		pre 		保留空白
3. 显示省略号的效果
white-space: nowrap;//文本不换行
overflow: hidden;//多余的文本进行隐藏
text-overflow: ellipsis;//使用省略号进行替换

# 24. 京东顶部导航条总结学习

box-shadow 属性详解

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

# 25. 背景

background-color: 设置背景颜色
background-image: 设置背景图片
1. 可以同时设置颜色和图片，背景颜色将会成为图片的背景颜色
2. 背景的图片小于元素：背景图片将会自动在元素中平铺，X 轴和 Y 轴方向平铺
3. 背景的图片大于元素：背景图片将会无法完全显示
4. 背景的图片等于元素：直接正常显示
background-repeat: 设置背景重复的方式
1. 默认值repeat : 背景将会沿着 x 轴和 y 轴方向重复
2. repeat-x : 沿着 x 轴方向重复
3. repeat-y : 沿着 y 轴方向重复
4. no-repeat : 背景图片不重复
background-position: 设置背景图片的位置
1. top 、 left 、 right 、 bottom 、 center 同时指定两个值，若只指定一个值，则第二值会和第一个值相同
2. 通过偏移量来指定背景图片的位置： 水平方向的偏移量 、 垂直方向的偏移量
background-clip : 设置背景范围
1. border-box : 默认值，背景会出现在边框的下边
2. padding-box : 背景不会出现在边框下边，只出现在内容区和内边距
3. content-box : 背景只会出现在内容区
background-origin : 背景图片的偏移量计算原点
1. padding-box : 默认值， background-position 从内边距出开始计算
2. border-box : 背景图片的偏移量从边框处开始计算
3. content-box : 背景图片的偏移量从内容区处开始计算
background-size : 设置背景图片的大小，第一个值表示宽度，第二值表示高度，若只写一个，则第二个值默认是 auto
1. contain : 图片比例不变，将图片在元素中完整显示
2. cover : 图片比例不变，将元素铺满
background-attachment : 背景图片是否跟随元素移动
1. scroll : 默认值，背景图片会跟随元素移动
2. fixed : 背景图片固定在页面中，不会随元素移动
background : 属性简写，无顺序要求
1. background-size 必须写在 background-position 的后面，并且时候 / 隔开
2. background-origin 要写在 background-clip 的前面
图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器家在外部资源是按需加载的，用则加载，不用则不加载。解决多个图片因请求时长而出现的闪烁问题，可以将多个小图片同意保存到一个大图片中，然后通过调整 background-position 来显示特定的图片称为 CSS-Sprite , 这种图称为雪碧图
雪碧图特点：一张图片里有包含多个图片，一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验

渐变：渐变是图片，需要通过 background-image 来设置

线性渐变

1.线性渐变，需要沿着一条直线发生变化：linear-gradient()
background-image: linear-gradient(red,yellow)
指定渐变的方向：to left,to right,to bottom,to top,deg度数，turn圈
可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
2.线性渐变，可以平铺的线性渐变：repeating-linear-gradient()
background-image: repeating-linear-gradient(red,yellow 25px)

径向渐变

1.径向渐变(放射性效果)radial-gradient()
background-image: radial-gradient(red,yellow 50px)
默认情况下径向渐变的形状根据元素的形状来计算的，正方形--圆形，长方形--椭圆形，也可以手动设置径向渐变的大小：circle、ellipse；渐变位置radial-gradient(大小 at 位置，颜色 位置，颜色 位置)
大小:circle 圆形、ellipse 椭圆形、farthest-side 远边、farthest-corner 远角、closest-side 近边、closest-corner 近角
位置:top、right、left、center、bottom

ONE A DAY

#HTML基础

HTML基础

http://example.com/2018/10/28/2003_HTML/

作者

XGG

发布于

2018年10月28日

更新于

2023年6月3日

许可协议

HTML基础上一篇

HTML基础

# 网页笔记

# 一、HTML

# 1. B/S 和 C/S

# 2. 特点（B/S）

# 3. 简史

# 4. 结构–HTML（Hypertext Markup Language）

# 5. 属性

# 6. 文档声明

# 7. 进制

# 8. 编码

# 9. 标签文档

# 10. 实体（ 转义字符）

# 11. meta 标签

# 12. 标签元素

# 二、CSS

# 1. 简介

# 2. CSS 编写位置

# 3. 选择器

# 4. 样式的继承

# 5. 选择器的权重

# 6. 单位

# 7. 颜色

# 8. 文档流

# 9. 盒子模型

# 10. 垂直外边距折叠（块级 0）

# 13. 轮廓阴影和圆角

# 17. 清除浮动

# 18. 定位：更加高级的布局手段，可以摆放到页面的任何位置

# 19. 元素的层级

# 20. 轮播图练习

# 22. 图标字体：将图标直接设置为字体（ class类 、实体、伪元素三种方式）

# 23. 文本样式的相关设置

# 24. 京东顶部导航条总结学习

# 25. 背景

# 10. 实体（转义字符）

# 22. 图标字体：将图标直接设置为字体（ `class类` 、实体、伪元素三种方式）