HTML操作详解
目录
vscode开发工具搭建
快速生成代码
快捷键
HTML的标签
img标签
src属性
alt属性
title属性
width/height属性
border属性
a标签
href属性
target属性
表格标签(table)
列表标签
表单标签
表单域
form标签
表单控件
input标签
lable/select/textarea标签
无语义标签
特殊字符
HTML被称为超文本标记语言
vscode开发工具搭建
在我们日常编写HTML页面时，最常使用的就是 vscode 这个工具了，因为在企业中使用的比价多，并且也比较好用，可以很好的补全代码
在使用 vscode 编写前端代码时，需要有三个插件：
①Auto Rename Tag
这个插件的功能如下所示：
例如初始是：
我在上面的标签 <html> 中添加内容，下面标签的内容也会改变：
这就是这个插件的作用
②view-in-browser
这个插件的作用就是可以让我们直接在 vscode 中运行我们的 HTML 代码，比较简便快捷
写好代码后右键鼠标，点击 View In Browser
此时就可以直接打开网页：
③Live Server
这个插件可以支持，我们在 vscode 中改变代码，只需要在 vscode 中保存代码，前端页面就同步更新改变的代码，是非常方便的
写好代码后，点击鼠标右键，点击 Open with Live Server 即可：
此时我改变 vscode 的代码，只需要 ctrl + s 保存，页面就会显示我改变的内容：
保存后，页面也会显示新增的123：
快速生成代码
编写HTML时，都会有下面的内容：
如果我们不想手动敲上述代码，只需要 ! + 回车 即可自动生成：
上述各行代码的含义：
- <!DOCTYPE html>：指定当前html版本5
- <html lang="en">：指定当前页面内容是英文的
- <meta charset="UTF-8">：浏览器解码规则
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：移动端适配，因为后面都是 Web 端的，都已不做过多讲解
快捷键
如果需要将下面的三行代码复制多次，可以使用快捷键：shirt + alt + ↓
如果想在 ul 下面有 5个 li：
回车即可完成上述操作
HTML的标签
类似于下面的代码，就是一个简单的HTML代码：
- html：html文件根标签
- head：编写页面相关的属性
- title：页面标题
- body：页面内容展示信息
使用尖括号括起来的就叫做标签，上面出现的都是双标签，都有开始标签和结束标签，带 / 的就是结束标签
我们把上述的结构叫做：DOM树
- 所有的标签都是html子标签
- head和body是兄弟标签
- head和title父子标签
- 每一个标签相当于是一个对象，程序员可以通过代码拿到这些对象，拿到之后就可以对这些对象进行增删查改
注释标签
Ctrl + / 会注释内容，如下所示：
此时再网页上打开，不会显示注释内容，但是用户可以使用 F12 控制台开发工具看到我们的前端代码：
标题标签：h1~h6
标题标签有六个，从 h1~h6，数字越大，则字体越小
运行结果：
段落标签
如果直接将内容复制到 body 的标签，并不会分段落：
运行结果：
如果想分段落，就需要使用段落标签 p：
此时结果为：
换行标签
在 vscode 中，如果想换行，直接将在内容后面加回车是无法成功换行的，HTML会默认将回车转化为空格：
运行结果为：
换行使用的是 br 标签，br标签是单标签，不需要结束标签，<br/>是规范写法，不建议写成<br>：
运行结果为：
格式化标签
- 加粗: strong 标签和 b 标签
- 倾斜: em 标签和 i 标签
- 删除线: del 标签和 s 标签
- 下划线: ins 标签和 u 标签
在企业中开发的时候，想实现上面的效果一般是借助 CSS 来实现的，但是 HTML 也是可以实现同样的效果的
使用上述标签：
运行结果为：
上述四种效果，都有两个标签能够支持，这两个标签的区别就是：前者是表示强调该文本的
Web网页可能会被爬虫获取到，如果强调的话，就可以让爬虫获取到我们当前的文本
img标签
注意事项：
- img标签的各个属性，是没有先后顺序，由程序员自主控制
- 每个属性可以通过空格或换行来间隔开
- 每个属性都是 key-value 的形式，其中 value 需要用双引号引起来
src属性
下面先说 src 属性，之所以先说 src 属性，是因为 img 标签必须搭配着 src 使用，指定图片的路径
路径又有绝对路径和相对路径两种
运行结果为：
上述是相对路径的方式
下面演示绝对路径的方式(图片路径 / 网络上的图片资源)：
运行结果为：
alt属性
上面讲到了使用 img 标签时，后面添加上 src 属性表示路径，但是也有一种情况是我们不小心将路径写错了，所以就需要使用 alt 属性了
如果图片加载成功，就不会显示 alt 属性的内容
例如将网络上的图片资源的 src 写错：
运行结果为：
title属性
title 属性：鼠标放到图片上，就会有提示
width/height属性
width/height：控制宽度高度，高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡
运行结果为：
border属性
border：边框，参数是宽度的像素，但是一般使用 CSS 来设定
给上述控制宽度和高度的图片加上边框：
运行结果为：
a标签
a标签叫做超链接标签
href属性
href: 必须具备，表示点击后会跳转到哪个页面
运行结果为，点击即可跳转到百度的页面：
我们也可以将百度的图片作为超链接，点击跳转到百度中：
target属性
target：打开方式
- 默认是 _self
- 如果是 _blank，则用新的标签页打开
也就是我们在网页中点击某一个链接后，是在当前标签页打开该链接，还是在新的标签页打开该链接的区别
表格标签(table)
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格.会居中加粗
- thead: 表格的头部区域(注意和 th 区分,范围是比 th 要大的)
- tbody: 表格得到主体区域
table 包含tr，tr 包含 td 或者 th
完成这个4行3列的表格：
运行：
表格标签有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置
这些属性都要放到 table 标签中
- align 是表格相对于周围元素的对齐方式.a1ign="center”(不是内部元素的对齐方式)
- border 表示边框,1 表示有边框(数字越大,边框越粗)，"" 表示没边框
- cellpadding: 内容距离边框的距离,默认1像素
- cellspacing:单元格之间的距离.默认为 2 像素
- width/height: 设置尺寸
注意，这几个属性，vscode 都提示不出来
所以我们发现上面的表格没有边框，可以在 table 后面加上 上述属性：
就变为了：
表头
thead里面的内容居中+加粗展示
下面来区分表格的表头，将表头放入 thead 中，并将 td 改为 th：
运行后，发现表头加粗了：
表格主体
将表格主体放入 tbody 中：
之所以要放入 tbody 中，在后面学习完 CSS 就明白这里放入 tbody 的含义了
单元格合并
下面我们的需求是张三和李四的
变为：
代码改为：
列表标签
无序列表
无序列表：ul、li
页面效果如下：
在三行内容前面是实心圆，如果想改变这里的样式，需要用到 disc、square、circle：
此时就会变化：
- disc：浏览器默认展示方式，实心圆
- square：实心方块
- circle：空心圆
有序列表
有序列表：ol、li
效果为：
可以用 type 属性改变数字的样式
- 1 表示数字编号(默认)
- a 表示小写英文字母编号
- A 表示大写英文字母编号
- i 表示小写罗马数字编号(大写 i)
- I 表示大写罗马数字编号
例如：
效果为：
除此之外，如果不想让从 a 开始计数，可以加上 start=“2”：
效果如下：
自定义列表
自定义列表：dl、dt、dd
效果如下：
表单标签
用表单标签来完成服务器的一次交互，例如登录某个网站时，输入用户名密码后 ， 点击登陆按钮，完成交互
分成两个部分
- 表单域: 包含表单元素的区域，重点是 form 标签
- 表单控件: 输入框,提交按钮等，重点是 input 标签
表单域
form标签
action属性后面填写的，就是前端输入的内容需要传给的服务器的地址
运行后不显示，因为默认的高度为0
表单控件
input标签
input标签是用于用户输入的标签
input 有 type 属性，是非常重要的，可以通过对type进行对应的取值，来控制input类型
文本框
效果为：
密码框
效果为：
单选框
效果为：
需要注意：
- checked="checked" 出现在哪个选项的后面，就默认选择哪个选项
- 单选框的条件是 name 是相同的情况下，只选择一个选项
复选框
效果为：
普通按钮
点击按钮，就会有一个弹窗，后续更复杂的功能在学习完CSS后就能够做到了：
提交/清空按钮
提交按钮必须放到 form 标签内,点击后就会尝试给服务器发送
输入999999：
点击提交，就会在 URL 中显示出来：
如果输入错误，想清空：
效果为：
上传文件
如果想上传文件，也很简单：
效果为：
lable/select/textarea标签
lable标签
lable标签 一般是搭配 input标签 使用的，如果想做到点击男女这两个字和点击按钮一样的效果，只需要将 男女 里加上for标签，并且与按钮的 id 相同即可：
select标签
也就是下拉菜单，select标签是与 option 搭配使用的
效果为：
同样也可以默认选择某一个选项，在后面加上 selected="selected"
没有选择下拉菜单时，就默认选择了 1990 这个选项：
textarea标签
可以通过 cols 和 rows 设置宽度和高度，实际开发中会使用 CSS，后面学习中会讲到：
效果为：
无语义标签
前面所学的标签都是有固定的用途，例如：段落用p标签，标题是h1-h6标签
而无语义没有固定的用途，也就是拿着这个标签啥都可以干
div/span标签
- div 是独占一行的，是一个大盒子
- span 不独占一行，是一个小盒子
通过 F12 观察，第一行的四个是在同一个 div 中的，下面的四个分别在不同的 div 中，所以是四行
特殊字符
有些特殊的字符在 html 文件中是不能直接表示的，例如:
- 空格:
- 小于号: &1t;
- 大于号: >
- 按位与:&
- 注意上面四个后面有分号
这时前端页面中间才会有四个空格，如果代码中只加空格，最终前端页面只会显示一个空格：
HTML 的操作到此学习结束啦