HTML基础

最新推荐文章于 2025-07-29 19:59:00 发布

原创最新推荐文章于 2025-07-29 19:59:00 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

本文详细介绍了HTML的基础结构，包括行内元素与块级元素的区别，普通标签与特殊标签的用法。同时，讲解了标题、段落、换行、水平线、字体样式、注释、特殊符号、图像和超链接等常用标签的使用方法及示例，为初学者提供了全面的HTML入门指南。

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

HTML的基本结构和基本常识

行内元素和块级元素：

元素：每个完整的标签都是一个元素

行内元素：其他元素可以排在他后面的元素，如：<strong>，<em>

块级元素：独占一行的元素，如：<h1>,<p>

普通标签和特殊标签：

普通标签：有开始标签和结束标签，是一个完整的元素，如<h1></h1>

特殊标签：只有一个标签，是一个完整的元素，如：<br/>，<hr/>

1. 标题标签

标签名：<h1> ~ <h6>

标签类型：行内元素

标签作用：用来表示一段文字的标题或主题

样式代码：

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

标签样式：所有标题字体加粗，<h1>最大，<h6>最小

示例代码：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

示例代码效果：

2. 段落标签

标签名：<p>

标签类型：行内元素

标签作用：表示一段文字或内从容

样式代码：

<p></p>

标签样式：如效果图

示例代码：

<p>这是一段话</p>
<p>这是另一段话</p>

示例代码效果：

3. 换行标签

标签名：<br/>

标签类型：特殊标签，没有结束标签

标签作用：强制换行显示内容

样式代码：

<br/>

标签样式：如效果图

示例代码：

<p>
    《出塞》<br/>
    秦时明月汉时关，万里长征人未还。<br/>
    但使龙城飞将在，不教胡马度阴山。<br/>
<p>

示例代码效果：

4. 水平线标签

标签名：<hr/>

标签类型：特殊标签，没有结束标签

标签作用：用来分割内容

样式代码：

<hr/>

标签样式：在页面显示一条横渡整个页面的水平线

示例代码：

		<p>
		    《出塞》<br/>
			<hr/>
		    秦时明月汉时关，万里长征人未还。<br/>
		    但使龙城飞将在，不教胡马度阴山。<br/>
		<p>

示例代码效果：

5. 字体样式标签

5.1 粗体字标签

标签名：<strong>

标签类型：块级元素

标签作用：使包裹字体加粗显示

样式代码：

<strong></strong>

5.2 斜体字标签

标签名：<em>

标签类型：块级元素

标签作用：使包裹字体倾斜显示

样式代码：

<em></em>

示例代码（标签也可以互相套着使用）：

        <strong>这是粗体</strong><br/>
		<em>这是斜体</em><br/>
		<em><strong>12</strong></em><br/>

示例代码效果：

6. 注释格式

标签名：

标签作用：对代码进行注释，方便阅读

样式代码：

<!-- 注释内容 -->

标签样式：代码中可见，用户不可见

示例代码：

		<p>
			<!-- 这是一首古诗 -->
		    《出塞》<br/>
			<hr/>
		    秦时明月汉时关，万里长征人未还。<br/>
		    但使龙城飞将在，不教胡马度阴山。<br/>
		<p>

示例代码效果：

7. 特殊符号

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

8. 图像标签

标签名：<img/>

标签类型：块级元素，特殊标签，无结束标签

标签作用：在页面中显示一个图片

样式代码：

<img src="图片地址" alt="图像的代替文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度"/>

标签属性介绍：

src	图片地址
alt	图片地址失效图像的代替文字
title	鼠标悬停提示文字
width	图像宽度
height	图像高度

示例代码：

<img src="img/QQ头像.jpg" alt="QQ头像" title="QQ头像" width="60px" height="60px" /><br/><br/>
<!-- 图像src地址失效后 -->
<img src="##" alt="QQ头像" title="QQ头像地址" width="60px" height="60px" />

示例代码效果：

9. 超链接标签

标签名：<a>

标签类型：块级元素

9.1 普通超链接

标签作用：通过超链接查看页面或不同网站

样式代码：

<a href="连接地址" target="目标打开窗口">连接文本或图像</a>

9.2 锚链接

标签作用：定位到目标页面内容中的某个具体位置

样式代码：

<！-- 被链接的位置 -->
<a name="marker">目标位置</a>

<！-- 连接写法 -->
<a href="#marker">连接文本或图像</a>

9.3 功能性链接

标签作用：启用本机自带的某个应用程序

样式代码：

<a href="要打开的本机软件">连接文本或图像</a>

打开本机软件的写法自行搜索，比较繁多，不一一介绍