HTML

什么是网页？

网页是指在因特网根据一定的规则展示特定内容的数据，就是html文件;

网页的构成：

图片，文字，超链接，声音，视频等元素组成

什么HTML（记住）？

Html是超文本标记语言，不是编程语言，是用来描述网页的一种语言，是以标签格式组成的一种标记语言

网页形成的过程

前端人员开发代码 --- 浏览器显示代码（解析、渲染）---- 生成web页面

常见的浏览器内核和常见5大浏览器

IE内核：Trident
火狐内核： Gecko
苹果内核：Webkit
谷歌/欧朋：Blink

内核的作用：读取网页的内容；

Web标准

使用web标准原因

web标准是由W3C组织和其他标准化组织制定的一系列标准的集合
由于浏览器的内核不同，解析代码时候可能会不统一，我们可以通过web标准规范各大浏览器的解析规范，达到元素最终显示的样式统一；

web标准的组成：

1. 结构标准 html
2. 表现标准（样式标准） css
3. 行为标准 javascript

HTML语法规范

HTML标签是由尖括号<>包围的关键字
HTML标签通常有双标签和单标签两种
1. 成对出现的 --- 称为双标签 ,一个开始标签一个结束标签; 例如：<html></html>
2. 单独出现的 --- 称为单标签，只有开始标签没有结束标签；例如：<br />
标签关系：分为包含关系和并列关系
包含关系（父子关系）:有父子级嵌套关系的盒子
并列关系（兄弟关系）:并列的兄弟关系；

HTML基本结构

<html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

一对html标签嵌套head和body标签，heade标签里面的内容是给浏览器解析的用户是看不见的除了title，body里面的内容是给用户看的，会全部渲染到浏览器中；

网页的开发工具

VS Code的使用
新建文件 Ctrl+N，建议大家使用点击+好完成
保存 Ctrl+S ，必须保存为.html文件
Ctrl+加号，Ctrl+减号可以缩放视图
生成骨架:英文输入！按下Tab键即可；

默认结构代码

DOCTYPE:声明文档类型告诉浏览器使用哪种HTML版本来显示网页
lang：定义文档的显示哪个国家的语言
charset：字符的集合计算机能够识别和存储的文字

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

标签语义化

在合适的地方给个最合理的标签可以让页面结构更加清晰

常用标签

标题标签从h1-h6 标题使用并且依据重要性递减
段落标签是p标签根据文档分成若干个段落
换行标签br：强制换行
注意：
01、标题标签在使用的时候，h1标签一个页面最好只能出现一次，并且只放网站logo，h2标签最好一个页面最多出现两次，主要放权重高的标题；h3~h6标签可以随意使用；
02、段落标签可以自动换行，两个标签之间有间隙；

关于浏览器对空格和回车换行的解析

浏览器在解析代码的时候对空格只解析一个，如果想要多个空格就用特殊符号 来设置，对回车换行解析为一个空格，想要换行就用<br >完成；

文本格式化标签

重点：加粗和倾斜

两大布局标签：div与span

div标签用来布局但一行只能放一个div，主要是用来做大框架布局使用
span标签用来布局一行可以放多个盒子，主要用来实现特殊效果的文字或者小图标等；

图片标签img

src 是必须要写的、

alt 是图片显示错误的时候显示对应文本

title 是鼠标划上图片提示文本

width 图片的宽度

height 图片的高度

border 图片边框（不要使用）

注意：
01、图片的src属性是必须要书写的
02、图片设置宽高的时候，我们只需要设置宽度即可，高度不用设置会自己等比例进行缩放
03、图片可以同时书写多个属性，只需要用空格隔开即可

目录文件夹：实际开发中我们的文件管理文件夹，一般在里面我们会新建css文件夹、img文件夹、upload文件夹、js文件夹、fonts文件夹

路径

定义：路径可以理解为：从文件自身出发去查找目标文件；
路径分为相对路径和绝对路径
绝对路径：带有本地盘符的路径和在线的http://wagnzhi
相对路径：同级路径、上级路径、下级路径
1. 同级路径：文件和目标文件是并列的关系，直接 src=“文件名称”；
2. 下级路径：文件和目标文件的父级盒子是并列关系，src=“目标文件的父级/目标文件名称”
3. 上级路径：文件的父级盒子和目标文件的父级盒子是并列关系，src需要通过../先出来一级再去查找图片对应的路径 --- src=“../文件父级/文件名称”，上级路径一般在外部链接的css中查找背景图时经常用到；

绝对路径分为两种：
带有盘符的路径：绝对不能使用，因为每个的电脑硬盘只能自己访问，别人是访问不了的
在线网络地址：可以使用，但是使用的时候必须书写http://前缀，但是要注意如果在线网站挂了该链接就不生效了；

例如：http://www.itcast.cn/

超链接标签

超链接标签a：双标签， <a href="相对路径"></a>
1. href标签是必须要书写属性
2. target属性可以控制超链接a的打开方式，target=“_blank”新的窗口打开页面
链接分类：
1. 1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >
2. 2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可（其实就是咱们的相对路径），例如 < a href="index.html"> 首页 </a >
3. 3. 空链接: 如果当时没有确定链接目标时，< a href=“#”> 首页 </a >

假链接：<a href="javascript:;)" val="1">常规体检</a>

注意：空链接#表示将当前的页面重新刷新加载了一次，假链接javascript:;表示执行了一个空的JS语句，页面不刷新；

1. 4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
2. 5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

锚点链接

作用：实现了页面的内部跳转；

第一步：确定要跳转的目标用id标记 ==== 在开始标签身上书写id=’id名称’

第二步：绑定锚点按钮用超链接a，href=‘#id名称’；

注释快捷键 Ctrl+？

Html注释
Css注释 /*注释内容*/

特殊符号

空格  

左尖括号 < === <

右尖括号 > === >

版权 ©

人民币 ¥

表格

表格的主要作用：

表格不是用来布局页面的,而是用来展示数据的数据;

表格的基本语法：

table表示整个表格的整体，tr表示表格的行，td表示表格的单元格（列），tr里面也可以嵌套th表头
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>

表头标签th：

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

表格的相关属性：

居中：align=“center” 边框：border
内容到单元格周边的距离：cellpadding
单元格和单元格之间的距离：cellspacing
宽：width
表格结构标签(了解）：
1. thead ：头部标签
2. tbody：主体内容标签
3. tfoot：表格底部标签

表格标题caption

<table>
<caption>
<h2>个人简历</h2>
</caption>
<tr>
<td></td>
</tr>
</table>

合并单元格

跨行合并单元格 rowspan
跨列合并单元格 colspan
合并单元格三步曲：
第一步：先确定是跨行还是跨列合并，如果是跨行合并rowspan从上到下的合并，如果是跨列合并colspan从左到右的合并
第二步：找到目标单元格，在开始单元格上书写跨行或者跨列，写上合并的格子： --- <td colspan=“2”></td>
第三步：删除多余的单元格；

列表

无序列表（最常用）

结构：ul嵌套li，ul里面只能嵌套li，li里面可以嵌套任何标签；

<ul>

</ul>

实际工作中：无序列表用的最多，主要做图文列表，导航、文字列表等；

有序列表

结构：ol嵌套li，ol里面只能嵌套li，li里面可以嵌套任何标签；

<ol>

</ol>

有序列表实际工作中不使用，但是我们会在做滚动图片的时候会使用一下；

自定义列表（项目列表）

结构： dl嵌套dt和dd两个标签，dt表示描述的标题，dd表示描述的说明；

<dl>

</dl>

自定义列表的使用技巧：

01 一个dl嵌套一个dt和多个dd，相当于中国的一词多义；

02 一个dl里面可以嵌套多对的dt和dd；

实际开发中自定义列表建议大家只做下面的效果

表单

作用目的：收集用户信息；

表单的组成：

提示文本、表单控件、表单域（form）

表单域form

1、作用：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

2、默认属性：

action=“url地址” ----- 用于指定接收并处理表单数据的服务器程序的url地址。

method=“ 提交方式” ---- 取值 get/post，get是明文提交，post是密文提交；

name=“名字” 设置不同的取值名称用于后台提交；

注意：一个页面中可能会出现多个form标签，我们需要用添加name属性设置不同的表单名称来区分；

以后只要是书写表单效果就要书写form表单域标签进行包裹

input表单控件

input标签是单标签，我们可以通过更改input的type属性值能实现不同的功能’

文本框：input的type取值为text

文本框: <input type="text">

密码框：input的type取值为password

密码： <input type="password">

单选按钮：input的type取值为type=“radio”

单选： <input type="radio">男 <input type="radio"> 女

如果想要实现单选效果我们就需要给input标签设置相同的name，归为一类；

单选：<input type="radio" name="sex">男 <input type="radio" name="sex"> 女

复选按钮：input的type取值type=“checkbox”

复选框：<input type="checkbox"> 吃饭<input type="checkbox"> 睡觉

实际开发找那个复选按钮也要设置相同的name

复选框：<input type="checkbox" name="aihao"> 吃饭<input type="checkbox" name="aihao"> 睡觉

实际开发中想要实现单选按钮和复选按钮的默认选中我们就设置属性

checked=“checked”，因为属性=属性值的我们可以在书写的时候吧属性值省略不写，但是我们建议大家写全；

单选： <input type="radio" name="sex" checked="checked">

单选： <input type="radio" name="sex" checked>

input按钮控件

提交按钮： type=“submit”

可以设置自己的value值也可以用默认的；

重置按钮： type=“reset”

可以设置自己的value值也可以用默认的；

普通按钮： type=“button”

必须要自己设置value值；

图片按钮： type=“image“

src属性必须书写查找图片路径；

文件域名： type=“file”

上传文件使用；

标签按钮button

<button>我也是按钮哦</button>

label标签

1、作用：提高用户体验，扩大input表单的可操作性，点击文字可以直接将光标定到输入框，label不是表单标签；

2、使用方法：

用for 属性规定 label 与哪个表单元素绑定 ---- <label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nan“ />

可以简单的理解为：在表单身上用id标准位置，然后在label上用for调用；

只用label扩大表单元素的可操作区域的时候，for的值一定要和id的值相同；

select下拉表单

下拉列表的结构：一对select标签嵌套多对的option标签

</select>

如果option有selected=“selected”表示默认选中；

</select>

textarea文本域标签

是双标签，里面可以直接书写默认文字，而且不要回车换行，如果回车换行会出现文字前面出现大量的空格；

文本框input和文本域textarea的区别：

input只能显示一行文本，单标签，通过value设置默认值，一般适用于用户名，昵称，密码等；

textarea可以显示多行文本，双标签，一般适用于留言板等；

input常见的几个属性

name属性：在存在多个input表单的时候，设置不同的name取值进行区别，一般是后台工作人员去使用；

value属性：设置默认的值；一般的input标签都可以上设置，是只会在输入内容的控件上显示，如果想要给密码框password设置默认的文字我们需要用到placeholder属性设置，属于占位符属性设置；

密码： <input type="password" placeholder="请输入密码" >

单选按钮和多选实现默认选中：设置checked=“checked”

限制表单最多输入的文字长度：maxlenght=“number”

---- 比如 <input type=“text” max-length=“6” >表示最多只能输入6个字符长度

===== Css阶段 ====

Css的概述（作用）：

Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；

使用css的价值：

能够将结构html和样式css分离书写，简化代码，提高可阅读性；

Css的语法结构

选择器 { 属性1:属性值; 属性2:属性值;…… }

Css的书写位置

目前我们将css书写在一对style标签中，放在head标签中title标签下面
注意：css属性和属性值之间要用冒号:连接，每一个属性和属性之间要用封号隔开；
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 选择器 {css} */
p {
font-size: 30px;
}
</style>
</head>

css代码风格

展开形式和紧凑形式，实际开发中推荐大家使用展开形式
样式书写都要小写，属性值前面，冒号后面，保留一个空格
选择器和大括号中间保留空格
<style>
p {
font-size: 30px;
color: red;
}
</style>

css选择器

作用：选中标签，设置样式；

选择器的分类

选择器分为：基础选择器和复合选择器

基础选择器：标签选择器、类选择器、id选择器

复合选择器：后代选择器、并集选择器、属性选择器、指定标签选择器等；

标签选择器定义

指用HTML标签名称作为选择器，按照标签名称分类，为页面中的某一类标签指定统一的样式
也可以简答理解为：直接用标签名称选中元素设置样式

注意：标签选择器在实际开发中不建议单独直接使用，因为会将页面中该标签全部选中，如果要使用就建议用后代选择器来选中；

类选择器

类选择器使用有一个过程：
1. 01 定义：在css里面用点“ . ” + 类名称 +{ css键值对 } 进行样式定义;
2. 02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
Css类名调用：
1. 实际开发中类名称是可以重复调用的，前提条件是两个盒子样式完全一致
类选择器的命名规则：
1. 不能用纯数字、数字开头的、中文命名,可以用数字结尾；
2. 命名最好有意义，尽量让别人一眼就能知道这个类名的目的；
3. 长名称或者词组可以使用横线或者下划线连接命名；

记忆口诀：样式点定义，结构类调用，一个或多个，开发最常用；

<style>

/* .类名称 { css样式} */

.p1 {

font-size: 60px;

color: #f00;

}

</style>

<body>

</body>

类选择器特殊使用-多类名

一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
<div class="red font30">老王最好</div>

以上代码表示一个div盒子同时具有了两个类样式

id选择器

id选择器使用有一个过程：

定义：在css里面用 “ # ” + id名称 +{ css键值对 } 进行样式定义;

调用：在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用；

id选择器的命名规则：不能用纯数字、数字开头的、中文命名；

实际开发中书写静态页面是不使用ID选择器的，我们在后期的JS学习中会用id选择器获取元素使用；

类选择器和id选择器的区别：

类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；

id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；

通配符选择器 *

一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，

实际开发中我们会在css的最前面设置以下代码清空默认的内外边距；

/* 选中了多用的标签并且设置默认的内外边距为0 */

* {

margin: 0;

padding: 0;

}

Css文字控制属性

文字字体 font-family

取值：可以是中文（要用英文的引号引起来），英文（如果英文是由多个单词构成也要用英文引号引起来）；换可以同时设置多个字体，每一个字体之间用英文的逗号隔开；

font-family: '微软雅黑','宋体';

文字大小 font-size

取值是实际的像素值，必须要跟上px单位

font-size: 60px;

文字的加粗 font-weight

取值有两个： bold 700 实际工作中建议大家使用700

font-weight: bold;

font-weight: 700;

文字不加粗 font-weight

在实际的开发中有些标签默认是加粗的，比如h标题标签和加粗标签b和strong，我们可以设置他们不加粗

我们可以直接设置font-weigth是取值有两个： normal 和 400 实际开发中建议大家使用400；

font-weight: normal;

font-weight: 400;

文字的倾斜样式 font-style

取值为 italic 可以设置文字倾斜

font-style: italic;

文字不倾斜 font-style

实际的开发中有两个标签i和em是默认倾斜的，往往我们不需要他们倾斜

我们将font-style的取值设置为normal就可以实现不倾斜；

实际的开发中我们会在css的最前面设置以下代码，直接将em和i设置为不倾斜，方便我们的布局使用；

em,

i {

font-style: normal;

}

文字的综合写法font

综合写法：font：是否倾斜是否加粗文字大小/行高字体；
综合写法注意:

使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的；一般的倾斜和加粗没有就直接不写不要写normal；

实际工作中一般只用：font:文字大小字体；

文本的颜色color

color可以设置字体颜色，取值可以是hi预定义的英文单词，也可以是16进制写法一定要以#开头，还可以设置为rgb取值，范围是0-255之间；

color: #f00;

color: red;

color: rgb(255, 0, 255);

文本对齐text-align

实际开发中我们可以设置文本在父级盒子中对齐方式，有居左、居中、居右三种对齐方式；

文本默认是居中显示 text-align:left; 我们不需要设置

文本居中（常用）

/* 文本居中 */

text-align: center;

注意：可以让父级盒子里面的文字还有图片，input表单控件居中显示,需要将这个属性加到父级盒子身上；

文本居右

/* 文本居右 */

text-align: right;

文本线条装饰text-decoration

下划线（重点）

text-decoration: underline;

上划线

text-decoration: overline;

没有线（重点）

text-decoration: none;

超链接a有默认的下划线，开发的时候我们需要将其干掉，我们一般会在css的最前面设置以下代码，保证页面中所有的a没有默认的下划线

a {

text-decoration: none;

}

删除线

text-decoration: line-through;

文本首行缩进 text-indent

取值为实际的数值，单位是em，em单位的大小是当前文字的文字大小，那么2em表示两个字，也可以去像素；

text-indent: 2em;

行间距（行高）line-height

行高就是两行文字之间的距离，我们直接设置line-height的取值就可以；

line-height: 30px;

测量文本的行高

在PS中以第一行的文字的开始（结束）到另一行的文字的开始（结束）的高度的就是行高；

p {

width: 600px;

background: gold;

text-indent: 2em;

line-height: 30px;

}

css的引入方式

行内样式

直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可，没有实现结构和样式分离，尽量不用：

后期书写JS特效的时候可能会使用一下；

内部样式（内嵌）

书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；

<head>

<title>Document</title>

<style>

.box {

width: 200px;

height: 200px;

}

</style>

</head>

外部链接式

外部链接的步骤：
01 新建：.css格式的css文件，直接在里面书写选择器以及css样式；
02 引用：利用link标签引入新建的css文件，要配合link的三个属性 rel关系，type文件类型直接省略，href文件路径；
<link rel="stylesheet" href="css/style.css">
使用外部链接的好处：实现了结构和样式的完全分离，代码；简洁，可读性强；

Emmet语法：

标签名+tab键可以生成整个标签；例如：div 表示生成div标签；
标签*数字+tab键可以按照数字生成对应的个数标签；例如：p*3表示3生成3个p；
如果是父子级关系可以直接用>连接+tab：例如：div>p 表示div嵌套p标签；
如果是兄弟关系就直接用+加tab；例如：div+p 表示div和p标签是同级元素；
如果要写类名和id名称直接早标签后面跟. 和#即可；例如：div.box === <div class=“box”></div> div#box === <div id=“box”></div> ；
如果想要生成有顺序的类名，直接在类名后面加$+数字；
如果想要在生成的标签里面添加内容我们可以直接在标签后面加{内容}

快速格式化代码

Vscode 快速格式化代码: shift+alt+f
也可以设置当我们保存页面的时候自动格式化代码:
1）文件 ------.>【首选项】---------->【设置】；
2）搜索emmet.include;
3）在settings.json下的【工作区设置】中添加以下语句：
"editor.formatOnType": true,
"editor.formatOnSave": true

复合选择器

是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素

后代选择器/包含选择器：有父子级的包含关系，一个空格表示了后代关系；
注意：
父元素和子元素中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器
<style>
/* 表示将box盒子下面所有的元素p选中只选中不管是第一层还是最里面的都可以选中 */
.box p {
color: red;
}
</style>

子元素选择器：

只能选择嵌套关系的父子关系得到元素，也就是嵌套的第一层元素，一个大于号“>”表示选中子级;
注意：
元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器
<style>
/* 表示将box盒子下面所有的子级关系的元素p选中只选中第一层 */
.box>p {
color: red;
}
</style>

并集选择器：

样式一致的盒子如果单独设置样式需要书写多次，我们可以把样式相同的盒子只写一个样式，用英文的逗号隔开即可，一个逗号表示合并关系；
注意：
元素1,元素2 { 样式声明 } 表示选择元素1 和元素2
元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

好处：使用并集选择器书写代码可以节约代码量，重复的代码只写一遍；

<style>

.box1,

.box2 {

width: 300px;

height: 300px;

}

.box1 {

background: pink;

}

.box2 {

background: palegreen;

}

</style>

超链接伪类 --- 伪类用冒号链接

链接的伪类四种状态：
a:link 未访问的链接（访问前）
a:visited 已访问的链接（访问后）
a:hover 鼠标移动到连接上（鼠标经过）
a:active 选定的链接（按下鼠标的时候）
注意：如果以上几个状态都写，以上的顺序不能颠倒,但是实际开发中我们不会全部都写；
实际使用的时候超链接的伪类时，不需要全部都写，只需要先设置一个总体的a的样式表示所有状态，然后单独设置鼠标经过a:hover 的样式；
<style>
a {
text-decoration: none;
}
.box a {
font-size: 180px;
color: red;
}
.box a:hover {
color: purple;
}
</style>

focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素，一般input表单才能获取该焦点
input:focus {
background: pink;
width: 300px;
height: 50px;
}

元素显示模式

块级元素

比较霸道，自己独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。
注意：p标签是块级元素，但是p标签里面不能放div标签；

同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素；

一句话：块级元素独占一行，可以设置宽高和内外边距，如果不给盒子设置宽度，默认的宽度就是父级的100%显示，块级元素里面可以放任何元素，但是要主要p标签和标题标签尽量不要在里面嵌套div；

常见的块级标签：div/p/h1-h6/dl/dt/dd/ul/li

行内元素

相邻行内元素在一行上，一行可以显示多个。
宽高可以设置，但是宽高直接设置是无效的。
默认宽度就是它本身内容的宽度（内容撑开）。
行内元素只能容纳文本或其他行内元素。
常见的行内元素：a span u s del strong em i ins 等；
注意：
超链接里面不能嵌套超链接；
特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；

一句话：行内元素一行共存多个，能够设置宽高但是不生效，默认的宽度是由内容撑开的，行内元素里面最好嵌套文本和其他的行内元素；

行内块元素

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
宽高、外边距以及内边距都可以控制（块级元素特点）。

一句话： 行内块元素一行共存多个，每一个之间有默认的间隙，默认的宽高是内容撑开，但是我们可以自己设置宽高和内外边距并且生效；

常见的行内块元素：input、img、button等；

显示模式的转换display

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

单行文字垂直居中

单行文字文本垂直居中：文字的行高等于盒子的高度；

背景background

背景图片background-image

引入背景图片，如果想要给盒子添加背景图片，盒子必须要有固定的宽高让盒子真实存在；

background-image属性必须配合url获取图片路径才能将背景图片引入；

background-image: url(img/01.jpg);

背景颜色background-color

background-color可以给盒子设置背景颜色，取值：预定义的英文单词，十六进制（去设置高吸取）、rgb三元素色（取值范围是0-255）

background-color: #f00;

背景平铺方式background-repeat

如果我们给盒子添加了背景图片，背景图片默认是平铺满盒子的，怎么不平铺?

background-repeat的取值：

默认是平铺的repeat，不设置

background-repeat: repeat;

repeat-x水平方向平铺（X轴）

background-repeat: repeat-x;

repeat-垂直方向平铺（Y轴）

background-repeat: repeat-y;

no-repeat 不平铺（死记硬背）

background-repeat: no-repeat;

来源：CSDN

作者：ougexingfuba

链接：https://blog.csdn.net/ougexingfuba/article/details/103730550

标签

网页代码

前端开发

html代码

html语言

css

html文件

Html css基础知识点总结

HTML

什么是网页？

网页的构成：

什么HTML（记住）？

网页形成的过程

常见的浏览器内核和常见5大浏览器

Web标准

使用web标准原因

web标准的组成：

HTML语法规范

HTML基本结构

网页的开发工具

默认结构代码

标签语义化

常用标签

关于浏览器对空格和回车换行的解析

文本格式化标签

两大布局标签：div与span

图片标签img

目录文件夹和根目录

路径

超链接标签

锚点链接

注释快捷键 Ctrl+？

特殊符号

表格

表格的主要作用：

表格的基本语法：

表头标签th：

表格的相关属性：

表格标题caption

合并单元格

列表

无序列表（最常用）

有序列表

自定义列表（项目列表）

表单

作用目的：收集用户信息；

表单的组成：

表单域form

input表单控件

input按钮控件

标签按钮button

label标签

select下拉表单

textarea文本域标签

文本框input和文本域textarea的区别：

input常见的几个属性

===== Css阶段 ====

Css的概述（作用）：

使用css的价值：

Css的语法结构

Css的书写位置

css代码风格

css选择器

作用：选中标签，设置样式；

选择器的分类

类选择器和id选择器的区别：

通配符选择器 *

Css文字控制属性

文字字体 font-family

文字大小 font-size

文字的加粗 font-weight

文字不加粗 font-weight

文字的倾斜样式 font-style

文字不倾斜 font-style

文字的综合写法font

文本的颜色color

文本对齐text-align

文本线条装饰text-decoration

文本首行缩进 text-indent

行间距（行高）line-height

css的引入方式

行内样式

内部样式（内嵌）

外部链接式

Emmet语法：

快速格式化代码

复合选择器