前端三剑客—HTML

前端三剑客—HTML
HTML
编写 HTML 代码

创建一个文件，后缀名改成 html 就可以了。运行 html，有浏览器就行了。创建的时候一定要勾选文件扩展名：
1. 创建文件
2. 修改文件名
3. 选择记事本打开
4. 输入内容并保存
5. 双击打开
虽然代码也可以运行，但这并不算是一个 HTML：合法的 HTML 是由这样的标签组成的：

这样就是一个更加规范的 HTML 代码，是通过标签结构来构成的，每个标签都分为开始标签和结束标签，成对出现的标签之间可以进行嵌套。这些标签之间就形成了一个树形结构：DOM树。DOM：Document Object Mode 就是文件对象模型。

为页面命名：就是在 HTML 当中的 title 中输入内容即可：

然后再打开可以了：

鲁棒性：就像上面只写了的 hello world 的 html 代码，仍然可以运行，就是浏览器的鲁棒性，也就是容错能力强。

必要格式：每次写的时候，都要有这样的格式：
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testtitle>
head>
<body>

body>
html>
1
2
3
4
5
6
7
8
9
10
```
不过编译器都支持快速生成，就是 ! + tab 就可以自动生成这样的格式了。

开发工具的选择
1. 使用 IDEA 开发
  
  IDEA，是分有社区版和专业版的。
  社区版：只支持HTML，不支持 CSS 和 JS，这就会导致后面的很多代码没有高亮和提示。
  专业版：支持HTML，CSS 和 JS，完全能够胜任。
  不要使用 idea 的科学（pojie）之后的专业版，会有bug，会无缘无故的报错。
2. 使用 vscode 开发
  
  vscode 对前端是天然支持的，不需要额外的插件。将之前写的 hello.html 直接用 vscode 打开就好。
代码中各部分表示的意思

1、

标记了语言，方便浏览器根据自带的翻译功能进行识别，会提示翻译成熟悉的语言。
2、

head 页面的属性，这里的属性和内容没有关系。

3、

body 标签，是我们页面要展示的内容。

开发者工具

浏览器中非常非常重要的组件：开发者工具，可以看到页面的基本结构。笔记本电脑的话，通过 fn + f12。全键盘的话，就直接按 f12 就好了。或者右键，检查

开发者工具页面如下：

通过这里可以更快的选中页面中的元素：

HTML 常见标签

 注释标签

通过来完成注释
```
<body>
    hello world!
    
body>
1
2
3
4
```
代码的结果如下：

要注意注释可以被其他人看到，所以尽量不要写注释。

标题标签
1. 标题标签一共有6个 h1 至 h6。
2. 数字越小，里面的内容就越粗越大。
3. 数字越大，里面的内容就越细越小。
4. 这个 h1 - h6，就相当于 # - ######【一级标题至六级标题】
5. 我们在 CSDN 上面写博客就会用到标签等级。
代码如下：
```
<body>
    <h1>这是一级标题h1>
    <h2>这是二级标题h2>
    <h3>这是三级标题h3>
    <h4>这是四级标题h4>
    <h5>这是五级标题h5>
    <h6>这是六级标题h6>
body>
1
2
3
4
5
6
7
8
```
如下图：

段落标签

p 就是段落标签，可以对内容分段。通过 lorem 就可以自动生成段落。代码如下：
```
<body>
    <p>第一个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at beatae consequuntur culpa cumque cupiditate enim ipsa itaque iusto laborum, necessitatibus officia possimus quas quia suscipit, ullam ut vero voluptatem.p>
    <p>第二个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis nam obcaecati ullam. Accusantium aut commodi mollitia voluptate. A blanditiis eaque ipsa, laboriosam laborum maiores natus obcaecati perferendis placeat quod, ullam.p>
    <p>第三个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus omnis, saepe. Ad in iusto natus placeat? Delectus eligendi esse fugiat harum magni, maiores nemo odit repudiandae, rerum saepe sit tenetur?p>
