首页 前端知识 HTML 注释与标签

HTML 注释与标签

2024-05-05 21:05:08 前端知识 前端哥 486 764 我要收藏

一、HTML注释

无论学习什么编程语言,注释是代码之母,所以一定要重视注释。

单行注释

HTML中注释的格式:

<!--单行注释:这里是注释的内容-->

多行注释

注意:注释可用直接使用回车换行,如多行注释:

<!--
多行注释1
多行注释2
多行注释3
-->

由于HTML代码非常的杂乱无章并且很多,所以我们习惯性的用注释来划定区域方便后续的查找。

<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束--

HTML注释的注意事项

  1. HTML注释不支持嵌套
  2. HTML注释不能写在HTML标签中

二、HTML标签介绍

一个网页可以没有样式,可以没有交互,但是必须要有网页需要呈现的内容,而HTML作为一门标记语言,是通过各种各样的标签来标记网页内容的,所以HTML部分是整个前端的基础,我们学习HTML主要就是学习的HTML标签。

1.什么是标签

  1. 标签 又称 元素,是HTML的基本组成单位。

  2. HTML标签是用尖括号< 和 >包围的关键词,用于标记网页中的不同元素。标签告诉浏览器如何显示和处理元素。如<html><head><body>都是标签

  3. HTML中标签通常情况下是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个/,开始标签和结束标签之间的就是标签的内容。

  4. 标签名不区分大小写,但推荐小写,因为小写更规范。

HTML标签的一般形式为:

