编程技术

Document

HTML-知识点考核

HTML-知识点考核

文章目录

计算机网页相关知识

  1. 一个网页基本上由哪些部分组成？

    一个网页基本上由图片、文字、链接、视频和音频等组成。

  2. 网页文件的后缀有哪些？

    网页文件的后缀比较常见的有：html（常用）、htm、jsp、aspx、php等等。

  3. 全球使用广泛的六大主流浏览器有哪些？

    (1) 谷歌浏览器（Chrome）：谷歌开发，在全球浏览器市场份额中占据最高；

    (2) 火狐浏览器（Firefox）：Mozilla开发，是一款安全、高效、快速的开源浏览器；

    (3) IE浏览器（Internet Explorer）：微软开发，2022年停止维护，转为Edge浏览器；

    (4) Edge浏览器（Microsoft Edge）：微软开发，是目前Windows操作系统自带的浏览器；

    (5) 苹果浏览器（Safari）：苹果公司开发，是目前Mac操作系统自带的浏览器；

    (6) 欧朋浏览器（Opera）：挪威Opera公司开发，支持多页面标签式浏览。

  4. 国内的浏览器有哪些？

    360浏览器、UC浏览器、QQ浏览器、搜狗浏览器、猎豹安全浏览器、百度浏览器等等。

  5. 什么是浏览器内核？全球六大浏览器各采用什么内核？

    浏览器内核：一个浏览器最为核心的部分，它是由渲染引擎和JS引擎组成的。渲染引擎是浏览器内置的用来读取和渲染网页内容的引擎；JS引擎是浏览器内置的用来解析和执行Javascript的引擎。

    全球六大浏览器各采用的渲染引擎和JS引擎如下

    主流浏览器\采用的引擎 渲染引擎（内核） JS引擎
    谷歌浏览器 原为Webkit，现为Blink V8
    火狐浏览器 Gecko monkey
    IE浏览器 Trident 原为Jscript，现为Chakra
    Edge浏览器 原为EdgeHTML，现为Chromium Chakra
    苹果浏览器 Webkit SquirrelFish
    欧朋浏览器 原为Presto，然后为Webkit，现为Blink Carakan

  6. 什么是SEO？

    SEO的全称是Search Engine Optimization，即搜索引擎优化；它能够提高你的网页在搜索结果中的排名，SEO做得越好，那么搜索结果越靠前。

  7. 目前市面上有哪三大主流数据库？

    MySQL、SQL Server、Oracle。

  8. 常用的前端开发工具有哪些？

    Visual Studio Code、HBuilder、WebStorm、DreamWeaver、Sublime Text、Atom等。

  9. 分别解释一下相对路径和绝对路径。

    相对路径指的是根据目录结构从当前文件开始找目标文件的位置；

    绝对路径分为本地绝对路径和网络绝对路径，本地绝对路径指的是根据目录结构从根目录开始找目标文件的位置，网络绝对路径指的是互联网上文件的Web地址（网址）。

  10. 什么是Web标准？Web标准由哪些部分构成？为什么需要Web标准？

    Web标准的含义：由W3C组织和其他标准化组织制定的一系列互联网标准的集合。

    Web标准的构成：结构标准、表现标准和行为标准。

    Web标准的意义：①遵循Web标准可以让代码更加规范和统一，更利于维护；②遵循Web标准可以实现不同浏览器渲染同一个页面时展示的效果是一致的。

  11. 在浏览器地址栏中从输入url到页面显示经历了哪些过程？

    (1) 浏览器将请求的URL地址交给DNS进行域名解析；

    (2) DNS将域名解析成真实的IP地址，然后向服务器发起请求；

    (3) 服务器处理请求完成后会将对应的资源返回给浏览器；

    (4) 浏览器对接收过来的资源进行语法解析，最后渲染页面。

  12. 对网站进行性能优化可以从如下几个方面考虑：

    (1) HTML方面：减少DOM元素的数量；

    (2) CSS方面：最好在页面头部通过link标签引入外部CSS文件，而不是@import；

    (3) JavaScript方面：最好在页面底部引入JS代码，并减少DOM操作和HTTP请求；

    (4) 图片方面：尽量使用CSS精灵图、字体图标、图片懒加载、图片压缩等。

  13. 下面是常见的HTTP状态码，它们分别表示什么意思？

    100、200、201、202、301、302、303、304、401、402、403、404、500、503

    HTTP状态码 含义
    100 请继续发起请求
    200 请求成功
    201 请求成功，服务器创建了新的资源
    202 请求成功，服务器已接受请求
    301 永久重定向
    302 临时重定向
    303 当前请求的资源在其它地址
    304 请求资源与本地缓存相同，未修改过
    401 请求未授权
    403 禁止访问
    404 找不到和URL地址相匹配的资源
    500 服务器端程序错误
    503 服务器端暂时⽆法处理请求

  14. 简单说明一下cookies、 sessionStorage和localStorage之间的区别

    (1) 数据存储位置：cookies的数据会存储在浏览器本地，也会发送给服务器，而sessionStorage和localStorage的数据只会存储在浏览器本地，不会发送给服务器；

    (2) 数据存储大小：cookies的数据大小最多4k，而sessionStorage和localStorage的数据大小可以达到5M；

    (3) 数据有效时间：cookies的数据在过期时间之前是有效的，sessionStorage的数据在浏览器关闭之前是有效的，localStorage的数据只要不手动删除则一直有效。

  15. 有哪些方法可以对网页中图片的加载进行优化

    使用CSS精灵图、字体图标、图片懒加载、图片压缩等等。

  16. GET请求和POST请求的区别如下

    (1) 传递数据的方式：GET请求只能通过URL地址的查询字符串中传递数据，而POST请求既可以通过URL地址的查询字符串传递数据，也可以通过请求体传递数据；

    (2) 传递数据的大小：GET请求传递的数据大小基本上不能超过2k，POST请求传递的数据大小没有限制；

    (3) 发送请求的次数：GET请求发送一次请求直接返回数据，POST请求需要发送两次请求才返回数据；

    (4) 能否缓存的区别：GET请求的资源会被缓存，而POST请求的资源不会被缓存；

    (5) 接受的数据类型：GET请求只接受ASCII字符的数据类型，POST请求可以接受所有数据类型。

