详细整理!!html5常用标签

时间:2024-10-01 17:18:31

文章目录

  • 前言
  • 一、HTML简介
    • 1.HTML文件结构
    • 2.各标签意义
  • 二、HTML标签介绍
    • 1.标题标签
    • 2.段落标签
    • 3. 换行标签
    • 4.hr标签
    • 5. span标签
    • 6.div标签
    • 7.img标签
    • 8.超链接标签
    • 9.注释标签
    • 10.空格
    • 11.格式化标签
    • 12.sup上标和sub下标
    • 13. pre预格式化标签
    • 14.table 表格标签
      • table 标签基础内容
      • 合并单元格
    • 15.列表标签
  • 三、行内元素、行内块元素和块级元素
    • 1. display 属性
      • 块级元素转行内元素示例
      • 行内元素转块级元素示例
    • 2.什么是行内元素、块级元素和行内块元素?
      • 行内元素(inline element)
      • 行内块元素
      • 块元素(block element)

前言

在学习 HTM L之前,首先了解什么是 HTML:

HTML:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。它不是一种编程语言,而是一种标记语言,使用标签来描述网页。HTML文档也叫做web页面。
HTML代码是由标签构成的,标签名放到“< >”中。
大部分标签都是成对出现,例如:以<body>为开始标签,以</body>为结束标签。少数标签只有开始标签的被称为“单标签”。

一、HTML简介

1.HTML文件结构

在这里插入图片描述

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

2.各标签意义

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

二、HTML标签介绍

1.标题标签

标题标签的默认样式是 自动加粗 的,字体一级标题最大,六级标题最小,每个标题标签独占一行;
标题标签是 块元素

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

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试 HTML</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2> 
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
</html>

页面效果:
在这里插入图片描述

2.段落标签

段落标签p,里面的内容是以段落的形式体现的,如果一个段落的文字太多,那么它会自适应浏览器窗口,一行显示不下,则会换行;
它代表着一个自然段;
段落标签是 块元素

<p></p>

代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <p>
        注意:doctype声明是不区分大小写的,用来告知web浏览器页面使用了那种HTML版本。
        对于中文网页需要使用 charset="utf-8" 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 charset="gbk" 。
        目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8。
    </p>

    <p>
        这是一个注意事项。
    </p>

    <p>
        这是一个注意事项。
    </p>
</body>

</html>

页面展示:
在这里插入图片描述

3. 换行标签

换行标签br的作用是,强制换行。br 是 单标签

<br/>

代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    第一行<br/>
	第二行<br/>
	第三行<br/>
</body>

</html>

页面展示:
在这里插入图片描述

4.hr标签

hr标签:给页面添加一个分割线
hr标签,可以添加样式

<hr>

代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>
<style>
    div>hr {
        height: 20px;
        background-color: red;
    }
</style>

<body>
    第一行<br />
    <hr>
    <div>
        第二行<br />
        <hr>
    </div>
    第三行
</body>

</html>

页面展示:

在这里插入图片描述

5. span标签

<span></span>

span 用于对文档中的行内元素进行组合;
span 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 span 应用样式,那么span 元素中的文本与其他文本不会任何视觉上的差异;
span 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式;
span 标签不同于p 标签是一个行内元素(不独占一行)

代码示例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <span>1234</span>
	<span>5678</span>
</body>

</html>

页面效果:
在这里插入图片描述

6.div标签

<div></div>

div 标签可以看出是一个盒子容器,这里面可以放别的标签
div 标签是一个块元素

页面效果:

在这里插入图片描述

在这里插入图片描述

如上图控制台所示(打开控制台的方式:F12):div 标签里面可以包含 p 标签, p 标签,里面不可以放div 标签

7.img标签

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

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

8.超链接标签

<a></a>

代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
</body>

</html>

作用:点击文字跳到链接的地方
a是行内元素
href:规定链接的目标URL
target:(链接窗口的打开方式)
_blank:新窗口打开。
_parent:在父窗口中打开链接。
_self:默认,当前页面跳转。
_top:在当前窗体打开链接,并替换当前的整个窗体(框架页)。

9.注释标签

<!-- 这是一行注释 -->

10.空格

html中默认是不显示空格的,也就是说通过空格键加了空格也没有多个空格的效果,加多少个都是显示一个空格效果,需要特殊字符才能显示出空格效果。

html 的几种空格形式:

&nbsp;        
 
它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了&nbsp;,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,该空格占据宽度受字体影响明显而强烈。
 
&ensp;         
 
它叫“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,就是其 占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。
 
&emsp;        
 
它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性:透明的,此空格也有个相当稳健的特性,就是其 占据的宽度正好是1个中文宽度,而且基本上不受字体影响。
 
&thinsp;         
 
它叫窄空格,全称是Thin Space。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。它是em之六分之一宽。
 
&zwnj; 
 
它叫零宽不连字,全称是Zero Width Non Joiner,简称“ZWNJ”,是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”(zero width non-joiner,U+200C),HTML字符值引用为: &#8204;
 
&zwj;
 
它叫零宽连字,全称是Zero Width Joiner,简称“ZWJ”,是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: &#8205; &zwj;)。

11.格式化标签

代码示例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</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>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <p>
        x<sup>2</sup>
    </p>
    <p>
        log<sub>2</sub>10
    </p>

</body>

</html>

页面展示:

在这里插入图片描述

13. pre预格式化标签

代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <pre>
		我是一个 有样式
		的文字
	</pre>
</body>

</html>

页面展示:
在这里插入图片描述

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

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

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

14.table 表格标签

table 标签基础内容

table标签包含 tr, tr 标签包含 td 和 th:

  • table:表示整个表格
  • tr:表示表格的一行
  • td:表示一个单元格
  • th:表示表头单元格,会居中加粗
  • thead:表格的头部区域, 范围是比 th 大
  • tbody:表格得到主体区域

表格标签的属性可以用于设置边框大小等,但需要放到 table 标签中:

  • align:是表格相对于周围元素的对齐方式,align=“center” (不是内部元素的对齐方式)
  • border:表示边框,1表示有边框(数字越大, 边框越粗),“” 表示没边框
  • cellpadding:内容距离边框的距离,默认 1 像素
  • cellspacing:单元格之间的距离,默认为 2 像素
  • width / height:设置尺寸

代码示例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>张三</td>
            <td></td>
        </tr>
    </table>
</body>

</html>

页面展示:

在这里插入图片描述

合并单元格

先确定跨行还是跨列,找好目标单元格(跨列合并,左侧是目标单元格;跨行合并,上方是目标单元格),删除的多余的单元格。
跨行合并: rowspan=“n”
跨列合并: colspan=“n”

代码示例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 HTML</title>
</head>

<body>
    <table width="100%" align="center" border="1">
        <tr align="center">
            <th colspan="6">
                财务周期表
            </th>
        </tr>
        <tr>
            <th colspan="3" align="left" style="border-right-style: hidden;">
                商品类型:JJJ
            </th>
            <th colspan="3" align="left" style="border-left-style: hidden;">
                商品编号:AAAA
            </th>
        </tr>
        <tr align="center">
            <th width="17%">
                成本
            </th>
            <th width="17%">
                损耗
            </th>
            <th width="17%">
                保全价值
            </th>
            <th width="17%">
                成本
            </th>
            <th width="17%">
                损耗