HTML超文本标记语言入门基础知识
2024-05-26 17:18:08
文章目录
- 基本概念
- HTML 标签
- 注释
- 转义符号
- HTML文档基本结构
- HTML中常用标签
- 标签分类
- 常用的布局组合标签
- 一、 文本标签
- 二、 图片标签
- 三、 列表标签
- 四、 定义描述标签及布局标签
- 五、 超链接标签
- 页面间跳转
- 锚链接
- 六、 表格标签
- 规则表格
- 不规则表格
- 表格标签
- 表单☆
- 表单属性
- 表单 <form>
- 表单元素
- 一、 <input> 元素（输入类型）☆
- 输入限制
- 标签
- 1、 文本text
- 2、 密码password
- 3、 单选按钮radio
- 4、 复选框checkbox
- 5、文件域
- 6、 按钮
- ① 提交数据至程序submit
- ② 重置数据reset
- ③ 普通按钮button
- 7、隐藏域
- HTML5新增输入类型
- 8、 数值number
- 9、 滑块输入range
- 10、 日期
- ①date
- ② datetime
- ③ datetime-local
- month
- week
- time
- 11、 邮箱email
- 12、 颜色color
- 13、 电话tel
- 14、 地址url
- 15、 搜索search
- 二、 <select> 元素（下拉列表）
- 三、 <textarea> 元素（文本域）
- 四、 <bottom> 元素
- ① 提交数据至程序submit
- ② 重置数据reset
- ③ 普通按钮button
- HTML5 新增表单元素
- datalist
- 框架
- HTML5中其它新增
- 语义标签
- 音频
- 视频
基本概念
HTML（HyperText Markup Language），超文本标记语言，是用来描述网页的一种语言
HTML运行在浏览器上，通过浏览器解析，不区分大小写（建议全部小写）
HTML文档中包含HTML标签和纯文本，用来描述网页，因此HTML文档=网页
html文档的后缀名
.html和.htm都可以，没有区别HTML是用于创建网页、由标签构成的标记语言，不是编程语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标签，即HTML标记标签
HTML标签是由尖括号包围的关键词，比如 <html>，标签通常成对出现，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签
标签的分类
1、围堵标签：有开始标签和结束标签，例如 <html></html>
2、自闭和标签：只有一个标签 <br/>标签的书写
可以嵌套，但是嵌套的语法要正确
内部可以定义属性，属性由键值对组成（值需用双引号引起来），多个属性用空格隔开
注释
以<!-- 开头 ，- ->结尾
代码示例：
<!--
这里编写HTML注释，
可以是一行，也可以是多行标签的书写：
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
--><p id="p1" name="p1"> </p>
转义符号
| 转移符号 | 描述 |
|---|---|
| | 转义为空格 |
| < | 转义为小于号< |
| ≤ | 转义为小于等于号≤ |
| > | 转义为大于号> |
| ≥ | 转义为大于等于号≥ |
| © | 转义为版权符号 © |
HTML文档基本结构
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>HTML页面</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body>hello world！</body></html>
页面显示：
HTML中常用标签
标签分类
html标签可以分为块状元素和行级元素两类：
| 块状元素 | 行内元素： |
|---|---|
| 独占一行，宽度自动填满其父元素宽度 | 排列到同一行里，宽度随元素的内容变化而变化 |
| 可以设置宽高 | 设置宽高无效 |
| 可以设置margin、padding属性 | 水平方向的padding会有边距效果，但是竖直方向的padding没有效果 |
基本术语：块状元素：独占一行，可以设置宽高标题标签 h1-h6,段落标签 p ,水平线标签 hr,有序列表标签 ol--li，无序列表标签 ul--li，定义描述标签 dl-dt-dd，容器标签 div：行级元素：...，不能设置宽高span范围标签img图像标签
常用的布局组合标签
- 导航布局
div-ul-li/div-ol-li - 图文混编布局
div-dl-dt-dd - 表单布局
div-form - 局部规则数据展示布局
div-table
一、 文本标签
| 标签名 | 写法 | 用处 |
|---|---|---|
| 标题标签 | <h1></h1> | 一般用在文章的标题上，h1~h6字体逐渐缩小 |
| 段落标签 | <p></p> | 一般用于正文 |
| 换行标签 | <br/> | 在段落中换行 |
| 水平线标签 | <hr/> | 一般用来分隔内容 |
| 范围标签 | <span></span> | 一般为了突出部分内容、改变局部内容的时候使用，一般嵌套在其他的标签中使用 |
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>文本标签</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--标题标签--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!--水平线分分割标签--><hr /><!--水平线属性改变--><!--标签中可以出现属性，多个属性空格隔开--><hr color="bisque" size="8" /><!--段落标签--><h4>段落测试</h4><p>锄禾<span style="color: red;">日</span>当午</p><p>汗滴禾下土</p><!--换行标签--><p>谁知盘中餐<br />粒粒皆辛苦</p><!--水平线分分割标签--><hr /></body></html>页面显示：
二、 图片标签
<img src ="" /> src:图片的路径(推荐相对路径，即工程img包中的图片，../表示上一级目录) title：[独有属性]鼠标移到图片上时显示文字图片无法显示时，显示文字width:宽度（以px结尾，或者设置为占屏的百分比）height:高度代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>图片标签</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--图片标签<img />src:图片的路径(推荐相对路径，即工程img包中的图片，../表示上一级目录) title：[独有属性]鼠标移到图片上时显示文字图片无法显示时，显示文字width:宽度（以px结尾，或者设置为占屏的百分比）height:高度--> <img src ="../../img/小奶猫1.JPG" width="500px"/><!--图片无法显示时，显示title中的文字--><img src = "../../img/小奶猫2.JPG" title="嘿嘿"/ height="500px"><!--热点区域属性点击不同位置，跳到不同的区域 img添加热点区域时使用usemap="#名称"<img src="" usemap="#地图名称" /><map name="地图名称"></map>--><img src="../../img/思考人生的猫.JPG" width="500px" usemap="#myMap" /><map name="myMap"><!--map的名称--><!--shape：形状（circle、rect、poly）coords：大小范围href：超链接title：名称圆：circle(圆心横坐标，圆心纵坐标，半径)矩形：rect（左上角横坐标，左上角纵坐标，右下角横坐标，右下角纵坐标）多边形：poly三角形：poly（三个点的横坐标纵坐标）五边形：poly（按画的顺序，依次横坐标纵坐标列出全部）--><area shape="circle" coords="300,300,300" href="文本标签.html" title="常用标签"/><!--如果需要多个热点区域，可以使用多个<area>--><area shape="rect" coords="400,100,600,200" href="文本标签.html" title="还是常用标签" /></map></body></html>
页面显示：
此时点击第三张图的以（100,100）为圆心，100位半径的圆形区域或者以（400,100）（600,200）围成的矩形区域，会跳转到文本标签.html
三、 列表标签
一般用在导航上
有序标签：
<ol><li>标签1</li><li>标签2</li><li>标签3</li><li>标签4</li><li>标签5</li>
</ol>
无序标签：
<ul><li>标签1</li><li>标签2</li>
</ul>
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>列表标签</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--列表标签一般用于导航无序标签:<ul><li></li></ul>有序标签：<ol><li></li></ol>--> <h1>无序列表</h1><ul><!--无序标签--><li>无序标签1</li><li>无序标签2</li><li>无序标签3</li><li>无序标签4</li><li>无序标签5</li></ul><h1>有序列表</h1><ol><!--有序标签--><li>有序标签1</li><li>有序标签2</li><li>有序标签3</li><li>有序标签4</li><li>有序标签5</li></ol></body>
</html>页面显示：
四、 定义描述标签及布局标签
定义描述标签：
一般用于图文的描述中
<dl><dt>标题</dt><dd>描述1</dd><dd>描述2</dd>
</dl>
布局标签：
一般作为容器，盛放其他标签
<div></div>
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>定义描述标签</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--定义描述标签<dl><dt>标题</dt><dd>描述1</dd><dd>描述2</dd></dl>--><!--容器div，盛放其它标签<div></div>--><div style="border: 2px solid lightsalmon;"><dl><dt>标题</dt><!--标题，一般只有一个--><dd>描述1</dd><!--描述可以有多个--> <dd>描述2</dd></dl></div><dl><dt><img src="../../img/咖啡店的猫猫.JPG" width="200px"/></dt><!--标题，一般只有一个--><dd>姓名：呆呆</dd><!--描述可以有多个--> <dd>技能：懵懵</dd></dl><!--基本术语：块状元素：独占一行，可以设置宽高标题标签 h1-h6,段落标签 p ,水平线标签 hr,有序列表标签 ol--li，无序列表标签 ul--li，定义描述标签 dl-dt-dd，容器标签 div：行级元素：...，不能设置宽高span范围标签img图像标签--></body>
</html>页面显示：
五、 超链接标签
- 作用
实现页面间的跳转
实现锚链接
页面间跳转
<a href="" target=""></a>href:路径、网址均可target：目标 self：当前页面打开（默认）blank：新页面打开
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>页面间跳转超链接</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--<a></a>href:路径、网址均可target：目标self：当前页面打开（默认）blank：新页面打开--><!--新页面打开百度--><a href="https://www.baidu.com/" target="_blank">点击在新页面打开百度</a><br /><br /><!--当前页面打开scdn--><a href="https://www.csdn.net/" target = "_self">点击在当前页面打开CSDN</a></body>
</html>页面显示：
锚链接
当一个页面长度超过一屏时，跳转到指定位置
这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接
目标位置，定义锚点：
<a name = "锚点名称"></a>超链接跳转到定义的目标位置：
<a href = "锚点名称" target = "">自定义锚链接名称</a>
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>锚链接</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--<a></a>href:路径、网址均可target：目标self：当前页面打开（默认）blank：新页面打开--><!--锚链接（回到指定位置）目标位置，定义锚点：<a name = "锚点名称"></a>超链接位置：<a href = "锚点名称" target = "">自定义锚链接名称</a>--><a href = "#point3" target="_self">跳转至本网页的模块3</a><br /><br /><a href = "超链接标签2.html#point3" target="_self">跳转至另一网页的模块333</a><div style="height: 300px; background: lavender;">模块1</div><div style="height: 300px; background: peachpuff;">模块2</div><div style="height: 300px; background: lemonchiffon;"><a name = "point3"></a><!--定义锚点，本页面锚链接-->模块3</div></body></html>页面显示：
当点击第一个超链接时，网页进度条下拉，模块3完全显示
另一网页与当前页面一模一样，点击第二个超链接时跳转到另一网页并进度条下拉至模块3
浏览器显示的内容都在body编写，因此之后的代码块仅为body部分
六、 表格标签
规则表格
<table><tr>行<th></th>列（一般表头单元格）</tr> <tr>行<td></td>列（一般内容单元格）</tr>
</table>
------------------------------------------ table:如果没有设置宽高，大小则按内容来定border:边框width：%占据页面的比例；实际高度pxcellpadding：内容距边线的距离cellspacing：单元格与单元格之间的距离tr：（行）align:文本水平方向的位置left、center、rightvalign:文本垂直
代码示例：
<!--<table><tr>行<th></th>列（一般表头单元格）</tr> <tr>行<td></td>列（一般内容单元格）</tr> </table>table:如果没有设置宽高，大小则按内容来定border:边框width：%占据页面的比例；实际高度pxcellpadding：内容距边线的距离cellspacing：单元格与单元格之间的距离tr：（行）align:文本水平方向的位置left、center、rightvalign:文本垂直--> <h1>规则表格</h1><table border="1" width="100%" height="200px" bgcolor="papayawhip" cellpadding="10" cellspacing=""><tr align="center" valign=""><!--行--><th>序号</th><th>商品名称</th><th>价格</th><!--列--></tr> <tr><!--行--><td>1</td><td>曲奇</td><td>100</td><!--列--></tr> <tr><!--行--><td>2</td><td>饼干</td><td>200</td><!--列--></tr> </table> 页面显示：
不规则表格
在规则表格的基础上添加行列的合并
不规则表格（跨行跨列等，即合并单元格）colspan:跨列，即合并后面的表格rowspan：跨行
代码示例：
<h1>不规则表格</h1><!--不规则表格（跨行跨列等，即合并单元格）colspan:跨列，即合并后面的表格rowspan：跨行--><table border="1" width="100%" height="200px" bgcolor="papayawhip" cellpadding="10" cellspacing=""><tr><!--行--><td colspan="3" align="center">个人简历</td><!--列--></tr> <tr><!--行--><td>姓名</td><td>憨憨</td><td rowspan="3" align="center">照片</td><!--列--></tr><tr><!--行--><td>性别</td><td>女</td><!--列--></tr><tr><!--行--><td>年龄</td><td>20</td><!--列--></tr></table>
页面显示：
表格标签
标题标签、逻辑分区标签
标题标签：<caption></caption>逻辑分区标签：方便区分和整体控制<thead></thead>表的标题<tbody></tbody>表的内容<tfoot></tfoot>表的总结内容
代码示例：
<h1>高级标签</h1><p>标题标签和逻辑分区标签</p><!--标题标签：<caption></caption>逻辑分区标签：方便区分和整体控制<thead></thead>表的标题<tbody></tbody>表的内容<tfoot></tfoot>表的总结内容--><table border="1" width="100%" height="200px" bgcolor="papayawhip" cellpadding="10" cellspacing=""><caption>资产负债表</caption><!--标题标签--><thead style="background: papayawhip;"><!--表的标题--><tr align="center" valign=""><!--行--><th>月份</th><th>负债</th></tr> </thead><tbody style="background: peachpuff;"><!--表的内容--><tr><!--行--><td>1月</td><td>1w</td></tr> <tr><!--行--><td>2月</td><td>4w</td></tr> </tbody><tfoot style="background: plum;"><!--表的总结内容--><tr><!--行--><td>总计</td><td>5w</td></tr></tfoot></table>
页面显示：
表单☆
- 作用
用于采集用户输入的数据
用于与服务器进行交互
（例如账号密码的输入）
表单属性
所有 <form> 属性的列表
| 属性 | 描述 |
|---|---|
| accept-charset | 规定用于表单提交的字符编码 |
| action | 规定提交表单时发送到指定的url |
| enctype | 规定将表单数据提交到服务器时应如何编码（表单中有上传的文件时使用,取值为multipart/form-data） |
| method | 规定发送表单数据时要使用的 HTTP 方法，默认为GET |
| name | 规定表单名称 |
| rel | 规定链接资源和当前文档之间的关系 |
| target | 规定提交表单后在何处显示接收到的响应 |
| HTML5新增 | ------------------------------------------------------------ |
| autocomplete | 规定表单或输入字段是否应该自动填写（设置为 on or off） |
| novalidate | 规定提交时不应验证表单 |
GET与POST
| get | post |
|---|---|
| 提交的表单数据会在地址栏url中显示，会封装到请求行中 | 请求参数不会在地址栏url中显示，会封装到请求体中 |
| 请求参数大小有限制，URL 的长度最大2048 个字符 | 请求参数的大小没有限制，可发送大量数据 |
| 不太安全，适用于非安全数据 | 较为安全，表单数据包含敏感信息或个人信息，请务必使用 POST |
表单 <form>
<form>...(内容)
</form> 常用属性action:指定提交数据的urlmethod:指定提交方式，7种get：(没有敏感数据)1、请求参数会在地址栏中显示，会封装到请求行中2、请求参数大小有限制3、不太安全post：1、请求参数不会在地址栏中显示，会封装到请求体中2、请求参数的大小没有限制3、较为安全enctype:表单中有上传的文件时使用，且取值为multipart/form-data
代码示例：
<form action="常用标签.html" method="get" enctype="multipart/form-data"></form>
表单元素
表单元素，即不同类型的 input 元素、复选框、单选按钮、提交按钮等等
HTML表单包含表单元素，即 <form></form>中的内容
下文有关表单元素的代码都默认写在<form>和</form>之间
表单元素的属性：
| 属性名称 | 描述 |
|---|---|
| id | 元素的唯一表示，不重复 |
| name | 表单项元素的名称，数据想要提交，必须指定，提交数据到服务器之后，服务器通过name获取数据 |
| value | 表单项元素的值，服务器获取数据通过name获取到的就是value |
| type | 表示表单项元素的input的呈现形式（不是all都有） |
| class | 表示样式名称 |
| readonly | 表示只读，只能看不能改 |
| disabled | 表示禁用，不能改而且背景是灰色 |
一、 <input> 元素（输入类型）☆
最重要的表单元素是<input>元素，根据不同的 type 属性可以变化为多种形态
输入限制
写在开始标签
（一部分为HTML5新增）
有些属性不需要值，例如disabled，等同于 disabled=“disabled”
| 属性 | 描述 | 适用于 |
|---|---|---|
| disabled | 输入字段是禁用的，被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交 | |
| maxlength | 规定输入字段的最大长度 | |
| readonly | 规定输入字段为只读（无法修改） | |
| size | 规定输入字段的宽度（以长度计） | |
| value | 规定输入字段的初始值 | |
| HTML5新增 | -------------------------------------------------------------------------------- | |
| max | 规定输入字段的最大值 | number、range、date、datetime、datetime-local、month、time 、 week |
| min | 规定输入字段的最小值 | number、range、date、datetime、datetime-local、month、time 、 week |
| pattern (regexp) | 规定通过其检查输入值的正则表达式 | |
| required | 规定输入字段是必需的（必需填写） | text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file |
| step | 规定输入字段的合法数字间隔 | number、range、date、datetime、datetime-local、month、time 、week |
| height | 高度 | image |
| width | 宽度 | image |
| autocomplete | 规定表单或输入字段是否应该自动填写（设置为 on or off） | text、search、url、tel、email、password、datepickers、range 、 color |
| autofocus | 布尔属性，如果设置则当页面加载时 <input> 元素自动获得焦点 | |
| form | 规定 <input> 元素所属的一个或多个表单，如需引用一个以上的表单，使用空格分隔的表单 id 列表 | |
| formaction | 规定当提交表单时处理该输入控件的文件的 URL，属性覆盖 <form> 元素的 action 属性 | submit、image |
| formenctype | 规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）,覆盖 <form> 元素的 enctype 属性 | submit、image |
| formmethod | 定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法,覆盖<form> 元素的 method 属性 | submit、image |
| formnovalidate | 布尔属性,如果设置则在提交表单时不对<input> 元素进行验证，覆盖 <form> 元素的 novalidate 属性 | submit |
| formtarget | 规定的名称或关键词指示提交表单后在何处显示接收到的响应,覆盖 <form> 元素的 target 属性 | submit、image |
| list | list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项 | |
| multiple | 布尔属性,如果设置则允许用户在 <input> 元素中输入一个以上的值 | email 、 file |
| pattern | 用于检查 <input> 元素值的正则表达式 | text、search、url、tel、email、 password |
| placeholder | 文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖） | text、search、url、tel、email 、 password |
标签
<label for = "">标签名称</label><input type="text" id = "" name = "" placeholder=""/>id：元素的唯一标识，不推荐重复name：表单元素的名称，数据提交时服务器通过name获取valueplaceholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）lable中的for与input中的id对应，加了lable之后页面点击用户名后输入框会出现光标代码示例：
<label for = "username">用户名：</label><input type="text" id = "username" name = "uername" placeholder="请输入用户名"/><!--用户名：<input type="text" id = "username" name = "uername" />-->页面显示：
1、 文本text
<input type=“text”> 定义供文本输入的单行输入字段
<input type="text" id = "" name = "" placeholder=""/>id：元素的唯一标识，不推荐重复
name：表单元素的名称，数据提交时服务器通过name获取value
placeholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）
代码示例：
用户名：<input type="text" id = "username" name = "uername" />
页面显示：
当输入内容“用户1”后placeholder中的内容被覆盖
2、 密码password
<input type=“password”> 定义密码字段
<input type="password" id = "" name = "" placeholder=""/>id：元素的唯一标识，不推荐重复
name：表单元素的名称，数据提交时服务器通过name获取value
placeholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）
代码示例：
密码：<input type="password" id = "password" name = "password" placeholder="请输入密码"/>
页面显示：
当输入密码后placeholder中的内容被覆盖
由于是密码，密码内容不会显示
3、 单选按钮radio
<input type=“radio”> 定义单选按钮
<input type="radio" name = "" value="" />选项名称1
<input type="radio" name = "" value="" />选项名称2单选按钮：一般都是成组出现，name相同表示一组，只能选一个name：表单元素的名称，数据提交时服务器通过name获取valuevalue：服务器通过name获取到的值checked 表示默认选中(一般默认选第一个选项)
代码示例：
性别：<input type="radio" name = "gender" value="男" />男<input type="radio" name = "gender" value="女" />女<input type="radio" name = "gender" value="未知" checked=""/>未知
页面显示：
4、 复选框checkbox
<input type=“checkbox”> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项
<input type = "checkbox" name = "" value = "" />选项名称1
<input type = "checkbox" name = "" value = "" />选项名称2复选框 type = "checkbox"复选框都是成组出现，name相同表示一组，可以选多个value：服务器通过name获取到的值checked 表示默认选中(一般默认选第一个选项)
代码示例：
爱好：<input type = "checkbox" name = "hobby" value = "swim" />游泳<input type = "checkbox" name = "hobby" value = "sing" />唱歌<input type = "checkbox" name = "hobby" value = "dance" />跳舞<input type = "checkbox" name = "hobby" value = "read" />看书<input type = "checkbox" name = "hobby" value = "sleep" />睡觉
页面显示：
5、文件域
头像：<input type = "file" name = "" />头像：<input type = "file" name = "" multiple="multiple"/>复选框 type = "file"name：表单元素的名称，数据提交时服务器通过name获取valuemultiple:允许多选，即同时上传多个文件
代码示例：
头像：<input type = "file" name = "headImg" multiple="multiple"/>
页面显示：
选择单个文件
选择多个文件
6、 按钮
与<button>元素作用相同
① 提交数据至程序submit
- 定义提交表单数据至表单处理程序的按钮
<input type=“submit”>
<button type=“submit”></button>
② 重置数据reset
- 定义重置数据按钮
<input type=“reset”>
<button type=“reset”></button>
③ 普通按钮button
- 定义按钮
<input type=“button”>
<button type=“button”></button>
<input type = "submit" value="" /> <!--跳转到指定的页面-->
<input type = "reset" value="" /> <!--刷新-->
<input type = "button" value="" /> <!--普通按钮，按钮长相，只能按--> value：服务器通过name获取到的值<!--另一种按钮-->
<button type="submit">按钮名称</button>
<button type="reset">按钮名称</button>
<button type="button">按钮名称</button><input type = "image" src="" width="" /> <!--图片按钮，类似于submit-->src：图片路径
代码示例：
<input type = "submit" value="注册" /><!--跳转到<form>中action指定的页面--><input type = "reset" value="刷新" /><!--刷新--> <input type = "button" value="按钮" /><!--普通按钮，按钮长相，只能按--> <!--图片按钮，类似于submit--><input type = "image" src="../../img/下帝视角.jpg" width="100px" /><br /><!--另一种按钮--><button type="submit">注册</button><button type="reset">刷新</button><button type="button">按钮</button>
页面显示：
7、隐藏域
隐藏起来了，不影响用户看，但是程序员又能获取到数据
<input type="hidden" name = "" value=""/>隐藏域name：表单元素的名称，数据提交时服务器通过name获取valuevalue：服务器通过name获取到的值
代码示例：
<input type="hidden" name = "hanhan" value="66666666666666666"/>
页面显示：
无显示效果
HTML5新增输入类型
| 序号 | 名称 |
|---|---|
| 1 | color |
| 2 | date |
| 3 | datetime |
| 4 | datetime-local |
| 5 | |
| 6 | month |
| 7 | number |
| 8 | range |
| 9 | search |
| 10 | tel |
| 11 | time |
| 12 | url |
| 13 | week |
8、 数值number
<input type=“number”> 用于应该包含数字值的输入字段
对输入数字给定限制
代码示例：
请输入1~5范围内的一位数：
<input type="number" name="quantity" min="1" max="5">
页面显示：
9、 滑块输入range
<input type=“range”> 用于包含一定范围内的值的输入字段
根据浏览器支持，输入字段能够显示为滑块控件
代码示例：
Points（0~10）:
<input type="range" name="points" min="0" max="10">
页面显示：
10、 日期
①date
<input type=“date”> 用于应该包含日期的输入字段
根据浏览器支持，日期选择器会出现输入字段中
可以为日期添加限制
代码示例：
birthday:
<input type="date" name="birthday"><!--添加限制-->
请输入 1980-01-01 之前的日期：<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
请输入 2000-01-01 之后的日期：<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit">
页面显示：
添加限制的日期显示：
② datetime
<input type=“datetime”> 允许用户选择日期和时间（有时区）
根据浏览器支持，日期选择器会出现输入字段中（本文使用谷歌，不支持，因此只能手动输入）
代码示例：
请输入日期和时间：<input type="datetime" name="bdaytime">
页面显示：
③ datetime-local
<input type=“datetime-local”> 允许用户选择日期和时间（无时区）
根据浏览器支持，日期选择器会出现输入字段中
代码示例：
请选择日期和时间：<input type="datetime-local" name="bdaytime">
页面显示：
month
<input type=“month”> 允许用户选择月份和年份
代码示例：
选择月和年：
<input type="month" name="bdaymonth">
页面显示：
week
<input type=“week”> 允许用户选择周和年。
根据浏览器支持，日期选择器会出现输入字段中
代码示例：
选择年和周：
<input type="week" name="year_week">
页面显示：
time
<input type=“time”> 允许用户选择时间（无时区）
根据浏览器支持，时间选择器会出现输入字段中
代码示例：
请选取一个时间：
<input type="time" name="usr_time">
页面显示：
11、 邮箱email
<input type=“email”> 用于应该包含电子邮件地址的输入字段
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证
某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入
<input type = "email" name = "" />格式必须为email型，否则会报错name：表单元素的名称，数据提交时服务器通过name获取valuerequire：提交前必须填写，不能为空
代码示例：
邮箱:<input type = "email" name = "email" required="required"/>
页面显示：
提交时未填写，提交时报错
填入文本非email格式，提交时报错
12、 颜色color
<input type=“color”> 用于应该包含颜色的输入字段
代码示例：
Select your favorite color:<input type="color" name="favcolor" value="#ff0000">
页面显示：
13、 电话tel
<input type=“tel”> 用于包含电话号码的输入字段
目前只有 Safari 8 支持tel类型
代码示例：
Telephone:<input type="tel" name="telephone">
页面显示：
14、 地址url
<input type=“url”> 用于包含 URL 地址的输入字段
根据浏览器支持，在提交时能够自动验证 url 字段
某些智能手机识别url类型，并向键盘添加 “.com” 以匹配 url 输入
代码示例：
请输入url：<input type="url" name="homepage">
页面显示：
15、 搜索search
<input type=“search”> 用于搜索字段（搜索字段的表现类似常规文本字段）
代码示例：
搜索CSDN：<input type="search" name="scdn">
页面显示：
二、 <select> 元素（下拉列表）
<select> 元素定义下拉列表
<option> 元素定义待选择的选项
列表通常会把首个选项显示为被选选项，也通过添加 selected 属性来定义预定义选项
<select name=""><option value = "属性值1">属性值1</option><option value = "属性值2">属性值2</option>
</select>下拉列表框通过select自行选择，option给出选项value：服务器通过name获取到的值selected表示默认选中
代码示例：
选择日期：
<select name="month"><option value = "1">1</option><option value = "2">2</option><option value = "3">3</option><option value = "4">4</option><option value = "5">5</option><option value = "6">6</option><option value = "7">7</option><option value = "8">8</option><option value = "9">9</option><option value = "10">10</option><option value = "11">11</option><option value = "12">12</option>
</select>
页面显示：
三、 <textarea> 元素（文本域）
<textarea></textarea> 定义多行输入字段（文本域）
<textarea rows="" readonly="" disabled=""> ...
</textarea>文本域<textarea></textarea>rows:行高，默认多少行cols：指定列数，每行多少字readonly：只读disabled：禁用，央视呈现灰色
代码示例：
协议：<textarea rows="10" readonly="readonly" disabled="disabled">条款说明：1.必须遵守......2..........
</textarea>
页面显示：
四、 <bottom> 元素
① 提交数据至程序submit
- 定义提交表单数据至表单处理程序的按钮
<input type=“submit”>
<button type=“submit”></button>
② 重置数据reset
- 定义重置数据按钮
<input type=“reset”>
<button type=“reset”></button>
③ 普通按钮button
- 定义按钮
<input type=“button”>
<button type=“button”></button>
<input type = "submit" value="" /> <!--跳转到指定的页面-->
<input type = "reset" value="" /> <!--刷新-->
<input type = "button" value="" /> <!--普通按钮，按钮长相，只能按--> value：服务器通过name获取到的值<!--另一种按钮-->
<button type="submit">按钮名称</button>
<button type="reset">按钮名称</button>
<button type="button">按钮名称</button><input type = "image" src="" width="" /> <!--图片按钮，类似于submit-->src：图片路径
代码示例：
<input type = "submit" value="注册" /><!--跳转到<form>中action指定的页面--><input type = "reset" value="刷新" /><!--刷新--> <input type = "button" value="按钮" /><!--普通按钮，按钮长相，只能按--> <!--图片按钮，类似于submit--><input type = "image" src="../../img/下帝视角.jpg" width="100px" /><br /><!--另一种按钮--><button type="submit">注册</button><button type="reset">刷新</button><button type="button">按钮</button>
页面显示：
HTML5 新增表单元素
| 标签 | 描述 |
|---|---|
| datalist | input标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值 |
| keygen | 规定用于表单的密钥对生成器字段 |
| output | 标签定义不同类型的输出，比如脚本的输出 |
datalist
<datalist> 元素为 <input> 元素规定预定义选项列表
用户在输入数据时能够看到预定义选项的下拉列表
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性
代码示例：
<datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari">
</datalist>
页面显示：
点击准备输入数据时：
框架
HTML5中已移除
<iframe name = "" src="" ></iframe>name：名称src：url，显示不同的网页frameborder：边框 0和no都代表没有width：宽heigh：高
代码示例：
<iframe name = "baidu" src="https://www.baidu.com/" width=100% height="300px" ></iframe><br /><hr color="antiquewhite" size="4"/><iframe name = "CSDN" src="https://www.csdn.net/" width=100% height="300px" frameborder="0"></iframe>
页面显示：
HTML5中其它新增
语义标签
| 标签 | 描述 |
|---|---|
| article | 定义页面独立的内容区域 |
| aside | 定义页面的侧边栏内容 |
| bdi | 允许您设置一段文本，使其脱离其父元素的文本方向设置 |
| details | 用于描述文档或文档某个部分的细节 |
| dialog | 定义对话框，比如提示框 |
| summary | 标签包含 details 元素的标题 |
| header | 定义了文档的头部区域 |
| footer | 定义 section 或 document 的页脚 |
| nav | 定义导航链接的部分 |
| progress | 定义任何类型的任务的进度 |
| section | 定义文档中的节（section、区段） |
| time | 定义日期或时间 |
| wbr | 规定在文本中的何处适合添加换行符 |
音频
使用<audio>
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
视频
使用<video>
| Format | MIME-type |
|---|---|
| MP4 | video/mp4 |
| Ogg | audio/ogg |
| WebM | video/webm |
HTML超文本标记语言入门基础知识相关推荐
- HTML Hyper Text Markup Language（超文本标记语言） 基础知识汇总3
表单 语法 <form method="post" action="result.html"><p> 名字:<input name ...
- C语言入门基础知识有哪些？
众所周知C语言经久不衰,并且很多人都想要成为C语言工程师,为了能够做好C语言技术学习,需要知晓C语言入门基础知识有哪些. 用一个简单的C程序例子,介绍C语言的基本构成.格式.以及良好的书写风格,使小伙 ...
- C语言基础知识入门和C语言入门基础知识大全
一.C语言基础知识入门 C语言一出现,就以其丰富的功能.强大的表达能力.灵活性.方便性和广泛的应用,在世界范围内迅速普及和普及.C语言不仅高效而且可移植.它可以用来开发应用软件.驱动程序.操作系统等. ...
- C语言入门-基础知识
良好习惯之规范 在写C语言程序的时候为了书写清晰.便于阅读.便于理解.便于维护,在编写程序时应遵循以下规则: 1.一个说明或一个语句占一行,例如:包含头文件.一个可执行语句结束都需要换行: 2.函数体 ...
- c语言 二进制输出_推荐收藏！C语言入门基础知识大全
01C语言程序的结构认识 用一个简单的c程序例子,介绍c语言的基本构成.格式.以及良好的书写风格,使小伙伴对c语言有个初步认识. 例1:计算两个整数之和的c程序: #include main() {i ...
- C语言入门基础知识【完整版】
目录 一.数据类型和表达式 1.基本类型 2.构造类型 1)数组类型 2)[结构体类型](#jiegou) 3)[共用体类型](#lianhe) 3.常量 4.运算表达式 1)算术运算表达式: 2)关 ...
- 初学者宝典：C语言入门基础知识大全（下）
06 类型的自动转换和强制转换 当同一表达式中各数据的类型不同时,编译程序会自动把它们转变成同一类型后再进行计算.转换优先级为:char < int < float < double ...
- 初学者宝典：C语言入门基础知识大全（中）
04 常量 在程序运行中,其值不能被改变的量称为常量.常量有5种类型:整型常量.实型常量.字符常量.字符串常量和符号常量. 4.1 数值转换 - 数值的四种表现形式: ①:二进制:所有数字由0,1构成 ...
- c语言 二进制输出_收藏！C语言入门基础知识大全
C语言中的逻辑值只有两个:真(true)和假(flase).用非零代表真,用零代表假.因此,对于任意一个表达式,如果它的值为零,就代表一个假值,如果它的值为非零,就代表一个真值.只要值不是零,不管是正 ...
最新文章
- 故事点数是对工时的度量
- modelsim do文件仿真
- OpenCV矩阵可视化工具包
- pycharm创建mysql项目_python+Django+pycharm+mysql 搭建首个web项目详解
- Windows下编译配置Caffe的GPU版本
- java多态 成员访问特点（父类引用指向子类对象）
- Galaxy Note 20新爆料：至少有两款机型，处理器高低配
- [LeetCode][JavaScript]Power of Three
- vue使用coreUI的CDataTable踩坑记录
- 出栈顺序判断问题——划线法
- 手机点餐APP开发需求分析
- 力扣-无重复字符的最长子串
- developer 开启双重验证 your appid needs to be updated
- 利用重复性渐变编写邮件线
- 在WSL上编译并运行全志XR806的完全体demo
- NURBSglunurbssurface
- 调节latex表格中的字体大小
- 一个合格程序员应该读过的书
- pl sql mysql 版本_老版本PL/SQL Developer操作数据库导致ORA-00600[17113]
- ChibiOS系列：五、将STM32 USART与ChibiOS串行驱动程序配合使用