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 18 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
sass 常用备忘案例详解
Sep 15 HTML / CSS
HTTP中的Content-type详解
Jan 18 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP对字符串的递增运算分析
2010/08/08 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
python绘制条形图方法代码详解
2017/12/19 Python
python实现学生管理系统
2018/01/11 Python
python如何统计序列中元素
2020/07/31 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
python科学计算之narray对象用法
2019/11/25 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
小学班级管理心得体会
2016/01/07 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle