html标签笔记

W3School MDN 查标签很方便的网站
: 循环滚动标签内的内容，类似弹幕
loop是标签中的可选属性，为循环次数。值不能为0
bgcolor是标签中的可选属性，为背景色

: 块级标签，常与input结伴出现 action 指定表单提交的地址，一般为服务器接口地址 method 指定表单提交的方式。一般为get或post enctype 指定提交数据的格式 "application/x-www-form-urlencoded":默认。普通的form上传方式。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。 "multipart/form-data":不对字符编码。当使用有文件上传控件的表单时，该值是必需的。 "text/plain":将空格转换为 "+" 符号，但不编码特殊字符。与input一起，参考网站：https://blog.csdn.net/weixin_64294248/article/details/140478777 : 为单标签，作用为创建文本框 type "password":输入密码时，输入的内容自动转化为"*" 关联属性：autocomplete "checkbox":复选框 "radio":单选框（当至少有两个时才可以自由选择）如果需要单选，要设置name属性 "text":文本输入框 "submit":提交按钮，默认有一个“提交”的按钮 "reset":重置按钮，默认有一个“重置”的按钮 "button":按钮，默认只有一个方格，需要设置value显示按钮的值 "color":颜色选择框 "file":上传文件按钮，如果需要上传多个文件，需要设置multiple "number":数字输入框，只能输入数字 "date":日期选择框 "time":时间选择框 "hidden":隐藏输入框，但仍上传服务器 placeholder 输入框提示的文字。当输入框为空时显示浅色提示文字，获得焦点时提示文字自动消失。 value 输入框里的值 name name的值可以理解为变量名。在form表单中，当表单提交时，name属性用于标识表单数据字段。服务器接收的数据会以name=value的形式出现例如：提交后会变成username=用户输入的内容 required 不需要属性值作用： 1.强制字段验证：标记该输入为必填项 2.阻止表单提交，如果内容为空，则阻止表单提交 3.生成提示信息：大多数浏览器会自动显示提示信息(如：请填写该字段) autocomplete autocomplete 属性可以应用于

、、

元素，它告诉浏览器:1.是否应该自动完成该字段 2.应该使用什么类型的信息来填充该字段
开关值： 
on：允许浏览器自动完成此字段（默认值） 
off：完全禁用自动完成功能
个人信息相关值： 
name：全名 
given-name：名字 
family-name：姓氏 
nickname：昵称 
email：电子邮件地址 
username：用户名 
new-password：新密码（注册时使用） 
current-password：当前密码（登录时使用） 
one-time-code：一次性验证码
联系信息 
tel：电话号码 
tel-country-code：国家代码 
tel-national：国内电话号码 
tel-area-code：区号 
tel-local：本地电话号码 
address-line1、address-line2、address-line3：地址行 
postal-code：邮政编码 
country：国家 
country-name：国家名称
支付信息 
cc-name：信用卡持卡人姓名 
cc-number：信用卡号 
cc-exp：信用卡到期日期 
cc-exp-month：信用卡到期月份 
cc-exp-year：信用卡到期年份 
cc-csc：信用卡安全码 
transaction-amount：交易金额
其他 
bday：生日 
bday-day：生日日期 
bday-month：生日月份 
bday-year：生日年份 
sex：性别 
url：网址 
photo：照片 
language：语言偏好
<select></select> :用于创建下拉列表 
例えば： 
<select name="cars" id="cars"> 
<option value="audi">奥迪</option> 
<option value="byd">比亚迪</option> 
<option value="geely">吉利</option> 
<option value="volvo">沃尔沃</option> 
</select>
<link> ： 为单标签，作用为引入外部资源
 rel 用于定义链接与网页的关系
 - `rel="stylesheet"`表示当前链接与文档是样式表的关系。
 - `rel="icon"`表示当前链接与文档是网站图标的关系。
 - `rel="apple-touch-icon"`表示当前链接与文档是Apple设备Touch图标的关系。
 - `rel="shortcut icon"`表示当前链接与文档是Windows快捷方式图标的关系
type 用于指定链接的资源类型。它诉浏览器如何解释链接的内容。 
- <code>type="image/png"</code>表示链接指向的资源是PNG格式的图像。 
- <code>type="image/x-icon"</code>表示链接指向的资源是ICO格式的图标。 
- <code>type="text/css"</code>表示链接指向的资源是CSS样式表。 
- <code>type="application/javascript"</code>表示链接指向的资源是Javascript脚本
href 指定目标文件的路径
可以写在<head>标签内设置标签页图标
 : 换行标签
<hr> : 分隔线标签
<header></header> : "文件页首区",通常会将大标题、简单批注说明等数据放在此区。
<h1>-<h6> : 字号由大到小
<footer></footer> : "文件页尾区",通常会将公司联络信息、版权信息或相关链接放在此区域。
<li></li> : 块级标签，常与连用
 : 段落标签.标签内不能出现<h1>-<h6>
<div></div>: 盒子标签
<pre></pre> : 将编辑器中的内容原封不动的放到网页上(包括换行和空格)。常用于显示诗词或是程序语言的源代码。
<code></code> : 主要用于显示部分程序语言的源代码、HTML或css的元素名称或属性等。 
 : 语义：要着重阅读的内容 默认效果：斜体 
 : 行内标签，语义：关键词 默认效果：加粗 
 : 语义:十分重要的内容（比em强烈） 默认效果：加粗
 : 行内标签。没有语义，用于包裹短语的通用容器。小型包裹，作用与div相近.
