1、VSCode
VSCode 安装
-
添加到资源管理器上下文目录 这个操作可以添加右键 Code 打开当前目录，非常方便
-
将 Code 注册为受支持的文件类型的编辑器 这个操作会让 VScode 支持的代码文件全部编程变成 VScode 默认打开，文件图标也会随之更改，很好辨认
VSCode 汉化
-
Chinese (Simplified) Language Pack for Visual Studio Code
VSCode 插件安装
-
Path Intellisense 自动提示文件路径，支持各种快速引入文件
-
Open In Browser 选择在哪个浏览器中打开，打开的是当前文件的路径
-
Open In Default Browser 选择在默认浏览器中打开，以服务器的形式打开
-
Auto Close Tag 自动闭合html标签
-
Auto Rename Tag 修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改
-
Beautify 格式化代码工具
VSCode常用快捷键
-
复制 Ctrl + C
-
粘贴 Ctrl + V
-
剪切 Ctrl + X
-
保存 Ctrl + S
-
选择所有选中的值 Ctrl + D
-
撤回到上⼀步 Ctrl + Z
-
恢复到下⼀步 Ctrl + Shift + Z
2、web服务器
IP地址
-
在系统控制台中输入 ipconfig 查看当前电脑 ip 地址
web服务
-
127.0.0.1=localhost
3、HTML基础
什么是HTML
-
是标记语言，不是编程语言
如何创建HTML文件
-
桌面新建txt文档，修改后缀名
-
直接在编辑器新建html文件
HTML标签
-
标签分类
-
块级元素、⾏内元素和⾏内块级元素
-
块级元素，单独占⼀⾏，允许设置宽⾼值（h1-h6、p、div、hr、ul、li）
-
行内元素，不会单独占⼀⾏，从左往右排列，设置宽⾼值不起效（a、br、span）
-
行内块元素，不会单独占⼀⾏，从左往右排列，能设置宽⾼值（img、input、button）
-
-
双标签和单标签
-
双标签 h1
-
第⼀个标签是开始标签，第⼆个标签是结束标签，结束标签的标签名前使用/标注
-
<标签名 属性名=“属性值”></标签名>
-
⼀个标签内，可以有⼀个或多个属性
-
⼀个属性可以有多个属性值，全部在双引号内部，使⽤空格隔开
-
-
单标签 img
-
<标签名 属性名=“属性值” />
-
-
-
-
h1-h6 标题标签
-
h1标签，⼀个网页最多只能出现⼀个，会影响SEO
-
不能嵌套
-
-
p 段落标签
-
段落的⾸⾏以及尾⾏会进⾏换⾏
-
⽂本级标签，能放⽂本/图⽚/超链接
-
-
a 超链接标签
-
href：规定链接跳转指向的页面的URL，可以是外部链接，也可以是⼀个内部链接
-
target：跳转后的网页打开方式
-
_self：当前标签页跳转，也就是不打开新页面，a标签默认的target属性
-
_blank：打开⼀个新的页面，在新的页面进行跳转。
-
-
base标签为⻚⾯上的所有链接规定默认地址或默认目标
-
a标签不仅可以给⽂字添加超链接，也可以给图⽚，视频，⾳频，表格等添加超链接。
-
-
文本格式化标签
-
i 定义斜体字
-
b 定义文本加粗
-
small 定义小号字
-
strong 定义加重语气
-
sub 定义下标字
-
sup 定义上标字
-
del 定义删除字
-
-
列表标签
-
ol 有序列表
-
包裹 li 标签
-
-
ul 无序列表
-
包裹 li 标签
-
尽量不要包裹其他标签
-
-
dl 列表
-
dt 定义标题
-
dd 定义对标题的说明解释
-
每⼀个dt后⾯可以跟多个dd，表示多次解释。
-
也可以只有dt
-
-
-
img 图片标签
-
src 图片来源，表示图⽚的来源、路径，必须的属性
-
alt 当图⽚资源加载不出来的时候，会显示出来。搜索引擎会根据alt的内容去收录图⽚
-
title 图片的标题
-
基本结构
-
<!DOCTYPE html> 文档声明类型
-
<html lang="en"> 当前页面使用的语言
-
lang="en" 英文页面使用
-
lang="zh-CN" 中文页面使用
-
-
<meta charset="UTF-8"> 当前网页使用的字符集
-
UTF-8：国际通用字库，涵盖了几乎所有人类的语言文字
-
gb2312/gbk：中国字库，所有简体字，⼀些特殊符号；gbk：繁体
-
4、路径设置
相对路径
-
从当前⽂件出发，⽬标⽂件所在的路径
-
../表示上⼀级⽬录，退回⼏级就书写⼏次
-
当前⽂件与⽬标⽂件的上级⽬录在同⼀⽬录下。书写对应的⽂件夹的名字，后⾯⽤/表示进⼊⽂件夹，最后 直接书写⽬标⽂件的⽂件名。
绝对路径
-
从盘符出发寻找目标文件（本地文件）
-
网络文件
-
尽量使⽤相对路径和以⽹址形式的绝对路径，本地⽂件的绝对路径的可移植性不好。在部署到服务器或与别人共同开发时，可能会出现问题
5、区块
div标签和span标签
a、一个是块元素，一个是行内元素
b、span 内只能放文本、图片、表单元素
注意：span里面不能放p、h、ul、dl、ol、div等标签
6、表单元素
form 表示表单
-
action 是表单的提交地址
-
method 有get和post两个值
-
get是明文显示，不安全
-
post是隐藏显示，安全
-
-
enctype 当有文件上传时，必须要有当前的属性值
input 标签
-
type="text" 文本输入框
-
value 默认值
-
placeholder 输入提示
-
maxlength 最大字符长度
-
minlength 最小字符长度
-
autofocus 自动获取当前焦点
-
-
type="password" 密码输入框
-
value 默认值
-
placeholder 输入提示
-
autofocus 自动获取当前焦点
-
-
type="radio" 单选
-
name 是当前需要选择的一组值的名字
-
value 选中值
-
-
type="checkbox" 多选
-
name 是当前需要选择的一组值的名字
-
value 选中值
-
-
type="button" 普通按钮
-
type="submit" 提交按钮
-
提交当前表单的数据
-
-
type="reset" 重置按钮
-
重置当前表单的数据，恢复默认值
-
-
type="file" 文件提交
-
跟form属性enctype一起使用
-
-
type="hidden" 隐藏域
-
隐藏当前页面中，需要用，但是不需要给用户展示的内容
-
-
type="image" 图片提交按钮
-
src 图片的地址
-
alt="submit" 提交按钮
-
label 标签
-
input 设置 id 值，label 属性 for 保持一致
textarea 文本域
-
rows 显示的行数
-
cols 显示的列数
select 下拉菜单
-
要与 option 一起使用
-
multipe 多重选择
-
size 显示的数量
fieldset 标签
-
legend 显示标题
7、通用属性
-
name 提交到服务器需要识别的名字
-
value 当前的表单元素的值
-
required 必选项
-
与 disabled 一起使用未生效
-
-
disabled 禁用当前表单元素
-
readonly 只读，只能看不能编辑
-
只针对输入类型生效
-
8、表格
-
使用 table 标签
-
tr 是行
-
td 是表格（注意：给td设置width和height，会修改当前单元格的宽和⾼，但不会影响这个表格的宽和高）
-
th 是表头
-
border 表格边框
-
cellpadding 单元格内的空间
-
cellspacing 单元格之间的空间
-
align 设置表格的左右对齐方式，单元格行向内容对齐方式
-
valign 设置单元格列向的对齐方式
-
rowspan 合并列向单元格
-
colspan 合并行方向单元格
-
caption 表格标题（语义化标签）
-
thead 表格表头
-
tfoot 表格页脚
-
tbody 表格主体
-
tfoot 的位置在 thead 与 tbody 之间
-
thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。
9、字符实体
-
HTML 中的预留字符必须被替换为字符实体，比如标签的大于号和小于号
-
两种写法 &entity_name; 与 &#entity_number;
-
常见实体字符 <!--空格 --><!--小于号 <--><!--大于号 >--><!--版权符号 ©-->
-
对大小写敏感
-
实体名易于记忆，但少数浏览器不支持；实体数字不易于记忆，浏览器支持效果好
2822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
