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 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
html如何对span设置宽度
Oct 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输出缓存(output_buffering)的深入理解
2013/06/13 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
仅利用30行Python代码来展示X算法
2015/04/01 Python
解读Python中degrees()方法的使用
2015/05/18 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
物流管理毕业生自荐信
2013/10/24 职场文书
设计师求职信
2014/07/01 职场文书
初中家长评语和期望
2014/12/26 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python