HTML超文本标记语言

偷偷卷🧐

HTML简介

HTML 是用来描述网页的一种语言,指的是超文本标记语言 (Hyper Text Markup Language)

HTML标签

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

HTML 标签对大小写不敏感,大写标签和小写标签等效,但推荐使用小写。

且HTML标签通常成对存在,出现的第一个标签是开始标签,第二个标签是结束标签,结束标签内有’/‘,比如<b> 和 </b>

HTML文档 = 网页

HTML文档也被称作网页,包含HTML标签和纯文本。

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。

HTML基础标签

网页标题

通过<title>标签定义,将会显示在浏览器导航栏处

1
<title>这是导航栏标题</title>

注释

浏览器会忽略注释,也不会显示它们。

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

标题

通过<h1> - <h6> 等标签进行定义,六个数字1-6对应从大到小的六种标题大小。

实例:

1
2
3
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

分割线

通过<hr /> 标签进行定义的。

段落

段落通过 <p> 标签进行定义,<br>标签定义换行。

浏览器会自动地在段落的前后添加空行。但对于在一对标签内的文字,无论编写时有无换行,只要不添加<br>标签,最终效果都在同一行。

实例:

1
2
<p>This is a paragraph.</p>
<p>This is a paragraph.<br>This is another paragraph.</p>

<br>标签没有结束标签

链接

通过 <a> 标签进行定义的。

双引号内为跳转链接,一对标签中间的文本为页面展示文本。

1
<a href="https://shmodifier.github.io/">我的博客</a>

图像

通过 <img> 标签进行定义的。

1
<img src="图片文件路径" width="[图片宽]" height="[图片高]" />

HTML属性

属性在 HTML 元素的开始标签中规定,供了有关 HTML 元素的更多的信息。

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么必须使用单引号。

实例:

1
<h1 align="center"> 居中排列标题

处理文本

格式化标签

在html代码中,可单独使用也可和其他标签同时使用

标签 描述
<b>或<strong> 定义粗体
<em>或<i> 定义斜体
<samall> 定义小号字
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义下划线
<del> 定义删除线

eg:

1
2
3
4
5
6
7
8
9
<h1>输出演示</h1>
<hr>

<p><ins>下划线演示</ins></p>
<p>上下标演示段落<sup>下标演示</sup></p>
<p>上下标演示段落<sub>上标演示</sub></p>
<strong><em>粗体斜体叠加演示</em></strong>
<br>
<small>小字体演示</small>

HTML链接

使用标签 <a>来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。

1
<a href="[url]">链接文本</a>

href 属性描述了链接的目标。.

target属性

使用 target 属性,可以定义被链接的文档在何处显示。

_blank表示在新窗口打开文档

1
<a href="[url]" target="_blank">链接文本</a>

id属性

id 属性可用于创建一个 HTML 文档书签。

1
2
3
4
5
6
7
8
<h1>输出演示</h1>
<hr>
<a id="tips">标签演示</a>
<br>
<a href="#tips">跳转到标签演示</a>
<br>
<a href="[网页地址]/#tips">跳转到标签演示</a>
<!--连接到外部网页的标签-->

头部<head>

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<title>

<title> 标签定义了不同文档的标题。<title> 在 HTML/XHTML 文档中是必需的。

显示在收藏夹中的标题、显示在搜索引擎结果页面的标题以及浏览器工具栏的标题。

<base>

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。

eg:

1
2
3
<head>
<base href="[url]" target="_blank">
</head>

<link> 标签定义了文档与外部资源之间的关系,通常用于链接到样式表。

<style>

<style> 标签定义了HTML文档的样式文件引用地址.

<meta>

<meta> 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据

1
2
3
4
5
6
7
8
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

HTML超文本标记语言
https://shmodifier.github.io/2023/01/15/HTML超文本标记语言/
作者
Modifier
发布于
2023年1月15日
许可协议