第 2 节 HTML标签（上）

最新推荐文章于 2024-08-19 16:20:42 发布

Sunnie23

最新推荐文章于 2024-08-19 16:20:42 发布

阅读量267

点赞数

分类专栏： HTML学习笔记文章标签： html5

本文链接：https://blog.csdn.net/qq_48015123/article/details/120337541

版权

HTML学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第 2 节 HTML标签

HTML 语法规范
HTML 基本结构标签
开发工具
HTML 常用标签
HTML 中的注释和特殊字符

HTML 语法规范

1）基本语法概述
（1）HTML 标签是由尖括号包围的关键词，例如
（2）HTML 标签通常是成对出现，称为双标签。标签对中第一个为开始标签，第二个为结束标签。
（3）极少情况为单标签。

2）标签关系
双标签分为包含关系和并列关系

HTML 基本结构标签

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

开发工具

1）VSCode开发步骤：
（1）新建文件：Ctrl + N
（2）保存文件为.html文件
（3）放大或缩小视图：Ctrl + 加号，Ctrl + 减号
（4）生成骨架结构：!（英文）+ Tab
（5）鼠标右击，open in default browser

2）VSCode 工具生成骨架标签新增代码
（1） <!DOCTYPE> 标签（document type）
文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>  <!--当前页面采取的是HTML5版本来显示网页-->

注：<!DOCTYPE> 声明位于文档中的最前面的位置，处于 < html > 标签之前；<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

（2）lang 语言（language）

<html lang="en">  <!--告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示。-->

用来定义当前文档显示的语言。
en 定义语言为英语
zh-CN 定义语言为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页。其实，对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。

（3）charset 字符集
字符集（Character set）是多个字符的集合，以便计算机能有识别和存储各种文字。
在 < head > 标签内，可以通过 < meta> 标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8"/>

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

注：这是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的“UTF-8”。

HTML 常用标签

标签语义:标签的含义，即这个标签是用来干嘛的。作用是合理布置标签，让页面结构更加清晰。

标题标签（重要）

HTML 提供了6个等级的网页标题，即 < h1> – < h6>。

<body>
    <h1>标题1</h1>  
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>

注：< h1> – < h2>中写的内容在一行显示，之外的内容另起一行显示。

段落和换行标签（重要）

< p> 段落标签，将HTML文档分割为若干段落。

<p>我是一个段落标签</p>  <!-- p:paragraph段落的缩写-->

特点：
（1）文本在一个段落中会根据浏览器窗口的大小自动换行。
（2）段落和段落之间保有空隙。

< br /> 换行标签，一个段落中的文字会从左到右一次排列，直到浏览器窗口的右端，然后才自动换行，换行标签可以将某段文本强制换行显示。

<br />  <!--br:break 的缩写，意为打断、换行。-->

特点：
（1）< br /> 是一个单标签。
（2）< br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

课堂案例：体育新闻

<!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>体育新闻</title>
</head>
<body>
    <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
    <h4>数据统计：水花兄弟合砍61分</h4>
    <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>
　　
    <h4>兄弟对决升级：小库里给哥哥造成压力</h4>
    <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
    <p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>
　　
    <p>作者：Sunnie 
        <br /> 2021.9.17
    </p>
</body>
</html>

结果：

文本格式化标签

突出重要性，比普通文字更重要。

（1）加粗：

我是<strong>加粗</strong>的文字  <!--推荐使用<strong>标签-->
我是<b>加粗</b>的文字

（2）倾斜

我是<em>倾斜</em>的文字  <!--推荐使用<em>标签-->
我是<i>倾斜</i>的文字

（3）删除线

我是<del>删除线</del>  <!--推荐使用<del>标签-->
我是<s>删除线</s>

（4）下划线

我是<ins>下划线</ins>  <!--推荐使用<ins>标签-->
我是<u>下划线</u>

注：光标放在一行代码之间，点击Ctrl + c，实现整行的复制

布局标签

< div> 和 < span> 标签是没有语义的，它们就是一个盒子，用来装内容，布局网页。
div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。
特点：
（1）< div> 标签用来布局，但是现在一行只能放一个< div>。大盒子
（2）< span> 标签用来布局，一行可以放多个< span>。小盒子

图像标签和路径

1） < img> 图像标签，用于定义HTML页面中的图像。

