# index
**Repository Path**: tengfei2233/index
## Basic Information
- **Project Name**: index
- **Description**: 第一次学习网页的时候的学习
- **Primary Language**: HTML
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-02-25
- **Last Updated**: 2022-05-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Web用户面板
## 1.开发工具
* Visual Studio Code
* WebStorm
## 2.测试工具
* 浏览器
1. Microsoft Edge
2. Internet Explorer
3. Google Chrome
4. Mozilla FireFox
5. Apple Safari
6. .......
## 3.推荐网站
* MDN
* 菜鸟教程
* W3school
## 4.Vs code常用快捷键与扩展
* Ctrl + s 保存
* Ctrl + z 撤销
* Ctrl + y 恢复
* Ctrl + c 复制
* Ctrl + v 粘贴
* Ctrl + x 剪切
* Ctrl + / 注释切换
* Shift + Alt + f 格式化代码
* Tab Emmet切换
* Alt + B 打开浏览器
* HTML CSS Support
* Prettier - Code formatter或者 Beautify css/sass/scss/less
* Path lntellisense
## 5.在浏览器Chrome中查看调试网页
* Elements 元素面板 -> html+css
* Console 控制台面板 -> js
* Sources 源代码面板 -> js
* Network 网络面板 -> 网络请求
* Performance 性能面板 -> 性能调优
* Memory 内存面板 -> 性能调优
* Application 应用面板 -> 性能调优
* Security 安全面板 -> 安全防御
* Audits 审计面板 -> 自动化测试
## 6.关于README.md
* Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。
* Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。
* Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
* Markdown 编写的文档后缀为 .md, .markdown。
## 7.HTML语言概述
### 什么是HTMKL?
1. HTML 是用来描述网页的一种语言。
2. HTML指的是超文本标记语言:HyperText Markup Language。
3. HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签(markup tag)。
4. HTML使用标记标签来描述网页。
5. HTML文档包含了HTML标签及文本内容。
### HTML标签
1. HTML标记标签通常被称为HTML标签(HTML tag)。
2. HTML标签是由尖括号包围的关键词，比如<html>。
3. HTML标签通常是成对出现的，比如<b>和</b>。
4. 开始和结束标签也被称为开放标签和闭合标签。
5. 标签对中的第一个标签是开始标签，第二个是结束标签。
6. HTML标签也存在一些单标签，比如<img/>。
### HTML默认搜索页
* index.html
* index.css
* index.php
* index.jsp
### HTML的head部分
```
定义了文档信息
定义了文档信息
<bade> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script>定义了HTML文档的样式
```
### HTML的body部分
1. 内容分区元素
```
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
```
2. 文本内容元素
```
<div>
<p>, <pre>
<ul>, <li>
<ol> ,<li>
<dl>, <dt>,<dd>
<hr>
<blockquote>
```
3. 内联文本元素
```
<span>
<br>
<b>, <strong>
<i>, <em>
<a>
```
4. 图片元素
```
<img>
```
5. 内嵌内容元素
```
<iframe>
```
### HTML数据呈现——表格
```
元素 描述
<table> 表示表格数据 — 即通过二维数据表表示的信息。
<tr> 定义表格中的行。
<td> 定义了一个包含数据的表格单元格。属性：colspan rowspan
<caption> 展示一个表格的标题， 它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。
<thead> 定义了一组定义表格的列头的行。
<tbody> 封装了一组表行，表示它们包含表的主体
<tfoot> 定义了一组表格中各列的汇总行。
<th> 定义表格内的表头单元格。属性：colspan rowspan
<colgroup> 表格列组 标签用来定义表中的一组列表。
<col> 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于
<colgroup> 元素内。
```
### HTML数据交互——表单
```
元素 描述
<form> 表示了文档中的一个区域，此区域包含有交互控制元件，用来向 Web 服务器提交信息。
<fieldset> 用来对表单中的控制元素进行分组。
<legend> 代表一个用于表示它的父元素<fieldset>的内容的标题。
<label> 表示用户界面中某个元素的说明。
<input> 用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。
<select> 表示一个控件，提供一个选项菜单。
<option> 用于定义在<select>,<optgroup>元素中包含的项。<option> 可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项。
<optgroup> 创建包含在一个 <select> 元素中的一组选项。
<textarea> 表示一个多行纯文本编辑控件。
<button> 表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。
```
### HTML语义化
1. HTML语义化(Semantic)背景
> 随着互联网的发展，WEB也承载越来越多的信息（图片，声音，视频等），人们开始用机器来处理网络信息，就此诞生了搜索引擎。如次庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要。
2. 什么是语义化?
> 通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构，在去掉或样式丢失的时候依然能让页面呈现清晰的结构。
3. 为什么要使用语义化标签?
>1.清晰的页面结构。去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。
>2.有利于 seo 优化,利于被搜索引擎收录(更便于搜索引擎的爬虫程序来识别)。利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
>3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对 CSS的支持较弱),使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。
>4.便于团队开发和维护。W3C 给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。
### HTML标签
```
<header> <nav> <footer> <article> <aside> <section> <address> <main>
```
```
<abbr> <dfn> <mark> <code> <small> <input> 新类型
```
### HTML属性
* 常见属性：title href src name id class value checked disabled
* HTML属性参考 -->[传送门](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes)
### HTML颜色
* 颜色由红(R)、绿(G)、蓝(B)组成。
* 使用颜色名
* 使用颜色值
### HTML其它
* 访问路径：绝对路径 相对路径
* 图像格式：PNG JPG SVG GIF BMP ICO
* 字符实体：例如： ； ©； ®； <； >；完整列表：-->[传送门](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)
* 不建议使用<br>
* 标签，例如：center font marquee 等
* 属性，例如：border color bgcolor width height align 等
## 8.CSS概述
### CSS用来干什么的？
>CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局等。通过CSS实际上是将文档变成用户可用的文件，将文档在电脑屏幕、投影仪或打印机等设备上进行可视化展示。
### CSS的渲染
#### 基本语法
* 语法由一个 选择器(selector)起头。 它选择(selects) 了将要用来添加样式的 HTML 元素。 接着是一对大括号{ }。 在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明，冒号之前是属性，冒号之后是值。不同的 CSS 属性(properties) 对应不同的合法值。
* 例如，上图中指定了 color 属性，可以设置所需颜色值；还有 font-size 属性，设置了字的尺寸。一个 CSS 样式表可以包含很多个规则。
### CSS注释
* 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
* 注释以"/\*"开始，以"\*/"结束
### 应用CSS的三种方法
* 外部样式表<font color=red>link</font>标签
* 内部样式表<font color=red>style</font>标签
* 内联样式表<font color=red>style</font>属性
* <font color=red>优先级：</font>内联样式（Inline style） > 内部样式（Internal style sheet） >外部样式（External style sheet） > 浏览器默认样式
### CSS层叠与继承
#### 冲突
* CSS中会出现规则“**冲突**”，通过“**继承**”与“层叠”解决冲突规则的适应问题
#### 继承
* 继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。
* 例如：
1. 设置一个元素的 color 和 font-family ，每个在里面的元素也都会有相同的属性，除非直接在元素上设置属性。
2. 一些属性是不能继承的 — 举个例子如果你在一个元素上设置 width 50% ，所有的后代不会是父元素的宽度的50% 。
#### 层叠
1. **资源顺序**
* 顺序对于层叠的非常重要。如果有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。
2. **优先级**
* “优先级”重要性高于“资源顺序”，这样会发现在一些情况下，有些规则在最后出现，但是却应用了前面的规则。
* 一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
1. 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
2. 百位： 选择器中包含ID选择器则该位得一分。
3. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
4. 个位：选择器中包含元素、伪元素选择器则该位得一分。
3. **重要(!important)**
* 有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。
### CSS选择器
#### 通用选择器
* 表示所有元素
<center class="half">
<img src="https://p.ananas.chaoxing.com/star3/origin/b8dcbdf97fc98fd417ef2f1755d3bf4b.png" width="200" height="100">
<img src="https://p.ananas.chaoxing.com/star3/origin/0e3adbfcc82bf1f589619f788968bcc4.png" width="200" height="100">
</center>
#### 类选择器
* ID选择器
* 类选择器
* 元素选择器
#### 属性选择器
#### 伪类选择器
* 伪类
* 伪元素
#### 组合选择器
* 后代选择器(以空格分隔)
* 子元素选择器(以大于号分隔)
* 相邻兄弟选择器(以加号分隔)
* 普通兄弟选择器(以波浪线分隔)
## 9.CSS盒子模型(Box Model)
### 块级盒子与内联盒子
* **在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是使用CSS实现准确布局、处理元素排列的关键。**
* **在 CSS 中被广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（Page Flow）和元素之间的关系方面表现出不同的行为:**
1. **块级盒子(Block box)**
* 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
* 每个盒子都会换行
* width 和 height 属性起作用
* 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
* div、h1、p、pre等默认情况下都是块级的盒子
2. **内联盒子**
* 盒子不会产生换行。
* width 和 height 属性将不起作用。
* 内边距、外边距以及边框会被应用。
* span、 a 都是默认情况下都是内联的盒子
* **通过对盒子display 属性的设置，比如 inline 或者 block ，来改变盒子的显示。**
3. **在内联和块之间提供了一个中间状态 display: inline-block**
* 设置width 和height 属性会生效。
* padding, margin, 以及border 会推开其他元素。
* 不会跳转到新行
### 盒子模型
* 完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, content —— 合在一起就可以创建在页面上看到的内容。
1. **CSS中块级盒子**
* Content(内容) Box: 这个区域是用来显示内容，大小可以通过设置 width 和 height。
* Border(边框) Box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
* Margin(外边距) Box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。
<center class="half">
<img src="https://p.ananas.chaoxing.com/star3/origin/cd5308706a7f60997862be1ca2520bc5.png">
</center>
2. **标准盒子模型**
* 在标准模型中，设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
* 标准盒子大小为宽度410px = 350 + 25 + 25 + 5 + 5，高度210px = 150 + 25 + 25 + 5 + 5
* margin 不计入实际大小。当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。
### 盒子模型的各个部分
#### 尺寸
* width
* max-width
* min-width
* height
* max-height
* min-height
#### margin——外边距
1. **margin**
* margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。
* 四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。
* 指定的外边距允许为负数。
* 使用 margin: 0 auto 水平居中
2. **合并外边距**
* 当块级元素（block）的上外边距(margin-top)和下外边距(margin-bottom)同时都有设定时只会只会保留最大边距，这种行为称为边界折叠（margin collapsing）。
#### border——外边框
* border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。
* 可以使用border属性一次设置所有四个边框的宽度、颜色和样式。
* 分别设置每边的宽度、颜色和样式，可以使用：
* border-top
* border-right
* border-bottom
* border-left
* 设置所有边的颜色、样式或宽度，请使用以下属性：
* border-width
* border-width
* border-color
* 设置单边的颜色、样式或宽度，可以使用最细粒度的普通属性之一：
* border-top-width
* border-top-style
* border-top-color
* border-right-width
* border-right-style
* border-right-color
* border-bottom-width
* border-bottom-style
* border-bottom-color
* border-left-width
* border-left-style
* border-left-color
#### padding——内边距
* padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。
* padding-bottom
* padding-left
* padding-right
* padding-top
### 内容溢出
* CSS中万物皆盒，可以通过给width和height赋值的方式来约束盒子的尺寸。但当盒子里面塞太多东西的时候会发生溢出。CSS就不会隐藏溢出的内容，因为隐藏引起的“数据损失”通常会造成困扰。
* CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。
### 定位
> 默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。
>内联元素互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。
>定位是允许覆盖正常的基本文档流行为。例如，可以创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少。要定义某个元素上的特定类型的定位，需要使用position属性。
1. **定位(position)**
* 静态定位（static）：是每个元素获取的默认值——它只是意味着将元素放入它在文档布局流中的正常位置。
* 相对定位（relative）：相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变。
* 相对定位（relative）：相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变。
* 绝对定位（absolute）：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。元素的位置与文档流无关，因此不占据空间。
* 粘贴定位（sticky）：基于用户的滚动位置来定位。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。
* ①元素可以使用的顶部（top），底部（bottom），左侧（left）和右侧（right）属性进行定位。
* ②使用虚拟的Z轴（z-index）重叠元素的性质。当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。默认情况下，定位的元素都具有z-index为auto，实际上为0。
### 浮动
1. **FLoat(浮动)**
>使元素向左或向右移动，其周围的元素也会重新排列。使元素向左或向右移动，其周围的元素也会重新排列。
2. **清除浮动**
* left：停止任何活动的左浮动
* right：停止任何活动的右浮动
* both：停止任何活动的左右浮动
## 10.CSS常见样式属性
### 值与单位
1. **数字，长度与百分比**
* 长度
* CSS中有两种类型的长度——相对长度和绝对长度
* 数字
* 有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity ），它控制元素的不透明度(它的透明程度)。此属性接受0(完全透明)和1(完全不透明)之间的数字。
2. **颜色**
* 颜色关键词
* 十六进制RGB值
* RGB值
3. **图片**
* 通过url()函数指向的实际图像文件
4. **位置**
* 表示一组2D坐标，用于定位一个元素，如背景图像(通过 background-position)。它可以使用关键字(如 top, left, bottom, right, 以及center )将元素与2D框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。
5. **字符串和标识符**
* 关键字被用作值的地方(例如颜色关键字，如 red, black, rebeccapurple, and goldenrod)。这些关键字被更准确地描述为标识符，一个CSS可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。
6. **函数**
* 颜色部分看到了函数的作用——rgb()、hsl()等。用于从文件返回图像的值——url()——也是一个函数。calc()函数能够在CSS中进行简单的计算。
### 字体样式
* 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
* font（字体）：font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。
* color（颜色）
* font-family（字体种类）
* font-size（字体大小）
* font-style（字体样式）
* font-weight（字体粗细）
### 文字样式
* 影响文本布局的属性
* text-align（文本对齐）
* line-height（行高）
* text-decoration（文本装饰）
* text-indent（文本缩进）
* letter-spacing（字母间距）
* word-spacing（单词间距）
### 列表样式
* 列表样式
* list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
* list-style-position ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
* list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。
* list-style：简写属性。属性值可以任意顺序排列，你可以设置一个，两个或者三个值（该属性的默认值为 disc, none, outside）。
### 背景样式
* 背景样式
* background-color（背景颜色）：定义了CSS中任何元素的背景颜色。属性接受任何有效的<color>值。背景色扩展到元素的内容和内边距的下面。
* background-image（背景图片）：允许在元素的背景中显示图像。
* background-repeat（背景平铺）：用于控制图像的平铺行为。
* background-position（背景定位）：允许选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
* background-attachment（背景附加）：指定内容滚动时，背景滚动方式。
* background（背景）：是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。
### 表格样式
* 表格样式
* table-layout（布局）
* border-collapse（间距）
* border-spacing（相邻单元格边框之间的距离）
* caption-side（标题位置）
* empty-cells（无内容单元格）
### 表单样式
* 表单元素没有单独的样式属性，由于历史和技术的原因，表单元素不能很好地与CSS配合工作。可以分为三类：
* 一类是跨平台下表现一致的的，例如：<form><fieldset><label><output>以及文本字段（单行和多行）和按钮。
* 一类是跨平台下比较难取得一致表现的，需要更多的CSS技巧，例如：<legend>、<checkbox>和<radio>按钮。
* 一类是无法应用样式的，例如：所有高级用户界面小部件，如范围，颜色或日期控件; 和所有下拉小部件，包括<select>, <option>, <optgroup>和<datalist> 元素。
* 表单重置
## 11.CSS应用
### 样式重置(CSS Reset)
1. **Global White Space Reset**
* {margin: 0;padding: 0}
* Reset.css
* 最先作者: Eric Meyer
* 目的: 在各浏览器达到统一的效果
* 链接: [https://meyerweb.com/eric/tools/css/reset/](https://meyerweb.com/eric/tools/css/reset/)
* YUI Reset: [https://yuilibrary.com/yui/docs/cssreset/cssreset-basic-example.html](https://yuilibrary.com/yui/docs/cssreset/cssreset-basic-example.html)
* Normalize.css
* 由Nicolas Gallagher和Jonathan Neal维护的一个CSS重置样式库，Bootstrap用的就是normalization.css。
* 很多人说reset.css太暴力了，normalize.css相对要温柔一些。normalize.css修复了不同浏览器常见的不一致，规范化常见的组件风格，保存有用的默认值。因此，选择用Normalize.css来取代其它的CSS Resets。
* 链接[http://necolas.github.io/normalize.css](http://necolas.github.io/normalize.css)