<标签名>内容</标签名>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BXnVqPnG-1685379740768)(https://billy.taoxiaoxin.club/md/2023/05/6474cfaf922ee4567cf481cc.png)]

其中,<标签名>是开始标签,</标签名>是结束标签,内容是标签包裹的文本或其他HTML元素。

2. 标签的属性

基本语法格式如下:

<标签名 属性1=“值1” 属性2=“值2” ......>内容部分</标签名>
<标签名 属性1=“值1” 属性2=“值2” ....../>
  • HTML属性一般都出现在HTML的开始标签中,是HTML标签的一部分。
  • 标签可以有属性,它包含了额外的信息,属性的值一定要在双引号中,同时标签可以拥有多个属性。
  • HTML标签是由尖括号包围的关键字,如<html>, <div>
  • HTML标签通常是成对出现的,属性由属性名和值成对出现。比如:<div></div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线。
  • 也有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src="1.jpg" />等。

image-20230530004818979

3.标签注意事项

  1. 不同的标签,有不同的属性
  2. 标签里面可以有若干属性,也可以不带属性
  3. 属性名、属性值,都不区分大小写,标准推荐使用小写,这样符合XHTML标准。
  4. 标签是HTML中最基本单位,也是最重要组成部分
  5. 标签只是一种记号,是不会显示出来的。
  6. 标签只是用来做记号而不负责控制样式。
  7. HTML中有部分是可以嵌套的。
  8. 通常要用两个角括号括起来:<>,而且标签都是闭合的(成对与不成对)

4.标签具有几个重要的属性

  • id:定义标签的唯一ID,HTML文档树中唯一,类似于标签的身份证号,在同一个html页面上id值不能重复
  • class:为html元素定义一个或多个类名(classname)(CSS样式类名). 该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
  • style:规定元素的行内样式(CSS样式)

标签既可以有默认的书写属性也可以有自定义的书写属性

<p id="d1" class="c1" username="jason" password="123"></p>

5.HTML中标签分类

单从是否可以嵌套子标签的角度去分,标签可以分为两类

  1. 容器类标签: 容器类标签是指可以包含其他标签的标签,也称为块级标签。这些标签用于组织和布局网页的结构。常见的容器类标签包括:
    • <div>:定义文档中的一个区块,可用于布局或组合其他元素。
    • <h1> - <h6>:定义标题,表示不同级别的标题,其中 <h1> 是最高级别的标题。
    • <ul>:定义无序列表,用于显示项目之间没有特定顺序的内容。
    • <ol>:定义有序列表,用于显示项目之间有特定顺序的内容。
    • <li>:定义列表中的每个项目。
    • <dl>:定义描述列表,包含定义术语和其描述的组合。
    • <dt>:定义描述列表中的术语。
    • <dd>:定义描述列表中的描述。
  2. 文本类标签: 文本类标签用于表示文本内容和样式,通常不能包含其他块级标签,只能包含文字、图片和超链接等内联元素。常见的文本类标签包括:
    • <p>:定义段落。
    • <span>:用于对文本进行分组或添加样式。
    • <strong>:定义强调文本,通常以粗体显示。
    • <em>:定义强调文本,通常以斜体显示。
    • <ins>:定义插入文本,表示在文档中插入的新内容。
    • <del>:定义删除文本,表示从文档中删除的内容。

这两类标签的划分主要基于标签的嵌套规则和功能特性,容器类标签用于组织和布局页面的结构,而文本类标签用于表示和格式化文本内容。

6.标签的两种形式

HTML标签一般是闭合的,有两种形式,分为成对与不成对

(一)单标签(不成对)
  • 单标签:由一个标签组成,也叫自闭和标签。
  • 语法格式:<标签名 />; 如: <br/><hr/>

常见的单标签

<hr /> 
<meta /> 
<img />
<input>
(二)双标签(成对)
  • 双标签:由“开始标签”和“结束标签”两部分组成。
  • 语法格式:<标签名>内容</标签名>
  • 例如<p></p> <p>是开始标签,表示一个段落的开始。``</p>是结束标签,表示一个段落的结束。

常见的双标签

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<h2></h2>
<h3></h3>
<p></p>
<pre></pre>
<div></div>
<span></span>
<a></a>
<ul></ul>
<ol></ol>
<dt></dt>
<dd></dd>
<code></code>
<mark></mark>
<iframe></iframe>

三、HTML 基本结构

HTML的基本结构包括以下几个部分:

  1. <!DOCTYPE>声明:声明HTML文档的类型。它位于文档的最开始,用于告诉浏览器使用哪个HTML版本进行解析。
  2. <html>标签:HTML文档的根元素,包含整个HTML文档的内容。
  3. <head>标签:用于定义文档的头部,其中包含了一些与文档相关的元数据和设置,如标题、字符编码、外部样式表等。
  4. <body>标签:定义文档的主体内容,包含了要在浏览器中显示的实际内容,如文本、图像、链接等。

完整的HTML基本结构如下所示:

<!DOCTYPE html>
<html>
  <head>
    <!-- 在<head>中定义的元数据和设置 -->
    <title>页面标题</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <!-- 其他<head>中的元素 -->
  </head>
  <body>
    <!-- 在<body>中的实际内容 -->
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="图片">
    <a href="https://www.example.com">链接</a>
    <!-- 其他<body>中的元素 -->
  </body>
</html>

上述结构中,<head>部分包含了标题、字符编码设置和外部样式表的链接,<body>部分包含了实际显示的内容,如标题、段落、图像和链接等。

注意,HTML是一种层次结构,标签必须正确嵌套和闭合,且整个文档应位于<html>标签内部。

image-20230530005600104

四、<!DOCTYPE>

  • <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
  • <!DOCTYPE> 这种文档声明不是 HTML标签, 它只是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

五、HTML实体(特殊字符)

描述实体名称实体编号
空格
<小于号<<
>大于号>>
&和号&&
引号"
撇号‘ (IE不支持)'
分(cent)¢¢
£镑(pound)££
¥元(yen)¥¥
欧元(euro)
§小节§§
©版权(copyright)©©
®注册商标®®
商标
×乘号××
÷除号÷÷

六、HTML代码格式

  • 任何回车或空格在源代码中都是不起作用。
  • 所以在编写HTML代码时,都可以使用回车或者空格进行代码排版
  • 这样可以使代码清晰,也便于团队合作。必须保持严格的缩进规则,以Tab键为准。

参考资料

  • [HTML参考上手册](
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6999.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!