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 transform 属性来变换背景图的方法
May 07 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
css背景和边框标签实例详解
May 21 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php浏览历史记录的方法
2015/03/10 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
windows下python和pip安装教程
2018/05/25 Python
python读写LMDB文件的方法
2018/07/02 Python
Python实现图片拼接的代码
2018/07/02 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
毕业生找工作的自我评价
2013/10/18 职场文书
法制宣传教育方案
2014/05/09 职场文书
工作证明格式及范本
2014/09/12 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS