HTML常用标签超详细整理

news2025/2/24 23:38:36

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文件的骨架:

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)

2.字体标签(font)

3.段落标签(p)

主要用于将一段内容包裹起来,便于后期的统一设置,p标签本身没有效果,标签内的内容与标签外的内容空一行(自动换行)

4.换行标签(br)

< br/ >换行标签,中间不空行

5.水平线标签(hr)

< hr/ >

6.图片标签(img)

< img src=”图片地址” width=”宽度” height=”高度” / >

7.背景音乐(audio)

< audio src=”音乐” autoplay=“autoplay” loop=”loop”/ >

8.视频(video)

在H5之前大多数视频使用flash插件实现的,但flash插件加载速度较慢,在H5之后专门提供了一个视频的标签;

9.超链接标签(a)

用法1:超链接:主要用于将多个页面关联到一起,使用超链接可以直接访问另一个页面;

通过base标签统一设置页面超链接的显示目标< base target="_blank" / > 用法2:用于锚记页面中的某个位置或其他页面中的某个位置

10.列表标签

(1)有序列表

< ol >

< li >列表项< /li >

< /ol >

(2)无序列表

(1) 自定义列表

dl:外围标签

dt:列表的标题标签

dd:设置列表的具体列表项

11.marquee标签

12.文本设置标签

< b >< /b >字体加粗

< i >< /i >设置斜体

< u >< /u >设置文本下划线

< s >< /s >在文本上设置一个删除线

13.其他基本标签

2< sup >n< /sup >:设置上标

log< sub>10< /sub>10:设置下标

以上就是HTML概述及常用标签,欢迎各位在评论区留言一起讨论学习~,如果觉得不错三连支持一下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405677.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

小满Vue3第三十六章(Vue如何开发移动端)

视频教程Vue3 vite Ts pinia 实战 源码 全栈_哔哩哔哩_bilibili 如果使用npm init vuelatest 报错 error when starting dev server: Error: Cannot find module node:path nodejs 升级为16版本就好了 开发移动端最主要的就是适配各种手机&#xff0c;为此我研究了一套…

让div居中的方式的几种方法

让div水平居中的方式的几种方法。 文章目录 一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结 一、margin 第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang"en"> &…

React框架创建项目详细流程-项目的基本配置-项目的代码规范

文章目录React创建项目流程与规范项目规范项目配置目录结构样式重置Router配置Redux状态管理axios配置React创建项目流程与规范 项目规范 项目规范: 在项目中都会有一些开发规范和代码风格, 下面介绍一下我采用的规范与风格 文件夹、文件名称统一小写、多个单词以连接符(-)连…

vue实战--vue+elementUI实现多文件上传+预览(word/PDF/图片/docx/doc/xlxs/txt)

需求 最近在做vue2.0element UI的项目中遇到了一个需求&#xff1a;需求是多个文件上传的同时实现文件的在线预览功能。需求图如下&#xff1a; 看到这个需求的时候&#xff0c;小栗脑袋一炸。并不知道该如何下手&#xff0c;之前的实践项目中也并没有遇到相似的功能。因此也…

webpack配置

webpack 前端工程化 实际的前端开发 模块化&#xff08;js 的模块化、css 的模块化、资源的模块化&#xff09; 组件化&#xff08;复用已有的 UI 结构、样式、行为&#xff09; 规范化&#xff08;目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理&…

【Web前端】CSS-盒子模型

文章目录一、盒子模型1、网页布局的本质2、盒子模型&#xff08;Box Model&#xff09;组成3、边框&#xff08;border&#xff09;3.1、边框的使用3.2、表格的细线边框3.3、边框会影响盒子实际大小4、内边距&#xff08;padding&#xff09;4.1、内边距的使用方式4.2、内边距会…

CSS响应式布局(自适应布局)

CSS 响应式布局也称自适应布局&#xff0c;是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念&#xff0c;简单来讲就是一个网站能够兼容多个不同的终端&#xff08;设备&#xff09;&#xff0c;而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。…

一文弄懂Vue与Servlet的交互:让你的大学课设变得容易起来

文章目录1 写作动机2 准备工作3 前端请求3.1 get请求3.1.1 仿照网站栏撰写3.1.2 按照Parms格式传参3.2 Post请求3.2.1 按照Data格式传参3.2.2 按照Params格式传参3.3 一个特殊的点4 后端接收请求4.1 提要4.2 代码4.2.1 架子4.2.2 模块一&#xff1a;获取参数4.2.3 模块二&#…

【微信小程序】选择器组件picker