<ruby></ruby> : 该标签可以为每个汉字加上注音或拼音 
<rt></rt> : 该标签是<ruby></ruby>的子标签，其内放置的是拼音
<cite></cite> : 语义：作品标题 默认效果：斜体 
<dfn></dfn> : 语义：特殊术语或专属名词 默认效果：斜体 
<del></del>与<ins></ins> : 语义：删除的文本【与】插入的文本 默认效果：中划线【与】下划线 
<abbr></abbr> : 语义：缩写 内有title属性，属性名可为全称 默认效果：下虚线
 : 语义：引起读者关注 默认效果：加荧光背景（黄色）
<img> : 单标签，为网页添加图片，其中有src属性为图片的路径。alt属性为图片的描述 
width与height可以调整图片的宽和高。只调整其中一项图片也会跟着等比例缩放 
行内元素！ 
src属性也可以为base64文本.可以直接插入链接
<a></a> : 超链接标签 
href属性为目标url，href属性也可以跳转到自己本地的网页或文件。href属性也可以跳转到锚点处 
target属性有两个值为"_blank"（新标签页打开）,"_self"当前标签页跳转 
可选属性download,属性值为你想要下载的文件名。当使用download时，所跳转的文件不会自动打开，而是自动跳转到下载界面 
可选属性name，给锚点起一个名字
行内标签，换行或空格都只会导致页面内出现“一个”空格 。 
注意！a标签虽是行内标签，却可以包裹除自身以外的任何标签
<iframe></iframe> : 内嵌网页标签
 src：指定内嵌html的地址
 width: 宽
 height: 高
 如果浏览器不支持iframe,那么它将显示<iframe>标签中的文本
<meta> - 用于存储文档元数据。默认不显示
<label></label> : 语义--为一个表单控件（form control）提供定义性的标签或说明文本 
for : 值应为form表单控件的id，当用户点击与表单控件关联的 <label> 时，视为点击控件 
<label for="username">用户名：</label> 
<input type="text" id="username" name="username"> 
即使目标元素设置了display:none 也仍能正常关联
还有一种不需要for属性，隐式关联的方法: 
<label> 
用户名： 
<input type="text" name="username"> 
</label>
列表标签: 
一般列表内的元素只能为<li>,若想使用其他元素，可以放在<li>的下面
有序列表： 
<ol> 
<li> xxx </li> 
<li> xxx </li> 
<ol>
<ol>标签的语义为有序列表，<li>是其中的项
无序列表： 
<ul> 
<li> aaa </li> 
<li> bbb </li> 
</ul>
<ul>的语义是无序列表，<li>是其中的项
自定义列表： 
<dl> 
<dt> 术语名称1 </dt> 
<dd> 术语描述1 </dd> 
<dt> 术语描述2 </dt> 
<dd> 术语描述2 </dd> 
</dl>
<dl>是自定义列表，<dt>和<dd>是其中的项
表格标签 
<table></table> 表格由 <table> 标签来定义,也就是说<table>标签是表格的框架 
border 值为0时为没有表格线，为1时有双线表格线，2及以上为左右半角黑灰双色表格线，并会随着数字的增大而加宽 
width 表格的宽度，单位px 
height 表格的高度，单位px（不会影响表头和脚注的高度） 
cellspacing 单元格间距。cell 单元格 spacing 间距。值为字符串里的数字，不加单位。例:"0"。注意：即使cellspacing为0也无法做到合并边框。 
<tr></tr> 每个表格均有若干行（由 <tr> 标签定义） 
<td></td> 每行被分割为若干单元格（由 <td> 标签定义）.字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<caption></caption> 定义表格标题 
<thead></thead> 定义表格页眉 
<tfoot></tfoot> 定义表格页脚 
例えば: 
<table border="1"> 
<tr> 
<th>年龄</th> 
<th>性别</th> 
</tr> 
<tr> 
<td>18</td> 
<td>男</td> 
</tr> 
</table>
视频标签 
<video></video> 插入一个视频 
src 视频地址
图表标签 
<canvas></canvas>
通用属性： 
onerror:是一个事件属性，用于在加载资源失败时触发一段 JavaScript 代码。它常用于处理资源加载异常，比如图片不存在、服务器出错等情况。
通用属性
disabled 禁用标签 （只有属性值，没有属性名） 
id 确定身份 
lang 标签里可以加lang属性名，属性值为"en"或其他，作用是告诉浏览器目前采用的是什么语言，方便让浏览器识别并为用户提供翻译服务.英文"en",中文"zh",日文"ja" 
lorem 注意：这不是一个属性，在VSCode中输入这个可以生成一段英文，只是一段比较长的英文，没有实际作用，可以当做测试的字符串。后面可以跟数字，生成指定单词数，例如：lorem60 生成60个单词的一个句子。

posted @ 2026-07-03 06:13 畅畅c 阅读(2) 评论(0) 收藏举报

刷新页面返回顶部

畅畅c

html标签笔记

公告