HTML基础知识点

傷城~ 2023-10-14 22:24 32阅读 0赞

## ![9af81d24be704772b7d6b93ed3a9a439.jpeg][] ##

**目录**

编辑一、使用 vscode

二、研究代码的特点

三、HTML 常见标签

注释标签

标题标签

段落标签

换行标签

格式化标签

图片标签

超链接标签

表格标签

列表标签

表单标签：

form 标签

input标签：

select

textarea标签：

无语义标签：

案例一：展示简历信息

--------------------

## 一、使用 vscode ##

vscode 没有 “项目” 这个概念，都是使用 目录 来组织的

我们就可以选择一个当前想要代码的目录，打开这个目录（打开目录就相当于以这个目录作为项目目录）

1、打开目录

2、创建代码文件

3、编写代码

![e9c69f07aa7949caa490ebe94bd2b7f3.png][]

此时，代码高亮/ 提示 / 自动缩进 就都有了

写完代码之后，记得保存（ctrl + s）

![56ba6b2557fb4a519a50601f94dd6486.png][]

如果存在这个小圆点，说明是为保存的，就需要进行保存

4、允许代码

仍然是使用浏览器运行

![1b3ee60dbf4441b890018354a3f87c6a.png][]

然后在弹出的文件资源管理器中，双击 html 或者拖拽到浏览器中运行，此时代码就能跑起来了

--------------------

## 二、研究代码的特点 ##

**1、html 代码是通过标签来组织的**

形如 <html> </html> 用尖括号组织的，成对出现的这个东西，就是 “标签” ，也可以叫做元素

**2、一个标签通常是成对出现的**

<html> 开始标签，</html> 结束标签

这俩之间的是标签的内容

**3、标签是可以嵌套的**

一个标签的内容可以是其他一个或者多个标签，此时，这些标签构成了一个树形结构：

![b636214a1a544931a8740154ef6535c7.png][]

**4、在开始标签中，给标签赋予属性**

属性可以相当于是键值对，可以有一个或者多个

HTML 就基本的语法结构，就是这几个简单的规则，下一步要了解的，是当前 HTML 中都支持哪些标签，这些标签又是干什么的，每个标签有哪些基本属性......

--------------------

## 三、HTML 常见标签 ##

**HTML 不支持自定义标签**

**html 是一个 html 文件最顶层的标签，相当于树根节点**

**head 存放了这个页面的一些属性**

**body 存放了这个页面包含了哪些内容**

！ + tab 可以快速的生成一个基本的页面，我们只需要编辑 body 的内容即可，这个功能叫做 emmet 快捷键

![61462373bea94467980204c2805ab76d.png][]

### 注释标签 ###

代码的注释，html 的注释，和一般的语言注释，差别很大

![bb42a8d2291c4e6887097fc002e66df1.png][]

注释的内容，不会再在页面中显示

但是，如果我们右键查看网络源代码，是可以看到注释的

vscode 里，可以使用 ctrl + / 快速注释

### 标题标签 ###

h1 ：最大，h6 最小

![4d12a018511741309f006633de87ca07.png][]

![c5c7fbb031da4564b8b7014c7a2b3eb9.png][]

**每个标题标签都是独占一行的，这个独占一行和代码的编写无关**

在 html 里面，标签是否换行和代码的编写无关，而是和标签自身有关（有的标签独占一行，有的标签不独占）

在 html 源代码中写的 换行 会被忽略，写的空格，多个连续空格会被视作一个（有的时候忽略，有的时候视为一格）

### 段落标签 ###

![8e68e2f65a0e49a98cc87d7cf2fcc499.png][]

每个段落之间，不光是换黄，同时还有一个明显的段落间距

![3ab24d9a29a44fa6a43af163d39cf4c0.png][]

### 换行标签 ###

br 标签表示换行

br 是一个单标签，不是成双成对出现的

### 格式化标签 ###

![5d3ce5f577844a8b97e9c768884b0332.png][]

![0134e2513675415b88f84f9f1c35326b.png][]

**这些标签都是不独占一行的**

### 图片标签 ###

网页上，是可以显示图片的，报纸上也是可以有图片的

**img 有个核心属性，src（必填）**

