文章目录
- HTML <html>,<head>,<title>,<body>,<p>,<h>标签
- HTML label 标签
- HTML <table>,<tbody>标签
- HTML input 标签
- HTML script 标签
- HTML 事件属性
- HTML span 标签
- HTML div 标签
- HTML 属性
- HTML link 标签
- HTML target属性
- HTML img 标签
- HTML 文本格式化(加粗文本 斜体文本)
- HTML id 属性
- HTML 链接
- HTML <head>,< title > ,< base > ,< link > ,< meta > 标签
- HTML Iframe 框架
- HTML Canvas
- HTML onload 事件属性
- HTML DOM className 属性
- HTML DOM item() 方法
- HTML input checked 属性:默认选中
- HTML DOM Select 对象
- HTML option selected 属性:预选定
- HTML input checked 属性:预选定
- HTML fieldset 标签
- HTML input disabled 属性
- HTML code 标签:短语标签
- HTML title 属性
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>