前端三剑客之HTML初体验

最新推荐文章于 2025-07-14 14:05:44 发布

原创最新推荐文章于 2025-07-14 14:05:44 发布 · 688 阅读

1 ·

CC 4.0 BY-SA版权

Web前端知识体系专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML的基本结构和常用标签，包括文档类型声明、根元素、元数据、标题、段落、链接、图像、水平线、注释等，以及如何使用CSS进行文本格式化和页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们先从一段简单代码实例出发，观察一下html的结构究竟是怎么样的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
</head>

<body>
 <h1>我的第一个标题</h1>
 <p>我的第一个段落。</p>
 </body>
</html>

!DOCTYPE html ：声明为html5文档
html ：元素是html页面的根元素
head：元素包含文档的元数据，如utf-8代表显示中文编码
title：元素描述文档的标题
body：包含可见的页面内容
h1：元素定义了一个大标题
p：元素定义了一个段落

那么究竟什么是html呢？

事实上，html是一种超文本标记语言，它并不是一种编程语言。标记语言是一套标记标签，html使用标记标签来描述网页，HTML 文档包含了HTML 标签及文本内容，同时HTML文档也叫做 web 页面

html标签

html标签通常为由尖括号包围起来的关键词，如<html>
html标签通常是成对存在的，如<b> </b>
标签对应的第一个是开始标签，对应的第二个是结束标签

web浏览器

web浏览器是用于读取HTML文件,并将其作为网页显示，浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

html网页结构

在这里插入图片描述

<!DOCTYPE> 声明

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

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html> 

<!DOCTYPE HTML> 

<!doctype html> 

<!Doctype Html>

html编辑器推荐

Notepad++：下载地址
Sublime Text：下载地址
VS Code：下载地址

html标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

html段落

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是段落</title>
</head>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

</body>
</html>

html链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个链接</title>
</head>
<body>
<a href="http://www.baidu.com">这是一个链接使用了 href 属性</a>
</body>
</html>

html图像

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是引用一个图像地址</title>
</head>
<body>

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

</body>
</html>

html水平线

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是水平线</title>
</head>
<body>
	<p>hr 标签定义水平线：</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
</body>
</html>

html注释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是水平线</title>
</head>
<body>
	<p>hr 标签定义水平线：</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
</body>
</html>

HTML 如何查看源代码

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

html文本格式化

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>格式化操作</title> 
</head> 
<body>
<b>加粗文本</b>  <br><br>
<i>斜体文本</i>    <br><br>
<code>电脑自动输出</code>  <br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>

html文本格式化标签

在这里插入图片描述

HTML “计算机输出” 标签

在这里插入图片描述

HTML 引文, 引用, 及标签定义

在这里插入图片描述

html中的title元素

定义了不同文档的标题。
在 HTML/XHTML 文档中是必须的。
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

html中的base元素

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

<head>
<base href="http://www.baidu.com/images/" target="_blank">
</head>

html中的link元素

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

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

html中的style标签

定义了HTML文档的样式文件引用地址.你也可以直接添加样式来渲染 HTML 文档

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

html中的meta数据

meta标签描述了一些基本的元数据。meta 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。meta 一般放置于 head 区域

//为搜素引擎定义关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
//为网页定义描述内容
<meta name="description" content="web前端教程">
//定义网页作者
<meta name="author" content="ljz">
//每10秒钟刷新当前页面:
<meta http-equiv="refresh" content="10">

html中的script元素

标签用于加载脚本文件，如： JavaScript。

html中的head元素

在这里插入图片描述

html的样式css

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.CSS 可以通过以下方式添加到HTML中

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 head 区域使用style 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引入css文件

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

html的样式实例之背景颜色

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>背景颜色(runoob.com)</title> 
</head>
<body style="background-color:white;">
<h2 style="background-color:blue;">这是一个标题</h2>
<p style="background-color:red;">这是一个段落。</p>
</body>
</html>

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>设置字体颜色(runoob.com)</title> 
</head>
<body>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:32px;">一个段落。</p>
</body>
</html>

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文本对齐设置(runoob.com)</title> 
</head>
<body>

<h1 style="text-align:left;">居左对齐的标题</h1>
<p>这是一个段落。</p>

</body>
</html>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在head 部分通过 style标签定义内部样式表

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 图像- 图像标签（ img）和源属性（Src）

在 HTML 中，图像由img 标签定义。img 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 ul 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 ol 标签。每个列表项始于 li 标签。列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML中的 div元素

HTML div 元素是块级元素，它可用于组合其他 HTML 元素的容器。
div 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，div 元素可用于对大的内容块设置样式属性。div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。