百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

HTML常用基础标签，前端从入门到精通

liuian 2025-04-26 19:24 54 浏览

首先，我们来理解一下一个网页的基本组成

代码如下


一个网页是有许许多多的标签对组成的，即开始标签-结束标签，都是成对出现（当然我们后面会说的还存在单标签，表示自闭合标签，例如：<br />）

对上述的标签先来解释一下

html------------超文本标记语言，浏览器识别的语言，主要负责页面的内容和结构

head------------标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

body------------元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）


HTML常用基础标签用法及实例

1. <!--注释-->

2. <!--DOCTYPE 声明文档类型-->

3. <!--a--><a href="http://www.baidu.com/">百度一下</a></br><!--超链接标签-->

4. <!--address--><address> 标签定义文档或文章的作者/拥有者的联系信息。

如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。

如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息.-->

</address>

5. <!--5.article <article> 标签规定独立的自包含内容。-->

<article>

<h1>百度</h1>

<p>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。</p>

</article>

6. <!--6.aside <aside> 标签定义其所处内容之外的内容。-->

<p>123123</p>

<aside>

<h1>文本之外的内容</h1>

<p>我也是文本之外的内容</p>

</aside>

7.<!-- audio video-- <audio> 标签定义声音，比如音乐或其他音频流。

<audio src="/i/horse.ogg" controls="controls>

</audio>

8.<!--b 文本加粗-->

<p>普通文本--<b>粗体文本</b></p>

9.<!--big -->

<big>大号字体</big><br>

10.<!-- body body 主体内容-->

11.<!-- br 给文本换行-->

12.<!--button <bubtton> 标签定义一个按钮。-->

<button type="button">点击领取</button>

13.<!--center 对其所包括的文本进行水平居中。-->

14.<!--dl dd dt <dd> 在定义列表中定义条目的定义部分。-->

<dl>

<dt>计算机</dt>

<dd>用来计算的仪器 ... ...</dd>

<dt>显示器</dt>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

15.<!--del ins <del>定义文档中已被删除的文本。 <ins> 标签定义已经被插入文档中的文本。-->

<p>你叫<del>张3</del><ins>文字</ins>吗？</p>

16.<!--div p h1-h6 div是块标签 p是段落标签 h1-h6是标题标签根据h后面数值调整大小-->

17.<!--em span i strong <em>把文本定义为强调的内容。<span> 标签被用来组合文档中的行内元素。

<i> 标签显示斜体文本效果。<strong>把文本定义为语气更强的强调的内容。

-->

<em>强调文本内容</em>

<p><span>组合文档中的行内元素</span>你好啊</p>

<i>斜体文本</i><br>

<stong>内容重要</strong>

18.<!--footer nav <footer> 标签定义文档或节的页脚。<nav> 标签定义导航链接的部分.-->

<footer>

<p>联系邮箱：<a >href="1758539486@qq.com">1758539486@qq.com</a></p>

</footer>

<nav>

<a href="http://www.baidu.com">百度</a>|

<a href="http://www.douyu.com">斗鱼</a>

</nav>

19.<!-iframe iframe 元素会创建包含另外一个文档的内联框架（即行内框架）-->

20.<!--hr html-- <hr>文本分割线 <html>根文件-->

21.<!--img input label-- img 元素向网页中嵌入一幅图像。

<input>--表单标签（一共八种类型） 如下所示：

<input type="radio" name=""value="单选"/>
<input type="checkbox" name=""value="选择"/>
<input type="submit" name=""value="提交"/>
<input type="button" name=""value="按钮"/>
<input type="password" name=""value="密码"/>
<input type="text" name=""value="文本"/>
<input type="reset" name=""value="清空"/>
<input type="hidden" name=""value="隐藏"/>

<label> 标签为 input 元素定义标注（标记）。

-->

<img src="img/Advertisement_03-3.jpg" alt="" /><br>

<label for="男">男</label>

<input type="radio" name="sex" id="男">

<input type="submit" name="提交" >


22.<!--ol ul li <ol>有序列表 <ul>无序列表 <li>列表项目-->

23.<!--link script <link>标签最常见的用途是链接样式表。<script> 标签用于定义客户端脚本，比如 JavaScript。-->

24.<!--select option <select> 元素可创建单选或多选菜单。<select> 元素中的 <option> 标签用于定义列表中的可用选项。-->

<select name="">

<option value="">请选择</option>

<option value="">选项一</option>

<option value="">选项二</option>

<option value="">选项三</option>

<option value="">选项四</option>

</select>

25.<!--textarea <textarea> 标签定义多行的文本输入控件。-->

<textarea></textarea>

resize禁止拉伸文本框

outline取消文本框选中的颜色

Text-indent:2em首行缩进两个字符


希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

相关推荐

4000台式电脑最好的组装配置
4000台式电脑最好的组装配置