<h4> 图像标签的使用：</h4>
<img src = "917.jpg" />

<h4> alt 替换文本 图像显示不出来的时候用文字替换：</h4>
<img src = "916.jpg" alt = "这是千玺！！"/>

<h4> title 提示文本 鼠标放到图像上，提示的文字：</h4>
<img src = "917.jpg" alt = "这是千玺！！" title="这是千玺！！！！"/>

其中，src 是< img> 标签的必须属性，它用于指定图像文件的路径和文件名。

注：要求图片和HTML文件放置在同一个路径下。

2）图像标签的其他属性

<h4> width 给图像设定宽度：</h4>
<img src = "917.jpg" alt = "这是千玺！！" title="这是千玺！！！！" width="200"/>

<!--宽度和高度一般只修改一个，另一个会自动地等比缩放-->
<h4> height 给图像设定高度：</h4>
<img src = "917.jpg" alt = "这是千玺！！" title="这是千玺！！！！" height="400"/>

<!--边框一般不会通过属性来设置-->
<h4> border 给图像设定边框：</h4>
<img src = "917.jpg" alt = "这是千玺！！" title="这是千玺！！！！" height="400" border = "10"/>

注：
图像标签可以拥有多个属性，必须写在标签名 img 的后面；
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开；
属性采取键值对的格式，即 key="value"的格式，属性=“属性值”。

3）路径
（1）目录文件夹和根目录：
目录文件夹：存放制作页面所需要的相关素材，例如 html 文件、图片等。
根目录：打开目录文件夹的第一层就是根目录。

（2）VSCode 打开文件夹
文件 —> 打开文件夹，选择目录文件夹，后期方面管理文件
或者，将目录文件夹直接拖入 VSCode 里面。

（3）路径
相对路径（斜杠 / ）：以引用文件所在位置为参考基础，而建立出的目录路径，即图片相对于HTML页面的位置。

<img src="917.jpg" />  <!--图片和html文件是在同一级路径，就直接写图片的名字-->
<img src="images/917.jpg" />  <!--图片位于html文件下一级，利用/进入下一级-->
<img src = "../918.jpg" />  <!--图片位于html文件上一级，利用../进入上一级-->

绝对路径（反斜杠 \ ）：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

超链接标签（重要）

< a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
1）语法格式：

<!-- a: anchor的缩写，译为锚-->
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

2）链接分类：
（1）外部链接，例如<a href = "http://www.baidu.com"> 百度</a>。

<h4>1.外部链接</h4>
<a href="http://www.qq.com" target="_blank"> 腾讯</a>

（2）内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可。例如，<a href="" target="_blank"> 腾讯</a>

<h4>2.内部链接</h4>
<a href="02-第一个页面.html" target="_blank"> 图像标签</a>

（3）空链接：#

<h4>3.空链接：#</h4>
<a href ="#"> 空链接</a>

（4）下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

<h4>4.下载链接：地址连接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="918.zip"> 下载文件</a>

（5）网页元素的链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
将图像、表格、音频等等当做文本去做。

<h4>5.网页元素的链接</h4>
<a href = "http://baidu.com" target="_blank"><img src="images/917.jpg"/></a>

（6）锚点链接：点击链接，可以快速定位到页面中的某个位置。
在链接文本的 href 属性中，设置属性值为 #名字的形式，如：<a href="#two"> 第2集</a>。
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：<h3 id="two"> 第2集介绍</h3>

<a href = "#live">个人生活</a><br />
<h3 id="live">个人生活</h3>

HTML 中的注释和特殊字符

1. 注释
以“ < !- - ”开头，以 “- ->” 结束。

<!--注释语句-->

注释的快捷键：ctrl + /

2. 特殊字符

重点记住：空格、大于号、小于号

Sunnie23

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第 2 节 HTML标签（上）

第 2 节 HTML标签HTML 语法规范HTML 基本结构标签开发工具HTML 常用标签HTML 中的注释和特殊字符HTML 语法规范1）基本语法概述（1）HTML 标签是由尖括号包围的关键词，例如（2）HTML 标签通常是成对出现，称为双标签。标签对中第一个为开始标签，第二个为结束标签。（3）极少情况为单标签。2）标签关系双标签分为包含关系和并列关系HTML 基本结构标签开发工具HTML 常用标签HTML 中的注释和特殊字符...
复制链接

扫一扫