认识HTML

jiuyue_77

已于 2022-08-07 12:43:43 修改

阅读量125

点赞数

分类专栏：前端文章标签： vscode 编辑器 html5

于 2022-07-27 19:21:50 首次发布

本文链接：https://blog.csdn.net/jiuyue_77/article/details/126009855

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

第一章 HTML——我的第一个网页

文章目录

第一章 HTML——我的第一个网页
前言
使用工具
一、什么是HTML?
二、HTML 标签
三、标签类型
总结

前言

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

使用工具

VS Code
Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

VS Code 安装网址：https://code.visualstudio.com/

一、什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

二、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

1.HTML的基础模板

代码如下（示例）：

<!-- 注释的快捷键是 ctrl + / -->

<!-- 声明下面是一个html类型的文件，且使用html语法规范 -->
<!doctype html>
<!-- 创建html标签 开始标记-->
<html>
    <!-- 网页的头部，至少2个标签，开始标记 -->
    <head>
        <!-- 网页的编码规则，使用utf-8编码模式 -->
        <meta charset="utf-8">
        <!-- 网页的标题 -->
        <title>hello</title>
    <!-- head结束标记 -->
    </head>
    <!-- 网页的主体，存放网页所有的文字、图片、音、视频等数据，用不同的标签进行标记 -->
    <body>
        <!-- body中不允许出现非标签包裹的数据 -->
        <!-- 我的第一个网页  这句话被注释掉了，注释的内容不会显示在网页里-->
        <p>我的第一个网页</p>
    </body>
<!-- html结束标记 -->
</html>

2. 标签含义

代码如下（示例）：

<!DOCTYPE html>
<!-- 本网页使用的默认语言是英语 language="english" -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 如果你的电脑上安装了多个版本的ie浏览器，那么系统会自动选择最新版本进行适配 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端适配 viewport是视口的意思，移动端当前屏幕的宽度等于页面宽度，以1.0倍比例缩放屏幕-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        HTML中文叫超文本标记语言，最新版本HTML5，上一个版本是HTML4.01
        <br>
        H5的语法并不严格，标签的大小写不被限制，相较于其他版本较为简洁
        <br>
        H5制作的网页大体分为3部分，内容，样式，行为（功能），分别对应一种语言
        <br>
        内容：HTML  样式：CSS  行为：JavaScript
        <br>
        所以制作网页首先要把内容（数据）显示出来，再对元素进行美化，然后对相应元素添加功能
        <br>
        所有的数据都要写在标签的里面，标签也叫HTML标记，分为单标签与双标签
        <br>
        单标签：br hr input  双标签：由开始和结束标记组成的标签，结束标记比开始标记多个斜杠
        <br>
        每种标签都有公共或独特的属性与属性值,标签的属性可以有多个，用空格分离,所有的属性都要写在开始标记里，属性与属性值之前是等号且属性值需要用引号包裹
        <br>
        开始标记与结束标记之间就是网页的数据
    </p>
</body>
</html>