四千元价格组装电脑主机与五千元组装电脑主机的价格类似，因为电脑主机就几个大部件，电脑主机主板是多少代的产品？主板内存的插槽数？电脑处理器等如果是自己组装，都可以配置到十二代产品，电脑硬盘可以分为256G固态硬盘做系统盘，1T机械硬盘作为工作...

2025-11-06 20:05 liuian

linux是一种什么系统（linux属于什么系统）

Linux，全称GNU/Linux，是一种免费使用和自由传播的类UNIX操作系统，是一个基于POSIX的多用户、多任务、支持多线程和多CPU的操作系统。其内核由林纳斯·本纳第克特·托瓦兹于1991年1...

手机管理大师免费版（手机管理大师极速版）

使用手机“文件管理”打开文件夹时提示访问受限，需要前往“文件”应用查看1.进入手机设置——安全——应用权限——权限/应用2.在手机桌面找到手机管家——权限隐私——应用权限——权限/应用?当然，相对于被...

电脑能开机但是进不去桌面怎么办

打开任务管理器按Ctrl+Shift+Esc打开任务管理器。文件中运行新任务点击文件，运行新任务。输入指令重启桌面输入explorer.exe，点击确定，等待桌面重启完成就可以了。电脑已经是我们生活中...

怎样解除自动关机模式（怎样解除自动开关机）

1、打开手机主界面，找到系统自带的“时钟”应用，点击打开它。2、点击进入时钟后，点击右下角的“计时器”。3、进入到计时器后，点击“在计时结束启用雷达”这个选项。4、然后在这里，下拉到最下面，勾选“停...

电脑最高配置是什么配置2025

一，2023最新主流电脑装机配置如下。二，处理器可以使用十二代的i512400或者i512490f，内存16gb双通道，显卡rtx3060，主板可以使用b660m或者h610m。三，如果十三代酷睿...

MySQL慢查询优化:从explain到索引，DBA手把手教你提升10倍性能

数据库性能是应用系统的生命线，而慢查询就像隐藏在系统中的定时炸弹。某电商平台曾因一条未优化的SQL导致订单系统响应时间从200ms飙升至8秒，最终引发用户投诉和订单流失。今天我们就来系统学习MySQL...

一文读懂SQL五大操作类别(DDL/DML/DQL/DCL/TCL)的基础语法

在SQL中，DDL、DML、DQL、DCL、TCL是按操作类型划分的五大核心语言类别，缩写及简介如下：DDL（DataDefinitionLanguage，数据定义语言）：用于定义和管理数据库结构...

闲来无事，学学Mysql增、删，改，查

Mysql增、删，改，查1“增”——添加数据1.1为表中所有字段添加数据1.1.1INSERT语句中指定所有字段名语法：INSERTINTO表名（字段名1，字段名2，…）VALUES（值1...

数据库:MySQL 高性能优化规范建议

数据库命令规范所有数据库对象名称必须使用小写字母并用下划线分割所有数据库对象名称禁止使用MySQL保留关键字（如果表名中包含关键字查询时，需要将其用单引号括起来）数据库对象的命名要能做到见名识意，...

下载工具合集_下载工具手机版

迅雷，在国内的下载地位还是很难撼动的，所需要用到的地方还挺多。缺点就是不开会员，软件会限速。EagleGet，全能下载管理器，支持HTTP(S)FTPMMSRTSP协议，也可以使用浏览器扩展检测...

mediamtx v1.15.2 更新详解:功能优化与问题修复

mediamtxv1.15.2已于2025年10月14日发布，本次更新在功能、性能优化以及问题修复方面带来了多项改进，同时也更新了部分依赖库并提升了安全性。以下为本次更新的详细内容：...

声学成像仪:泄露监测 “雷达” 方案开启精准防控

声学成像仪背景将声像图与阵列上配装的摄像实所拍的视频图像以透明的方式叠合在一起，就形成了可直观分析被测物产生状态。这种利用声学、电子学和信息处理等技术，变换成人眼可见的图像的技术可以帮助人们直观地认识...

最稳存储方案:两种方法将摄像头接入威联通Qu405，录像不再丢失

今年我家至少被4位邻居敲门，就是为了查监控！！！原因是小区内部监控很早就停止维护了，半夜老有小黄毛掰车门偷东西，还有闲的没事划车的，车主损失不小，我家很早就配备监控了，人来亮灯有一定威慑力，不过监控设...

离岗检测算法_离岗检查内容

一、研发背景如今社会许多岗位是严禁随意脱离岗位的，如塔台、保安室、监狱狱警监控室等等，因为此类行为可能会引起重大事故，而此类岗位监督管理又有一定困难，因此促生了智能视频识别系统的出现。二、产品概述及工...

一周热门
最近发表
标签列表