HTML常用基础标签，前端从入门到精通
zhezhongyun 2024-12-24 16:54 65 浏览
首先，我们来理解一下一个网页的基本组成
代码如下
一个网页是有许许多多的标签对组成的，即开始标签-结束标签，都是成对出现（当然我们后面会说的还存在单标签，表示自闭合标签，例如：<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从入门到精通 。
相关推荐
- perl基础——循环控制_principle循环
-
在编程中，我们往往需要进行不同情况的判断，选择，重复操作。这些时候我们需要对简单语句来添加循环控制变量或者命令。if/unless我们需要在满足特定条件下再执行的语句，可以通过if/unle...
- CHAPTER 2 The Antechamber of M de Treville 第二章 特雷维尔先生的前厅
-
CHAPTER1TheThreePresentsofD'ArtagnantheElderCHAPTER2TheAntechamber...
- CHAPTER 5 The King'S Musketeers and the Cardinal'S Guards 第五章 国王的火枪手和红衣主教的卫士
-
CHAPTER3TheAudienceCHAPTER5TheKing'SMusketeersandtheCardinal'SGuard...
- CHAPTER 3 The Audience 第三章 接见
-
CHAPTER3TheAudienceCHAPTER3TheAudience第三章接见M.DeTrévillewasatt...
- 别搞印象流!数据说明谁才是外线防守第一人!
-
来源：Reddit译者：@assholeeric编辑：伯伦WhoarethebestperimeterdefendersintheNBA?Here'sagraphofStea...
- V-Day commemorations prove anti-China claims hollow
-
People'sLiberationArmyhonorguardstakepartinthemilitaryparademarkingthe80thanniversary...
- EasyPoi使用_easypoi api
-
EasyPoi的主要特点：1.设计精巧,使用简单2.接口丰富,扩展简单3.默认值多,writelessdomore4.springmvc支持,web导出可以简单明了使用1.easypoi...
- 关于Oracle数据库12c 新特性总结_oracle数据库12514
-
概述今天主要简单介绍一下Oracle12c的一些新特性，仅供参考。参考：http://docs.oracle.com/database/121/NEWFT/chapter12102.htm#NEWFT...
- 【开发者成长】JAVA 线上故障排查完整套路!
-
线上故障主要会包括CPU、磁盘、内存以及网络问题，而大多数故障可能会包含不止一个层面的问题，所以进行排查时候尽量四个方面依次排查一遍。同时例如jstack、jmap等工具也是不囿于一个方面的问题...
- 使用 Python 向多个地址发送电子邮件
-
在本文中，我们将演示如何使用Python编程语言向使用不同电子邮件地址的不同收件人发送电子邮件。具体来说，我们将向许多不同的人发送电子邮件。使用Python向多个地址发送电子邮件Python...
- 提高工作效率的--Linux常用命令，能够决解95%以上的问题
-
点击上方关注，第一时间接受干货转发，点赞，收藏，不如一次关注评论区第一条注意查看回复：Linux命令获取linux常用命令大全pdf+Linux命令行大全pdf为什么要学习Linux命令？1、因为Li...
- linux常用系统命令_linux操作系统常用命令
-
系统信息arch显示机器的处理器架构dmidecode-q显示硬件系统部件-(SMBIOS/DMI)hdparm-i/dev/hda罗列一个磁盘的架构特性hdparm-tT/dev/s...
- 小白入门必知必会-PostgreSQL-15.2源码编译安装
-
一PostgreSQL编译安装1.1下载源码包在PostgreSQL官方主页https://www.postgresql.org/ftp/source/下载区选择所需格式的源码包下载。cd/we...
- Linux操作系统之常用命令_linux系统常用命令详解
-
Linux操作系统一、常用命令1．系统(1)系统信息arch显示机器的处理器架构uname-m显示机器的处理器架构uname-r显示正在使用的内核版本dmidecode-q显示硬件系...
- linux网络命名空间简介_linux 网络相关命令
-
此篇会以例子的方式介绍下linux网络命名空间。此例中会创建两个networknamespace：nsa、nsb，一个网桥bridge0，nsa、nsb中添加网络设备veth，网络设备间...
- 一周热门
- 最近发表
-
- perl基础——循环控制_principle循环
- CHAPTER 2 The Antechamber of M de Treville 第二章 特雷维尔先生的前厅
- CHAPTER 5 The King'S Musketeers and the Cardinal'S Guards 第五章 国王的火枪手和红衣主教的卫士
- CHAPTER 3 The Audience 第三章 接见
- 别搞印象流!数据说明谁才是外线防守第一人!
- V-Day commemorations prove anti-China claims hollow
- EasyPoi使用_easypoi api
- 关于Oracle数据库12c 新特性总结_oracle数据库12514
- 【开发者成长】JAVA 线上故障排查完整套路!
- 使用 Python 向多个地址发送电子邮件
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- opacity 属性 (32)
- transition 属性 (33)