2023最新版web前端开发700集全套教程，零基础入门到进阶 html5+cs
一、html
（一）VS Code 快捷键：
1) !+回车---生成浏览器文件.html的快捷方式
2) 代码格式化：shift+Alt+F，使代码整齐
3）快速向上或向下移动一行：Alt +up/ Alt +down
4) 快速复制一行：shift+alt+up/ shift+alt+ down
5）快速替换：ctrl + F
（二）HTML5介绍
1）概念：超文本标记语言
2）HTML5的doctype声明，在html最顶部书写，避免怪异模式。<!DOCTYPE html>
3) html5 基本骨架
- html标签，定义了文档，当浏览器看到这个元素就知道是HTML文档了。所以其他的元素要包含在它里面。标签限定了文档的开始点和结束点。
- head标签，用于定义文档头部，描述文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系。绝大多数不会显示读者，而是给浏览器或者开发者去浏览的。
- body标签，定义文档的主体，与head标签同级。包含的内容主要有（文本、超链接、图像和表格等）
- title标签，写在head标签中，有head就一定要写title，有利于SEO优化。
SEO：是搜索引擎优化的英文缩写。通过对网站的内容调整，满足搜索引擎的排名需求。
- meta 标签，它是单标签，用来描述一个HTML网页文档的属性，关键词等。例如编码格式 utf-8;包含在head标签中。
（三）标签
1、标题的介绍与应用
标题是通过<h1>--- <h6>标签定义的，依次由大到小，生成h1 --> h6的快捷键：h$*6 然后回车
2、正确使用标题
确保将HTML标题标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题。
3、标题标签的位置摆放，在标签中添加属性：align = "left | right | center" 默认是居左
在标签的”>“ 里面写的所有内容都叫属性。
注：html中不推荐将文本直接放在外部，使用相应的标签来存放，这样有利于调整样式和结构。
4、段落标签
段落是通过<p>标签定义的。
5、换行 <br> 或者 <br/>,不产生新的段落的情况下换行。
6、水平线标签 <hr/>
可以设置四个属性。
<hr color = "" width = "" size = "" align = ""/>
color : 设置水平线的颜色
width：设置水平线的宽度
size：设置水平线的高度
align：设置水平线的位置，准确的是是对齐方式，可以为left | right，默认是居中。
7、图像标签
<img> 它是一个单标签。通过src属性用来存放图片路径；来展示图片。注意图片路径与对应的html文件要在同一个文件夹下。
主要有四个属性：
src: 路径（图片地址与名字）
alt: 规定图像的替代文本
height：图像的高度
width：图像的宽度
title：鼠标悬浮停在上面的提示
图片路径详解：主要有三种路径方式
- 绝对路径
- 相对路径
- 网络路径
绝对路径：是电脑的盘符存储与访问的具体地址（在电脑的哪个盘的哪个文件夹下，再加上完整图片名称 --- D:\前端代码学习\lizi1.jpg）相对路径：两者相对关系，两者在同一路径下可以直接访问
- 子级关系：/
- 父级关系：../
- 同级关系：./（可以省略）
网络路径：就是具体的网络地址：https://...
8、超文本链接 标签
使用标签<a></a> 来设置超文本链接，超链接可以是一个字，一个词或者一组词，也可以是一幅图像。点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a href="url">链接文本</a>
url: 是指具体路径，要完整，包含http.//www...
属性：href，用来描述链接的地址
9、文本标签
常用文本标签：
- <em> 定义着重文字
- <b> 定义粗体文字
- <i> 定义斜体文字
- <strong> 定义加重语气
- <del> 定义删除字
- <span> 元素没有特定的含义
这几个都可以嵌套在p标签中.
10、列表标签
- 有序列表--是一列项目，用数字进行标记。始于<ol>标签，终于<li>标签，ol包裹了li. <ol>的 type 属性可以以五种形式展现（1\a\A\I\i）.在列表中可以嵌套使用，嵌套数量不受限制，使用<ol><li>框架根据需求嵌套。
- 无序列表--也是列表项但没有先后顺序。它也可以成为项目列表，此列项目使用粗体圆点标记 . 始于<ul>标签，终于<li>标签,ul包裹了li.
<ul>的 type 属性可以以四种形式展现（disc\ circle\ square\ none\ ）注不能多加空格，否则无法识别。它与有序列表一样也是可以嵌套的。嵌套类型一样。
常用场景：1）无序列表效果 2）导航效果
快捷键：ul>li*数量 （数量根据自己需要的li数量修改）
11、表格标签
- 表格组成与特点 (行、列、单元格组成（单元格特点：同行等高、同列等宽）)
表格：<table> ; 行：<tr> ; 单元格/ 列: <td> tr\td数量没有限制
快捷键：table>tr>*数量>td*数量{文本信息}
- 表格的属性
border:设置边框；width：设置宽度；heigh：设置高度
12、表格单元格合并
- 单元格合并属性（水平合并：colspan=“数量” 垂直合并：rowspan=“数量”）
- 特点：水平合并保留左边删除右边；垂直合并保留上边删除下边。
13、form表单（现在网页必不可少的部分，让网页实现交互功能）有用户输入的地方就有表单。
1）表单由容器和控件组成。包含三个组成部分：
- 表单标签（form或称为容器）
- 表单域（输入框）
- 表单按钮（button）（2和3又称为控件）
2）表单属性：（暂为了解内容）
- action = "url" --->服务器地址 传给服务器的地址
- name = "命名" ---> 表单名称，用于识别
- method = "get | post" ---> 不同的将表单数据提交到服务器的方式，get把提交的数据url可以看到，post看不到。而且get一般用于提交少量数据，post用于提交大量数据。
3）表单元素，最常见的三种：
- text 文本框（<input type="text">）
- 密码框（<input type="password">）
- 按钮：（<input type="submit">,按钮的显示结果可以通过value属性来修改）。
14、块元素和行内元素（内联元素）
1）二者区别：
- 块级元素会换行，从上到下排列；而行内元素部会换行从左到右排列。
- 块级元素能识别width,height属性；而行内元素不能识别，设置属性也无效
- 一般块级元素可以包含行内元素和其他块级元素；一般行内元素包含行内元素但不包含块级元素
简单辨别方法是否自动换行（块级行内元素除外），是否能识别宽高等属性。
2）元素举例
- 常见块级元素：div\ form\ h1~h6\ hr\ p\ table\ ul 等。
- 常见内联元素（行内元素）：a\ b\ em\ i\ span\ strong等。
- 行内块级元素（特点不换行，但能够识别宽高）：button、img、input等。
15、HTML5 新增标签
div标签又称为容器标签，为了增加某一个区域块的清晰度。
H5新标签：(需要新浏览器，存在兼容问题)
- <header></header> 头部标签
- <nav></nav> 导航栏标签
- <aside></aside> 侧边栏标签
- <articel></article> 代表一个独立完整的相关内容快，例如一片完整的论坛帖子，一篇文章或者一个评论等。
- <section></section> 定义文档中的节，比如章节、页眉、页脚
- <footer></footer> 底部标签/ 脚部标签
优点：理解更容易，因为语义化了。有利于SEO，利于网站排名。
