二、HTML 标签导读

最新推荐文章于 2024-10-14 18:12:09 发布

纪小凌

最新推荐文章于 2024-10-14 18:12:09 发布

阅读量504

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_50839420/article/details/124414705

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

① HTML 语法规范

1.1 基本语法概述

HTML 标签是由尖括号包围的关键词，例如<html>。
HTML 标签通常是成对出现的，例如 < html > 和 < /html> ，我们称为双标签。第一个标签为开始标签，第二个标签为结束标签。
有些特殊的标签必须是单个标签（极少情况），例如 < br />，我们称为单标签。

1.2 标签关系

双标签关系可以分为两类：包含关系和并列关系。

② HTML 基本结构标签

2.1 第一个 HTML 网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。HTML 页面也称为HTML文档。

# 第一个网页（记事本生成 .html）
<html>
    <head>
        <title>第一个网页</title>
    </head>
    <body>
    	继续努力，加油！
    </body>
</html>

HTML 文档的后缀名必须是 .html 或 .htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。

此时，用浏览器打开这个网页，我们就可以预览我们写的 HTML 文件。

③ 网页开发工具

3.1 VSCode 实用插件工具

3.2 VSCode 骨架标签含义

<!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>
    
</body>
</html>

<!DOCYPE> 标签
lang语言
charset 字符集

3.2.1 <!DOCYPE>

< !DOCYPE> 文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示页面。

<!DOCTYPE html>

# 这句代码的意思：当前页面采用的是 HTML5 版本来显示页面。

3.2.2 lang语言

用来定义当前文档显示的语言，告诉浏览器或搜索引擎这是一个什么网站，本页采用什么显示。

en 定义语言为英语
zh-CN 定义语言为中文

简单来说，定义en 就是英文网页，定义zh-CN 就是中文网页。

对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN 的文档也可以显示英文

这个属性对浏览器和搜索引擎（百度、谷歌）还是有作用的，例如网页提示翻译。

3.2.3 charset 字符集

字符集（Charater set）是多个字符的集合，以便计算机能够识别和存储各种文字。

在标签内，可以通过<meta>标签的charset属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset="UTF-8">

charset 常用的值有: GB2312（简体）、BIG5（繁体）、GBK （简繁）和 UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面语法是必须要写的代码，否则可能引起乱码的情况，一般情况下，统一使用 “UTF-8” 编码。

④ HTML 常用标签

根据标签的语义，在合适的地方给一个最为合理的标签，可以让网页结果更清晰。

4.1 标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了6个等级的网页标题。

即< h1> - < h6>。

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

单词head的缩写，意为头部、标题。

标签语义： 作为标题使用，并且依据重要性递减。

4.2 段落标签、换行标签

4.2.1 段落

在网页中，要把文字有条理显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可

以将整个网页分为若干段落。

<p> 我是第一个段落 </p>
<p> 我是第二个段落 </p>

单词paragraph的缩写，意为段落。

标签语义：可以把 HTML 文档分割为若干段落。

4.2.2 换行（单标签）

在 HTML 中，一个段落中的文字会从左到右依次排线，直到浏览器窗口的右端，才会自动换行，如果希望某段文本强制换行显示，就需要使用换行标签<br />。

<br />

单词 break的缩写，意为打断、换行。

标签语义： 强制换行。

4.3 综合案例：体育新闻

文字

水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0
数据统计：水花兄弟合砍61分

库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。

汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。
        
兄弟对决升级：小库里给哥哥造成压力
库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分

但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。

实现

<!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>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
    <h3>数据统计：水花兄弟合砍61分</h3>
    <p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>

    <p> 汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>   

    <h3>兄弟对决升级：小库里给哥哥造成压力</h3>
    <p> 库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分</p>   

    <p>  但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>  
    
    <p>作者：zjh <br />
       2022.4.26
    </p>
</body>
</html>