HTML5教程

HTML标签

本文主要是介绍HTML标签,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

    • 格式
        • 基本格式
        • 注释
    • 块级元素,行内元素
        • **块级元素**
        • **行内元素**
    • ``
      • ``标签属性
    • 同源
    • ``
      • `img`属性
    • ``
        • 简介
        • ``属性
      • enctype 属性
    • ``
      • 简介
      • 类型
    • `

格式

基本格式

<!DOCTYPE html>
<html lang="en">
<!--语言-->
<head>
    <meta charset="UTF-8">
    <!--字符编码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 多端适应、响应式、自适应-->
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<html lang="en">
<!--向搜索引擎表示该页面是html语言,并且语言为英文网站-->
<!--"lang"的意思就是“language”,语言的意思,而“en”即表示english-->

<html lang="zh">
<!--中文页面,zh即表示中文-->

注释

<!-- -->

块级元素,行内元素

  • 所有元素可以分成两大类:块级元素(block)和行内元素(inline)

块级元素

  • 默认占据一个独立的区域,在网页上会自动另起一行,占据 100% 的宽度。
<p>hello</p> <p>world</p>
<!-- p元素是块级元素,浏览器会将内容分成两行显示

行内元素

  • 默认与其他元素在同一行,不产生换行
<span>hello</span> <span>world</span>
<!-- span元素是行内元素,浏览器会将两行内容放在一行显示

<a>

  • 链接通过<a>标签表示,用户点击后,浏览器跳转到href属性指定的网址
  • 文字下面默认会有下划线,表示这是一个链接
<a href="https://www.baidu.com维基百科</a>
<a href="www.baidu.com">维基百科</a>
<!--这样看似可以,实际是不行的;实际情况中浏览器会进行补全-->

<a>标签内部可以放置

  • 文字、段落、图像、多媒体等等
<a href="https://www.example.com/">
  <img src="https://www.example.com/foo.jpg">
</a>

<a>标签属性

(1)href

  • href属性给出链接指向的网址,它的值应该是一个 URL 或者锚点
  • 锚点:href属性的值是#加上锚点名称;点击后,浏览器会自动滚动,停在当前页面里面demo锚点所在的位置。
<a href="#demo">锚点示例</a>

(2)target

target属性指定如何展示打开的链接

  • _self:当前窗口打开,这是默认值。
  • _blank:新窗口打开。
<a  href="https://www.example.com"  target="_blank">示例链接</a><!--点击后,浏览器会新建一个窗口,在该窗口打开链接,并且新窗口没有名字
<p><a href="http://foo.com" target="test">foo</a></p><p><a href="http://bar.com" target="test">bar</a></p><!-- 上面代码中,两个链接都在名叫`test`的窗口打开。首先点击链接`foo`,浏览器发现没有叫做`test`的窗口,就新建一个窗口,起名为`test`,在该窗口打开`foo.com`。然后,用户又点击链接`bar`,由于已经存在`test`窗口,浏览器就在该窗口打开`bar.com`,取代里面已经打开的`foo.com`

注意,使用target属性的时候,最好跟rel="noreferrer"一起使用,这样可以避免安全风险

(3)rel

rel属性说明链接与当前页面的关系。

<a href="help.html" rel="help">帮助</a>

属性值

  • noreferrer:告诉浏览器打开链接时,不要将当前网址作为 HTTP 头信息的Referer字段发送出去,这样可以隐藏点击的来源

(4)referrerpolicy

  • referrerpolicy属性用于精确设定点击链接时,浏览器发送 HTTP 头信息的Referer字段的行为

  • 该属性可以取下面八个值:no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-urlsame-originstrict-originstrict-origin-when-cross-origin

  • no-referrer表示不发送Referer字段,same-origin表示同源时才发送Referer字段,origin表示只发送源信息(协议+域名+端口)。其他几项的解释,请查阅 HTTP 文档。

同源

  • 如果两个 URL 的 protocol、port 、 host都相同的话,则这两个 URL 是同源
URL结果原因
http://store.company.com/dir2/other.html同源只有路径不同
http://store.company.com/dir/inner/another.html同源只有路径不同
https://store.company.com/secure.html失败协议不同
http://store.company.com:81/dir/etc.html失败端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html失败主机不同

<img>

  • <img>标签用于插入图片。它是单独使用的,没有闭合标签

  • 默认是一个行内元素

<img src="相对路径/绝对路径">
<p>Hello<img src="foo.jpg">World</p><!-- 上面代码的渲染结果是,文字和图片在同一行显示

img属性

(1)alt 属性

alt属性用来设定图片的文字说明。图片不显示时(比如下载失败,或用户关闭图片加载),图片的位置上会显示该文本。

<img src="foo.jpg" alt="示例图片">

(2)onerror属性

  • 当图片无法加载时,执行onerror语句
<img src="foo.jpg" alt="示例图片" one rror="alert(1)">

(3)width 属性,height 属性

  • 图片默认以原始大小插入网页,width属性和height属性可以指定图片显示时的宽度和高度,单位是像素或百分比
<img src="foo.jpg" width="400" height="300">

<form>

简介

  • <form>标签用来定义一个表单,所有表单内容放到这个容器元素之中
<form>  <!-- 各种表单控件--></form>
<form action="https://example.com/api" method="post">  <label for="POST-name">用户名:</label>  <!--<label>标签-->      <input id="POST-name" type="text" name="user">  <!--文本输入框-->  <!--用户在文本输入框里面,输入用户名,比如`foobar`,然后点击提交按钮,浏览器就会向服务器`https://example.com/api`发送一个 POST 请求,发送`user=foobar`这样一段数据-->    <input type="submit" value="提交">  <!--提交按钮-->    </form>

<form>属性

  • method:提交数据的 HTTP 方法,可能的值有post(表单数据作为 HTTP 数据体发送),get(表单数据作为 URL 的查询字符串发送),dialog(表单位于<dialog>内部使用)

  • accept-charset:服务器接受的字符编码列表,使用空格分隔,默认与网页编码相同。

  • action:服务器接收数据的 URL。

  • autocomplete:如果用户没有填写某个控件,浏览器是否可以自动填写该值。它的可能取值分别为off(不自动填写)和on(自动填写)

  • enctype:当method属性等于post时,该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded(默认值),multipart/form-data(文件上传的情况),text/plain

  • name:表单的名称,应该在网页中是唯一的。注意,如果一个控件没有设置name属性,那么这个控件的值就不会作为键值对,向服务器发送。

  • novalidate:布尔属性,表单提交时是否取消验证。

  • target:在哪个窗口展示服务器返回的数据,可能的值有_self(当前窗口),_blank(新建窗口),_parent(父窗口),_top(顶层窗口),<iframe>标签的name属性(即表单返回结果展示在<iframe>窗口)。

enctype 属性

<form>表单的enctype属性,指定了采用 POST 方法提交数据时,浏览器给出的数据的 MIME 类型。该属性可以取以下值。

(1)application/x-www-form-urlencoded

application/x-www-form-urlencoded是默认类型,控件名和控件值都要转义(空格转为+号,非数字和非字母转为%HH的形式,换行转为CR LF),控件名和控件值之间用=分隔。控件按照出现顺序排列,控件之间用&分隔。

(2)multipart/form-data

multipart/form-data主要用于文件上传。这个类型上传大文件时,会将文件分成多块传送,每一块的 HTTP 头信息都有Content-Disposition属性,值为form-data,以及一个name属性,值为控件名。

Content-Disposition: form-data; name="mycontrol"

下面是上传文件的表单。

<form action="https://example.com/api"      enctype="multipart/form-data"      method="post">  用户名:<input type="text" name="submit-name"><br>  文件:<input type="file" name="files"><br>  <input type="submit" value="上传"> <input type="reset" value="清除"></form>

上面代码中,输入用户名Larry,选中一个file1.txt文件,然后点击“上传”。浏览器发送的实际数据如下。

Content-Type: multipart/form-data; boundary=--AaB03x--AaB03xContent-Disposition: form-data; name="submit-name"Larry--AaB03xContent-Disposition: form-data; name="files"; filename="file1.txt"Content-Type: text/plain... contents of file1.txt ...--AaB03x--

上面代码中,浏览器将这个表单发成多个数据块。最上面使用Content-Type字段告诉服务器,数据格式是multipart/form-data(即多个数据块),每个数据块的分隔标志是--AaB03x。每个数据块的第一行是Content-Disposition,其中的name字段表示这个数据块的控件名,数据体则是该控件的数据值,比如第一个数据块的name属性是submit-name控件,数据体是该控件的值Larry。第二个数据块是控件files,由于该控件是上传文件,所以还要用filename属性给出文件名file1.txt,数据体是file1.txt的内容。

<input>

简介

  • <input>标签是一个行内元素,用来接收用户的输入。它是一个单独使用的标签,没有结束标志

  • 它有多种类型,取决于type属性的值,默认值是text,表示一个输入框

<input><!-- 等同于 --><input type="text"><!--上面代码会生成一个单行的输入框,用户可以在里面输入文本-->
  • name:控件的名称,提交时告诉服务器该属性对应的数据名称。注意,只有设置了name属性的控件,才会向服务器提交,不设置就不会提交

  • value:控件的值

  • autofocus:布尔属性,是否在页面加载时自动获得焦点。

  • disabled:布尔属性,是否禁用该控件。一旦设置,该控件将变灰,用户可以看到,但是无法操作。

  • form:关联表单的id属性。设置了该属性后,控件可以放置在页面的任何位置,否则只能放在<form>内部。

  • list:关联的<datalist>id属性,设置该控件相关的数据列表,详见后文。

  • readonly:布尔属性,是否为只读。

  • required:布尔属性,是否为必填。

  • type:控件类型,详见下文。

类型

type属性决定了<input>的形式。该属性可以取以下值。

1、text

type="text"是普通的文本输入框,用来输入单行文本。如果用户输入换行符,换行符会自动从输入中删除。

<input type="text" id="name" name="name" required       minlength="4" maxlength="8" size="10">

text输入框有以下配套属性

  • maxlength:可以输入的最大字符数,值为一个非负整数
  • minlength:可以输入的最小字符数,值为一个非负整数,且必须小于maxlength
  • pattern:用户输入必须匹配的正则表达式,比如要求用户输入4个~8个英文字符,可以写成pattern="[a-z]{4,8}"。如果用户输入不符合要求,浏览器会弹出提示,不会提交表单
  • placeholder:输入字段为空时,用于提示的示例值。只要用户没有任何字符,该提示就会出现,否则会消失
  • readonly:布尔属性,表示该输入框是只读的,用户只能看,不能输入
  • size:表示输入框的显示长度有多少个字符宽,它的值是一个正整数,默认等于20。超过这个数字的字符,必须移动光标才能看到。
  • spellcheck:是否对用户输入启用拼写检查,可能的值为truefalse

2、password

type="password"是一个密码输入框。用户的输入会被遮挡,字符通常显示星号(*)或点(·)。

<input type="password" id="pass" name="password"           minlength="8" required>

浏览器对该类型输入框的显示,会有所差异。一种常见的处理方法是,用户每输入一个字符,先在输入框里面显示一秒钟,然后再遮挡该字符。

如果用户输入内容包含换行符(U+000A)和回车符(U+000D),浏览器会自动将这两个字符过滤掉。

该类型的配套属性如下。

  • maxlength:可以输入的最大字符数。
  • minlength:可以输入的最少字符数。
  • pattern:输入必须匹配的正则表达式。
  • placeholder:输入为空时的显示文本。
  • readonly:布尔属性,该输入框是否只读。
  • size:一个非负整数,表示输入框的显示长度为多少个字符。
  • autocomplete:是否允许自动填充,可能的值有on(允许自动填充)、off(不允许自动填充)、current-password(填入当前网站保存的密码)、new-password(自动生成一个随机密码)。
  • inputmode:允许用户输入的数据类型,可能的值有none(不使用系统输入法)、text(标准文本输入)、decimal(数字,包含小数)、numeric(数字0-9)等。

3、submit

type="submit"是表单的提交按钮。用户点击这个按钮,就会把表单提交给服务器

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

如果不指定value属性,浏览器会在提交按钮上显示默认的文字,通常是Submit