src 描述了该图片的路径（路径可以是本地的绝对路径，也可以是相对路径和网络路径）![d32a9d1c18944ca388f37f1f49f59308.png][]

**使用相对路径的时候，一定要明确，工作目录是哪一个，html 的工作目录，就是 html 当前的所在的目录**

img 别的属性：

alt 属性：在图片挂了的时候，就会显示 alt 对应的文本

title 属性：鼠标悬停在图片上，会给出一个提示

width / height ： 描述图的尺寸

**宽度和高度可以同时设置，也可以只设置一个，如果只设置一个，另一个就会等比例缩放**

单位是 px ：像素，这是在前端开发中最常见的单位

### 超链接标签 ###

链接： link （快捷方式）

超：链接跳转到的页面，可以是当前网站之外的

![f036bc8ced4141c9be27701ad531ef48.png][]

还有一个属性：target

**一般都是写作 target = "\_blank"，就可以打开一个新的标签页，而不会替换原有页面**

这里的域名，是可以替换成 ip 地址的

### 表格标签 ###

**table 表示整个表**

**tr 表示一行**

**td 表示一个单元格**

**th 表示表头中的一个单元格**

![903e418acfc34e1a84f457061441fe45.png][]

![cf251606770b43edaee2c6662da8d0e4.png][]

**为了让这个表格看上去更像表格，我们可以在 table 后面添加属性：**![e04d63235ba046aa98fa807783ae019b.png][]

![df7c55b855b645ba8241c3b401d7e7af.png][]**如果想要让文字居中，就得使用到 CSS 了**

![556021d2c7c545199d71c93c27fb09f2.png][] **这个操作就是让所有 td 标签中的文字都居中**

### 列表标签 ###

有序列表 ol ordered list

无序列表 ul unordered list

列表项 li list item

![682025806a0d4407b505dcff741e7f10.png][]

![b6906a9f96e14fc3beec526f4031f74f.png][]

--------------------

### 表单标签： ###

#### form 标签 ####

**使用 form 进行前后端交替，把页面上，用户进行的 操作 / 输入 提交到服务器上**

（在后面学习http 的时候，会具体写）

--------------------

#### input标签： ####

**有很多形态，能够表现成各种用户用来输入的组件**

![e9eadb4e21e246fdb01821f9abc5b647.png][]

![698713647a044ffc847a3d5f43009afa.png][]

**单行文本框**

![d5e2b280218447efb495f75ccf1e4f82.png][]

![6b40fa03768e4a55950b07864918bb9a.png][]

**也是单行文本框，但是是用来输入密码的**

![a2025ae607f34d7ab866dcac094659ba.png][]

![dca0c0affeb94b18853c93fd43502d4c.png][]**单选按钮**

**对于单选框，需要加一个 name 属性，name 属性相同的单选框，值之间是互斥的，也就是只能选择一个，也可以加一个 checked 属性，加了 checked 的是初始被选择的**![8a3c63581d4441c19e48c643c1b6394e.png][]

![ab9fdd74a0e84f81ba01cb9e21bde10e.png][]

**复选框，可以反复选择，也可以使用 checked 属性来设置默认选中的**

![8113c842fc0d410a9edf3bbb4ac423d9.png][]

![9867eb43201a4080a884252e826f8081.png][]**按钮，对于按钮点击之后要干什么，需要通过 js 来配合**

还有一种是提交按钮，需要搭配 form 使用，外表和 buttoon 是差不多的，会触发 form 和服务器的交互

![794ad3c265dc469ba7423d46d3e2d9ca.png][]

![cfa846330270420d8d0e9e2b6aa9ec6c.png][]**文件选择框**

--------------------

#### select ####

**下拉菜单**

![9d297f04c9d14103827d65061cecd88d.png][]

![a637c05b106141b487847fc7f1c1e252.png][]

--------------------

#### textarea标签： ####

**多行编辑框**

![897624bdd8874869929e7b07ebe6ec74.png][]

![584850f174a94e8b922d773d003a5fe7.png][]上述标签，也可以称为是 “控件” ，是构成一个图形化界面的基本要素

--------------------

### 无语义标签： ###

前面的标签都是由特定含义的，无语义标签没有特定含义，意思是可以用在各种场景

