一、HTML的定义

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

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

二、HTML示例

<!DOCTYPE html> 
<html> <head> 
<meta charset="utf-8">
<title>HTML示例</title> 
</head>
<body>我的第一个标题 
<p>我的第一个段落。</p>  
</body>
</html>

在此说明以上示例各部分含义:

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • **** 元素定义一个大标题
  • <p> 元素定义一个段落

注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。

三、HTML常见术语

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

  • HTML 标签是由尖括号包围的关键词,比如 <html>

  • HTML 标签通常是成对出现

  • 标签对中的第一个标签是***开始标签***,第二个标签是***结束标签***

  • 开始和结束标签也被称为***开放标签*** 和 闭合标签

HTML 元素: "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。

  • HTML 元素以开始标签起始

  • HTML 元素以结束标签终止

  • 元素的内容是开始标签与结束标签之间的内容

  • 某些 HTML 元素具有空内容(empty content)

  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)

  • 大多数 HTML 元素可拥有属性

HTML 属性:属性是 HTML 元素提供的附加信息。

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,**比如:name="value"**。

四、HTML标题

HTML标题(Heading)是通过 <h1> - <h6> 标签进行定义的。

代码示例

<h1>这是一个标题。
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

效果展示 image-20230725143501654.png 注意事项

  • 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体大号的文本而使用标题。
  • 搜索引擎使用标题为您的网页的结构和内容编制索引。
  • 因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
  • 应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

五、HTML 注释

注释: 开始括号之后(左边的括号)需要紧跟一个叹号 ! (英文标点符号),结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。

代码示例

<!-- 这是一个注释 -->

注意事项

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

六、HTML 段落

段落是通过 <p> 标签定义的。

代码示例

<!-- 带结束标签 -->
<p>这是一个段落 </p>
<p>这是另一个段落</p>
<!--不带结束标签 -->
<p>这是一个段落
<p>这是另一个段落

效果展示 image-20230725144346600.png 注意事项 上面的不带结束标签例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误,在未来的 HTML 版本中,不允许省略结束标签。

七、HTML 折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 代码示例

<p>这个<br>段落<br>演示了分行的效果</p>

效果展示 image-20230725144620524.png 本期教程到此就结束了,如果对该教程感兴趣,欢迎关注,我将持续发布有关HTML+CSS+JS基础教程。