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选择器的研究(详解)
Sep 16 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
PHP过滤★等特殊符号的正则
2014/01/27 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python 中 Meta Classes详解
2016/02/13 Python
python先序遍历二叉树问题
2017/11/10 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
python 解决函数返回return的问题
2020/12/05 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
大学生求职简历的自我评价范文
2013/10/12 职场文书
商务英语专业应届毕业生求职信
2013/10/28 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
环保专项行动方案
2014/05/12 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书