HTML（1）

S0NeT

已于 2024-07-09 16:12:44 修改

阅读量373

点赞数 8

分类专栏：网路安全基础入门 HTML 前端文章标签： html 前端网络安全

于 2024-07-09 16:08:23 首次发布

本文链接：https://blog.csdn.net/qq_52957703/article/details/140278888

版权

网路安全基础入门同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

1.定义

HTML——超文本标记语言

1.超文本指的是链接

先来看一下定义：超文本（Hypertext）是一种文本类型，它允许通过链接（通常称为超链接）从一个文档跳转到另一个文档或文档中的特定部分。

例如：

<a href="https://www.baidu.com" target="_blank" alt="提示文字">这是百度的超文本</a>

这就是百度的超文本

2.标记指的是标签，即带括号的文本。

举个栗子，如何想要把下边这段话加粗：

这是一句话

在代码中我们不能像word里直接选中然后点加粗，而是通过标签的方法：

        <strong>这是一句话</strong>

那么在在前端就会出现：

这是一句话

效果如下：

所以总结：

1.标签大多成对（双标签），中间为内容。也有单标签，eg： 换行标签，<hr>水平线标签。

2.<>里为标签名

3.开始标签为<xxx> 结束标签为</xxx>

2.html结构

vscode快速生成模版骨架方法：

先打一个英文！，再按回车键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.html标签：整个网页

2.head标签：网页头部，存放前端识别的代码，例如css

3.body：网页主题，展示在网页的代码

4.网页名字（网页标题）

3.标签关系

<html>
    <head>
        1
    </head>
    <body>
        2
    </body>
</html>

两种关系：父子关系（嵌套关系）、兄弟关系(并列关系）

这里<html>和<head><body>是父子关系（嵌套关系）

<head>和<body>是兄弟关系(并列关系）

注：tab向后缩进，shift+tab向前缩进

4.html的注释

顾名思义就是注释，不参与工作，只对代码进行说明以方便后期自己或者其他人员阅读或维护。

快捷键 ctrl+"/"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!--  这是一个注释 ^.^ -->
</body>
</html>

5.常用标签

1.标题标签

从h1到h6，从大到小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
</body>
</html>

2.段落标签

每一段文字可以使用段落标签，个人觉得很像word或者ppt里的“文本框”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        这是一段,啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </p>
    <p>
        这也是一段，红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </p>
</body>
</html>

3.单标签

换行标签: 

水平标签:<hr>

图像标签：<img src="图片的url" >

注：<>中也可以加入其他属性，例如alt替换文本（图片无法显示时显示的文字），title提示文本（鼠标悬停在图片上显示的文字），还有width和height（不常用，通常使用css来控制）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    123
    <br>
    456
    <hr>

    <img src="./OIP-C.jpg" alt="无法显示" title="微笑">
    <img src="./OIP-C1.jpg" alt="无法显示" title="微笑">
    <br>
    <img src="./1.jpg" alt="无法显示" title="魂罗" width="300" height="100">
</body>
</html>

4.文本格式化标签

加粗标签：或 

倾斜标签： 或

下划线标签：<ins> 或

删除线标签：<del>或 <s >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>加粗标签</strong>
    <b>也是加粗</b>
    <em>倾斜标签</em>
    <ins>下划线标签</ins>
    <del>删除线标签</del>

</body>
</html>