该类型有以下配套属性,用来覆盖<form>标签的相应设置

  • formaction:提交表单数据的服务器 URL
  • formenctype:表单数据的编码类型
  • formmethod:提交表单使用的 HTTP 方法(getpost
  • formnovalidate:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证
  • formtarget:收到服务器返回的数据后,在哪一个窗口显示

4、hidden

  • type="hidden"是一个不显示在页面的控件,用户无法输入它的值,主要用来向服务器传递一些隐藏信息

  • 比如,CSRF 攻击会伪造表单数据,那么使用这个控件,可以为每个表单生成一个独一无二的隐藏编号,防止伪造表单提交

<input id="prodId" name="prodId" type="hidden" value="xm234jq">

上面这个控件,页面上是看不见的。用户提交表单的时候,浏览器会将prodId=xm234jq发给服务器

5、tel

type="tel"是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同,因此浏览器没有默认的验证模式,大多数时候需要自定义验证。

<input type="tel" id="phone" name="phone"       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"       required><small>Format: 123-456-7890</small>

上面代码定义了一个只能输入10位电话号码的输入框。

该类型的配套属性如下。

  • maxlength:允许的最大字符数。
  • minlength:允许的最少字符串。
  • pattern:输入内容必须匹配的正则表达式。
  • placeholder:输入为空时显示的示例文本。
  • readonly:布尔属性,表示该控件的内容是否只读。
  • size:一个非负整数,表示该输入框显示宽度为多少个字符。

(2)search

type="search"是一个用于搜索的文本输入框,基本等同于type="text"。某些浏览器会在输入的时候,在输入框的尾部显示一个删除按钮,点击就会删除所有输入,让用户从头开始输入。

下面是一个例子。

<form>  <input type="search" id="mySearch" name="q"    placeholder="输入搜索词……" required>  <input type="submit" value="搜索"></form>

(3)button

type="button"是没有默认行为的按钮,通常脚本指定click事件的监听函数来使用。

<input type="button" value="点击">

建议尽量不使用这个类型,而使用<button>标签代替,一则语义更清晰,二则<button>标签内部可以插入图片或其他 HTML 代码。

(5)image

type="image"表示将一个图像文件作为提交按钮,行为和用法与type="submit"完全一致。

<input type="image" alt="登陆" src="login-button.png">

上面代码中,图像文件是一个可以点击的按钮,点击后会提交数据到服务器。

该类型有以下配套属性。

  • alt:图像无法加载时显示的替代字符串。
  • src:加载的图像 URL。
  • height:图像的显示高度,单位为像素。
  • width:图像的显示宽度,单位为像素。
  • formaction:提交表单数据的服务器 URL。
  • formenctype:表单数据的编码类型。
  • formmethod:提交表单使用的 HTTP 方法(getpost)。
  • formnovalidate:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。
  • formtarget:收到服务器返回的数据后,在哪一个窗口显示。

用户点击图像按钮提交时,会额外提交两个参数xy到服务器,表示鼠标的点击位置,比如x=52&y=55x是横坐标,y是纵坐标,都以图像左上角作为原点(0, 0)。如果图像按钮设置了name属性,比如name="position",那么将以该值作为坐标的前缀,比如position.x=52&position.y=55。这个功能通常用来地图类型的操作,让服务器知道用户点击了地图的哪个部分。

(6)reset

type="reset"是一个重置按钮,用户点击以后,所有表格控件重置为初始值。

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

如果不设置value属性,浏览器会在按钮上面加上默认文字,通常是Reset

这个控件用处不大,用户点错了还会使得所有已经输入的值都被重置,建议不要使用。

(7)checkbox

type="checkbox"是复选框,允许选择或取消选择该选项。

<input type="checkbox" id="agreement" name="agreement" checked><label for="agreement">是否同意</label>

上面代码会在文字前面,显示一个可以点击的选择框,点击可以选中,再次点击可以取消。上面代码中,checked属性表示默认选中。

value属性的默认值是on。也就是说,如果没有设置value属性,以上例来说,选中复选框时,会提交agreement=on。如果没有选中,提交时不会有该项。

多个相关的复选框,可以放在<fieldset>里面。

<fieldset>  <legend>你的兴趣</legend>  <div>    <input type="checkbox" id="coding" name="interest" value="coding">    <label for="coding">编码</label>  </div>  <div>    <input type="checkbox" id="music" name="interest" value="music">    <label for="music">音乐</label>  </div></fieldset>

上面代码中,如果用户同时选中两个复选框,提交的时候就会有两个name属性,比如interest=coding&interest=music

(8)radio

type="radio"是单选框,表示一组选择之中,只能选中一项。单选框通常为一个小圆圈,选中时会被填充或突出显示。

<fieldset>  <legend>性别</legend>  <div>    <input type="radio" id="male" name="gender" value="male">    <label for="male">男</label>  </div>  <div>    <input type="radio" id="female" name="gender" value="female">    <label for="female">女</label>  </div></fieldset>

上面代码中,性别只能在两个选项之中,选择一项。

注意,多个单选框的name属性的值,应该都是一致的。提交到服务器的就是选中的那个值。

该类型的配套属性如下。

  • checked:布尔属性,表示是否默认选中当前项。
  • value:用户选中该项时,提交到服务器的值,默认为on

(9)email

type="email"是一个只能输入电子邮箱的文本输入框。表单提交之前,浏览器会自动验证是否符合电子邮箱的格式,如果不符合就会显示提示,无法提交到服务器。

<input type="email" pattern=".+@foobar.com" size="30" required>

上面代码会生成一个必填的文本框,只能输入后缀为foobar.com的邮箱地址。

该类型有一个multiple的布尔属性,一旦设置,就表示该输入框可以输入多个逗号分隔的电子邮箱。

<input id="emailAddress" type="email" multiple required>

注意,如果同时设置了multiple属性和required属性,零个电子邮箱是允许的,也就是该输入框允许为空。

该类型的配套属性如下。

  • maxlength:可以输入的最大字符数。
  • minlength:可以输入的最少字符数。
  • multiple:布尔属性,是否允许输入多个以逗号分隔的电子邮箱。
  • pattern:输入必须匹配的正则表达式。
  • placeholder:输入为空时的显示文本。
  • readonly:布尔属性,该输入框是否只读。
  • size:一个非负整数,表示输入框的显示长度为多少个字符。
  • spellcheck:是否对输入内容启用拼写检查,可能的值为truefalse

该类型还可以搭配<datalist>标签,提供输入的备选项。

<input type="email" size="40" list="defaultEmails"><datalist id="defaultEmails">  <option value="jbond007@mi6.defence.gov.uk">  <option value="jbourne@unknown.net">  <option value="nfury@shield.org">  <option value="tony@starkindustries.com">  <option value="hulk@grrrrrrrr.arg"></datalist>

上面代码中,输入焦点进入输入框以后,会显示一个下拉列表,里面有五个参考项,供用户参考。

(11)file

type="file"是一个文件选择框,允许用户选择一个或多个文件,常用于文件上传功能。

<input type="file"       id="avatar" name="avatar"       accept="image/png, image/jpeg">

该类型有以下属性。

  • accept:允许选择的文件类型,使用逗号分隔,可以使用 MIME 类型(比如image/jpeg),也可以使用后缀名(比如.doc),还可以使用audio/*(任何音频文件)、video/*(任何视频文件)、image/*(任何图像文件)等表示法。
  • capture:用于捕获图像或视频数据的源,可能的值有user(面向用户的摄像头或麦克风),environment(外接的摄像头或麦克风)。
  • multiple:布尔属性,是否允许用户选择多个文件。

(13)number

type="number"是一个数字输入框,只能输入数字。浏览器通常会在输入框的最右侧,显示一个可以点击的上下箭头,点击向上箭头,数字会递增,点击向下箭头,数字会递减。

<input type="number" id="tentacles" name="tentacles"       min="10" max="100">

上面代码指定数字输入框,最小可以输入10,最大可以输入100。

该类型可以接受任何数值,包括小数和整数。可以通过step属性,限定只接受整数。

该类型有以下配套属性。

  • max:允许输入的最大数值。
  • min:允许输入的最小数值。
  • placeholder:用户输入为空时,显示的示例值。
  • readonly:布尔属性,表示该控件是否为只读。
  • step:点击向上和向下箭头时,数值每次递减的步长值。如果用户输入的值,不符合步长值的设定,浏览器会自动四舍五入到最近似的值。默认的步长值是1,如果初始的value属性设为1.5,那么点击向上箭头得到2.5,点击向下箭头得到0.5

(14)range

type="range"是一个滑块,用户拖动滑块,选择给定范围之中的一个数值。因为拖动产生的值是不精确的,如果需要精确数值,不建议使用这个控件。常见的例子是调节音量。

<input type="range" id="start" name="volume"         min="0" max="11">

上面代码会产生一个最小值为0、最大值为11的滑块区域。用户拖动滑块,选择想要的音量。

该类型的配套属性如下,用法与type="number"一致。

  • max:允许的最大值,默认为100。
  • min:允许的最小值,默认为0。
  • step:步长值,默认为1。

value属性的初始值就是滑块的默认位置。如果没有设置value属性,滑块默认就会停在最大值和最小值中间。如果max属性、min属性、value属性都没有设置,那么value属性为50。

该类型与<datalist>标签配合使用,可以在滑动区域产生刻度。

<input type="range" list="tickmarks"><datalist id="tickmarks">  <option value="0" label="0%">  <option value="10">  <option value="20">  <option value="30">  <option value="40">  <option value="50" label="50%">  <option value="60">  <option value="70">  <option value="80">  <option value="90">  <option value="100" label="100%"></datalist>

上面代码会在0~100之间产生11个刻度。其中,0%50%100%三个位置会有文字提示,不过浏览器很可能不支持。

注意,浏览器生成的都是水平滑块。如果想要生成垂直滑块,可以使用 CSS 改变滑块区域的方向。

(15)url

type="url"是一个只能输入网址的文本框。提交表单之前,浏览器会自动检查网址格式是否正确,如果不正确,就会无法提交。

<input type="url" name="url" id="url"       placeholder="https://example.com"       pattern="https://.*" size="30"       required>

上面代码的pattern属性指定输入的网址只能使用 HTTPS 协议。

注意,该类型规定,不带有协议的网址是无效的,比如foo.com是无效的,http://foo.com是有效的。

该类型的配套属性如下。

  • maxlength:允许的最大字符数。
  • minlength:允许的最少字符串。
  • pattern:输入内容必须匹配的正则表达式。
  • placeholder:输入为空时显示的示例文本。
  • readonly:布尔属性,表示该控件的内容是否只读。
  • size:一个非负整数,表示该输入框显示宽度为多少个字符。
  • spellcheck:是否启动拼写检查,可能的值为true(启用)和false(不启用)。

该类型与<datalist>标签搭配使用,可以形成下拉列表供用户选择。随着用户不断键入,会缩小显示范围,只显示匹配的备选项。

<input id="myURL" name="myURL" type="url"       list="defaultURLs"><datalist id="defaultURLs">  <option value="https://developer.mozilla.org/" label="MDN Web Docs">  <option value="http://www.google.com/" label="Google">  <option value="http://www.microsoft.com/" label="Microsoft">  <option value="https://www.mozilla.org/" label="Mozilla">  <option value="http://w3.org/" label="W3C"></datalist>

上面代码中,<option>label属性表示文本标签,显示在备选下拉框的右侧,网址显示在左侧。

(16)tel

type="tel"是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同,因此浏览器没有默认的验证模式,大多数时候需要自定义验证。

<input type="tel" id="phone" name="phone"       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"       required><small>Format: 123-456-7890</small>

上面代码定义了一个只能输入10位电话号码的输入框。

该类型的配套属性如下。

  • maxlength:允许的最大字符数。
  • minlength:允许的最少字符串。
  • pattern:输入内容必须匹配的正则表达式。
  • placeholder:输入为空时显示的示例文本。
  • readonly:布尔属性,表示该控件的内容是否只读。
  • size:一个非负整数,表示该输入框显示宽度为多少个字符。

(17)color

type="color"是一个选择颜色的控件,它的值一律都是#rrggbb格式。

<input type="color" id="background" name="background"           value="#e66465">

上面代码在 Chrome 浏览器中,会显示一个#e66465的色块。点击色块,就会出现一个拾色器,供用户选择颜色。

如果没有指定value属性的初始值,默认值为#000000(黑色)。

(18)date

type="date"是一个只能输入日期的输入框,用户可以输入年月日,但是不能输入时分秒。输入格式是YYYY-MM-DD

<input type="date" id="start" name="start"       value="2018-07-22"       min="2018-01-01" max="2018-12-31">

上面代码会显示一个输入框,默认日期是2018年7月22日。用户点击以后,会日期选择器,供用户选择新的日期。

该类型有以下配套属性。

  • max:可以允许的最晚日期,格式为yyyy-MM-dd
  • min:可以允许的最早日期,格式为yyyy-MM-dd
  • step:步长值,一个数字,以天为单位。

(19)time

type="time"是一个只能输入时间的输入框,可以输入时分秒,不能输入年月日。日期格式是24小时制的hh:mm,如果包括秒数,格式则是hh:mm:ss。日期选择器的形式则随浏览器不同而不同。

<input type="time" id="appt" name="appt"       min="9:00" max="18:00" required><small>营业时间上午9点到下午6点</small>

该类型有以下配套属性。

  • max:允许的最晚时间。
  • min:允许的最早时间。
  • readonly:布尔属性,表示用户是否不可以编辑时间。
  • step:步长值,单位为秒。
<input id="appt" type="time" name="appt" step="2">

上面代码中,调节控件的话,时间每次改变的幅度是2秒钟。

(20)month

type="month"是一个只能输入年份和月份的输入框,格式为YYYY-MM

<input type="month" id="start" name="start"       min="2018-03" value="2018-05">

该类型有以下配套属性。

  • max:允许的最晚时间,格式为yyyy-MM
  • min:允许的最早时间,格式为yyyy-MM
  • readonly:布尔属性,表示用户是否不可以编辑时间。
  • step:步长值,单位为月。

(21)week

type="week"是一个输入一年中第几周的输入框。格式为yyyy-Www,比如2018-W18表示2018年第18周。

<input type="week" name="week" id="camp-week"       min="2018-W18" max="2018-W26" required>

该类型有以下配套属性。

  • max:允许的最晚时间,格式为yyyy-Www
  • min:允许的最早时间,格式为yyyy-Www
  • readonly:布尔属性,表示用户是否不可以编辑时间。
  • step:步长值,单位为周。

(22)datetime-local

type="datetime-local"是一个时间输入框,让用户输入年月日和时分,格式为yyyy-MM-ddThh:mm。注意,该控件不支持秒。

<input type="datetime-local" id="meeting-time"       name="meeting-time" value="2018-06-12T19:30"       min="2018-06-07T00:00" max="2018-06-14T00:00">

该类型有以下配套属性。

  • max:允许的最晚时间,格式为yyyy-MM-ddThh:mm
  • min:允许的最早时间,格式为yyyy-MM-ddThh:mm
  • step:步长值,单位为秒,默认值是60。

<script>

  • <script>用于加载脚本代码,目前主要是加载 JavaScript 代码
<script>console.log('hello world');</script><!--打开控制台会显示-->
  • 弹窗事件
<script>    alert(直接弹窗,有确定按钮)</script>
<script>    prompt(直接弹窗,有输入框、确定按钮和取消按钮)</script>
<script>    confirm(直接弹窗,有确定按钮和取消按钮)</script>
  • <script>也可以加载外部脚本,src属性给出外部脚本的地址
<script src="javascript.js"></script>
  • type属性给出脚本的类型,默认是 JavaScript 代码,所以可省略。完整的写法其实是下面这样
<script type="text/javascript" src="javascript.js"></script>

<noscript>

<noscript>标签用于浏览器不支持或关闭 JavaScript 时,所要显示的内容

<noscript>  您的浏览器不能执行 JavaScript 语言,页面无法正常显示。</noscript>

<select>

<select>标签用于生成一个下拉菜单。

<label for="pet-select">宠物:</label><select id="pet-select" name="pet-select">  <option value="">--请选择一项--</option>  <option value="dog">狗</option>  <option value="cat">猫</option>  <option value="others">其他</option></select>

上面代码中,<select>生成一个下拉菜单,菜单标题是“–请选择一项–”,最右侧有一个下拉箭头。点击下拉箭头,会显示三个菜单项,供用户点击选择。

下拉菜单的菜单项由<option>标签给出,每个<option>代表可以选择的一个值。选中的<option>value属性,就是<select>控件发送的服务器的值。

<option>有一个布尔属性selected,一旦设置,就表示该项是默认选中的菜单项。

<select name="choice">  <option value="first">First Value</option>  <option value="second" selected>Second Value</option>  <option value="third">Third Value</option></select>

上面代码中,第二项Second Value是默认选中的。页面加载的时候,会直接显示在下拉菜单上。

<select>有如下属性。

  • autofocus:布尔属性,页面加载时是否自动获得焦点。
  • disabled:布尔属性,是否禁用当前控件。
  • form:关联表单的id属性。
  • multiple:布尔属性,是否可以选择多个菜单项。默认情况下,只能选择一项。一旦设置,多数浏览器会显示一个滚动列表框。用户可能需要按住Shift或其他功能键,选中多项。
  • name:控件名。
  • required:布尔属性,是否为必填控件。
  • size:设置了multiple属性时,页面显示时一次可见的行数,其他行需要滚动查看。

iframe

<iframe>标签用于在网页里面嵌入其他网页。

基本用法

<iframe>标签生成一个指定区域,在该区域中嵌入其他网页。它是一个容器元素,如果浏览器不支持<iframe>,就会显示内部的子元素。

<iframe src="https://www.example.com"        width="100%" height="500" frameborder="0"        allowfullscreen sandbox>  <p><a href="https://www.example.com">点击打开嵌入页面</a></p></iframe>

上面的代码在当前网页嵌入https://www.example.com,显示区域的宽度是100%,高度是500像素。如果当前浏览器不支持<iframe>,则会显示一个链接,让用户点击。

浏览器普遍支持<iframe>,所以内部的子元素可以不写。

<iframe>的属性如下。

  • allowfullscreen:允许嵌入的网页全屏显示,需要全屏 API 的支持,请参考相关的 JavaScript 教程。
  • frameborder:是否绘制边框,0为不绘制,1为绘制(默认值)。建议尽量少用这个属性,而是在 CSS 里面设置样式。
  • src:嵌入的网页的 URL。
  • width:显示区域的宽度。
  • height:显示区域的高度。
  • sandbox:设置嵌入的网页的权限,详见下文。
  • importance:浏览器下载嵌入的网页的优先级,可以设置三个值。high表示高优先级,low表示低优先级,auto表示由浏览器自行决定。
  • name:内嵌窗口的名称,可以用于<a><form><base>target属性。
  • referrerpolicy:请求嵌入网页时,HTTP 请求的Referer字段的设置。参见<a>标签的介绍。

sandbox 属性

嵌入的网页默认具有正常权限,比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面,你不了解对方会执行什么操作,因此就存在安全风险。为了限制<iframe>的风险,HTML 提供了sandbox属性,允许设置嵌入的网页的权限,等同于提供了一个隔离层,即“沙箱”。

sandbox可以当作布尔属性使用,表示打开所有限制。

<iframe src="https://www.example.com" sandbox></iframe>

sandbox属性可以设置具体的值,表示逐项打开限制。未设置某一项,就表示不具有该权限。

  • allow-forms:允许提交表单。
  • allow-modals:允许提示框,即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。
  • allow-popups:允许嵌入的网页使用window.open()方法弹出窗口。
  • allow-popups-to-escape-sandbox:允许弹出窗口不受沙箱的限制。
  • allow-orientation-lock:允许嵌入的网页用脚本锁定屏幕的方向,即横屏或竖屏。
  • allow-pointer-lock:允许嵌入的网页使用 Pointer Lock API,锁定鼠标的移动。
  • allow-presentation:允许嵌入的网页使用 Presentation API。
  • allow-same-origin:不打开该项限制,将使得所有加载的网页都视为跨域。
  • allow-scripts:允许嵌入的网页运行脚本(但不创建弹出窗口)。
  • allow-storage-access-by-user-activationsandbox属性同时设置了这个值和allow-same-origin的情况下,允许<iframe>嵌入的第三方网页通过用户发起document.requestStorageAccess()请求,经由 Storage Access API 访问父窗口的 Cookie。
  • allow-top-navigation:允许嵌入的网页对顶级窗口进行导航。
  • allow-top-navigation-by-user-activation:允许嵌入的网页对顶级窗口进行导航,但必须由用户激活。
  • allow-downloads-without-user-activation:允许在没有用户激活的情况下,嵌入的网页启动下载。

注意,不要同时设置allow-scriptsallow-same-origin属性,这将使得嵌入的网页可以改变或删除sandbox属性。

loading 属性

<iframe>指定的网页会立即加载,有时这不是希望的行为。<iframe>滚动进入视口以后再加载,这样会比较节省带宽。

loading属性可以触发<iframe>网页的懒加载。该属性可以取以下三个值。

  • auto:浏览器的默认行为,与不使用loading属性效果相同。
  • lazy<iframe>的懒加载,即将滚动进入视口时开始加载。
  • eager:立即加载资源,无论在页面上的位置如何。
<iframe src="https://example.com" loading="lazy"></iframe>

上面代码会启用<iframe>的懒加载。

有一点需要注意,如果<iframe>是隐藏的,则loading属性无效,将会立即加载。只要满足以下任一个条件,Chrome 浏览器就会认为<iframe>是隐藏的。

  • <iframe>的宽度和高度为4像素或更小。
  • 样式设为display: nonevisibility: hidden
  • 使用定位坐标为负X或负Y,将<iframe>放置在屏幕外。

<nav>

<nav>标签用于放置页面或文档的导航信息。

<nav>  <ol>    <li><a href="item-a">商品 A</a></li>    <li><a href="item-b">商品 B</a></li>    <li>商品 C</li>  </ol></nav>

一般来说,<nav>往往放置在<header>里面,不适合放入<footer>。另外,一个页面可以有多个<nav>,比如一个用于站点导航,另一个用于文章导航。

<nav>里面通常是列表,但也可以放置其他标签。

其他

邮件链接

  • 链接也可以指向一个邮件地址,使用mailto协议。用户点击后,浏览器会打开本机默认的邮件程序,让用户向指定的地址发送邮件。
<a href="mailto:contact@example.com">联系我们</a>

<link>

  • <link>标签主要用于将当前网页与相关的外部资源联系起来,通常放在<head>元素里面
  • 最常见的用途就是加载 CSS 样式表。
<link rel="stylesheet" type="text/css" href="theme.css">

<style>

  • 放置内嵌的样式表
  • CSS

<del>

  • 删除线标签
<del>删除线</del>

<br>

  • 换行
这篇关于HTML标签的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!