HTML相关知识点

  1. HTML的全称是什么？

    HTML的全称是Hyper Text Markup Language，即超文本标记语言。

  2. 尝试手写或手敲出HTML5的基本模板

    <!DOCTYPE html>
<html lang="zh-CN">
<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>

  3. HTML中的标签还有哪些叫法？

    标签的其它叫法：标记、元素、盒子、DOM节点、DOM元素等，表示同一个意思。

  4. 谈一下头部标签（head标签）和主体标签（body标签）的差别？

    head标签里面的大多数内容都不是展现给用户看的，而是给浏览器引擎进行解析；

    body标签里面的所有内容都是在浏览器页面中展现给用户看的。

  5. head标签里面一般有哪几种标签？

    meta标签、title标签、link标签、base标签、style标签、script标签

  6. 换行标签和水平线标签分别是什么？

    换行标签是<br />，水平线标签是<hr />

  7. 常见文本格式化标签有哪些？

    加粗：<b></b>和<strong></strong>

    斜体：<i></i>、<em></em>和<cite></cite>

    删除线：<s></s>和<del></del>

    下划线：<u></u>和<ins></ins>

    上标字体：<sup></sup>

    下标字体：<sub></sub>

    大字体：<big></big>

    小字体：<small></small>

  8. 网页中的空格、大于号和小于号是怎么实现的？

    在代码中使用实体符即可表示：&nbsp;表示空格、&gt;表示大于号，&lt;表示小于号

  9. 标签按照出现形式可以分为哪两类？标签的关系有哪些？

    标签的分类：单标签和双标签（例如<br>为单标签，<p></p>为双标签）

    标签的关系：并列关系和嵌套关系（例如<div></div><div></div>为并列，<ul><li></li></ul>为嵌套）

  10. <!DOCTYPE html>是什么意思？

    这是文档类型声明标签，用来声明当前文档类型是HTML5文档，从而告诉浏览器应该按照什么样的文档类型来解析网页。他必须放在网页文档的第一行.

  11. 段落标签有哪些特征？

    (1) 段落标签里面的文字会根据浏览器的宽度自动换行

    (2) 段落标签之间会保留有一定的间隙

  12. 超链接标签有哪些用法？试举例说明

    (1) 作为外部链接。比如单击超链接跳转至B站

    <a href="https://www.bilibili.com/">Bilibili</a>

    (2) 作为内部链接。比如单击超链接跳转至当前目录下的其他页面

    <a href="./info.html">跳转至基本信息页</a>

    (3) 作为空链接。不会跳转至任何页面

    <a href="#">我是空链接</a>

    (4) 作为下载链接。比如单击超链接自动下载对应的压缩包

    <a href="./zip/contract.zip"></a>

    (5) 作为网页元素链接。比如图片链接与盒子链接

    <a href="https://www.bilibili.com/">
	<img src="./img/01.jpg" alt="图片无法显示">
</a>
<!-- 单击图片跳转至B站 -->

    <a href="https://www.bilibili.com/">
    <div></div>
</a>
<!-- 单击div盒子跳转至B站 -->

    (6) 作为锚点链接，比如单击超链接跳转至当前页面对应的h2标签

    <a href="#info">点我了解熊猫具体信息</a>
...
<h2 id="info">具体信息</h2>
<p>大熊猫（学名：Ailuropoda melanoleuca）：属于食肉目、熊科、大熊猫亚科、大熊猫属唯一的哺乳动物。仅有两个亚种。雄性个体稍大于雌性。体型肥硕似熊、丰腴富态，头圆尾短，头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克，体色为黑白两色，脸颊圆，有很大的黑眼圈，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。大熊猫皮肤厚，最厚处可达10毫米。黑白相间的外表，有利于隐蔽在密林的树上和积雪的地面而不易被天敌发现。</p>

  13. 什么是标签语义化？使用语义化标签有什么好处？

    语义化指的是根据网页内容的结构选择合适的标签进行排版（用正确的标签做正确的事情）。

    使用语义化标签的好处如下

    (1) 能够使HTML代码结构清晰，方便阅读和维护

    (2) 有利于SEO（搜索引擎的优化）

    (3) 方便其他设备按照语义的方式来渲染页面

  14. HTML中的注释标签是怎么写的？

    HTML注释标签的写法为：<!-- 这里是注释内容 -->

  15. <meta charset="UTF-8" />表示什么意思？

    表示将当前页面的字符编码格式设为万国码，浏览器会根据这个字符编码格式解析文档中的字符并显示出来。

  16. HTML盒子类标签和文本类标签分别有哪些？

    (1) 盒子类标签指的是一般用来当做盒子的标签

    <div></div>
<span></span>

    (2) 文本类标签指的是一般用来存放文本的标签

    <strong></strong>
<b></b>
<i></i>
<em></em>
<cite></cite>
<sup></sup>
<sub></sub>
<s></s>
<del></del>
<u></u>
<ins></ins>
<big></big>
<small></small>