3.常用各类标签

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 网页的内容总体分为文字和图片，这些文字图片等数据就是我们需要呈现的内容 -->
    <!-- 网页内容要用标签呈现，所以选择合适的标签来装载不同类型的数据 -->
    <h1>这是最大的标题标签</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>这是最小的标题标签</h6>
    <!-- 段落标签，主要呈现一段文字 -->
    <p>《活着》是中国当代作家余华创作的长篇小说，首次发表于《收获》1992年第6期。</p>
    <!-- 最常用的文本标签，通常用来显示一句话 -->
    <span>盛夏七月，夏树苍翠。</span>
    <!-- 特殊文本，粗体，斜体，下划线，删除线 -->
    <!-- b和strong标签都可以加粗文本，但是b标签是经过转义的 -->
    <b>文本被加粗</b>
    <strong>文本被加粗</strong>
    <!-- 换行标签,空标签，没有任何显示样式，只能使网页数据换行显示 -->
    <br>
    <!-- 斜体标签 -->
    <i>文字倾斜</i>
    <em>文字倾斜</em>
    <br>
    <!-- 下划线标签 -->
    <u>下划线</u>
    <ins>下划线</ins>
    <br>
    <!-- 删除线标签 -->
    <s>这段文字被删除</s>
    <del>这段文字被删除</del>
    <br>
    <!-- 超链接标签，可以跳转到已经发布的网站，也可以跳转到本地文件，默认情况下是在当前标签页进行跳转 -->
    <!-- 跳转到网站的时候需要把协议写上 -->
    <a href="http://www.baidu.com">百度一下，你就知道</a>
    <!-- 本体跳转直接把文件名写上，后缀不能省略 -->
    <!-- href属性中设置跳转的地址，target属性可以设置在什么位置打开网页，默认是_self，_blank可以在新的标签页打开网页 -->
    <a href="超链接跳转页.html" target="_blank">显示的文字</a>
    <!-- 图片 -->
    <br>
    <!-- 路径一般分为绝对路径和相对路径，通常我们使用的都是相对路径 -->
    <!-- 同目录文件寻找 ./ 即可找到对应文件的位置 -->
    <img src="./image1.jpg" alt="图片显示不出来">
    <!-- 非同目录下要找到对应层级，先找到装载图片的文件夹，差几层就多加几个点 -->
    <img src="../20220726/image2.jpg" alt="图片正在加载中，请稍等">
    <!-- 通常图片是被放在一个专门的文件夹下，每组图片都会有相同的命名方式,通过不同的文件夹寻找到相应的图片 -->
    <!-- 如果图片的路径书写有误，那么图片是不会显示的，alt属性可以作为图片显示不出来时的替代文字 -->
    <!-- title属性可以设置鼠标移动到图片上时的相关简介 -->
    <img src="./images/image1.jpg" title="这是..." width="400px" height="240px">
    <img src="./images/image2.jpg" title="这是..." width="400px" height="240px">

</body>
</html>

三、标签类型

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 标签总体可以分为3类:行标签、块标签、行内块标签；每个标签都可以转换类型 -->
    <!-- 行标签，不能直接设置宽高，默认水平排列,当父级宽度不够时才会换行，或者使用br强制换行 -->
    <!-- 一般文本类的标签大多是行标签 -->
    <span>1</span>
    <b>2</b>
    <strong>3</strong>
    <i>4</i>
    <em>5</em>
    <br>
    <u>6</u>
    <ins>7</ins>
    <s>8</s>
    <del>9</del>
    <a>10</a>

    <!-- 块标签，可以直接设置宽高，默认垂直排列，一般容器类的标签都是块标签 -->
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
    <h6>6</h6>
    <!-- 文本段落 -->
    <p>7</p>
    <p>8</p>
    <!-- 网页上比较大的容器，通常显示一个版块 -->
    <div>9</div>
    <!-- 通常是嵌套在div里的小容器，或者小图标 -->
    <section>10</section>
    <!-- 网页的头部 -->
    <header>11</header>
    <!-- 导航栏，一般存在于网页的最上方 -->
    <nav>12</nav>
    <!-- 网页的主体 -->
    <main>13</main>
    <!-- 网页的底部 -->
    <footer>14</footer>
    <ul>
        <li>15</li>
    </ul>
    <ol>
        <li>16</li>
    </ol>
    <dl>
        <dt>17</dt>
        <dd>18</dd>
    </dl>

    <!-- 行内块标签，横向排列，可以直接设置宽高，父级宽度不够时才会换行 -->
    <img src="../20220727/images/image1.jpg" width="400px" height="260px">
    <img src="../20220727/images/image2.jpg" width="400px" height="260px">
    <img src="../20220727/images/image1.jpg" width="400px" height="260px">
    <img src="../20220727/images/iamge2.jpg" width="400px" height="260px">

</body>

</html>