HTML：常用标签归纳（用法 + 代码 + 显示效果）

最新推荐文章于 2023-10-12 23:00:27 发布
最新推荐文章于 2023-10-12 23:00:27 发布
阅读量1.3k 收藏 18
点赞数 4
分类专栏： HTML + CSS + JS 文章标签： html 前端 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cosmoshhhyyy/article/details/131968464
版权

目录

标签

span 文本标签

<span style="color:red;font-size:30px">h</span><span>ello</span>

在这里插入图片描述

div 竖着布局的标签

<div>h</div>ello</div>

在这里插入图片描述

h1~h6 标题标签

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

在这里插入图片描述

p 段落标签

除了竖着布局，间隔也会大一点。

<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>

在这里插入图片描述

a 超链接标签

href 资源位置

href属性：设置资源路径，跳转到哪里。

<a href="https://www.baidu.com/" >点击跳转</a>

在这里插入图片描述

target 打开位置

target：当前网页打开或空白网页打开。

_self：默认的，在当前窗口打开.

<a href="https://www.baidu.com/" target="_self">点击跳转</a>

_blank：新页打开。

<a href="https://www.baidu.com/" target="_blank">点击跳转</a>

a 锚点标签

需要一个name属性，给锚点起名，想要跳到那里就放到哪。
配合超链接使用。

名字前面加上#，可以作为区分。
如跳转到开头：

<a name = "aa">开头</a>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<div style="height:120px;">hello</div>
<a href="#aa">点击跳转</a>

在这里插入图片描述

固定位置

position:fixd;
在屏幕的固定位置，滑动不改变位置。

<a href="#aa" style= "position:fixed;right:100px;bottom:100px;">点击跳转</a>

这样就固定在右下角了。
在这里插入图片描述

br 换行标签

想要哪里换行，放在哪里即可。
未加前：

<a name = "aa">开头</a>

在这里插入图片描述
加了后：

<a name = "aa">开头</a><br>

在这里插入图片描述

img 图片标签

src 属性

src:引入图片路径。

<img src="D:\桌面\一些图片\661918d1cb1dcac5626c48cd2ed9ffc2df142af2.jpg@942w_515h_progressive.webp">

在这里插入图片描述
这是绝对路径访问，也可以用相对路径。
同一个文件夹下，直接找名字即可。
也可以…退出或进入文件夹中寻找。

alt

alt:给图片加属性。

默认是隐藏的，若图片没有加载成功时，展示其内容。
在这里插入图片描述

width 宽度 height 高度

可以单独设置width，图片会等比例变化。
当然也可以在style中设置。

列表标签

ul 无序列表

<ul>
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
</ul>

在这里插入图片描述

ol 有序标签

<ol>
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
</ol>

在这里插入图片描述

设置表示顺序

用type属性
如用abc…来排序。

<ol type="a">
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
</ol>

在这里插入图片描述

table 表格属性

tr 设置行
td 行中单元格

	<table>
		<tr>
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
		</tr>
			
		<tr>
			<td>小明</td>
			<td>18</td>
			<td>男</td>
		</tr>
		<tr>
			<td>小华</td>
			<td>19</td>
			<td>女</td>
		</tr>
	</table>

在这里插入图片描述

border 边框

<table border="1">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小华</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

width 宽 height 高

不再介绍。

cellspacing 单元格距离

等于零，表示紧挨到一起。

<table border="1" cellspacing="0">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小华</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

在这里插入图片描述

cellpadding 填充

<table border="1" cellspacing="0" cellpadding="10px">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小华</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

在这里插入图片描述

thead 头、tbody 身子、tfoot 脚

划分table

rowspan colspan 单元格合并

rowspan 行合并
colspan 列合并
可以选择合并的个数。

<table border="1" cellspacing="0" cellpadding="10px">
    <tr>
        <td >姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
        
    <tr>
        <td rowspan="2">小明</td> 
        <td colspan = "2">18</td> 
        
    </tr>
    <tr>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

在这里插入图片描述

练习 制作一个如图的表格

<!DOCTYPE HTML>
<html>
<head>
	<title>我的第一个页面</title>
	<meta charset="UTF-8">
</head>
<body>
	<table border="1"  cellpadding="10px" style="border-color:#2ac;text-align:center;">
		<tr>
			<td colspan = "2">上午</td>
			<td colspan = "2">下午</td>	
		</tr>
		<tr>
			<td>8：00 ~ 10：00</td>	
			<td>10：10 ~ 12：00</td>	
			<td>14：00 ~ 16：00</td>
			<td>16：10 ~ 18：00</td>
		</tr>
		<tr>
			<td rowspan="2">领导讲话</td>
			<td>大会主题报告</td>
			<td>分会主题报告</td>	
			<td rowspan = "2">总结主题报告</td>			
		</tr>
		<tr>
			<td>专家报告</td>
			<td>分组讨论</td>	
		</tr>
		<tr>
			<td colspan = "4">全天观察博物馆中心</td>
		</tr>
	
</body>
</html>

在这里插入图片描述