<!-- 其他放文本的标签 -->
<p></p>
<span></span>
<pre></pre>
<font></font>
<h1~6></h1~6>
<a></a>

  17. HTML中有哪些块级元素、行内元素、行内块元素以及空元素？

    (1) 块级元素：div、p、pre、ul、ol、dl、li、h1~h6、hr、table、form、tr

    (2) 行内元素：a、span、font、br、label、td、文本格式化标签、伪元素

    (3) 行内块元素：img、input

    (4) 空元素（单标签）：br、hr、img、input、link、meta

  18. HTML中块级元素、行内元素、行内块元素有什么区别？

    (1) 块级元素：会独占一行；默认的宽度为100%，高度由内容撑开；可以设置宽高和内外边距；可以包含所有元素；

    (2) 行内元素：不会独占一行；默认的宽度和高度都是由内容撑开；不能设置宽高和上下的内外边距；只能包含行内元素；

    (3) 行内块元素：不会独占一行；默认的宽度和高度都是由内容撑开；可以设置宽高和内外边距。

    需要注意的点（特例）：p标签和h1~h6标签不能包含块级元素，只能放文字；li标签可以继续包含ul标签或ol标签；a标签可以包含任何元素（除了自己）；严格意义上来说，行内块元素也属于行内元素；行内元素或行内块元素之间会有一定的间隙。

  19. 为什么HTML行内元素（包括行内块元素）之间会有间隙？怎么解决？

    原因：由于浏览器会将行内元素或行内块元素之间的空格和换行解析成一个字符并显示出来，所以行内元素或行内块元素之间会产生一段间隙。

    解决方案：将代码中的标签紧挨在一起不要换行，或者使用CSS浮动

  20. HTML5有哪些新特性？

    (1) 新增了语义化标签：header、nav、main、aside、section、article、figure、footer；

    (2) 新增了视频标签和音频标签：video、audio；

    (3) 新增了input标签的type输入类型：email、url、date、time、datetime、datetime-local、month、week、number、tel、search、color、range；

    (4) 新增了input标签的属性：placehoder、required、width、height、autofocus、multiple、pattern、max、min、step；

    (5) 新增了canvas画布、地理定位、拖拽、数据存储等功能。

  21. img标签的title属性和alt属性有什么区别？

    title属性表示鼠标悬停在图片上所显示的文字内容；

    alt属性表示图片无法加载时所显示的文字内容，它是对图片的一种描述，有利于搜索引擎的分析。

  22. HTML标签中的src属性和href属性有什么区别？

    src属性和href属性都用来引入外部的资源，两者的区别如下

    当浏览器在解析含有src属性的元素时，会停止处理当前文档而只会加载对应的资源（比如图片、视频、音频、js文件的引入），等到资源加载完毕后再处理当前文档，是一种同步操作；

    当浏览器在解析含有href属性的元素时，在加载对应资源时还会并行处理当前文档（比如超链接资源、css文件的引入），是一种异步操作。

  23. title标签和h系列标签有什么区别？

    title标签的内容会在网页标题栏中显示，而h系列标签的内容会在网页可视区域中显示；

    title标签的作用仅仅用来显示内容，h系列标签不仅用来显示内容，还有利于页面信息的抓取.

  24. img标签的srcset属性有什么作用？

    img标签的srcset属性指的是根据屏幕像素比或屏幕宽度显示不同的图片，主要用来做响应式图片。其用法举例如下

    (1) 根据屏幕的像素比显示不同的图片（可以有1x、2x、3x、4x）

    <img srcset="./img/1.jpg 1x, ./img/2.jpg 2x" alt="">
<!-- 当屏幕像素比为1时显示1.jpg,当屏幕像素比为2时显示2.jpg -->

    (2) 根据屏幕宽度显示不同的图片（它和屏幕像素比相关）

    <img srcset="./img/1.jpg 300w, ./img/2.jpg 500w" alt="">
<!-- 在屏幕像素比为n的情况下,当屏幕宽度为小于等于(300/n)px时显示1.jpg,当屏幕宽度小于等于(500/n)px时显示2.jpg,当屏幕宽度大于(500/n)px时也显示2.jpg -->

    (3) 根据sizes属性对应的屏幕宽度设置图片宽度，并将图片宽度匹配srcset属性的宽度范围，从而显示对应的图片

    <img srcset="./img/1.jpg 300w, ./img/2.jpg 600w" 
     sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px" alt="">
<!-- 在屏幕像素比为n的情况下,当屏幕宽度小于等于500px时,设置图片宽度为500px,然后将后面的500px去匹配srcset对应的屏幕宽度,当500px小于等于(300/n)px时则显示1.jpg,如果500px小于等于(600/n)px时则显示2.jpg;当屏幕宽度小于等于1000px时也是同样的道理->
常用标签汇总

下面汇总了HTML常用的标签，请尝试根据标签名说出它有哪些属性，以及每个属性的含义

!doctype丨html丨meta丨link丨script丨style丨hr丨p丨h1~h6丨font丨a丨img丨ul丨ol丨table丨tr丨td/th丨form丨textarea丨select丨option丨optgroup丨label丨audio丨video丨input

!doctype标签（文档类型声明标签）

<!doctype html>
  • html属性：设置当前文档为HTML5文档（不需要加属性值）

html标签（根标签）

<html lang=""></html>
  • lang属性：设置当前页面采用的语言（属性值可取en、zh-CN等）

meta标签（元标签）

<meta charset="">
  • charset属性：设置当前页面的字符编码（属性值可取GB2312、BIG5、GBK和UTF-8）
<meta name="" content="">
  • name取keywords设置网页关键字，content为具体内容
  • name取description设置网页描述，content为具体内容
  • name取author设置网页作者，content为具体内容
  • name还可以取generator、revised、viewpoint、copyright、date、robots
<meta http-equiv="" content="">
  • http-equiv取content-type设置字符集，content为具体内容
  • http-equiv取refresh设置页面刷新和跳转，content为具体内容
  • http-equiv还可以取content-language、expires、pragma、set-cookie

link标签（链接标签）

<link href="" rel="" type="">
  • href属性：指定外部文件的路径
  • rel属性：指定外部样式表（属性值一般是）
  • type属性：指定外部文件类型

script标签（脚本标签）

<script language="" type="" src="" defer async></script>
  • language属性：指定脚本语言
  • type属性：指定脚本类型
  • src属性：指定脚本文件的路径
  • defer属性：延迟执行脚本语言
  • async属性：异步加载脚本语言

style标签（样式标签）

<style type="" media=""></style>
  • type属性：指定样式表的类型，一般是text/css
  • media属性：指定样式表的媒介类型

hr标签（水平线标签）

<hr align="" color="" size="" width="">
  • align属性：设置水平线的对齐方式
  • color属性：设置水平线的颜色
  • size属性：设置水平线的粗细
  • width属性：设置水平线的宽度

p标签（段落标签）

<p align=""></p>
  • align属性：设置对齐方式

h1~h6标签（网页内容标题标签）

<h1 align=""></h1>
  • align属性：设置对齐方式

font标签（字体标签）

<font face="" color="" size=""></font>
  • face属性：设置字体类型
  • color属性：设置字体颜色
  • size属性：设置字体大小

a标签（超链接标签）

<a href="" target=""></a>
  • href属性：指定链接页面的url地址
  • target属性：指定链接页面的打开方式

img标签（图像（图片）标签）

<img src="" alt="" title="" border="" 
     width="" height="" vspace="" hspace="" align="">
  • src属性：指定图像的路径
  • alt属性：设置图像无法显示的文字提示
  • title属性：设置鼠标悬停时的显示内容
  • border属性：设置图像边框的宽度
  • width属性：设置图像宽度
  • height属性：设置图像高度
  • vspace属性：设置图像的上下外边距
  • hspace属性：设置图像的左右外边距
  • align属性：设置图像的对齐方式

ul标签（无序列表标签）

<ul type=""></ul>
  • type属性：设置无序列表的图标样式
  • 对于无序列表的属性值：disc表示实心圆(默认)、circle空心圆、square表示实心正方形.

ol标签（有序列表标签）

