HTML标签大全

遇见~未来

已于 2025-01-10 20:08:03 修改

阅读量751

点赞数 7

分类专栏： HTML+CSS 文章标签： html 前端

于 2025-01-10 19:47:44 首次发布

本文链接：https://blog.youkuaiyun.com/2301_76428778/article/details/145064367

版权

HTML+CSS 专栏收录该内容

19 篇文章

订阅专栏

一：常用标签：

<h1> </h1>//不同字号，标题标签 h1 ~ h6,从大到小，加粗变大

<p> </p>// 段落标签，段落标签用于表示内容中的一个自然段，特殊的块元素一般只用来包裹文字或图片，它里面不能放块元素

像上面的每个标签，独占一行，称块元素

像 <em> </em>，不独占一行，称行内元素

行内元素通常在同一行显示，不能设置宽度和高度，而块级元素则独占一行，可以设置宽度和高度

<em> </em> //倾斜字体，行内元素

<strong> </strong>//加粗，行内元素

<del> </del>//都表示一个删除的内容,字体中间加横线，表删除，例如打折页面，行内元素

<h1>瑕佽寖娆插垜銆?/h1>

</hgroup>// 用来为标题分组，可以将一组相关的标题同时放入到hgroup,页面上没区别，主要方别看代码，行内元素

之老到能躲薪五严得灰报力一反秦为不订疾。

</blockquote>//引用别人说的话 长引用会换行块元素,前面会空2个多点

//注释符号，注释化：ctrl加 / 解除注释化，同理

<q>病的子韩死故游六身。</q>//表示短引用，加引号，行内

有些标签是没尾标签的，如 <meta charset="utf-8">

<br />//换行，插哪里，哪里换行，行内

<hr />//页面上显示一个分割线，独占一行，块元素

承以冇看么我在司身。

<p>我下落一死落子自明。</p>

</center> //居中效果

<div>计划管控就好了</div>//没有任何语义，只表示一个块元素，没效果，制造出一个块元素

<span>为疾为战都他，后宋。</span>//没有任何语义，表示一个行内元素,一般就用来包裹文字

元素在文档流中会区分为块元素行内元素行内块元素

二：块元素、行内元素、行内块元素

块元素

一般是用来布局

1、会独占一行，自上而下一行一行的排列

2、块元素的宽度默认是父元素的百分百

3、块元素的高度默认是被内容撑开

常用块元素：div p h1-h6 ul li ol header footer main nav

行内元素

一般用来包裹文字

1、不会独占一行,自左向右排列，一行满了，就挪到下一行，再自左向右

2、行内元素宽高都是被内容撑开的，不可以自定义宽度

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

行内块元素

兼具块元素，行内元素的特点

又不会独占一行，又可以设置宽高

常用行内块元素：img

注意：

1、块元素是布局元素，里面什么都能放，能方块元素，能放行内元素，行内块元素

2、行内元素里面不能放块元素一般就用来包裹文字

3、特殊的块元素 p 不能放块元素

4、特殊的行内元素 a 里面什么都能放，除了它自己

三：结构化标签

<!-- 布局标签（结构化标签）

header 网页的头部

main 网页的主体部分（一般就一个）

footer 网页的底部

nav 网页的导航

aside 和主体相关的内容，侧边栏

article 文章之类的

section 独立的区块，上面的标签都不合适，就用这个

-->

<main>

主体

<nav></nav>//导航

<aside></aside>//和主体相关的内容，侧边栏

<article></article>//和文章相关，文章之类的

</main>

底部

<section></section>//独立的区块

</footer>

四：列表标签

<!-- 列表（list）一组一组

1:有序列表

用ol标签创建，li表示列表项

项目符号：1(默认值)、a、A、i、I

2:无序列表

用ul标签创建，li表示列表项

项目符号： disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

3:定义列表

用dl标签创建，使用dt对内容进行定义，使用dd对内容进行解释说明

start 属性的值是一个整数，定义一个开始位置

type属性可以更改项目符号

list-style:none;去除项目符号

注意：列表之间是可以互相嵌套的

属性写在开始标签里，用空格分开

<ol type="i">//创建有序表，type属性更改项目符号，项目符号是i

</ol>

<ul type="circle">//创建无序表，type属性更改项目符号，项目符号是空心的圆

</ul>

<dl>

<dt>html</dt>//列表小标题，下定义

<dd>html5</dd>//对定义的解释

</dl>

五：<a>超链接

属性 href（跳转地址），target（在哪里显示）

功能 #（跳到顶部） #id属性值（跳到页面指定位置）

补充 空链接，在href属性中写入一个#或者是javascript:;，

<!-- HTML页面使用超链接与网络上的另一个HTML页面相连。几乎可以在所有的网页中找到超链接，点击超链接会出现很多效果：

1：可以让我们从一个页面跳转到另一个页面，

2：当前页面的其他位置

3:下载

—在HTML中链接可以是一个字，一个词，也可以是一个图片，这些都是可以点击的。

—使用a标签来创建一个超链接，它是个行内元素，在a标签中可以嵌套除自身外的任何元素

-->

<!-- 属性：

1: href属性: 指向链接跳转的目标地址

-值可以是一个外部的网站的地址绝对路径

-可以是一个内部页面的地址相对路径

（1）：绝对路径就是指完整的描述目标文件位置的路径。

简单来说，绝对路径就是无论你当前的位置在哪，找到目标文件的路径是不变的。

（2）：相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。

简单来说，相对路径和你所在的位置是有关系的，你所在位置的不同会导致相对路径也会不同。-->

2: target属性：可以用来指定打开链接的位置

可选值：

_self，表示在当前窗口中打开（默认值）

_blank，在新的一个新的页面中打开链接

可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开-->

<!--

3:锚点功能（页面内的跳转）

所谓锚点，就是指当点击链接文本时，跳转到当前页面的指定元素位置

（1）若将超链接的href属性设置为#，点击超链接后，

页面不会发生跳转，而是跳到当前页面的顶部的位置

（2）跳转到页面的指定位置，

语法：将href属性设置为 #目标元素的id属性值

给标签加标记——id属性（唯一不重复的标记）

-每一个标签都可以添加一个id属性

-id属性就是元素的唯一标识，同一页面中不能出现重复的id属性

-id区分大小写，且不能以数字开头

-->

<!--

4:空链接

不想使<a>元素生效，在href属性中写入一个#或者是javascript:;，

此时的超链接没有作用，当还没有想好超链接具体跳转位置时，可以当做占位符使用。

-->

<a href="./03.列表.html" target="_blank"> 同一层文件下面的跳转</a>

<a href="../01.网页结构/06实体.html" target="_blank">不同文件下的跳转</a>

<a href="#">我还想好链接到哪里，先占个位子</a>

<a href="javascript:;">我还想好链接到哪里，先占个位子</a>

六：<img>引入图片

<!-- 使用img标签来向网页中引入一个外部图片，img标签也是一个自结束标签，img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）

src 引入图片的路径 //路径

alt 可以用来设置在图片不能加载时，对图片的描述，图片不显示时，网页显示图片描述搜索引擎可以通过alt属性来识别不同的图片

如果不写alt属性，则搜索引擎不会对img中的图片进行收录

width：可以用来修改图片的宽度,一般使用px作为单位

height：可以用来修改图片的高度，一般使用px作为单位

// 注意：一般不会同时设置宽高，以防图片变形

注意：

1:宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小，如果两个值同时指定则按照你指定的值来设置。

2:一般开发中除了自适应的页面，不建议设置width和height，大图变小，会多占内存，小图变大会失真

3:pc端，需要多大的图，就裁多大的，移动端，进场会对图片进行缩放（大图缩小）

img标签是行内块元素，自结束标签

七：图片格式（jpg gif png webp base64）

和油漆是一个道理，不同的图片格式特性不一样，使用场合也有所不同。

JPEG(JPG)//效果好，保存图片

- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

- 一般用来保存照片等颜色丰富的图片

GIF//动图

- GIF支持的颜色少，只支持简单的透明，支持动态图

- 图片颜色单一或者是动态图时可以使用gif

PNG//显示复杂的图片，为网页而生

- PNG支持的颜色多，并且支持复杂的透明，不支持动图

- 可以用来显示颜色复杂的透明的图片

专为网页而生的

webp//优点全具备，但兼容性不好

-谷歌新推出的专门用来表示网页的一种格式

-它具有其他图片格式的所有优点，而且文件格式还很小

-缺点：兼容性不好

base64 //与网页一起出现，需要先转字符

-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

-一般都是需要和网页一起加载的图片才会使用base64

图片的使用原则：

效果不一致，使用效果好的

效果一致，使用小的

网页加载流程：

先加载网页结构，然后再加载外部的资源包括css文件，js文件，图片，各种插件等。

八：内联框架

<!-- iframe:

src：引入外部网址，全路径/内部链接，相对路径

frameborder:去除边框效果

width：宽度

height: 高度

name ：链接的 target 属性

target: 作为链接的目标

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

-->

// 定义一个内联框架，实现在网页里出现多个网页

//定义一个内联框架，用name命名框架，再用<a>链接其他网址，实现内部更新框架内容

先做框架并起名，再用超链接的target属性指定在该框架，进行跳转

九：音视频引入

音乐：

<!-- audio标签 用来向页面中引入一个外部的音频文件

音视频文件引入时，默认情况下不允许用户自己控制播放停止

IE9以下的浏览器是不支持的

属性：

controls 是否允许用户控制播放，不用给值

autoplay 音频文件是否自动播放打开页面时，音乐会自动播放，

但目前为止，大部分浏览器是不可以自动播放的

loop 是否循环播放

-->

source引入资源 //在audio中引入

<!-- <audio controls autoplay loop >

<source src="./source/Hurt.mp3">

</audio> -->

视频：

</video>