**div默认是独占一行的 \[块级元素\]**

**span 是不独占一行的 \[行内元素\]**

如果一个页面中，全用 div 也不是不行，但是一般不建议这么做，表示一个内容还是优先考虑语义更贴切的标签

--------------------

## 案例一：展示简历信息 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>个人简历</title>
    </head>
    <body>
        <h1>馒头警告的简历</h1>
        <h2>基本信息</h2>
        <img src="C:\Users\Huang\Desktop\照片\馒头.jpg" alt="" height="200px">
        <div>
            求职意向：软件开发工程师
        </div>
        <div>
            联系方式：110
        </div>
        <div>
            邮箱：123456@qq.com
        </div>
    
        <div>
            <a href=https://blog.csdn.net/weixin_73616913?spm=1000.2115.3001.5343"> 馒头警告的博客</a>
        </div>
        <h2>教育背景</h2>
        <ol>
            <li>1990 - 1996 小葵花妈妈幼儿园</li>
            <li>1997 - 2000 小葵花中学</li>
            <li>2001 - 2020 小葵花高中</li>
            <li>2021 - 2023 小葵花大学</li>
        </ol>
        <h2>专业技能</h2>
        <ul>
            <li>熟练掌握 Java 基本语法</li>
            <li>熟悉常用的青年大学习</li>
            <li>熟悉掌握学习强国技能</li>
        </ul>
    
        <h2>我的项目</h2>
        <ol>
            <li>
                <h3>项目一</h3>
                <p>开发时间：xxxx年 x 日</p>
                <div>功能介绍</div>
                <ul>
                    <li>功能一：xxxxxxx</li>
                    <li>功能二：xxxxxxx</li>
                </ul>
            </li>
            <li>
                <h3>项目二</h3>
                <p>开发时间：xxxx年 x 日</p>
                <div>功能介绍</div>
                <ul>
                    <li>功能一：xxxxxxx</li>
                    <li>功能二：xxxxxxx</li>
                </ul>
            </li>
        </ol>
    
        <h2>个人评价</h2>
        这是一段个人评价.....
    </body>
    </html>

