HTML: 基础知识

参考：菜鸟教程

什么是HTML?

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

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

THML实例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
  
<h1>我的第一个标题</h1>
  
<p>我的第一个段落。</p>
  
</body>
</html>

　　

 

 

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

HTML 标签

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

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML 网页结构

下面是一个可视化的HTML页面结构：

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

?
1
2
3
4
5
6
7
<!DOCTYPE html>
 
<!DOCTYPE HTML>
 
<!doctype html>
 
<!Doctype Html>

　　

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK

HTML 编辑器推荐

使用vs code

1. 在 VS Code 安装完成后，选择" 文件(F)->新建文件(N) "，在新建的文件中输入代码

2. 使用浏览器运行即可

HTML 基础

HTML<head>

<head>元素包含了所有的头部标签元素。

在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

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

<title>元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题
?
1
<head><br><title>文档标题</title><br></head>

<base>元素

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

?
1
2
3
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<link>元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

?
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style>元素

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

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

?
1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

<meta>元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

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

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:

?
1
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

?
1
<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

?
1
<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

?
1
<meta http-equiv="refresh" content="30">

支持中文字体：

?
1
<meta charset="utf-8">

<script>元素

<script>标签用于加载脚本文件，如： JavaScript

 

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的：（数字代表第几级标题）

?
1
2
3
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

　　

HTML 段落

HTML 段落是通过标签 <p> 来定义的，段落可在各级标题之下：

?
1
2
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

　　

HTML 链接

HTML 链接是通过标签 <a> 来定义：注意：链接地址在标签内部

?
1
<a href="https://www.runoob.com">这是一个链接</a>

提示:在 href 属性中指定链接的地址。

注意：链接地址在标签内部

更多属性：

 

属性值描述
downloadNew filename 指定下载链接
href URL 规定链接的目标 URL。
hreflang language_code 规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediaNew media_query 规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag		 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
target _blank
_parent
_self
_top
framename

规定在何处打开目标 URL。仅在 href 属性存在时使用。

  • _blank：新窗口打开。
  • _parent：在父窗口中打开链接。
  • _self：默认，当前页面跳转。
  • _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
typeNew MIME_type 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。
注：MIME = Multipurpose Internet Mail Extensions。

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

?
1
<img src="/images/logo.png" width="258" height="39" />

　　

HTML 元素/空元素

<html><h><p></p>等都属于元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 属性

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

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

HTML 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

?
1
2
3
4
5
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

HTML 注释

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

注释写法如下：

注释:<!--注释内容-->。

HTML 提示 - 如何查看源代码

你是否看过一些网页然后惊叹它是如何实现的。

如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

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

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：

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

　　

HTML 输出- 使用提醒

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

 

HTML 文本格式化标签

标签描述
<b> 定义粗体文本  <p>文本- <b>加粗文本</b>。</p>
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

HTML "计算机输出" 标签

标签描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本

HTML 引文, 引用, 及标签定义（自行有特殊格式）

标签描述
<abbr> 定义缩写  The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
<address> 定义地址
<bdo> 定义文字方向   <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
<blockquote> 定义长的引用    <blockquote cite="http://www.worldwildlife.org/who/index.html">
<q> 定义短的引用语(双引号)  <q>Build a future where people live in harmony with nature.</q>
<cite> 定义引用、引证
<dfn> 定义一个定义项目。

 

 

 

posted @   Gentle_Jan  阅读(125)  评论(0)  编辑  收藏  举报
相关博文：
· HTML：图像
· HTML：表格和列表
· 【】HTML 简介
· HTML（HyperText Markup Language）
· 简单了解HTML
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示