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

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

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

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

代码如下


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

相关推荐

使用Assembly打包和部署Spring Boot工程

SpringBoot项目的2种部署方式目前来说，SpringBoot项目有如下2种常见的部署方式一种是使用docker容器去部署。将SpringBoot的应用构建成一个docke...

java高级用法之:调用本地方法的利器JNA

简介JAVA是可以调用本地方法的，官方提供的调用方式叫做JNI，全称叫做javanativeinterface。要想使用JNI，我们需要在JAVA代码中定义native方法，然后通过javah命令...

Linux中如何通过Shell脚本来控制Spring Boot的Jar包启停服务?

SpringBoot项目在为开发者带来方便的同时，也带来了一个新的问题就是Jar包如何启动？在一般情况下我们都是采用了最为经典的java-jar命令来进行启动。然后通过ps命令找到对应的应用线程通...

牛逼!自己手写一个热加载（人民币手写符号一个横还是两个横）

热加载：在不停止程序运行的情况下，对类（对象）的动态替换JavaClassLoader简述Java中的类从被加载到内存中到卸载出内存为止，一共经历了七个阶段：加载、验证、准备、解析、初始化、使用、...

java 错误: 找不到或无法加载主类?看看怎么解决吧!

问题扫述：项目名称调整，由原来的com.mp.qms.report.biz调整为com.mp.busicen.mec.qms.report.biz后。项目在IDEA直接运行，但打包部署到服务器...

如何将 Spring Boot 工程打包成独立的可执行 JAR 包

导语：通过将SpringBoot项目打包成独立的可执行JAR包，可以方便地在任何支持Java环境的机器上运行项目。本文将详细介绍如何通过Maven构建插件将SpringBoot...

class 增量发包改造为 jar 包方式发布

大纲class增量发包介绍项目目录结构介绍jar包方式发布落地方案class增量发包介绍当前项目的迭代修复都是通过class增量包来发版本的将改动的代码class增量打包,如下图cla...

Jar启动和IDE里启动Sprintboot的区别

想聊明白这个问题，需要补充一些前提条件，比如Fatjar、类加载机制等1、Fatjar我们在开发业务程序的时候，经常需要引用第三方的jar包，最终程序开发完成之后，通过打包程序，会把自己的代码和三...

Java 20年，以后将往哪儿走?（java还能流行多久）

在今年的Java20周年的庆祝大会中，JavaOne2015的中心议题是“Java的20年”。甲骨文公司Java平台软件开发部的副总裁GeorgesSaab的主题演讲就将关注点放在了java...

Spring Boot Jar 包秒变 Docker 镜像实现多环境部署

你是否在互联网大厂后端开发工作中，遇到过这样的困扰？当完成一个SpringBoot项目开发，准备将Jar包部署到不同环境时，却发现各个环境依赖不同、配置复杂，部署过程繁琐又容易出错，不仅耗费...

从0开始，让你的Spring Boot项目跑在Linux服务器

1搭建Linux服务器1.1购买阿里云服务器或安装虚拟机这里建议是CentOS7.X或CentOS8.X，当然其他的Linux如deepin、Ubuntu也可以，只是软件环境的安装包和安装方式...

【技术】Maven 上传第三方jar包到私服

通过nexus后台上传私服以NexusRepositoryManagerOSS2.14.5-02为例。登录nexus后台。定义Maven坐标Maven坐标有两种方式：1.自定义参数；2....

JVM参数、main方法的args参数使用

一、前言我们知道JVM参数分为自定义参数、JVM系统参数，Javamain方法的参数。今天就谈谈怎么使用吧。二、查看jvm参数定义自定义参数我们打开cmd窗口，输入java，就能看到自定义参数的格式...

Maven项目如何发布jar包到Nexus私服

Maven项目发布jar包到Nexus私服在编码过程中，有些通用的代码模块，有时候我们不想通过复制粘贴来粗暴地复用。因为这样不仅体现不了变化，也不利于统一管理。这里我们使用mavendeploy的方...

干货丨Hadoop安装步骤!详解各目录内容及作用

Hadoop是Apache基金会面向全球开源的产品之一，任何用户都可以从ApacheHadoop官网下载使用。今天，播妞将以编写时较为稳定的Hadoop2.7.4版本为例，详细讲解Hadoop的安...

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