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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 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
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
js查找节点的方法小结
2015/01/13 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
js中的闭包实例展示
2018/11/01 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
python3人脸识别的两种方法
2019/04/25 Python
python3获取url文件大小示例代码
2019/09/18 Python
如何在django中添加日志功能
2020/02/06 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
技能比武方案
2014/05/21 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
酒店员工管理制度
2015/08/05 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
一篇文章弄懂Python中的内建函数
2021/08/07 Python
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS