前端 -＞ HTML标签,事件

欧皇小德子

已于 2022-02-16 16:48:14 修改

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： html 前端 javascript

于 2020-12-27 20:07:11 首次发布

本文链接：https://blog.csdn.net/rod0320/article/details/111822870

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

HTML ＜html＞,＜head＞,＜title＞,＜body＞,＜p＞,＜h＞标签

HTML 实例

HTML 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

在这里插入图片描述

HTML 网页结构下面是一个可视化的HTML页面结构：

在这里插入图片描述

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况
这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

HTML label 标签

标签定义及使用说明

<label> 标签为 input 元素定义标注（标记）。

实例
带有两个输入字段和相关标记的简单 HTML 表单：

<form action="demo_form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

HTML ＜table＞,＜tbody＞标签

HTML table 标签

<table border="1">
	<tr>
		<th>Month</th>
		<th>Savings</th>
	</tr>
	<tr>
		<td>January</td>
		<td>$100</td>
	</tr>
</table>

在这里插入图片描述

标签定义及使用说明

<table> 标签定义 HTML 表格
一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。

<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

属性
在这里插入图片描述

HTML tbody 标签

详细参考菜鸟教程
HTML <tbody> 标签

<table border="1">
	<thead>
		<tr>
			<th>Month</th>
			<th>Savings</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Sum</td>
			<td>$180</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>January</td>
			<td>$100</td>
		</tr>
		<tr>
			<td>February</td>
			<td>$80</td>
		</tr>
	</tbody>
</table>

在这里插入图片描述

标签定义及使用说明

<tbody> 标签用于组合 HTML 表格的主体内容。
<tbody> 元素应该与 <thead> and <tfoot> 元素结合起来使用，用来规定表格的各个部分（主体、表头、页脚）。
<tbody> 主体
<thead> 表头
<tfoot> 页脚

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。
当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<tbody> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后。

提示和注释
注释：<tbody> 元素内部必须包含一个或者多个 <tr> 标签。

提示：<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。
不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

无属性

HTML input 标签

<form action="demo_form.asp">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

在这里插入图片描述

点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。

标签定义及使用说明

<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。

提示和注释

注意: <input> 元素是空的,它只包含标签属性。

提示: 你可以使用 <label> 元素来定义 <input> 元素的标注。

属性
在这里插入图片描述

HTML script 标签

<script>
document.write("Hello World!")
</script>

在这里插入图片描述
标签定义及使用说明

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。

JavaScript 通常用于图像操作、表单验证以及动态内容更改。

属性
New ：HTML5 中的新属性。
在这里插入图片描述

HTML 事件属性

全局事件属性

下面的表格提供了标准的事件属性，可以把它们插入 HTML/XHTML 元素中，以定义事件行为。

窗口事件属性（Window Event Attributes）

由窗口触发该事件 (适用于 <body> 标签):

属性	值	描述
onblur	script	当窗口失去焦点时运行脚本

表单事件(Form Events)

表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):

属性	值	描述
onblur	script	当元素失去焦点时运行脚本

键盘事件（Keyboard Events）

表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):

属性	值	描述

鼠标事件（Mouse Events）

属性	值	描述
onclick	script	当单击鼠标时运行脚本
ondblclick	script	当双击鼠标时运行脚本

多媒体事件(Media Events)

通过视频（videos），图像（images）或者音频（audio） 触发该事件
多应用于HTML媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>):

其他事件

属性	值	描述
onshowNew	script	当 <menu> 元素在上下文显示时触发
ontoggleNew	script	当用户打开或关闭元素时触发

HTML span 标签

使用 <span> 元素对文本中的一部分进行着色：

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

在这里插入图片描述

标签定义及使用说明

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

提示和注释
提示：被元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

HTML div 标签

文档中的一个区域将显示为蓝色：

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

在这里插入图片描述
标签定义及使用说明

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

提示和注释

提示：<div> 元素经常与 CSS 一起使用，用来布局网页。

注释：默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。

HTML 属性

HTML 元素可以设置属性

属性可以在元素中添加附加信息
属性一般描述于开始标签属性总是以名称/值对的形式出现，比如：name=“value”。

属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.runoob.com">这是一个链接</a>

在这里插入图片描述

HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。

HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

下面列出了适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML link 标签

链接到外部样式文件:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<link rel="stylesheet" type="text/css" href="styles.css"> 
</head>

<body>
<h1>我是通过样式文件 styles.css 渲染后显示的。</h1>
<p>我也是。</p>
</body>

</html>

标签定义及使用说明

<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
注意： link 元素是空元素，它仅包含属性。
注意：此元素只能存在于 head 部分，不过它可出现任何次数。

属性	值	描述
href	URL	定义被链接文档的位置。
hreflang	language_code	定义被链接文档中文本的语言。
media	media_query	规定被链接文档将显示在什么设备上。
rel	alternate	必需。定义当前文档与被链接文档之间的关系。
sizesNew	HeightxWidth	定义了链接属性大小，只对属性 rel=“icon” 起作用。
type	MIME_type	规定被链接文档的 MIME 类型。

HTML target属性

target 属性规定在何处打开链接文档:

<a href="http://www.runoob.com" target="_blank">访问菜鸟教程！</a>

定义和用法

<a> 标签的 target 属性规定在何处打开链接文档。

语法

<a target="_blank|_self|_parent|_top|framename">

_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。 framename 在指定的框架中打开被链接文档。

HTML img 标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">

</body>
</html>

在这里插入图片描述

URL 指存储图像的位置。
如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中
那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
此时，浏览器将显示这个替代性的文本而不是图像。
为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息
并且对于那些使用纯文本浏览器的人来说是非常有用的。

标签定义及使用说明

<img> 标签定义 HTML 页面中的图像。
<img> 标签有两个必需的属性：src 和 alt。
注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。标签的作用>是为被引用的图像创建占位符。
提示：通过在标签中嵌套标签，给图像添加到另一个文档的链接。

属性	值	描述
alt	text	规定图像的替代文本。
src	URL	规定显示图像的 URL。

排列图片：演示如何在文字中排列图像。

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

在这里插入图片描述

HTML 文本格式化（加粗文本斜体文本）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

</body>
</html>

HTML 格式化标签

HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体

HTML id 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
function displayResult()
{
	document.getElementById("myHeader").innerHTML="Have a nice day!";
}
</script>
</head>

<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">编辑文本</button>

</body>
</html>

在这里插入图片描述

定义和用法

id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚（link anchor）通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id的元素改变或添加样式。

id 规定元素的唯一 id。

命名规则：

必须以字母 A-Z 或 a-z 开头其后的字符：字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号(":")以及点号(".") ,值对大小写敏感

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

HTML 链接

基本的注意事项 - 有用的提示

注释：请始终将正斜杠添加到子文件夹。
假如这样书写链接：href=“https://www.runoob.com/html”，就会向服务器产生两次 HTTP 请求。
这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“https://www.runoob.com/html/”。

如何使用图片链接

“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

在这里插入图片描述

HTML ＜head＞,< title > ,< base > ,< link > ,< meta > 标签

head标签

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。
在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: 
<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

head 标签和 header 标签的不同

head 标签用于定义文档头部，它是所有头部元素的容器。
<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

如：

<html>
  <head>
     <title>文档标题</title>
  </head>
</html>
header 标签用于定义文档的页眉（介绍信息）。

如：

<html>
  <body>
    <header>
        <p>段落</p>
        <h1>一级标题</h1>
    </header>
  </body>
</html>
注意千万不要弄混。

title 标签

元素不仅可以显示文本，也可以在左侧显示logo等图片。

显示时，要将<link>标签放入<head>里。

<!doctype HTML>
<html>
<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>
<body>
……
……
……
</body>
</html>

base 标签

定义了所有链接的URL

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<base href="//www.runoob.com/images/" target="_blank">
</head>

<body>
<img src="logo.png"> 
<!--
注意这里我们设置了图片的相对地址。
能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL
所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
-->

<br><br>
<a href="//www.runoob.com">菜鸟教程</a>
<!--
注意这个链接会在新窗口打开
即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
-->
</body>
</html>

link 标签

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

meta 标签

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML Iframe 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:
//注意加斜杠//
<iframe src="//www.baidu.com"></iframe>
该URL指向不同的网页。

在这里插入图片描述


<iframe src="//www.baidu.com" name="iframe_a" width="1000" height="500"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

在这里插入图片描述

