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

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

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

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

代码如下


一个网页是有许许多多的标签对组成的，即开始标签-结束标签，都是成对出现（当然我们后面会说的还存在单标签，表示自闭合标签，例如：<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从入门到精通 。

相关推荐

HR必备Excel函数:4个与日期相关的计算函数。

提到日期函数，很多人首先会想到“today”，它可以显示当天的日期，并且每次打开表格时都会自动更新。但是，对于前天、昨天、明天和后天的日期，就不能用yesterday或者tomorrow等这些英文了，...

这篇文章有点长，但可以让你十分钟玩转Excel的时间函数

日期与时间函数——TODAY、NOW、YEAR、MONTH、DAY！如何用WORKDAY函数查询距离某天的第20个工作日是哪一天？如何用NETWORKDAYS函数查询员工工作了多少个工作日？如何用WE...

Excel2020年日历套装，表格设计，农历显示，查阅套打轻松应用

Hello大家好，我是帮帮。今天跟大家分享一组Excel2020年日历套装，表格设计，自带农历控件，查阅套打轻松应用。有个好消息！为了方便大家更快的掌握技巧，寻找捷径。请大家点击文章末尾的“了解更多”...

巧用NETWORKDAYS函数计算两个日期之间工作日的天数

带有日期的单元格是我们日常使用EXCEL的时候经常见到的，有的时候我们需要求出两个日期之间间隔的天数，可以直接用结束日期减去开始日期即可，这是个非常简单的减法公式。不过这个单纯的减法公式会默认去掉开始...

Excel按工作日、休息日进行汇总

1、按周六日/其它时间汇总为了区分一周的周六日和其它时间，可以使用WEEKDAY函数，把WEEKDAY函数的第2个参数指定为2，如WEEKDAY(A3,2)，则周一返回1，周二返回2，…，周六返回...

如何计算每月应出勤天数，如有法定假期和调休，如何计算

本文介绍如何计算每月的应出勤天数。第一部分介绍正常双休制下计算应出勤天数；第二部份介绍当月有法定假期和调休的情况下计算应出勤天数。一、计算正常双休制的应出勤天数如下图所示，要求计算各员工2021年3月...

《Excel一键生成工作日历:让会议排期更轻松!》

每当需要安排会议时，总要翻看日历确认工作日，再逐个标注会议时间，既耗时又容易出错。今天教大家用Excel快速生成工作日历表，让会议排期变得简单高效！一、快速生成日历框架创建基础日期：在A1单元格输入月...

如何计算指定日期区间内，有多少工作日和休息日?

大家好，今天咱们要解决的问题是如何计算给定的一段日期内，正常工作日有多少天，放假时间有多少天？比如咱们要计算2025年3月份工作日一共有多少天，又有多少天放假，如下图所示：通过肉眼我们可以数清楚，20...

如何如何在表格中自动突出显示双休日?

现在不少人喜欢用Excel来制作备忘录或安排工作事项。在表格中输入日期后，可以使用条件格式突出显示双休日，避免在休息日安排了工作。具体方法是这样的：第1步：选择要设置条件格式的日期单元格区域；在“开始...

excel函数技巧:networkdays.intl判断节假日

如图，想知道6月的每一天是否是节假日，公式如下：=NETWORKDAYS.INTL(A2,A2,1,$E$2:$E$28)这个函数既可以判断当前日期（一参=二参）是否是周末及工作日（三参、四参）还可得...

仅需3步，让考勤表根据实际休息日，自动地填充颜色

Hello，大家好，之前跟大家分享了我们如何让考勤表根据单休与双休自动的填充颜色，最近有粉丝问到：能不能让考勤表根据实际的休息日自动的填充颜色呢？可以是可以，只不过因为牵扯到假期调休，我们每年的休息日...

5步搞定动态考勤表!标记节假日、调休日?Excel自动变色!

今天教你用「动态考勤表」一招解决所有问题！只需输入月份，自动变色、自动更新节假日，从此告别加班，效率翻倍！动态考勤表的优势：自动变色：节假日、双休日一键标记，颜色分明。一表多用：修改月份即可...

一起用python做个炫酷音乐播放器，想听啥随便搜

前言前段时间写的Python自制一款炫酷音乐播放器，有不少小伙伴私信我，对播放器提了不少改进建议，让我完善播放器的功能。今天音乐播放器2.0版本完成了，大家一起来看看是如何用python自制一款炫酷的...

用Python做个“冰墩墩雪容融”桌面部件(好玩又有趣)

桌面太单调？今天就带大家，一起用Python的PyQt5开发一个有趣的自定义桌面动画挂件，看看实现的动画挂件效果！下面，我们开始介绍这个自定义桌面动画挂件的制作过程。一、核心功能设计实现将动态图gif...

Python串口调试助手源码分享

以下是一个基于Python和PyQt5实现的串口调试助手示例，包含核心功能实现代码：pythonimportsysimportserialfromPyQt5.QtCoreimportQTim...

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