HTML常用基础标签，前端从入门到精通
liuian 2025-04-26 19:24 59 浏览
首先，我们来理解一下一个网页的基本组成
代码如下
一个网页是有许许多多的标签对组成的，即开始标签-结束标签，都是成对出现（当然我们后面会说的还存在单标签，表示自闭合标签，例如：<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从入门到精通 。
- 上一篇：HTML简单介绍及常见元素
- 下一篇：HTML基础知识(三) HTML标签知识2
相关推荐
- 手机cpu排名2025（手机cpu排名榜）
-
一、2022手机CPU性能综合排名前八名手机CPU：1、型号：苹果A16---综合分数：暂无2、型号：骁龙8gen1---综合分数：42333、联发科天玑9000---综合分数：38724、...
- 论坛系统（论坛系统数据流图）
-
BBS是电子布告栏系统的简称，一种网站系统，也是目前流行网络论坛的前身。它允许用户使用终端程序通过调制解调器拨接或者因特网来进行连接，BBS站台提供布告栏、分类讨论区、新闻阅读、软件下载与上传、游戏、...
- hp1020plus打印机无法打印（惠普1020plus打印机突然不能打印了）
-
删除惠普打印机驱动和软件：1.如果你的打印机已通过USB连接到电脑，断开USB连接；2.打开控制面板—程序和功能（卸载或更改应用程序）；3.在软件列表中找到惠普打印机，将其卸载；4.重启电脑...
- wifi密码破解器电脑版（wifi密码破解工具电脑版）
-
肯定不是万能钥匙这种“破解”wifi的东西。不是一两次见到把万能钥匙当做破解wifi用的人了，但实际上那玩意就是个分享wifi的软件。你连上一个wifi，密码就会被分享到云端(可以不分享)，别...
- 手机临时文件夹在哪个位置（手机临时文件夹在哪个位置找）
-
1.手机文件临时文件是指在手机使用过程中产生的临时文件。2.手机应用程序在运行时需要产生一些临时文件，如缓存文件、日志文件、临时下载文件等，这些文件可以提高应用程序的运行效率和用户体验。但是，这些...
- 安卓10系统下载（安卓10 下载）
-
方法及步骤： 其实使用安卓车机下载歌曲的方法十分的简单，具体操作步骤和安卓手机一模一样。 首先我们需要在车机的应用商店上，下载一个音乐播放器，例如网易云音乐或者QQ音乐等。 下载完成后点击进入...
- 华硕人工客服24小时吗（华硕售后人工客服）
-
华硕服务中心广东省惠州市惠东县城平深路（创富斜对面）惠东同心电脑城1L11(1.3km)笔记本电脑,平板电脑华硕服务中心广东省惠州市惠东县平山镇同心电脑城1F26(1.3km)笔记本电脑,平...
- 电脑音量小喇叭不见了（电脑声音喇叭图标不见了怎么办）
-
如果您电脑上的小喇叭（扬声器）不见了，可以尝试以下方法找回：1.检查设备管理器：在Windows下，右键点击“我的电脑”（或此电脑）->点击“属性”->点击“设备管理器”，查看“声音、视...
- 腾达路由器手机设置教程（腾达路由器手机设置教程视频）
-
用手机设置腾达路由器的方法如下:1在手机上打开浏览器,输入路由器背面的管理IP和用户及对应的密码2一般第一次打开,默认会跳出设置向导,准备好宽带用户名和密码,3按向导提示输入相应内容4在无线设置的安全...
- 自配电脑配置推荐（自配电脑配置推荐百度）
-
首先，像这类软件最低要求不高。最高没上限。纯粹看你的工程量大小。CPU有双核，内存有4G，就可以运行。但是实际体验肯定比较差，卡是肯德。渲染时间也会超长，一个小作品渲染几小时是正常的。稍微大点的工程也...
- 2025年平板性价比排行（2020年值得买的平板）
-
推荐台电P30S好。 基本配置：10.1英寸IPS广视角屏幕，1280*800分辨率，16:10的黄金显示比例，K9高压独立功放，支持3.5mm耳麦接口，联发科MT8183八核处理器，4GB...
- 2020显卡天梯图10月（2020显卡天梯图极速空间）
-
排行球队名称积分已赛胜平负进球失球净胜球 1?诺维奇城974629107753639 2?沃特福德91462710...
-
- 笔记本电脑无线网络连接（笔记本电脑无线网络连接不上怎么办）
-
一、笔记本电脑怎么连接wifi---win7系统笔记本连接wifi1、要先创建无线网络连接，将鼠标移到Win7的开始菜单，然后点击“控制面板”。2、然后点击“网络和Internet”。3、再打开“网络和共享中心”，这是Win7系统必有的功...
-
2025-12-22 05:55 liuian
- wind数据库（wind数据库官网）
-
先购买wind数据库，安装好wind取得使用权后，按照wind所给提示，输入账户和密码可使用wind数据库。Wind资讯金融终端是一个集实时行情、资料查询、数据浏览、研究分析、新闻资讯为一体的金融数据...
- 一周热门
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)