HTML Canvas

标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

什么是 canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过元素来绘制.
注意: 默认情况下元素没有边框和内容。

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个 <canvas> 元素.

使用 style 属性来添加边框:

实例
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

在这里插入图片描述

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

</script>

</body>

在这里插入图片描述

实例解析:

首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

更多参考:菜鸟教程

HTML onload 事件属性

定义和用法

onload 属性在文档对象加载完成后触发。
onload 通常使用于元素中，用于在页面完全载入后执行指定的脚本(包括图片，脚本，css文件等)。

实例
当文档加载完成后运行 JavaScript 脚本:

<body onload="load()">

HTML DOM className 属性

定义和用法

className 属性设置或返回元素的 class 属性。

语法

获取属性值：
HTMLElementObject.className

设置属性值：
HTMLElementObject.className=classname

HTML DOM item() 方法

定义和用法
item() 方法返回一个节点列表中指定索引的节点。

语法:
document.body.childNodes.item(0);

另外一种语法方法：
document.body.childNodes[0];

实例

返回元素的第一个子节点：
document.body.childNodes.item(0);

HTML input checked 属性:默认选中

实例
带有预选定复选框的 HTML 表单：

<form action="demo_form.php" method="get">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="submit" value="提交">

在这里插入图片描述

定义和用法
checked 属性是一个布尔属性。
checked 属性规定在页面加载时应该被预先选定的元素。
checked 属性适用于和。
checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

HTML DOM Select 对象

Select 对象
Select 对象代表 HTML 表单中的一个下拉列表。
在 HTML 表单中，标签每出现一次，一个 Select 对象就会被创建。

options 返回包含下拉列表中的所有选项的一个数组。

HTML option selected 属性:预选定

定义和用法

selected 属性是一个布尔属性。
selected 属性规定在页面加载时预先选定该选项。
被预选的选项会显示在下拉列表最前面的位置。

实例
带有预先选定的选项的下拉列表：

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>

在这里插入图片描述

HTML input checked 属性:预选定

定义和用法

checked 属性是一个布尔属性。
checked 属性规定在页面加载时应该被预先选定的 <input> 元素。
checked 属性适用于 <input type=“checkbox”> 和 <input type=“radio”>。

实例
带有预选定复选框的 HTML 表单：

<form action="demo_form.php" method="get">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="submit" value="提交">

在这里插入图片描述

HTML fieldset 标签

标签定义及使用说明

<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。

实例
对表单中的相关元素进行分组：

<form>
  <fieldset>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

在这里插入图片描述

可以使用 <legend>Personalia:</legend> 添加描述

HTML input disabled 属性

定义和用法

disabled 属性是一个布尔属性。
disabled 属性规定应该禁用的 <input> 元素。
被禁用的 input 元素是无法使用和无法点击的。

实例
带有已禁用的输入字段的 HTML 表单：

<form action="demo_form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname" disabled><br>
<input type="submit" value="提交">

在这里插入图片描述

HTML code 标签:短语标签

标签定义及使用说明

<code> 标签是一个短语标签，用来定义计算机代码文本。

所有短语标签：

标签	描述
`<em>`	呈现为被强调的文本。
`<strong>`	定义重要的文本。
`<dfn>`	定义一个定义项目。
`<code>`	定义计算机代码文本。
`<samp>`	定义样本文本。
`<kbd>`	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
`<var>`	定义变量。您可以将此标签与 `<pre>` 及 `<code>` 标签配合使用。

<body>

<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码 print("Hello World")</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>

</body>

在这里插入图片描述

HTML title 属性

定义和用法

title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

<body>

<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948。</p>
<p title="菜鸟教程">菜鸟教程</p>

</body>

在这里插入图片描述

欧皇小德子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端 -＞ HTML标签,事件

文章目录HTML ＜html＞,＜head＞,＜title＞,＜body＞,＜p＞,＜h＞标签HTML 实例中文编码HTML ＜table＞,＜tbody＞标签HTML table 标签HTML tbody 标签HTML input 标签HTML script 标签HTML 事件属性全局事件属性窗口事件属性（Window Event Attributes）表单事件(Form Events)键盘事件（Keyboard Events）鼠标事件（Mouse Events）多媒体事件(Media Events)其他
复制链接

扫一扫