HTML标签

最新推荐文章于 2025-03-04 21:37:14 发布

Sione61

最新推荐文章于 2025-03-04 21:37:14 发布

阅读量358

点赞数

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/qq_43720863/article/details/127129215

版权

本文详细介绍了HTML的基础标签，包括文章标题、文字、图片、超链接、路径、列表、布局、音视频、表单等，并强调了标签的语义化、路径的使用以及表单元素的测试要点。建议在项目上线前删除注释，提高加载速度，并关注不同浏览器的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础

Tab键：快捷生成标签
标签语义化：在合适的地方使用合理标签，可在搜索引擎排名中更靠前
Ctrl+？：快捷生成注释
测试注意：项目上线前，要求删除注释内容，目的是加快网页加载速度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	<body>
	    <p>文章标题</p>
		空&nbsp;格
		<!-- 注释 -->
	    <br/>换行
	</body>
</html>

文章标题

        <h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>

在这里插入图片描述

文字相关标签

        <b>加粗</b>
		<strong>既加粗，又代表特别强调</strong>
		<i>倾斜</i>
		<em>既倾斜，又代表一般强调</em>
		<s>划掉（将被del替代）</s>
		<del>建议划掉使用del</del>

在这里插入图片描述

图片标签

src：代表资源，若图片与html文件在同一位置，则src=图片名
width，height：设置图片大小，若不单独设置，则显示图片默认大小，若只设置其一，则另一属性按比例缩放
title：设置图片名，在鼠标悬停时的提示文字
alt：
①当图片未正常加载时，文字才会被看到
②网页阅读器读取此内容

<img src="index.jpg" title="兔子" alt="tutu">
<img src="index.jpg" width="150" height="120">

在这里插入图片描述

超链接

herf：
①跳转线上网站，网址要带http://
②打开本地页面，若与当前html文件在同一文件夹，则直接写文件名
target=“_blank”：在新窗口打开链接
注：默认超链接都在当前窗口打开
herf=“#”：空链接，暂时不知道跳转到哪，用空链接占位
测试注意：若发现程序员用空链接来实现返回顶部效果，一定要提示用动画效果实现，用户体验更好

<a href="http://www.baidu.com" target="_blank">点击跳转百度</a>
<a href="02.html">点击跳转本地页面</a><br>
<a href="#">空链接</a>

路径

相对路径：相对于当前html文件，去找其它资源（文件）
①同级查找：当前html文件和目标文件在同一级目录，直接写资源名即可
②下级查找：当前html文件和目标文件在下一级目录中，文件夹名/资源名
③上级查找：当前html文件和目标文件在上一级目录中，…/资源名
绝对路径：资源在电脑中的具体位置，盘符名/文件夹名/文件名
注：前端语法中不推荐使用绝对路径

列表

<ul>
		<li>无序列表1</li>
		<li>无序列表2</li>
		<li>无序列表3</li>
</ul>
<ol>
		<li>有序列表1</li>
		<li>有序列表2</li>
		<li>有序列表3</li>
</ol>

在这里插入图片描述

布局标签

当没有任何语义时，可用布局标签进行内容包裹，方便后期css代码找到内容设置样式

<div>独占一行，称之为大盒子</div>
<span>一行可放多个，称之为小盒子</span>

音视频标签

<audio src="music.mp3" controls="controls"></audio>
<video src="movie.mp4" controls="controls"></video>

测试注意：因音视频标签的兼容性，要测三大主流浏览器（谷歌，火狐，IE）是否能正常运行
测IE低版本（用户要求再测）：开发人员工具，仿真（IE7，8，9，10，11）

表单

action：将表单数据传送给后台程序
method：传递数据时的方式方法
①post代表隐式提交数据
②get代表明文传送数据

<form action="xxx.jsp" method="post"></form>

普通文本框
placeholder：默认显示提示内容，输入内容后消失
autofocus：默认获取鼠标焦点

输入框：<input type="text" placeholder="请输入内容" autofocus="autofocus">

密码框

密码框：<input type="password">

单选框
①name：分为一组，只可单选
②checked：默认选择
③label:鼠标点击文字也可选择

单选框：<input type="radio" name="sex" checked="checked" id="man"><label for="man">男</label>
  	   <input type="radio" name="sex" id="woman" /><label for="woman">女</label>

测试细节：
①点击查看是否为单选效果
②刷新时是否有默认选中状态
③点击文字是否可以选择/切换

多选框
check和label与单选框同

多选框：<input type="checkbox">选择1
		<input type="checkbox">选择2
		<input type="checkbox">选择3

测试细节：
①刷新时是否有默认选中状态
②点击文字是否可以选择/切换
一切测试以用户需求为准

下拉框
selected：默认选中

下拉框：<select name="">
				<option value="">下拉1</option>
				<option value="" selected="selected">下拉2</option>
				<option value="">下拉3</option>
		</select>

测试细节：
①内容顺序
②默认选中的状态
③内容的条数

文本域
rows，cols：设置行列数

文本域：<textarea rows="5" cols="15"></textarea>

测试细节：
①测试三大主流浏览器外观是否一致
②提醒禁用拖拽大小功能

按钮
①重置：点击后表单数据恢复默认值
②提交：点击后将表单数据提交给指定后台处理
③value：设置按钮上的文字

普通按钮：<input type="button" value="按钮">
重置按钮：<input type="reset" value="重置">
提交按钮：<input type="submit" value="提交">

测试细节：点击后无论是否报错，最终测试时，只要关注数据库中内容是否正常即可

在这里插入图片描述