[9af81d24be704772b7d6b93ed3a9a439.jpeg]: https://img-blog.csdnimg.cn/9af81d24be704772b7d6b93ed3a9a439.jpeg
[e9c69f07aa7949caa490ebe94bd2b7f3.png]: https://img-blog.csdnimg.cn/e9c69f07aa7949caa490ebe94bd2b7f3.png
[56ba6b2557fb4a519a50601f94dd6486.png]: https://img-blog.csdnimg.cn/56ba6b2557fb4a519a50601f94dd6486.png
[1b3ee60dbf4441b890018354a3f87c6a.png]: https://img-blog.csdnimg.cn/1b3ee60dbf4441b890018354a3f87c6a.png
[b636214a1a544931a8740154ef6535c7.png]: https://img-blog.csdnimg.cn/b636214a1a544931a8740154ef6535c7.png
[61462373bea94467980204c2805ab76d.png]: https://img-blog.csdnimg.cn/61462373bea94467980204c2805ab76d.png
[bb42a8d2291c4e6887097fc002e66df1.png]: https://img-blog.csdnimg.cn/bb42a8d2291c4e6887097fc002e66df1.png
[4d12a018511741309f006633de87ca07.png]: https://img-blog.csdnimg.cn/4d12a018511741309f006633de87ca07.png
[c5c7fbb031da4564b8b7014c7a2b3eb9.png]: https://img-blog.csdnimg.cn/c5c7fbb031da4564b8b7014c7a2b3eb9.png
[8e68e2f65a0e49a98cc87d7cf2fcc499.png]: https://img-blog.csdnimg.cn/8e68e2f65a0e49a98cc87d7cf2fcc499.png
[3ab24d9a29a44fa6a43af163d39cf4c0.png]: https://img-blog.csdnimg.cn/3ab24d9a29a44fa6a43af163d39cf4c0.png
[5d3ce5f577844a8b97e9c768884b0332.png]: https://img-blog.csdnimg.cn/5d3ce5f577844a8b97e9c768884b0332.png
[0134e2513675415b88f84f9f1c35326b.png]: https://img-blog.csdnimg.cn/0134e2513675415b88f84f9f1c35326b.png
[d32a9d1c18944ca388f37f1f49f59308.png]: https://img-blog.csdnimg.cn/d32a9d1c18944ca388f37f1f49f59308.png
[f036bc8ced4141c9be27701ad531ef48.png]: https://img-blog.csdnimg.cn/f036bc8ced4141c9be27701ad531ef48.png
[903e418acfc34e1a84f457061441fe45.png]: https://img-blog.csdnimg.cn/903e418acfc34e1a84f457061441fe45.png
[cf251606770b43edaee2c6662da8d0e4.png]: https://img-blog.csdnimg.cn/cf251606770b43edaee2c6662da8d0e4.png
[e04d63235ba046aa98fa807783ae019b.png]: https://img-blog.csdnimg.cn/e04d63235ba046aa98fa807783ae019b.png
[df7c55b855b645ba8241c3b401d7e7af.png]: https://img-blog.csdnimg.cn/df7c55b855b645ba8241c3b401d7e7af.png
[556021d2c7c545199d71c93c27fb09f2.png]: https://img-blog.csdnimg.cn/556021d2c7c545199d71c93c27fb09f2.png
[682025806a0d4407b505dcff741e7f10.png]: https://img-blog.csdnimg.cn/682025806a0d4407b505dcff741e7f10.png
[b6906a9f96e14fc3beec526f4031f74f.png]: https://img-blog.csdnimg.cn/b6906a9f96e14fc3beec526f4031f74f.png
[e9eadb4e21e246fdb01821f9abc5b647.png]: https://img-blog.csdnimg.cn/e9eadb4e21e246fdb01821f9abc5b647.png
[698713647a044ffc847a3d5f43009afa.png]: https://img-blog.csdnimg.cn/698713647a044ffc847a3d5f43009afa.png
[d5e2b280218447efb495f75ccf1e4f82.png]: https://img-blog.csdnimg.cn/d5e2b280218447efb495f75ccf1e4f82.png
[6b40fa03768e4a55950b07864918bb9a.png]: https://img-blog.csdnimg.cn/6b40fa03768e4a55950b07864918bb9a.png
[a2025ae607f34d7ab866dcac094659ba.png]: https://img-blog.csdnimg.cn/a2025ae607f34d7ab866dcac094659ba.png
[dca0c0affeb94b18853c93fd43502d4c.png]: https://img-blog.csdnimg.cn/dca0c0affeb94b18853c93fd43502d4c.png
[8a3c63581d4441c19e48c643c1b6394e.png]: https://img-blog.csdnimg.cn/8a3c63581d4441c19e48c643c1b6394e.png
[ab9fdd74a0e84f81ba01cb9e21bde10e.png]: https://img-blog.csdnimg.cn/ab9fdd74a0e84f81ba01cb9e21bde10e.png
[8113c842fc0d410a9edf3bbb4ac423d9.png]: https://img-blog.csdnimg.cn/8113c842fc0d410a9edf3bbb4ac423d9.png
[9867eb43201a4080a884252e826f8081.png]: https://img-blog.csdnimg.cn/9867eb43201a4080a884252e826f8081.png
[794ad3c265dc469ba7423d46d3e2d9ca.png]: https://img-blog.csdnimg.cn/794ad3c265dc469ba7423d46d3e2d9ca.png
[cfa846330270420d8d0e9e2b6aa9ec6c.png]: https://img-blog.csdnimg.cn/cfa846330270420d8d0e9e2b6aa9ec6c.png
[9d297f04c9d14103827d65061cecd88d.png]: https://img-blog.csdnimg.cn/9d297f04c9d14103827d65061cecd88d.png
[a637c05b106141b487847fc7f1c1e252.png]: https://img-blog.csdnimg.cn/a637c05b106141b487847fc7f1c1e252.png
[897624bdd8874869929e7b07ebe6ec74.png]: https://img-blog.csdnimg.cn/897624bdd8874869929e7b07ebe6ec74.png
[584850f174a94e8b922d773d003a5fe7.png]: https://img-blog.csdnimg.cn/584850f174a94e8b922d773d003a5fe7.png