iframe 框架标签（窗口标签）

嵌套其他页面，直接拿别人写好的。
有的页面不让嵌套。

scr 资源位置

窗口的链接。

<iframe src = "http://lib.hbu.edu.cn/"></iframe>

在这里插入图片描述

width 宽 height 高

不再介绍。

name 名字

可以用于利用上面所介绍的超链接，target指定窗口打开。

<html>
<body>
	<a href = "1.html" target="idx">超链接标签介绍 </a><br>
	<a href = "2.html" target="idx">列表标签介绍 </a><br>
	<a href = "3.html" target="idx">表格标签介绍 </a><br>
	<a href = "4.html" target="idx">框架标签介绍 </a><br>
	<iframe name = "idx" width="500px" height="600px"></iframe>
</body>
</html>

在这里插入图片描述

audio 音频

src 资源位置

一样的，也是取音频链接地址。

<audio src = "bj.mps"></audio>

但现在是看不到的。

controls 手动播放

加上之后就是true，没有加就是false。

<audio src = "bj.mps" controls></audio>

在这里插入图片描述

autoplay 自动播放

<audio src = "bj.mps" autoplay></audio>

loop 循环播放

<audio src = "bj.mps" loop></audio>

video 视频标签

和音频标签用法相似。

src 资源位置

<video src = "test.mp4"> </video>

controls 手动播放

<video src = "test.mp4" controls> </video>

loop 循环播放

<video src = "test.mp4" loop> </video>

width 宽 height 高

不再介绍。
会根据你的大小进行压缩，以便于正常的比例。

input 输入框

根据 type 类型的不同分类。

text 单行文本框

<input type="text"><br>

在这里插入图片描述

password 密码框

<input type="password">

在这里插入图片描述

radio 单选框

name 一样的只能选则其中一个。
例如选择男/女：

男：<input type="radio" name = "sex"> 女：<input type="radio" name = "sex">

在这里插入图片描述

checkbox 复选框

篮球：<input type="checkbox"> 足球：<input type="checkbox"> 乒乓球：<input type="checkbox">

在这里插入图片描述

file 文件选择器

<input type="file">

在这里插入图片描述

color 颜色拾取器

<input type="color">

在这里插入图片描述

date 日期选择器

<input type="date">

在这里插入图片描述

datetime-local 日期时间选择器

<input type="datetime-local">

在这里插入图片描述

week 周选择器

<input type="week">

在这里插入图片描述

range 滑块

mid 最小值
max 最大值
value 初始值

<input type="range" min="0" max="150" value="50">

在这里插入图片描述

number 数字选择器

mid 最小值
max 最大值
value 初始值
step 步长

<input type="number" min="0" max="150" value="50" step="10">

在这里插入图片描述

button 普通按钮

<input type="button" value="普通按钮">

submit 提交按钮

配合 form 使用，提交数据并且刷新。
在这里插入图片描述

<input type="submit" value="提交按钮">

resset 重置按钮

配合 form 使用，重置回初始状态。

<input type="reset" value="重置按钮">

form 表单

我们可以把上面input的所有标签放入 form 中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<form>
		单行文本框
		<input type="text"><br>
		密码框
		<input type="password"><br>
		单选框
		男：<input type="radio" name="sex"> 女：<input type="radio" name = "sex"><br>
		复选框
		篮球：<input type="checkbox"> 足球：<input type="checkbox"> 乒乓球：<input type="checkbox"><br>
		文件选择器
		<input type="file"><br>
		颜色拾取器
		<input type="color"><br> 
		日期选择器
		<input type="date"><br>
		日期时间选择器
		<input type="datetime-local"><br>
		周选择器
		<input type="week"><br>
		滑块
		<input type="range" min="0" max="150" value="50"><br>
		数字选择器
		<input type="number" min="0" max="150" value="50" step="10"><br>
		下拉框
		<select value="2">
			<option value="0">语文</option>
			<option value="1">数学</option>
			<option value="2">英语</option>
		</select><br>
		多行文本框域
		<textarea rows="10" cols="50"></textarea><br>
		<br>
		按钮
		<input type="button" value="普通按钮">
		提交按钮
		<input type="submit" value="提交按钮">
		重置按钮
		<input type="reset" value="重置按钮">
	</form>
</body>
</html>

在这里插入图片描述

select 下拉框 option 选项

<select value="2">
    <option value="0">语文</option>
    <option value="1">数学</option>
    <option value="2">英语</option>
</select>

在这里插入图片描述

textarea 多行文本框域

rows 控制行数
cols 控制列数

<textarea rows="10" cols="50"></textarea>

在这里插入图片描述

