HTML基础（概念、历史、h1~h6、p、hr、特殊符号、有序/无序/定义列表、img、a、锚点）_p,br,hr,h1-h6,无序列表(ul li),img,a,audio,video,div,sp-优快云博客

本文链接：https://blog.youkuaiyun.com/Allisa_yan/article/details/88410224

这篇博客介绍了HTML的基础知识，包括HTML的概念、历史、特点和基础语法。重点讲解了HTML标签的使用，如<h1>到<h6>、<p>、<hr>、特殊符号、列表和<a>、<img>等标签，还提到了DOCTYPE文档类型和<meta>标签在解决乱码问题上的作用。

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

HTML基础

概念

HTML（Hypertext Makeup Language），超文本标记语言。

历史

HTML特点

HTML不需要编译，直接由浏览器执行；
HTML文件是一个文本文件；
HTML文件必须由html/htm为文件名后缀；
HTML不区分大小写；

基础语法

<head>标签内的内容，是不会在网页中显示的，主要用于定义文档的头部，它是所有头部元素的容器。

<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

<title> 元素可定义文档的标题，内容不是现实在页面文档中，而是在网页的标签中显示。

html标签 --- <标签名> </标签名>

<>括号括起来；
一般成对出现，即开始标签、结束标签；
单标签（即没有结束标签）：<hr />

html元素

--- 从开始标签直到结束标签之间，所有的代码都称为“html元素”

html属性 --- <标签名属性名1=“值” 属性名2=“值” ...> </标签名>
html注释 ---
DOCTYPE文档类型

<! DOCTYPE html> //不是html标签，必须放在文档第一行

常用标签

<!DOCTYPE html>
<html>
<head>
<title>文字和段落标签</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
     <!--标题 标签-->
     <h1>什么是HTML</h1>
     <h2>什么是HTML</h2>
     <h3>什么是HTML</h3>
     <h4>什么是HTML</h4>
     <h5>什么是HTML</h5>
     <h6>什么是HTML</h6>

     <!--段落 标签-->
     <P align="left">左对齐</P>
     <P align="center">居中</P> 
     <P align="right">右对齐</P> 
     <P align="justify">对行进行伸展，这样每行都可以有相等的长度</P> 

     <!--换行 标签，标签后的另换一行展示,每行之间没有空格-->
     <p>第一行<br/>
        第二行<br/>
        第三行<br/> </p>

     <!--空格 标签 &nbsp; 直接空格不起作用-->
	 <P> &nbsp;&nbsp;&nbsp;&nbsp;HTML 指的是超文本标记语言 (Hyper Text Markup Language),<br/>
	    HTML 不是一种编程语言，而是一种标记语言 (markup language),<br/>
	    标记语言是一套标记标签 (markup tag),</P> 

     <!--预格式标签 pre，网页展示完全按照代码展示格式-->
	 <pre>
	          HTML 指的是超文本标记语言 (Hyper Text Markup Language),
	    HTML 不是一种编程语言，而是一种标记语言 (markup language),
	    标记语言是一套标记标签 (markup tag),
	 </pre> 

     <!--换行 标签，单标签-->
	 <hr width="200" color="red" align="center" noshade="false" />

     <!--修饰标签：斜体i/em、加粗b/strong、下标sub、上标sup-->
     <p><i>HTML</i> 标记标签通常被称为<em> HTML</em> 标签</p> 
     <p>HTML 标签是由<b>尖括号</b>包围的<strong>关键词</strong></p>     
     <p>开始和结束标签也被称为<sup>开放标签</sup>和<sub>闭合标签</sub></p>   
     
     <!--特殊符号-->
     <p>标签是成对出现，比如&lt;b&gt;和&lt;/b&gt;</p>
     <p>Copyright &copy;2016 Reserved</p>

</body>
</html>

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题</title>
</head>
<body>
	<h1>无序列表：</h1>
	<ul type="disc"><!--type值：disc(默认)-圆点、square-正方形、circle-空心圆-->
		<li>HTML 指的是超文本标记语言 (Hyper Text Markup Language)</li>
		<li>HTML 不是一种编程语言，而是一种标记语言 (markup language)</li>
		<li>标记语言是一套标记标签 (markup tag)</li>
		<li>HTML 使用标记标签来描述网页</li>
	</ul>

	<hr/>
	<h1>有序列表：</h1>
	<ol type="1">
	<!--type值：1(数字)、a(小写字母)、A(大写字母)、i(小写罗马数字)、I(大写罗马数字)-->
		<li>HTML 标记标签通常被称为 HTML 标签</li>
		<li>HTML 标签是由尖括号包围的关键词</li>
		<li>HTML 标签通常是成对出</li>
		<li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li>
    </ol>

    <hr/>
    <h1>定义列表：</h1>
    <!--dt和dd是同级标签，dt：定义列表项，dd：列表项描述-->
    <dl>
        <dt>列表1标题</dt>
		<dd>HTML是用来描述网页的一种语言。</dd>
		<dd>HTML超文本标记(Hyper Text Markup Language)。</dd>
	    <dt>列表2标题</dt>
		<dd>HTML标记标签通常被称为HTML 标签 </dd>
	</dl> 
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>图像和超链接</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>	
	<!--图片标签，src(必须)-url，alt-图片代替文字，height-高(数值/百分比)，width-宽-->
    <!-- 绝对路径-->
    <img src="E:/HTML/图像与超链接/img/html.jpg" width="50%" height="80%"/><br/>
    <!-- 相对路径-->
    <img src="img/a.jpg" alt="html基础课程" width="50px" height="80"/>

    <!--超链接标签，href-url(内部链接、外部链接)，target-目标窗口(_self、_blank、_top、_parent)，title-链接提示文字，name-链接命名-->
    <a href="同一级别html文件.html" targer="_self">当前页面，跳转同级其他页面</a>
    <a href="http://www.baidu.com" targer="_blank"><p>创建新窗口，跳外部网站</p></a>
    <a href="#" title="链接提示信息">空链接</a>

    <!--锚功能:创建目录，实现单个页面内不同位置的跳转,详解见《锚点定位方法与总结》-->
    <a href="#锚名1">目录1</a>
    <a href="#锚名2">目录2</a>
    <a href="#锚名3">目录3</a>

    <a name="锚名1"></a><p>内容</p>
    <a name="锚名2">HTML </a>

</body>
</html>

详细请见《mailto的使用方法》

文件下载：<a href="img.rar">文件下载</a> （url为压缩文件的路径）

---更多标签介绍参考《HTML标记大全参考手册》、《HTML属性标签大全》

【注意】：

1、当网页显示出现乱码时，在<head></head>标签之间添加<meta>？？

<!DOCTYPE html>
<html>

<!-- 网页头部内容 -->
<head>
<title>标题</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
</head>

<!-- 网页主体内容 -->  
<body>
</body>
</html>

http-equiv：说明 文档类型
content：说明 文档内容是html文件
charset：说明 编码形式

--- meta标签，详解见《meta教程》

2、虽然直接在body中写入文字，网页也能展示出来，但是html语言是一个标记语言，所以还是希望通过标记来生成。