<ol type=""></ol>
  • type属性：设置有序列表的图标样式
  • 对于有序列表的属性值：1表示以阿拉伯数字进行排序、a表示以小写字母进行排序、A表示大写字母进行排序、i表示以小写罗马数字进行排序、I表示以大写罗马数字进行排序.

table标签（表格标签）

<table width="" height="" bgcolor="" border="" align="" 
       background="" cellspacing="" cellpadding="" ></table>
  • width属性：设置表格的宽度；
  • height属性：设置表格的高度；
  • bgcolor属性：设置表格的背景颜色；
  • border属性：设置表格的边框大小(默认0px)；
  • align属性：设置表格的水平对齐方式；
  • background属性：设置表格的背景图像；
  • cellspacing属性：设置表格中单元格与单元格之间以及单元格与表格边框之间的空间(可以理解为单元格的外边距，默认2px)；
  • cellpadding属性：设置表格中单元格内容与单元格边框之间的空间(也就是单元格的内边距，默认1px)。

tr标签（行标签）

<tr height="" align="" valign="" bgcolor="" background=""></tr>
  • height属性：设置行的高度(该标签没有宽度属性)；
  • align属性：设置一行中所有单元格内容的水平对齐方式；
  • valign属性：设置一行中所有单元格内容的垂直对齐方式；
  • bgcolor属性：设置一行中所有单元格的背景颜色；
  • background属性：设置一行中所有单元格的背景图像。

td标签和th标签（单元格标签）

其实这两者的用法是一致的,这里以td标签进行讨论

<td width="" height="" align="" valign="" 
    bgcolor="" background="" rowspan="" colspan=""></td>
  • width属性：设置单元格的宽度；
  • height属性：设置单元格的高度；
  • align属性：设置单元格内容的水平对齐方式；
  • valign属性：设置单元格内容的垂直对齐方式；
  • bgcolor属性：设置单元格的背景颜色；
  • background属性：设置单元格的背景图像；
  • rowspan属性：设置单元格往下合并行；
  • colspan属性：设置单元格往下合并列。

form标签（表单域标签）

<form action="" method="" name="" enctype="" target=""></form>
  • action属性：设置提交表单数据的目标url地址；
  • method属性：设置提交表单数据的方式（属性值可取get或post）；
  • name属性：设置表单的名称；
  • enctype属性：设置提交表单数据的编码格式（属性值可取application、x-www-form-、urlencoded、multipart、form-data和text/plain）；
  • target属性：设置目标url地址的打开方式（属性值可取_blank、_self、_parent、_top）。

textarea标签（文本域标签）

<textarea rows="" cols=""></textarea>
  • rows属性：设置文本域的行数；
  • cols属性：设置文本域每一行的字符个数（也可以理解为列数）。

select标签（下拉列表标签）

<select size="" multiple="" name=""></select>
  • size属性：设置下拉列表可见的选项个数；
  • multiple属性：设置下拉列表是否支持多选操作；
  • name属性：设置下拉列表的名称。

option标签（下拉选项标签）

<option value="" selected="" disabled></option>
  • value属性：设置当前选项的value值；
  • selected属性：设置当前选项为默认选中项；
  • disabled属性：设置当前选项为禁用状态。

optgroup标签（选项组标签）

<optgroup label="" disabled></optgroup>
  • label属性：设置选项组的组名；
  • disabled属性：设置选项组的所有选项为禁用状态。

label标签（input辅助标签）

label标签是主要用来辅助input表单元素的

<label for=""></label>
  • for属性：指定input表单元素的id值，从而绑定input表单元素。

audio标签（音频标签）

