HTML常用标签超详细整理


Posted in HTML / CSS onMarch 19, 2022

HTML概述

 

1.1 什么是HTML

HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发,还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术

 

1.2 HTML概念

HTML:Hyper Text Markup Language,超文本标记语言。是用来帮助我们构建网页的。

【超文本】:网页本身是一个文本文件,而超文本指的是这种文件中既可以包含文本信息,又可以包含图片,音频,视频和链接等非文字的信息。

【标记语言】:标记,也叫做标签。也就是说HTML这门语言是由标签组成的。

HTML的标签包含以下两种:

(1) 带有标签体的标签< a>标签体< /a >

(2) 不带标签体的标签(自结束标签)< br/>,< hr/>

HTML通过提前约定好的标签来构建我们的网页内容,通过浏览器来进行解释执行

浏览器是一个HTML的解释器,在浏览器中内置了一个解释器,该解释器中包含了所有HTML标签的展示风格

 

HTML常用基础标签

HTML文件的骨架:

HTML常用标签超详细整理

Head标签:其中可以对网页进行整体设置

Body标签:是HTML的正文标签,我们在网页上能看到的内容都写在该标签中

HTML的IDE工具

(1) DW(Dreamweaver)

(2) HBuilder

(3) Subline

(4) VSCode

(5) WebStorm

(6) 记事本

(7) 其他编程语言的IDE工具

 

标签的分类:

1.带有标签体的标签,这种标签成对出现;有开始标签也有单独的结束标签,:<html></html>,<head></head>,<body></body>
2.没有标签体的标签(空标签,自结束标签),开始在结束在同一个标签中<br />,<hr />

 

常用基本标签

1.标题标签hn(h1——h6)

HTML常用标签超详细整理

2.字体标签(font)

HTML常用标签超详细整理

3.段落标签(p)

HTML常用标签超详细整理

主要用于将一段内容包裹起来,便于后期的统一设置,p标签本身没有效果,标签内的内容与标签外的内容空一行(自动换行)

4.换行标签(br)

< br/ >换行标签,中间不空行

5.水平线标签(hr)

< hr/ >

HTML常用标签超详细整理

6.图片标签(img)

< img src=”图片地址” width=”宽度” height=”高度” / >

HTML常用标签超详细整理

7.背景音乐(audio)

< audio src=”音乐” autoplay=“autoplay” loop=”loop”/ >

HTML常用标签超详细整理

8.视频(video)

在H5之前大多数视频使用flash插件实现的,但flash插件加载速度较慢,在H5之后专门提供了一个视频的标签;

9.超链接标签(a)

用法1:超链接:主要用于将多个页面关联到一起,使用超链接可以直接访问另一个页面;

HTML常用标签超详细整理

通过base标签统一设置页面超链接的显示目标< base target="_blank" / > 用法2:用于锚记页面中的某个位置或其他页面中的某个位置

HTML常用标签超详细整理

HTML常用标签超详细整理

10.列表标签

(1)有序列表

< ol >

< li >列表项< /li >

< /ol >

HTML常用标签超详细整理

(2)无序列表

HTML常用标签超详细整理

(1) 自定义列表

dl:外围标签

dt:列表的标题标签

dd:设置列表的具体列表项

HTML常用标签超详细整理

11.marquee标签

HTML常用标签超详细整理

HTML常用标签超详细整理

12.文本设置标签

< b >< /b >字体加粗

< i >< /i >设置斜体

< u >< /u >设置文本下划线

< s >< /s >在文本上设置一个删除线

13.其他基本标签

2< sup >n< /sup >:设置上标

log< sub>10< /sub>10:设置下标

HTML常用标签超详细整理

HTML / CSS 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 #HTML / CSS
CSS精灵图的原理与使用方法介绍
CSS3实现指纹特效代码
css3应用示例:新增的选择器
Mar 16 #HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 #HTML / CSS
css3新特性的应用示例分析
Mar 16 #HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
You might like
解析php中如何调用用户自定义函数
2013/08/06 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
linux面试题参考答案(4)
2013/01/28 面试题
编辑个人求职信范文
2013/09/21 职场文书
网络工程师个人的自我评价范文
2013/10/01 职场文书
中学老师的自我评价
2013/11/07 职场文书
信息系统专业个人求职信范文
2013/12/07 职场文书
小学生演讲稿
2014/01/12 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
Python基础详解之邮件处理
2021/04/28 Python
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
整理Python中常用的conda命令操作
2021/06/15 Python
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL