写在前面

主要内容为：HTML 标签、HTML 文件结构、HTML 元素、HTML 属性、HTML 样式、HTML 链接、HTML 排错。

知识点

  • HTML 标签
  • HTML 文件结构
  • HTML 元素
  • HTML 属性
  • HTML 样式
  • HTML 链接
  • HTML 排错

什么是 HTML

HTML(Hyper Text Markup Language)中文译为“超文本标记语言”，主要是通过 html 标记对网页中的文本，图片，声音等内容进行描述。超文本标记语言的结构包括“头”部分（英语：Head ）、和“主体”部分（英语：Body ），其中“头”部分提供关于网页的信息，“主体”部分提供网页的具体内容。

HTML 标签

超文本标记语言（英语简称：HTML ）标记标签通常被称为 HTML 标签，HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML 标签的大小写无关的，例如“主体”跟表示的意思是一样的，推荐使用小写。

双标签（双标记）

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名></标记名>
常见的双标签有：
<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<h2></h2>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>
<ol></ol>
<dt></dt>
<dd></dd>
<mark></mark>
<iframe></iframe>

单标签（单标记）

单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：
<标记名/>
常见的单标签有：
<br/> <!--换行-->
<hr /> <!--水平分隔线-->
<meta />
<img />

标签的关系

  • 嵌套关系
    <head>
    <title>
    </title>
    </head>
  • 并列关系
    <head></head>
    <body></body>

HTML 文件结构

一个 HTML 文件是有其固定的结构的:
<html>
<head>...</head>
<body>...</body>
</html>

  • <html>称为根标记，用于告知浏览器其自身是一个 HTML 文档， <html>标记标志着 HTML 文档的开始，</html>标记标志着 HTML 文档的结束，在他们之间的是文档的头部和主体内容。
  • <head>标记用于定义 HTML 文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记。一个 HTML 文档只能含有一对 <head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
  • <title>标记用于定义 HTML 页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个 HTML 文档只能含有一对 <title> </title>标记，<title> </title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：
    <title>网页名称</title>
  • <body>标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于 <body>标记内， <body>标记中的信息才是最终展示给用户看的。一个 HTML 文档只能含有一对 <body>标记，且 <body>标记必须在 <html>标记内，位于 <head>头部标记之后。

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
例子：
<p>I Love You</p>
注：这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签<p>，以及一个结束标签 </p>。元素内容是：I Love You。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=”value”。属性总是在 HTML 元素的开始标签中规定。
例子：
<a href="https://www.shiyanlou.com">实验楼</a>

HTML 样式

通过设置 style 属性来更改 HTML 的样式。

HTML 样式实例 - 背景颜色

<html>
<body>
<p style="background-color:red">实验楼</p>
</body>
</html>

HTML 链接

有两种使用 标签的方式：

  • 通过使用 href 属性 - 创建指向另一个文档的链接
  • 通过使用 name 属性 - 创建文档内的书签

有两种使用 标签的方式：

注：点击“查看冬天”页面会跳转到冬。

target 属性：用于指定链接页面的打开方式，其取值有 _self 和 _blank 两种，其中 _self 为默认值，_blank 为在新窗口中打开方式。
下面的例子会在新窗口打开文档：
<a href="https://www.zxyaily.top/" target="_blank">zxyaily</a>
注：target 默认属性为：_self，使得目标文档载入并显示在相同的框架或者窗口中作为源文档。

HTML 排错

赏

zxyaily