HTML基本标签

文章目录

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

---

前言

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

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

一、HTML简介

 实例解析：

•  声明为 HTML5 文档
•  元素是 HTML 页面的根元素
•  元素包含了文档的元（meta）数据，如  定义网页编码格式为 utf-8。

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

  我是一段很长的话，

  我是一段很长的话，

运行结果：

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

我是一段很长的话，

我是一段很长的话，

解析：

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

它代表着一个自然段。

段落标签是块元素

---

3. 换行标签

 代码如下（示例）：

	
	


	第一行

	第二行

	第三行

运行结果：

第一行
第二行
第三行

解析：

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

4.hr标签

代码如下（示例）：

运行结果：

​

解析：

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

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

5. span标签

 代码如下（示例）：

	
	


	1234
	5678

运行结果：

​

解析 ：

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

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

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

标签不同于

标签是一个行内元素（不独占一行）

6.div标签

 代码如下（示例）：

	
	


	
这是一个div
	
这是一个div
	

		
这是一个div
	
	

		
z5343
	

运行结果：

​

解析：

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

标签是一个块元素

如上图控制台所示（打开控制台的方式：F12）：

标签里面可以包含

标签，

标签，里面不可以放

标签

7.img标签

代码如下（示例）：

运行结果：

​

解析：

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

8.超链接标签

代码如下（示例）：

	
	


	百度

解析：

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

a是行内元素

href：规定链接的目标URL

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

• _blank：新窗口打开。
• _parent：在父窗口中打开链接。
• _self：默认，当前页面跳转。
• _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

9.注释标签

代码如下（示例）：

解析：

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

10.特殊字符

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

​

11.格式化标签

代码如下（示例）：

	
	


	加粗
    加粗
    倾斜
    倾斜
    删除线
    下划线
    下划线

运行结果：

​

解析：

和 都是加粗文本，但是的语义更加强列

12.sup上标和sub下标

代码如下（示例）：

	
	


	

		x2
	
	

		log210
	

运行结果 ：

13. 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......