当前位置：
  1. 首页
  2. html
  3. 正文
本文介绍: HTML标签

文章目录

前言

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

        HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，使用标签来描述网页。HTML文档也叫做web页面。

一、HTML简介

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

 实例解析：

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

        对于中文网页需要使用 <meta charset=”utf-8″> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset=”gbk“>。目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 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：（链接窗口的打开方式）

9.注释标签

代码如下（示例）：

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

解析：

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

10.特殊字符

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

运行结果：

​

解析：

<strong> 和 <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 ……
 

  行内块元素

特点：

         1.兼具块元素和行内元素特点

         2.不会独占一行，可自定义宽高

         3.默认排序方式为从左到右

  块元素（block element） 

特点：

        1.能够识别宽高

        2.margin 和 padding 的上下左右均对其有效

        3.独占一行

        4.多个块级元素标签写在一起，默认排序方式为从上至下

常用块元素：div h1-h6 p header footer nav……

显示所有内容
上一篇 学习篇 html笔记
下一篇 html css js图片无缝衔接跑马灯效果

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。