<audio src="" controls="" autoplay="" loop="" muted=""></audio>
  • src属性：指定音频文件的路径，比如src=‘./music/01.mp3’；
  • autoplay属性：是否自动播放，如果不写则不自动播放，如果写则自动播放，写法为autoplay=“autoplay”。谷歌浏览器无效；
  • controls属性：是否显示播放控件，如果不写则不显示，如果写的话则表示显示播放控件，写法为controls=“controls”；
  • loop属性：是否循环播放，如果不写则不循环播放，如果写则循环播放，写法loop=“loop”；
  • muted属性：是否静音播放，如果不写则不静音播放，如果写则静音播放，写法为muted=“muted”。

video标签（视频标签）

<video src="" width="" height="" poster="" 
       controls="" autoplay=""  loop="" muted=""></video>
  • src属性：指定视频文件的路径，比如src=‘./video/01.mp4’；
  • width属性：控制视频播放器的宽度，以px作为单位；
  • height属性：控制视频播放器的高度，以px作为单位；
  • poster属性：设置视频加载时显示的图片，可以认为是封面图片。比如poster=“./images/show.jpg”，如果视频正在加载那么就会显示这张图片；
  • controls属性：是否显示播放控件，如果不写则不显示，如果写的话则表示显示播放控件，写法为controls=“controls”；
  • autoplay属性：是否自动播放，如果不写则不自动播放，如果写则自动播放，写法为autoplay=“autoplay”。谷歌浏览器无效；
  • loop属性：是否循环播放，如果不写则不循环播放，如果写则循环播放，写法loop=“loop”；
  • muted属性：是否静音播放，如果不写则不静音播放，如果写则静音播放，写法为muted=“muted”。谷歌浏览器默认会禁用自动播放功能，如果写了这个属性，就不会禁用。

input标签（输入标签）

该标签必备的属性是type，其他属性需要根据type的属性值来设定的

<input type="" name="" id="" value="" checked="" maxlength="">
  • type属性：设置input表单元素的类型；可取的属性值有text(单行文本输入框)、password(密码输入框)、radio(单选按钮)、checkbox(复选框)、button(普通按钮)、submit(提交按钮)、reset(重置按钮)、image(图像形式的提交按钮)、hidden(隐藏域)、file(文件域)、email(专门用来输入邮箱地址的文本框)、url(专门用来输入URL地址的文本框)、tel(专门用来输入电话号码的文本框)、search(专门来来输入搜索关键字的文本框)、color(颜色拾取器文本框)、number(专门用来输入数值的文本框)、range(专门用来输入指定范围内数值的文本框)、date(年、月、日文本框)、month(年、月文本框)、week(年、周文本框)、time(小时、分钟文本框)、datetime(世界标准时间文本框)、datetime-local(本地时间文本框)
  • name属性：设置input表单元素的名称；
  • value属性：设置input表单元素的value值；
  • checked属性：设置input表单元素在默认情况下被选中；
    动播放功能，如果写了这个属性，就不会禁用。

input标签（输入标签）

该标签必备的属性是type，其他属性需要根据type的属性值来设定的

<input type="" name="" id="" value="" checked="" maxlength="">
  • type属性：设置input表单元素的类型；可取的属性值有text(单行文本输入框)、password(密码输入框)、radio(单选按钮)、checkbox(复选框)、button(普通按钮)、submit(提交按钮)、reset(重置按钮)、image(图像形式的提交按钮)、hidden(隐藏域)、file(文件域)、email(专门用来输入邮箱地址的文本框)、url(专门用来输入URL地址的文本框)、tel(专门用来输入电话号码的文本框)、search(专门来来输入搜索关键字的文本框)、color(颜色拾取器文本框)、number(专门用来输入数值的文本框)、range(专门用来输入指定范围内数值的文本框)、date(年、月、日文本框)、month(年、月文本框)、week(年、周文本框)、time(小时、分钟文本框)、datetime(世界标准时间文本框)、datetime-local(本地时间文本框)
  • name属性：设置input表单元素的名称；
  • value属性：设置input表单元素的value值；
  • checked属性：设置input表单元素在默认情况下被选中；
  • maxlength属性：设置input表单元素内字符的最大输入长度。