body>
1
2
3
4
5
```
运行结果如下：

让段落首行缩进两个字，需要搭配 CSS 来完成，因为 HTML 相当于是页面的骨架，CSS 描述的是页面的样式。加一个 style 标签就可以了：
```
<body>
    <style>
        p {
            text-indent: 2em;
        }
    style>
    <p>第一个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at beatae consequuntur culpa cumque cupiditate enim ipsa itaque iusto laborum, necessitatibus officia possimus quas quia suscipit, ullam ut vero voluptatem.p>
    <p>第二个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis nam obcaecati ullam. Accusantium aut commodi mollitia voluptate. A blanditiis eaque ipsa, laboriosam laborum maiores natus obcaecati perferendis placeat quod, ullam.p>
    <p>第三个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus omnis, saepe. Ad in iusto natus placeat? Delectus eligendi esse fugiat harum magni, maiores nemo odit repudiandae, rerum saepe sit tenetur?p>
body>
1
2
3
4
5
6
7
8
9
10
```
这样就完成了首行缩进：

换行标签

br 就是换行标签，如果没有换行标签的话，HTML 是不会自动换行的。是一个单标签，加入到长段落当中就可以了。代码如下：
```
<body>
    <p>第一个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Ab at beatae consequuntur culpa cumque cupiditate enim ipsa itaque iusto laborum,
        <br>necessitatibus officia possimus quas quia suscipit, ullam ut vero voluptatem.p>
    <p>第二个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Corporis nam obcaecati ullam. Accusantium aut commodi mollitia voluptate.
        <br>A blanditiis eaque ipsa, laboriosam laborum maiores natus obcaecati perferendis placeat quod, ullam.p>
    <p>第三个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Ducimus omnis, saepe. Ad in iusto natus placeat? Delectus eligendi esse fugiat harum magni,
        <br>maiores nemo odit repudiandae, rerum saepe sit tenetur?p>
body>
1
2
3
4
5
6
7
8
```
运行结果如下：

这样就完成了换行。

转义字符

HTML 会把相邻的空格，合并成一个空格。如果需要多个空格，就需要使用转义字符，除了空格之外，像 < > & 等这些特殊符号，也需要使用转义字符。最常见的就是这些：

格式化标签

格式化标签，其实是针对文本进行一些样式上的调整。
1. 加粗: strong 标签和 b 标签
2. 倾斜: em 标签和 i 标签
3. 删除线: del 标签和 s 标签
4. 下划线: ins 标签和 u 标签
以上这四组标签，每组标签中的两个标签都是等价的，效果是相同的。代码如下：
```
<body>
    <strong>加粗strong>
    <b>加粗b>
    <em>倾斜em>
    <i>倾斜i>
    <del>删除线del>
    <s>删除线s>
    <ins>下划线ins>
    <u>下划线u>
body>
1
2
3
4
5
6
7
8
9
10
```
运行结果如下：

图片标签

使用 img 标签来表示图片。img 也是一个单标签，里面可以有好多属性，其中最重要的就是 src 属性。通过 src 来描述图片所在的位置。我们把图片放在项目的目录当中，然后在代码当中使用就好了：

图片：
```
<body>
    <img src="测试.png" alt="">
body>
1
2
3
```
运行结果如下：

这里的 src，可以是相对路径，也可以是绝对路径，也可以是网络路径。网络路径：
```
<body>
    <img src="https://pic2.zhimg.com/v2-a2c4da45af685c8d5bc746ca75f9acfc_400x224.png?source=d16d100b" alt="">
body>
1
2
3
```
运行结果如下：

alt 里面的内容 ，如果图片挂了，就会显示 alt 里面的内容。

src 标签里的 title

title 就是对图片内容进行提示，就是鼠标放到图片上面之后进行提示：
```
<body>
    <img src="玫瑰.png" title="这是一朵玫瑰花">
body>
1
2
3
```
运行结果如下：

通过 width 和 height 来设置长宽

width：就是宽。height：就是高。设置尺寸的时候，单位：px，就是像素的意思。宽度和高度可以一起设置，也可以只设置一个，只设置一个的话，就不会导致图片形变。
1. 宽高都设置：
```
<body>
    <img src="测试.png" width="500px" height="600px">
body>
1
2
3
```
运行结果如下：
1. 只设置一个属性：
```
<body>
    <img src="测试.png" width="500px">
body>
1
2
3
```
运行结果如下：

只设置一个属性，就不会导致形变。

超链接

通过 a 标签就可以实现超链接，跳转到其他的页面。

普通页面跳转链接

代码如下，在 a 标签后面加上对应的网站即可。
```
<body>
    <a href="https://zhuanlan.zhihu.com/p/166225817">啦啦啦,是超链接a>
body>
1
2
3
```
运行结果如下：

点击之后：

下载文件

href 里面的链接，是对应到一个普通文件，不是 HTML，那么就会触发一个下载文件操作。先在项目中创建一个文件：

然后代码当中写入这个文件名字：
```
<body>
    <a href="test.zip">下载链接a>
body>
1
2
3
```
运行结果如下：

点击之后，就可以触发下载操作了：

用图片做超链接

代码如下：
```
<body>
    <a href="https://zhuanlan.zhihu.com/p/166225817"><img src="测试.png" alt="">a>
body>
1
2
3
```
运行结果如下：

点击之后就可以跳转了：

表格标签

表格标签是一组标签：
1. table 就是表格
2. tr: 表示表格的一行
3. td: 表示一列
4. th: 表示表头中的一列
通过表格构造一个通讯录：这里通过使用 CSS，来完成内容的居中。代码如下：
```
<body>
    <style>
        td {
            text-align: center;
        }
    style>
    <table border="2px" width="300" height="150" cellspacing="0">
        <tr>
            <th>姓名th>
            <th>电话th>
        tr>
        <tr>
            <td>张三td>
            <td>110td>
        tr>
        <tr>
            <td>李四td>
            <td>120td>
        tr>
        <tr>
            <td>王五td>
            <td>130td>
        tr>
    table>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
```
运行结果如下：

列表标签
1. 无序列表：ul
2. 有序列表：li
3. 自定义列表：dt dd
代码如下：
```
<body>
    <h3>无序列表h3>
    <ul>
        <li>啦啦啦li>
        <li>哈哈哈li>
        <li>也一样li>
    ul>

    <h3>有序列表h3>
    <ol>
        <li>啦啦啦li>
        <li>哈哈哈li>
        <li>也一样li>
    ol>

    <h3>自定义列表h3>
    <dl>
        <dt>强强强强dt>
        <dd>啦啦啦dd>
        <dd>哈哈哈dd>
        <dd>也一样dd>
    dl>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
```
运行结果如下：

上面最常用的就是无序列表。就像 B站，最上面就是多个无序列表合在一起了：

表单标签

表单标签是用户和页面之间交互的重要手段，大部分的 html 标签都是给用户 ”展示"。表单标签都是给用户 “展示” 大多数是让用户来 “输入”。就是通过 form，借助这个 form 用户可以输入一些信息，并把这些信息提交到服务器上面。

form 里面可以放一下和用户交互的组件。

input 文本框

input 就是输入标签：
```
<body>
    <form>
        <input type="text">
    form>
body>
1
2
3
4
5
```
这里的 input 就是单行输入文本框，运行结果如下：

input 密码框

也是单行文本框，但是可以输入密码。就是 type 类型是 password。
```
<body>
    <form>
        <input type="password">
    form>
body>
1
2
3
4
5
```
运行结果如下：

点击之后就可以看到输入什么了：

单选框

就是把 type 设置为 radio：
```
<body>
    <form>
        <input type="radio"> 男
        <input type="radio"> 女
    form>
body>
1
2
3
4
5
6
```
运行结果如下：

发现这两个都可以选中，所以就需要再设置一个 name 来达到互斥的效果：
```
<body>
    <form>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女
    form>
body>
1
2
3
4
5
6
```
运行结果如下：

这样就只能选中一个元素了。

还可以通过 checked 来表示默认选中：
```
<body>
    <form>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender" checked="checked"> 女
    form>
