目录
1、首先下载vscode软件 --> 其次打开软件，使用ctrl+shift+X打开扩展 --> 安装几个插件：
html基础
一、HTML概述：
html是一种超文本标记语言
二、网页的组成：（三层技术）
html（结构层）、css（样式层）、JavaScript（行为层）
三、html的功能：
利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构。
h1标签：负责给内部文字添加一级标题的语义，不负责样式，样式由css负责。
四、标签级别：
根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别。
-容器级：标签内部可以存放任意内容，包含容器标签。比如h2，div等。
-文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等等。比如p等。
五、编辑器：
1、首先下载vscode软件 --> 其次打开软件，使用ctrl+shift+X打开扩展 --> 安装几个插件：
| 插件名 | 作用 |
| Chinese (Simplified)Language | 使用中文界面 |
| Pack for Visual Studio Code Auto Rename Tag | 修改html标签，自动帮你完成尾部闭合标签的同步修改v |
| open in browser | 右键设置在默认浏览器打开网页 |
| Mithril Emmet | 快速编写工具，已经集成在VS code中，可以不必安装 |
2、使用步骤：
新建文件，ctrl+N。
保存对应的文件格式ctrl+S，例如.html、.css、.js等文件。
使用对应的快捷键快速编写程序。
3、常用快捷键：
| !或htmI:5→tablctrl+E | 自动生成基本骨架 |
| 标签名→tab | 自动生成标签 |
| 标签名*n→tab | 自动生成n个相同的标签 |
| h$*6一tab | 自动生成h1到h6的标签 |
| ctrl+shift+D | 复制光标所在行、复制所选内容 |
| *ctrl+shift+K/ctrl+X | 删除光标所在行、所选内容 |
| ctrl+shift+↑ | 将光标所在行上移一行 |
| ctrl+shift+↓ | 将光标所在行下移一行 |
| 按住鼠标滚轮拖动 | 同时选中多个光标，同时操作 |
| ctrl+滚轮 | 调整显示字号大小 |
| ctrl+z | 无限后退一步 |
| shift+ctrl+z | 无限还原一步 |
| ctrl+enter | 在任意位置直接换行 |
六、基本骨架：
<html>标签：定义HTML的根元素，表示整个HTML文档，所有的标签都要写在<html>内部。
<head>标签：用于存放<title>,<mate>,<base>,<style>,<script>,<link>，内部用于对网页的设置，除了<title>内部的文字，其他标签都不显示在浏览器上。
在<head>种必须要设置的标签是title。
<body>标签：定义网页主体部分，用于存放所有的html显示内容的标签<p>、<h1>、<a>、<div>等。
七、字节常见问题：
1、如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8。
2、如果含有大量的中文汉字的网站，而且要求网页加载速度快，使用gbk。
八、注释：
注释只在源代码中可见，在浏览器中是不显示的。
<!--注释内容-->
快捷键：ctrl+/
九、常用标签：
1、标题标签：h1-h6。由css设定，标题标签之间是不能互相嵌套的
快捷键：h$*6
2、段落标签：是通过<p>标签定义文本
作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。
3、换行标签：<br/>
4、文本格式化：内部只能书写文字。都是双标签
常用标签：
<b> 加粗文本
<i> 斜体字
<u> 下划线
其他标签：<samll> 小号字体 <big> 大号字体 <em> 自带倾斜 <strong> 文字加粗 <sub> 上标 <sup> 下标 <del> 删除线
5、图像标签：由<img>标签定义，是一个单标签。
可以插入的图片类型有：jpg、png、gif。
常用属性：
| 属性名 | 描述 |
| src | 表示图片的路径; |
| width | 表示图片的宽度; |
| height | 表示图片的高度; |
| border | 边框属性;它的值可以设置边框的厚度; |
| title | 设置提示文本; |
| alt | 设置图像没有找到时候的替换文本; |
相对路径：三种方向
同级查找：直接书写文件名+后缀格式。
<img src="smile01.jpg">子集查找：指目标文件与html文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭符号/进入文件夹查找里面的文件，如果有多层文件夹，需要进入多层。
<img src="images/smile01.jpg">
<img src="images/tupian/smile01.jpg">上级查找：指目标文件在html文件所在文件夹的更上一级，需要跳出当前文件夹到上一级，路径写法利用../表示跳出一级，如果跳出多级书写多次../，直到找到文件。
<img src="../../smile01.jpg"/>绝对路径：直接从电脑的盘符出发进行查找，或者使用网址形式查找
盘符出发：
<img src="C:/Userteacher/Documents/html/case/images/smile02.jpg">网址形式（在网页中搜索想要的图片-->右击鼠标点击检查-->找到<img src=""里的路径右击选择-->Open in new tap-->复制路径即可）：
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbbs.jf311.com%2Fdata%2Fattachment%2Fforum%2F201505%2F25%2F113407e6v4pom4yen44ee4.jpg&refer=http%3A%2F%2Fbbs.jf311.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627730405&t=94ed7190594e994ab88b298362e2e66c">6、音频和视频
音频标签：使用<audio>进行定义。是一个双标签，需要使用sr属性设置查找的路径。支持的格式包括：.mp3、.ogg、.wav。
音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值是controls。
<audio src="media/snow.mp3" controls="controls"></audio>视频标签：使用<video>标签进行定义。是双标签，需要使用sr属性设置查找的路径。支持的格式包括：.mp4、.ogg、.webm。
视频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值是controls。
<video src="media/video.mp4" controls="controls"></video>7、超级链接标签：
在html中使用<a>标签可以创建链接。是双标签，可以实现两种跳转：跨页面跳转、页面内跳转。
使用href用于连接目标的路径地址，可以使用相对路径或网页路径。
使用target属性在新页面进行打开
<a href="www.baidu.com" target="_blank"></a>使用title属性
<a href="12_image.html" title="点击跳转原网页"><img src="smile01.jpg"/></a>8、页面内锚点跳转：
1、设置锚点：
①、在目标位置给它添加一个id属性，且属性值必须是唯一的。
<h2 id="mubiao">目标位置</h2>②、在目标位置添加一个空的<a>标签，只设置一个name属性，且属性值与id相同，必须是唯一的。
<a name="mubiao2"></a>添加链接：
在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或#加a的name属性值。
<a href="#client">客户端</a>
<a href="#text">纯文本格式</a>
<a href="#html">html</a>
<a name="client"></a>
<h2>客户端</h2>
<h2 id="text">纯文本格式</h2>
<h2 id="html">html</h2>2、跨页面锚点跳转：
<a href="17_jump.html#text">页面内锚点跳转</a>9、无序列表：
需要两个标签参与，分别是<ul>和<il>。嵌套关系，快捷键：ul>ii
ul：表示定义一个无序列表的大结构。
li：列表项，定义一个无序列表内的某一项。
<ul>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
<li>西游记</li>
</ul> 10、有序列表：
需要两个标签参与，分别是<ol>和<il>。嵌套关系，快捷键：ol>ii
ul：表示定义一个有序列表的大结构。
li：列表项，定义一个有序列表内的某一项。
<ol>
<li>1.</li>
<li>2</li>
<li>3</li>
</ol>11、定义列表标签：
定义列表不仅仅是一列项目，而是项目及其注释的组合。
有三个标签组成完整的结构，包括<dl>、<dt>、<dd>。<dl>内部只能嵌套<dt>和<dd>，<dt>与<dd>是同级关系。
dl：表示定义一个自定义列表的大结构。
dt：表示定义自定义列表中的一个主题或者术语。
dd：解释项，表示描述或解释前面的定义主题。
<dl>
<dt>主题</dt>
<dd>解释项</dd>
</dl>12、布局标签：
1.<div>标签
俗称大盒子。是双标签，内部可以放置任何内容。多用于划分网页区域，进行结构布局。
2.<span>标签
小区域，俗称小盒子。是双标签，可以在不改变整体效果的情况下，可以辅助进行局部调整。
13、表格基础：
①、一个简单的表格至少有三个标签组成，分别是<table>，<tr>，<td>标签。
table：定义整个表格的的大结构。
tr：表格的行。
td：定义每一列内部的单元格。
1.<table>标签可以添加border边框属性。属性值：数字，表示像素值。
2.表格的单元格之间有默认的空隙会导致双线边框，可以使用标签style，属性值：border-collapse:collapse；表示边框塌陷。
3.如果要绘制表头，使用标签<th>，并自带默认的css样式效果，文字显示粗体居中。
4.表格的单元格可以进行合并，通过<th><td>的两个属性
rowspan：跨行合并，上下合并
colspan：跨列合并，左右合并
②、分区标签
caption：表格的标题
thead：表格的头部，内部嵌套tr>th。
tbody：表格的主体，内部嵌套tr>td。
tfoot：表格的页脚，内部嵌套tr>td。
四个分区可选择性进行组合。
14、表单：
表单域标签<form>进行定义。
| 属性名 | 属性值 | 描述 |
| action | url | 指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 自定义名称 | 规定表单的名称 |
<form action="xxx.php" method="post/get" name="message">
提示信息表单
</form>①input标签常用属性：
| 属性名 | 属性值 | 描述 |
| text | 单行文本输入框 | |
| password | 密码输入框 | |
| radio | 单选框 | |
| type | checkbox | 复选框 |
| button | 普通按钮 | |
| reset | 重置按钮 | |
| submit | 提交按钮 | |
| image | 图像形式的按钮 | |
| file | 定义输入字段和"浏览"按钮，供文件上传。 | |
| hidden | 定义隐藏的输入字段 | |
| name | 自定义 | 定义控件的名称 |
| value | 自定义 | 定义控件的默认文本值 |
| size | 数字 | 定义控件的宽度 |
| checked | checked | 定义选框控件的默认被选中项 |
| maxlength | 数字 | 定义允许输入的最多字符数 |
单选框：radio，同一组单选框必须是互斥的关系，可以给同一组的单选框设置name属性。需要默认选中：添加属性checked="checked"即可，
<input type="radio" name="sex" checked="checked"/> 男
<input type="radio" name="sex"/> 女按钮：
| type | 名称 | 特点 |
| button | 普通按钮 | 没有任何特殊功能 |
| reset | 重置按钮 | 将同一个<form>中填写的表单内容清空，恢复成默认 |
| submit | 提交按钮 | 将填写数据提交到<form>中指定的后台服务器,并重置清空<form>中填写的信息 |
| image | 图片按钮 | 默认与提交按钮的效果相同，使用的图片需要利用src属性查找正确路径。 |
文件上传：
input标签的type属性值为file。
<input type = "file"/>多个文件上传：
<input type="file" multiple="multiple"/>②、文本域<textarea>
有两个属性：rows：行；cols：列
<texttarea cols="30" rows="10">默认输入文字</texttarea>③、下拉菜单：
<select>：选项，表示定义下拉菜单整体结构。
<option>：选项，表示定义下拉菜单的每一项。
默认选中项 添加 selected="selected"
<select>
<option selected="selected">广州</option>
<option>深圳</option>
<option>上海</option>
<option>北京</option>
</select>分组管理：
使用<optgroup>标签，设置label属性，表示给这一组添加一个分组标签名。
<select>
<optgroup label="国内">
<option>广州</option>
<option>北京</option>
</optgroup>
<optgroup label="国外">
<option>巴黎</option>
<option>伦敦</option>
</optgroup>
</select>label标签：
使用label标签可以帮助表单元素定义标记，内容与表单控件进行绑定后，鼠标点击内容时会选中对应的控件。
方法一、<input type="radio" name="sex" id="nan"/> <label fpr="nan">男</label> 方法二、<label><input type="radio" name="sex"/>女</label>
css基础
一、书写位置：
内联式：在html标签上的style属性中书写css样式。
内嵌式：在html中，<head>标签内部有一个<style>,书写在<title>后面，有一个属性type，属性值是text/css。
外联式：在一个单独的扩展名为.css的文件。
外联式的引用：在html中<head>标签内部使用<link>标签进行引用。<link>标签属性：
| 属性名 | 属性值 | 说明 |
| rel | "stylesheet" | 表示引入的外部文件与HTML之间的关系，样式表 |
| href | css | 文件路径 hypertext reference，超文本引用 |
| type | "text/css" | 表示加载时代按照纯文本形式的css代码加载。html5中可以省略type属性不写。 |
<link rel="stylesheet" href="01.css" type="text/css">导入式：在内嵌式样式表<style>标签内部，或者在外联式样式表内部，导入其他的外部的.css文件。
<style>
@import url(01.css);
h1{
color:red;
}
</style>二、常用属性：
字体：font-family 用于设置页面的字体样式，需要把样式放在引号内。
字号：font-size 用于设置字体的大小，属性值是数字。
| 相对长度单位 | 说明 |
| px | 像素值，最常使用的单位 |
| em | 倍数，继承自祖先元素设置的字号的倍数 |
| % | 百分比，继承自祖先元素设置的字号的百分比 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
注意：默认显示字号为16像素；谷歌浏览器最小加载显示字号为8像素，IE浏览器则是1像素。
现在网页普遍使用14px+。且尽量使用偶数设置字号。
三、盒子实体化三个属性：
| 属性名 | 属性值 | 说明 |
| width | px | 单位的数值定义元素占有的宽度 |
| height | px | 单位的数值定义元素占有的高度 |
| background-color | 颜色名、颜色值 | 定义元素的背景颜色 |
四、七种选择器：html
基础选择器：标签选择器，类选择器，id选择器，通配符选择器。
高级选择器：后代选择器，交集选择器，并集选择器。
1、标签选择器：可以选中所有的同名标签，设置所有同名标签的公共样式。
2、id选择器：通过标签上的id属性去选择标签。书写方式：#id属性名；只能选中一个标签；id命名规则：必须字母开头，每个id属性值必须是唯一的。
3、类选择器：通过标签class属性去选择标签。书写方式：.class属性值。是页面中所有class属性相同的标签。命名规则：必须以字母开头，clas属性可以与其他的class相同。
4、通配符选择器：通过一个特殊符号选择页面内所有的标签。书写方式：*；选择范围:包含<html>标签在内的所有标签。
5、后代选择器：通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。书写方式：空格表示后代，基础选择器中间使用空格分隔。后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系。
6、交集选择器：通过一个标签之上满足所有的基础选择器的需求去选择标签。书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。比较常见的是标签与类的交集。
7、并集选择器：不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
五、选中目标标签：
第一步：比较多个选择器的权重，权重高的层叠权重低的。 基础选择器的权重：根据选择范围，范围越大权重越小，*<标签选择器<类选择器<id选择器。 高级选择器权重比较方法:依次比较组成高级选择器的id的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。 比较顺序:（id个数,类的个数,标签的个数) 第二步：如果选择器权重都相同，需要比较CSS中代码的书写顺序，后写的层叠先写的。
六、选中目标标签的组先级：
如果选择器选中的是祖先元素，文字的样式可以被继承。
第一步：比较就近原则，比较选择器选中的祖先级在HTML结构中距离目标标签的远近，近的层叠远的。
第二步：如果选中的祖先级距离目标一样近(同一个祖先级)，比较选择器权重，权重大的层叠小的。
第三步：如果距离一样近，权重也相同，最后比较CSS中的书写顺序，后面的层叠前面的。
七、! important关键字
如果在比较选择器权重的过程中，遇见一个!important关键字；可以将某条Css样式属性的权重提升到最大。 书写位置:在某个css属性的属性值后面 空格 加 !important 注意: ①就近原则中，不需要比较选择器权重，所有important会失效。
②important不能提升选择器的权重，只能提升某条属性的权重到最大。
八、行内式权重
行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。 但是，与!important关键字相比权重要低。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