Cosmoshhhyyy
关注
  • 4
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML标签嵌套规则详细归纳适合新手朋友
12-13
下面就详细归纳一下HTML标签的嵌套规则吧，希望对大家有所帮助。 XHTML的标签有许多：div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候，是可以将它们无限...
HTML常用标签代码
05-07
HTML常用标签练习，方便大家借鉴，本次下载不需要积分，可以直接下载 HTML常用标签练习，方便大家借鉴，本次下载不需要积分，可以直接下载
HTML常见标签用法
C_TQH的博客
04-27 882
说明： 🍔target="_blank" 打开一个新的页面进行访问，当前页面仍在。🍔这个标签可以包万物，包图片，点击图片，跳转至新页面。给要跳转到的位置一个 id ，然后用超链接标签，带个"#"，就可以了。thead：表格的头部区域(注意和th区分，范围是比th要大的)<strong></strong>加粗。<ins></ins>下划线。<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>倾斜。
HTML常用标签详解
淘小欣的博客
03-04 8210
HTML常用标签详解 一、head内常用标签 1.基本标签（非meta标签） <!--title: 定义网页标题--> <title>Title</title> <!--style: 定义内部样式表. 内部用来书写css代码--> <style> h1 { color: greenyellow; } </style> <!--script: 内部用来书写js代码--> <script
html中常见标签及其用法归纳大全
2301_79234439的博客
08-20 5122
用_blank属性，百度一下
HTML中的常用标签用法
m0_64825264的博客
05-10 566
HTML中的常用标签用法
HTML学习整理
weixin_60645637的博客
12-27 445
optgroup是表单中比较生僻的一个元素，optgroup元素的作用是在下拉菜单或列表框中定义分组选项，通俗的来说，就是可使用optgroup元素为select元素所包含option元素进行分类。列表是网页中最常见的一种信息结构，很多初学者认为带有项目的符号的多行信息模块就是列表，这是对列表的语义误解，事实上，列表应该是同类、同行或同质信息的排列和结合。新增了27个元素，废弃16个元素，根据现有的标准规范，把HTML5的元素按优先等级定义为结构性元素、块级元素、行内语义性元素、交互性元素4大类。
HTML标签
二十多岁想退休
02-10 521
HTML常用标签
HTML常用标签
zhangeer的博客
10-01 470
HTML常用标签，标题标签 h1-h6，段落标签 p，强调标签 em/strong，换行标签br，分割线 hr，引用标签 q，居中标签center，删除标签 del，div标签，span标签
一年级数学下册：重点知识归纳+易错题梳理.pdf
10-10
《一年级数学下册：重点知识归纳+易错题梳理》 这份资料主要涵盖了人教版一年级数学下册的核心知识点及易错题目，旨在帮助学生巩固基础，提高解题能力。 一、20以内的退位减法 这部分内容主要包括10以内的加减法和...
常用Outlook设置方法+常用邮件服务器地址归纳.pdf
01-19
Outlook 设置方法与常用邮件服务器地址 本文档将为您讲解如何在 Outlook 中设置邮件账户，并提供了一些常用的邮件服务器地址。 一、Outlook 设置方法 1.首先打开 Outlook 软件，然后选择工具帐号并打开。 2.在...
HTML5新增的标签和属性归纳总结
01-19
收集总结的HTML5的新特性，基本除了IE9以下都可以使用。 HTML5语法 大部分延续了html的语法不同之处：开头的 <!DOCTYPE html> <html lang=zh-CN> <meta charset=utf-8> 字符编码变得简洁， 不区分大...
前端零基础学习html+css基础用法和常用语法
03-31
自己对html和css的一点点小总结，归纳出了我自己对html的理解，以及对我自己常用css样式 的结合
日语常用格助词用法技巧归纳.doc
04-03
日语常用格助词用法技巧归纳
2021年Excel常用技巧归纳.doc
12-13
本篇文章将总结2021年Excel的一些常用技巧，帮助用户提高工作效率。 一、基本操作技巧 1. 迅速选中所有工作表：只需按下Ctrl+Shift+PageDown键，可以同时选中所有工作表。 2. 快速启动Excel：可以通过创建桌面快捷...
HTML01常用文本标签
m0_60979337的博客
10-14 668
10.:表示引用一段名人名言，有默认的外边距 //块级元素。13.:表示内容是一段代码，默认显示为等宽字体样式 //行内元素。4.没有任何默认样式，主要给css做样式 //行内元素。14.:标记一段内容，背景显示为黄色 //行内元素。7.:没有任何语义，单纯的斜体 //行内元素。12.：表示内容用""包裹 //行内元素。
【HTML网页设计 + CSS样式表】详细记录 / 含代码 by.Akaxi
最新发布
Akaxi的博客
10-12 6131
【HTML网页设计 + CSS样式表】详细记录 / 含代码
HTML页面跳转及表单详解
m0_67444136的博客
07-18 9803
HTML页面跳转及表单详解
求Sn=a+aa+aaa+…+aa…a 之值，其中a是一个数字。例如：2+22+222+2222+22222（此时n=5）, n由键盘输入
06-12
这个数列可以用数学归纳法证明其求和公式为: Sn = (a*10^n - a) / 9 其中，a是数列中的数字，n是数列中数字的个数。 对于你的例子，n=5，a=2，代入公式得到： S5 = (2*10^5 - 2) / 9 = 22222 因此，2+22+222+2222+22222的和为22222。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cosmoshhhyyy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值