文章目录【微信小程序】选择器组件pickerpicker组件的定义picker组件的类型picker属性共同的属性时间选择器time参考【微信小程序】选择器组件picker picker组件的定义 picker组件是一种从底部向上弹起的滚动选择器。 picker组件的类型 在官方文档中&#xff0c;有提供五种…

【uni-app系列】uni-app之nvue使用

目录一、介绍二、新建 nvue 页面三、开发四、nvue 开发与 vue 开发的常见区别一、介绍 uni-app App 端内置了一个基于 weex 改进的原生渲染引擎&#xff0c;提供了原生渲染能力。 在 App 端&#xff0c;如果使用 vue 页面&#xff0c;则使用 webview 渲染&#xff1b;如果使用…

无界(wujie)微前端实现及三种通信方式介绍

一、对比 之前介绍过前段时间比较流行的微前端框架qiankun&#xff0c;虽然实现了微前端的理念&#xff0c;但是也暴露出很多缺点&#xff0c;比如官网上讲到的四点&#xff1a; 基于路由匹配&#xff0c;无法同时激活多个子应用&#xff0c;也不支持子应用保活改造成本较大&…

echarts:饼图标签formatter的使用/饼图自定义标签

需求描述 需要实现一个“五彩斑斓”的饼图&#xff1a;每块饼上的标签颜色与这块饼的颜色一致。 实现思路 要改变饼图标签的颜色&#xff0c;需要参考echarts饼图label配置项&#xff0c;以及这个很棒的官方示例&#xff1a;饼图引导线调整。从这个示例中可以了解到自定义标…

【Vue路由守卫】

Vue路由守卫Vue路由守卫全局路由守卫全局前置守卫全局后置守卫实例代码&#xff1a;独享守卫组件内守卫总结Vue路由守卫 路由守卫&#xff0c;简单理解来说就是&#xff0c;当用户要进行一些操作时&#xff0c;我需要用户的一些信息或数据或行为&#xff0c;我判断过后&#x…

【1024用代码改变世界】useMemo 和 useCallback|React.memo使用场景

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React/小程序React/小程序React/小程序&am…

【HTML+CSS】实现网页的导航栏和下拉菜单

熟练的使用导航栏,对于任何网站都非常重要,我们可以使用CSS转换为好看的导航栏而不是枯燥的HTML菜单。同时,我们使用 CSS 可以创建一个鼠标移动上去后显示下拉菜单的效果。 水平导航栏: 垂直导航栏: 文章目录 一.CSS导航栏1. HTML设置菜单项2. 垂直导航栏3. 水平导航栏3…

卸载,重新安装node

因为我的node版本比较低,需要换成高一点的版本,所以需要先卸载 卸载node 直接点卸载就可以了 重新安装 node下载网站:下载 | Node.js 中文网http://nodejs.cn/download/ 1 选择符合自己电脑的node(下载的的长期支持版本-这个比较稳定) 2 选择自己要安装的路径(最好自己选一…

前端练手3D爱心

文章目录盒子模型常用属性&#xff08;认识&#xff09;效果一 爱心半边效果二 爱心整合生成效果三 实现立方体爱心最终效果 3D爱心盒子模型常用属性&#xff08;认识&#xff09; overflow: hidden;定义盒子不随浮动 margin-left: 50px:使盒子距离外边距左(右上下)50px margin…

前端面试宝典~Symbol、相同的Set、Getter、控制动画、js中哪些操作会造成内存泄漏?等......

前端JavaScript面试题&#x1f353;&#x1f353;Symbol&#x1f353;&#x1f353;相同的Set&#x1f353;&#x1f353;Getter&#x1f353;&#x1f353;控制动画&#x1f353;&#x1f353;js中哪些操作会造成内存泄漏?html页面的骨架&#xff0c;相当于人的骨头&#xff…

vscode下载和安装教程和配置中文插件(超详细)

前言必读 读者手册&#xff08;必读&#xff09;_云边的快乐猫的博客-CSDN博客 前言&#xff1a; vscode主要是用于前端的编程工具&#xff0c;其他编程的语言也可以在vscode里面编程运行。 优点&#xff1a;简洁、占用内存小、界面美观 一、下载步骤 1.到官网根据自己的操…

vue里面使用pdfjs-dist+fabric实现pdf电子签章!!!

2022.9.6 一、需求 最近领导提了一个新需求&#xff1a;仿照e签宝&#xff0c;实现pdf电子签章&#xff01; 最终实现效果图 这是做出来的效果图&#xff0c;当然还有很多待修改 二、思路 然后我就去看了下人家e签宝的操作界面&#xff0c;左侧是印章&#xff0c;右侧是…