body>
1
2
3
4
5
6
```
运行结果如下：

但是又发现，只有点圆圈圈的时候，才可以选中，所以就可以让 input 搭配 label 标签来实现点文字也可以选中，不过 label 的 for 要和 input 关联上：
```
<body>
    <form>
        <input type="radio" name="gender" id="male"> <label for="male">男label>
        <input type="radio" name="gender" checked="checked" id="female"> <label for="female">女label>
    form>
body>
1
2
3
4
5
6
```
现在就可以点击文字完成选中了：

复选框

就是可以一次选多个选项，通过 checkbox 类型的 type 搭配 label 标签来实现，当然也可以通过 checked 来实现默认选中：
```
<body>
    <form>
        <input type="checkbox" id="123"> <label for="123">吃饭label>
        <input type="checkbox" id="2"> <label for="2">睡觉label>
        <input type="checkbox" id="3"> <label for="3">喝水label>
        <input type="checkbox" id="4"> <label for="4">玩游戏label>
    form>
body>
1
2
3
4
5
6
7
8
```
运行结果如下：

按钮

通过 button 来实现按钮功能，value 就是按钮里面显示的文字：
```
<body>
    <form>
        <input type="button" value="这是按钮">
    form>
body>
1
2
3
4
5
```
运行结果如下：

通过 onclick 就可以实现点击提示了：
```
<body>
    <form>
        <input type="button" value="这是按钮" onclick="alert('hello')">
    form>
body>
1
2
3
4
5
```
运行结果如下：

上传文件

通过 file 类型来完成上传文件：
```
<body>
    <form>
        <input type="file">
    form>
body>
1
2
3
4
5
```
运行结果如下：

选中之后：

下拉菜单

通过 select 标签来实现下拉菜单：
```
<body>
    <form>
        <select>
            <option>-- 请选择年份 --option>
            <option>2000option>
            <option>2001option>
            <option>2002option>
        select>
    form>
body>
1
2
3
4
5
6
7
8
9
10
```
运行结果如下：

点击就可以选择年份了：

通过 selected 就可以完成默认选中：
```
<body>
    <form>
        <select>
            <option>-- 请选择年份 --option>
            <option>2000option>
            <option selected="selected">2001option>
            <option>2002option>
        select>
    form>
body>
1
2
3
4
5
6
7
8
9
10
```
多行编辑框

通过 textarea 来实现多行编辑：
```
<body>
    <form>
        <textarea cols="30" rows="10">textarea>
    form>
body>
1
2
3
4
5
```
这样就构建出一个 30*10 的输入框了，运行结果如下：

无语义标签

无语义就是没有明确的角色：div 和 span 这两个无语义标签。这两个无语义标签可以代替上面的绝大部分有语义标签的功能（但是 form 这一系列不能替换）。div 默认是一个块级元素（独占一行），span 默认是一个行内元素。代码如下：
```
<body>
    <div>
        <span>AAAspan>
        <span>AAAspan>
        <span>AAAspan>
    div>
    <div>
        <span>BBBspan>
        <span>BBBspan>
        <span>BBBspan>
    div>
    <div>
        <span>CCCspan>
        <span>CCCspan>
        <span>CCCspan>
    div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
运行结果如下：
相关阅读:
LeetCode5:最长回文子串
 Meta首份元宇宙白皮书9大看点，瞄准80万亿美元市场
 《2023人工智能发展白皮书》发布（118页）
【杂记】git管理工具的相关应用
 CSS学习笔记
 Delphi 开发过程中简单的版本管理与回退
 Python删除GCS文件夹的问题
 Java Class08
快鲸智慧楼宇：提供物业管理综合方案，实现物业收益最大化
 通过python 的selenium 操作shadow前端页面实现自动点击上传图片
原文地址：https://blog.csdn.net/sjp151/article/details/125761353

HTML

编写 HTML 代码

开发工具的选择

代码中各部分表示的意思

开发者工具

HTML 常见标签

注释标签

标题标签

段落标签

换行标签

转义字符

格式化标签

图片标签

src 标签里的 title

通过 width 和 height 来设置长宽

超链接

普通页面跳转链接

下载文件

用图片做超链接

表格标签

列表标签

表单标签

input 文本框

input 密码框

单选框

复选框

按钮

上传文件

下拉菜单

多行编辑框

无语义标签