HTML基本标签

文章 目录

前言
一、HTML简介
二、HTML标签介绍
- 1.标题标签
- 2.段落标签
- 3.换行标签
- 4.hr标签
- 5.span标签
- 6.div标签
- 7.img标签
- 8.超链接标签
- 9.注释标签
- 10.特殊字符
- 11.格式化标签
- 12.su p上标和su b 下标
- 13.pre预格式化标签
三、行内元素、行内块元素和块级元素

前言

学习HTML之前，我们首先需要了解什么是HTML:

HTML：超文本标记语言（英语：HyperTe x t Ma rk up Languag e，简称：HTML）是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，使用标签来描述网页。HTML文档也叫做web 页面。

一、HTML简介

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head>
<meta charset="utf-8">
<title></title>
</head>
<body>
 
</body>
</html>

实例 解析：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta char set=”utf-8″> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

注意：d oc type 声明是不区分大小写的，用来告知web 浏览器页面使用了那种HTML版本。

对于中文网页需要使用 <meta ch ar set=”utf-8″> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <m eta ch ar set=”gb k“>。目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。

二、HTML标签介绍

1.标题标签

代码如下（示例）：

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

运行 结果：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

解析：

标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行。

标题标签是块元素

2.段落标签

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
		我是一段很长的话，
	</p>
	<p>
		我是一段很长的话，
	</p>
	<p>
		我是一段很长的话，
	</p>
</body>
</html>

运行 结果：

我是一段很长的话，我是一段很长的话，我是一段很长的话，我是一段很长的话，我是一段很长的话，我是一段很长的话，我是一段很长的话，我是一段很长的话，我是一段很长的话，我是一段很长的话，我是一段很长的话，我是一段很长的话，我是一段很长的话，

我是一段很长的话，

我是一段很长的话，

解析：

段落标签p,里面的内容是以段落的形式体现的，如果一个段落的文字太多，那么它会自适应浏览器窗口，一行显示不下，则会换行；如上面的运行结果。

它代表着一个自然段。

段落标签是块元素

3. 换行标签

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	第一行<br/>
	第二行<br/>
	第三行<br/>
</body>
</html>

运行结果：

第一行
第二行
第三行

解析：

换行标签br的作用是，强制换行，如上代码如果不加br标签。那么它就会在一行上显示 i。br是单标签。

4.hr标签

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	hr {
		margin: 50px;
	}
		div>hr {
			height: 20px;
			background-color:red;
		}
	</style>
</head>
<body>

	<hr>

	<div>
		<hr>
	</div>

</body>
</html>

运行结果：

解析：

hr标签：给页面添加一个分割线

hr标签，可以添加样式，如上图所示

5. span标签

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<span>1234</span>
	<span>5678</span>
</body>
</html>

运行结果：

解析：

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

<span>标签不同于<p>标签是一个行内元素（不独占一行）

6.div标签

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>这是一个div</div>
	<div>这是一个div</div>
	<div>
		<p>这是一个div</p>
	</div>
	<p>
		<div>z5343</div>
	</p>
</body>
</html>

运行结果：

解析：

<div>标签可以看出是一个盒子容器，这里面可以放别的标签

<div>标签是一个块元素

如上图控制台所示（打开控制台的方式：F12）：<div>标签里面可以包含<p>标签，<p>标签，里面不可以放<div>标签

7.img标签

代码如下（示例）：

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

	<img src="smiley-2.gif" alt="Smiley face" width="100" height="100" 
    title="face">

</body>
</html>

运行结果：

解析：

<img src=”图片的路径” alt=”图片未加载成功时的提示” title=”鼠标悬浮时提示信息” width=”宽” height=”高(宽高两个属性只用一个会自动等比缩放)”>

src的路径分为：网上的图片路径和本地的图片路径

8.超链接标签

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>

解析：

作用：点击文字跳到链接的地方

a是行内元素

href：规定链接的目标URL

target：（链接窗口的打开方式）

_blank：新窗口打开。

_parent：在父窗口中打开链接。

_self：默认，当前页面跳转。

_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

9.注释标签

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 这是一行注释 -->
</body>
</html>

解析：

<!– –>
1. 注释只是为了提醒程序猿，这个代码是干啥的，并不参与执行，不要随便乱写注释，注释能够被外面的有心人看到!!!
2. 注释可以直接通过 ctrl + / 来切换注释
3. 注释不能嵌套

10.特殊字符

空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果)   &nbsp;
>   &gt;
<   &lt;
&   &amp;
¥   &yen;

11.格式化标签

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <ins>下划线</ins>
    <u>下划线</u>
</body>
</html>

运行结果：

解析：

<str ong> 和 <b> 都是加粗文本，但是<strong>的语义更加强列

12.sup上标和sub下标

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>
		x<sup>2</sup>
	</p>
	<p>
		log<sub>2</sub>10
	</p>
</body>
</html>

运行结果：

13. pre预格式化标签

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<pre>
		我是一个 有样式
		的文字
	</pre>
</body>
</html>

运行结果：

解析：

可以看出上面的代码和运行结果显示<pre>标签保留了文本中的空格和换行

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

三、行内元素、行内块元素和块级元素

HTML 可以将元素分类方式分为行内元素、块级元素和行内块元素.

使用display 属性能够将三者任意转换:


display:inline;// 转换为行内元素
display:block;// 转换为块级元素
display:inline-block// 转换为行内块元素

行内元素（inline element）

特点：

1.不会独占一行，它是自左向右排列，一行排满再换行

2.行内元素的宽和高，默认是被内容撑开的

3.对 margin 仅设置左右方向有效，上下无效，padding 设置上下左右都有效

4.不会自动进行换行

常用行内元素：span em strong a i ……