HTML
学习笔记仅供参考
要学习前端知识就要先从客户端和服务器开始
客户端和服务器
客户端
形式
- 文字客户端(通过命令行进行)
- 图形化界面(通过拖动等命令进行，软件的主要形式)
- 网页(不需要安装和更新，并且可以跨平台使用，而且开发成本低B/S架构)
定义
- 硬件上说的客户端指电脑、手机、pad等
- 软件上说的客户端指IE浏览器、QQ、暴风影音等
- 通过浏览器客户端访问淘宝，会返回整个网页的html文本，html文本里很多样式是修饰属性；而对于手机客户端，性能有限，主要关注数据信息(xml、json数据传输格式)，不需要过多html的修饰
服务器
- 硬件上说的服务器指一台或多台电脑
- 软件上说的服务器指web服务器，如Apache，对外发布服务，来提供服务，安装在硬件上使用。对于简单的Apache，就是给电脑开一个web服务，设置端口，客户端可以通过浏览器访问该服务器电脑。JaveEE写的web的项目，部署到web服务器上后，客户端才能访问这些项目
W3C
万维网（World Wide Web）是作为欧洲核子研究组织的一个项目发展起来的，在那里 Tim Berners-Lee 开发出万维网的雏形
Tim Berners-Lee - 万维网的发明人 - 目前是万维网联盟的主任
W3C 在 1994 年被创建的目的是，为了完成麻省理工学院（MIT）与欧洲粒子物理研究所（CERN）之间的协同工作，并得到了美国国防部高级研究计划局（DARPA）和欧洲委员会（European Commission）的支持
网页三剑客
- HTML(主要用于网页的结构)
- CSS(主要用于网页中元素的样式)
- JavaScript(主要用于网页中的响应用户的操作)
网页结构
- HTML(结构)
- CSS(表现)
- JavaScript(行为)
字符编码
陈若 -> 10010110010010001000001011100101
10010110010010001000001011100101 -> 陈若
所有的数据在计算机中存储时都是以二进制的形式存储的，当人们需要读取这段数据是，再将机器语言转换成字符
编码
将字符转换为二进制码的过程
解码
将二进制码转换为字符的过程
常见的乱码问题
就与解码和编码的字符集不相等就会出现乱码
常见的字符集
- ASCII
- ISO88591
- GB2312
- GBK
- UTF-8(当前主流 万国码)
文件的相对路径
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
相对路径都会使用.或..开头
- ./ 表示当前文件所在的目录，可写可不写
- ../ 表示当前文件所在目录的上一级目录，一定要写
HTML5
定义：是超文本标记语言，所谓的超文本指的是超连接，使用超连接可以让我们从一个网页跳转到另一个网页，它并不是一种编程语言而是一种标记语言，主要负责网页中的骨架结构，也就是其核心
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进
标签
通常是成对出现的,但是也存在一些自结束标签
标签对中的第一个标签是开始标签，第二个标签是结束标签
语法
1 | <标签名>内容</标签名> |
注释
注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明，开发中一定要养成良好的习惯，注释要简单清楚
注意：注释不可被嵌套
语法规则
- HTML中不区分大小写，但是我们一般都使用小写
- HTML中的注释不能嵌套
- HTML标签必须结构完整，要么成对出现，要么自结束标签
- HTML标签可以嵌套，但是不能交叉嵌套
- HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)
1 | <!-- 我是注释 |
标签规则
单标签
1 | <标签名 [属性名=属性值,...]> |
成对标签
1 | <标签名 [属性名=属性值,...]></标签名> |
HTML5基础结构
1 | <!-- 文档声明 DOCTYPE |
属性
定义：在标签中(开始标签或自结束标签)还可以设置属性
是一种名值对(属性名 = “属性值”)结构
属性和标签名或其他属性应该使用空格隔开
注意：
- 属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题，在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号
- 属性不能瞎写，应该根据权威的网站中规定编写
1 |
|
实体
有些字符，像(<)这类的，对HTML（标准通用标记语言下的一个应用）来说是有特殊意义的，所以这些字符是不允许在文本中使用的。要在HTML中显示(<)这个字符，我们就必须使用实体字符
语法
1 | &实体名称； |
常用的实体
记得把空格去掉
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | & nbsp; | & #160; | |
| < | 小于号 | & lt; | &# 60; |
| > | 大于号 | & gt; | & #62; |
| & | 和号 | & amp; | & #38; |
| “ | 引号 | & quot; | & #34; |
| ‘ | 撇号 | & apos; | & #39; |
| ￠ | 分（cent） | & cent; | & #162; |
| £ | 镑（pound） | & pound; | & #163; |
| ¥ | 元（yen） | & yen; | & #165; |
| © | 版权（copyright） | & copy; | & #169; |
| ® | 注册商标 | & reg; | & #174; |
| ™ | 商标 | & trade; | & #8482; |
| × | 乘号 | & times; | & #215; |
| ÷ | 除号 | & divide; | & #247; |
meta元素
meta主要用于设置网页中的一些元数据，元数据不是给用户看的
属性
- charset 指定网页的字符集
- name 指定的数据的名称
- keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开
- description 表示由于指定网站的描述
- content 指定的数据的内容
代码
1 |
|
块和行内元素
块元素
在网页中一般通过块元素来对页面进行布局
自动换行，每个块元素独占一行，可以设置宽高属性，多个块标签默认从上至下排列。最典型块标签< div >，多用于页面布局
行内元素
主要用于包括文字
不会自动换行，多个行内元素可在同一行，不能设置宽（width）高（height）属性，多个行内标签默认从左至右排列。最典型行内标签< span >，其高宽由标签内容撑开
行内块元素
同时具有行内元素和块元素的特征，不能自动换行，但可以设置宽高属性，默认排列方式从左至右。如标签< img >
常见行内元素：< span >、< a >、< strong >、< b> 、< em >、< I >、< del >、< u >
常见块元素：< div >、< h1 >…< h6 >、< p >、< table >、< form >、< ul >、< ol >、< dl >、< tr >、< body >
常见行内块元素：< img >、< input >、< td>
语义标签
| 标签 | 作用 |
|---|---|
<header> | 规定文档或节的页眉 |
<footer> | 定义文档或节的页脚 |
<main> | 规定文档的主内容 |
<section> | 定义文档的节 |
<article> | 定义文档的文章 |
<aside> | 定义页面内容以外的内容 |
<nav> | 定义导航链接 |
<mark> | 定义重要的或强调的文本 |
<figure> | 规定自包含内容，比如图示、图表、照片、代码清单等 |
<figcaption> | 定义 <figure> 元素的标题 |
<details> | 定义用户能够查看或隐藏的额外细节 |
<summary> | 定义 <details> 元素的可见标题 |
<time> | 定义日期/时间 |
1 |
|
表格标签
1 | <!DOCTYPE html> |
列表标签
分类
- 有序列表
- 无序列表
- 定义列表
可以嵌套
有序列表
1 | <!-- 有序列表,使用ol标签来创建有序列表 |
属性值
| 属性 | 值 | 作用 |
|---|---|---|
| type | 1（默认），a或A，i或I | 项目符号显示为数字、字母或罗马字母排序 |
| start | 数字 | 规定项目符号的起始值 |
| reversed | 规定列表顺序为降序 |
无序列表
1 | <!-- 无序列表，使用ul标签来创建无序列表 |
属性值
| 属性 | 值 | 作用 |
|---|---|---|
| type | 类型 | |
| disc(默认值) | 实心圆 | |
| circle | 空心圆 | |
| square | 实心方块 | |
| none | 不显示 |
自定义列表
1 | <!-- 定义列表，使用dl标签来创建一个定义列表 |
分组标签
1 | <div>具体内容</div> |
1 | <span>具体内容</span> |
超链接标签
1 |
|
| 属性 | 值 | 作用 |
|---|---|---|
| href | url(网页地址) | 规定链接的目标 URL,网页链接 |
| title | 文本内容 | 为超链接设置一些介绍信息 |
| target | 规定在何处打开目标 URL，仅在 href 属性存在时使用 | |
| _self | 默认,在当前页面所在窗口打开链接的网页 | |
| _blank | 在当前浏览器中打开一个新窗口加载链接的网页 | |
| _parent | 在父窗口打开链接的网页（有些页面可以通过等方式打开一些子窗口） | |
| _top | 清除当前窗口中打开的所有框架（子窗口），并在整个窗口打开链接的网页 | |
| framename | 在指定的框架中打开链接的网页 |
使用得最最频繁的属性值是_self和_blank,至于_parent、_top和framename基本已不再使用
具体应用
可点击图片
在一些网站上存在一些图片，当点击图片时，就会跳转到另一个页面。这其实是将图片作为了a标签的内容
1 | <a href="https://bilibili.com"> |
邮件链接
在很多网站中，都会有一个可点击的邮箱地址，当点击后，会打开邮箱发送邮件。这其实是将a标签中的href属性值设置为了邮件发送的相关内容
发送邮件时使用的是mailto：链接，这类型的连接有几个参数：
name@email.com：这是第一个参数，也是必填参数。它指的是接收方的邮件地址cc=name@email.com：抄送地址（可选）bcc=name@email.com：密送地址（可选）subject=subject text：邮件主题（可选）body=body text：邮件内容（可选）?：第一个参数与第二个参数的分隔符（可选）&：除第一和第二个参数之间的分隔之外的其他参数之间的分隔符（可选）
1 | <a href="mailto:2841220231@qq.com">陈若的QQ邮箱</a> |
mailto的第一个参数是必须的，其他参数可以没有，也可以是任意一个或几个的组合，毕竟邮件地址不能没有不是
注意：参数subject和body的值不应该直接使用中文和特殊字符以及空格，否则会造成乱码以及一些意想不到的结果。中文和特殊字符应该使用URL编码，如空格使用“%20”代替
下载链接
有一些链接在点击后可以下载文件、图片、音视频等，这一类链接称为下载链接。其实现方法是将href属性的值设为被下载资源的路径，然后再添加download属性
1 | <!-- 下载链接的download属性值为“陈若的2022年新春烟花.mp4”，这表示图片下载后命名为"陈若的2022年新春烟花.mp4"。当然文件后缀也可以不写 --> |
超链接样式
a标签的伪类
伪类选择器：
- :link：超链接未被访问时的状态，也是超链接的初始样式，可以不设置
- :visited：超链接已被访问的状态
- :hover：光标悬停在标签上的状态（该伪类不局限于a标签使用）
- :active：光标在标签上被按下时（鼠标单击按下还没释放时）的状态（该伪类不局限与a标签使用）
当不适用这些伪类修改a标签的样式时，标签的默认样式：
:link：蓝色，有下划线:visited：紫色，有下划线:hover：和hover前一样:active：红色，有下划线
伪类顺序
a标签的4个伪类选择器要求遵循顺序：:link→ :visited → :hover → :active
原理
一个超链接要么已经访问过，要么未访问过，因此访问过与未访问过两种状态不可能同时存在，因此:link和:visited的先后顺序可以随意。但从逻辑上，链接是先未访问过，然后到已访问过的。所以顺序应该先:link，后:visited
当光标移动到标签上时，标签的:hover伪类样式将被激活，覆盖:link或:visited的样式。因此:hover应该在:link和:visited之后，否则:hover的样式将被覆盖，无法显示。此时伪类选择器的顺序是：:link → :visited → :hover
当鼠标按下时，标签的:active伪类样式被激活。这时光标是停留在标签上的，而且是未访问或已访问的状态。因此，为了能够样:active样式能够正常的显示出来，:active应该将:hover、:visited、:link的样式覆盖。这时就可以得出四个伪类选择器的顺序就是：:link → :visited→ :hover → :active
图像标签
图片标签用于向当前页面中引入一个外部图片
1 |
|
格式
1 |
|
内联框架标签
定义：用于向当前页面中引入一个其他网页
1 |
|
音视频标签
1 |
|
表单标签
| 标签 | 作用 |
|---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<label> | 定义了 <input> 元素的标签，一般为输入标题 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist> | 指定一个预先定义的输入控件选项列表 |
<keygen> | 定义了表单的密钥对生成器字段 |
<output> | 定义一个计算结果 |
form标签
| 属性 | 值 | 作用 |
|---|---|---|
| accept-charset | character_set | 规定服务器可处理的表单数据字符集，表单提交时使用的字符编码 |
| action | URL | 规定当提交的服务器地址 ，值，绝对 URL - 指向另一个网站（比如 action=”http://www.example.com/example.htm"） 相对 URL - 指向网站内的一个文件（比如 action=”example.htm”） |
| autocomplete | on | 默认,规定启用自动完成功能,浏览器会基于用户之前键入的值自动完成值 |
| off | 规定禁用自动完成功能,用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入 | |
| enctype | 指定将数据回发到服务器时浏览器使用的编码类型 | |
| application/x-www-form-urlencoded | 默认，在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值） | |
| multipart/form-data | 不对字符编码，当使用有文件上传控件的表单时，该值是必需的 | |
| text/plain | 将空格转换为 “+” 符号，但不编码特殊字符 | |
| method | 规定用于发送表单数据的 HTTP 方法，提交的方式 GET(默认值)或 POST | |
| get | 默认,将表单数据（form-data）以名称/值对的形式附加到 URL 中：URL?name=value&name=value | |
| post | 以 HTTP post 事务的形式发送表单数据（form-data） | |
| name | 文本 | 规定表单的名称 |
| novalidate | novalidate | 如果使用该属性，则提交表单时不进行验证 |
| target | 规定在何处打开 action URL | |
| _blank | 在新窗口/选项卡中打开 | |
| _self | 在同一框架中打开（默认） | |
| _parent | 在父框架中打开 | |
| _top | 在整个窗口中打开 | |
| framename | 在指定的 iframe 中打开 |
表单提交的时候，数据没有发送给服务器的三种情况
- 没有设 name 属性值
- 单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
- 表单项不在提交的 form 标签中
拓展
get 请求的特点是：
浏览器地址栏中的地址是：action 属性[+?+请求参数],
请求参数的格式是：name=value&name=value不安全
它有数据长度的限制
post 请求的特点是：
浏览器地址栏中只有 action 属性值
相对于 GET 请求要安全
理论上没有数据长度的限制
Web窗体
Web窗体上面的数据多是动态从数据库读取的，故加载较慢。WEB窗体是一个动态网页的组合，分为.aspx和相应的.cs文件，.aspx文件可以用html标记语言实现网页前台，.cs则是服务器代码，用来进行交互
input标签
<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件
| 属性 | 值 | 作用 |
|---|---|---|
| accept | 规定了可通过文件上传提交的服务器接受的文件类型,该属性仅适用于 <input type="file"> | |
| audio/* | 接受所有的声音文件 | |
| video/* | 接受所有的视频文件 | |
| image/* | 接受所有的图像文件 | |
| MIME_type | 一个有效的 MIME 类型，不带参数 | |
| alt | 文本 | 定义图像输入的替代文本，该属性只能与 <input type="image"> 配合使用 |
| autocomplete | 规定输入字段是否应该启用自动完成功能,该属性适用于下面的 <input> 类型：text、search、url、tel、email、password、datepickers、range 和 color | |
| on | 默认,规定启用自动完成功能 | |
| off | 规定禁用自动完成功能 | |
| checked | 规定在页面加载时应该被预先选定的 <input> 元素，布尔属性 该属性适用于 <input type="checkbox"> 和 <input type="radio"> | |
| disabied | 规定应该禁用的 <input> 元素，被禁用的 input 元素是无法使用和无法点击的，布尔属性，该属性不适用于 <input type="hidden"> | |
| form | form_id | 属性规定 <input> 元素所属的一个或多个表单 |
| formaction | url | 规定当表单提交时处理输入控件的文件的 URL |
| formenctype | 规定当表单数据提交到服务器时如何编码（仅适用于 method=”post” 的表单） | |
| application/x-www-form-urlencoded | 默认,在发送前对所有字符进行编码,将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值 | |
| multipart/form-data | 不对字符编码,当使用有文件上传控件的表单时，该值是必需的 | |
| text/plain | 将空格转换为 “+” 符号，但不编码特殊字符 | |
| formmethod | 规定发送表单数据到 action URL 的 HTTP 方法 | |
| get | 默认,将表单数据（form-data）以名称/值对的形式附加到 URL：URL?name=value&name=value | |
| post | 以 HTTP post 事务的形式发送表单数据（form-data） | |
| formnovalidate | formnovalidate | 规定当表单提交时 <input> 元素不进行验证，布尔属性 |
| height | 数值 | 规定 <input> 元素的高度(仅适用于 <input type="image">) |
| list | id名 | 规定绑定到 <input> 元素的 datalist 的 id |
| max | 规定 <input> 元素的最大值,与min属性配合使用，可创建合法值范围(适用于以下 input 类型：number、range、date、datetime、datetime-local、month、time 和 week) | |
| 数字值 | 数字值,规定输入字段允许的最大值 | |
| 日期值 | 日期,规定输入字段允许的最大值 | |
| maxlength | 数字值 | 规定 <input> 元素中允许的最大字符数 |
| min | 规定 <input> 元素的最小值(适用于以下 input 类型：number、range、date、datetime、datetime-local、month、time 和 week) | |
| 数字值 | 规定输入字段允许的最小值 | |
| 日期值 | 规定输入字段允许的最小值 | |
| multiple | 规定允许用户输入到 <input> 元素的多个值,简单的讲，增加输入值的数量，就是一个开放闸口，是布尔属性 | |
| name | 文本值 | 规定 <input> 元素的名称(只有设置了 name 属性的表单元素才能在提交表单时传递它们的值) |
| pattern | 正则表达式 | 规定用于验证 <input> 元素的值的正则表达式(适用于下面的 input 类型：text、search、url、tel、email 和 password) |
| placeholder | 文本值 | 规定可描述输入字段预期值的简短的提示信息(适用于下面的 input 类型：text、search、url、tel、email 和 password) |
| readonly | 规定输入字段是只读的,只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本,布尔属性 | |
| required | 规定必需在提交表单之前填写输入字段,不填写会有警告(适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file)布尔属性 | |
| size | 数字值 | 规定以字符数计的 <input> 元素的可见宽度(适用于下面的 input 类型：text、search、tel、url、email 和 password) |
| src | url | 规定显示为提交按钮的图像的 URL,该属性对于 <input type="image"> 是必需的属性，且只能与 <input type="image"> 配合使用 |
| step | 数字值 | 规定输入字段的合法数字间隔(适用于下面的 input 类型：number、range、date、datetime、datetime-local、month、time 和 week) |
| type | 规定要显示的 <input> 元素的类型 | |
| button | 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本） | |
| checkbox | 定义复选框 | |
| color | 定义拾色器 | |
| date | 定义 date 控件（包括年、月、日，不包括时间） | |
| datetime | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区） | |
| datetime-local | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区） | |
| 定义用于 e-mail 地址的字段 | ||
| file | 定义文件选择字段和 “浏览…” 按钮，供文件上传 | |
| hidden | 定义隐藏输入字段 | |
| image | 定义图像作为提交按钮 | |
| month | 定义 month 和 year 控件（不带时区） | |
| number | 定义用于输入数字的字段 | |
| password | 定义密码字段（字段中的字符会被遮蔽） | |
| radio | 定义单选按钮 | |
| range | 定义用于精确值不重要的输入数字的控件（比如 slider 控件） | |
| reset | 定义重置按钮（重置所有的表单值为默认值） | |
| search | 定义用于输入搜索字符串的文本字段 | |
| submit | 定义提交按钮 | |
| tel | 定义用于输入电话号码的字段 | |
| text | 默认,定义一个单行的文本字段（默认宽度为 20 个字符） | |
| time | 定义用于输入时间的控件（不带时区） | |
| url | 定义用于输入 URL 的字段 | |
| week | 定义 week 和 year 控件（不带时区） | |
| value | 文本值 | 规定 <input> 元素的值(对于 <input type="checkbox"> 和 <input type="radio"> 是必需的，但不适用于 <input type="file">) |
| width | 数字值 | 规定 <input> 元素的宽度(只适用于 <input type="image">) |
value属性
- 对于 “button”、”reset”、”submit” 类型 - 定义按钮上的文本
- 对于 “text”、”password”、”hidden” 类型 - 定义输入字段的初始（默认）值
- 对于 “checkbox”、”radio”、”image” 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL
- 对于
<input type="checkbox">和<input type="radio">是必需的，但不适用于<input type="file">
textarea标签
定义一个多行的文本输入控件
| 属性 | 值 | 作用 |
|---|---|---|
| autofocus | 规定文本区域应该在页面加载时自动获得焦点，布尔属性 | |
| cots | 数字值 | 属性规定文本区域的可见宽度 |
| disabled | 规定文本区域应该被禁用，既不可用，文本也不可选择（不能被复制），布尔属性 | |
| form | form_id | 规定文本区域所属的一个或多个表单的 id 列表，以空格分隔 |
| maxlength | 数字值 | 在文本区域中允许的最大字符数 |
| name | 文本值 | 规定文本区域的名称 |
| placheolder | 文本值 | 规定一个简短的提示，它描述了文本区域的期望值，当文本区域为空，且当字段获得焦点后又失去焦点时，文本区域中显示该提示 |
| readonly | 规定文本区域为只读。 | |
| required | 在只读的文本区域中，无法对内容进行修改，但用户可以通过 tab 键切换到该控件，选取或复制其中的内容，布尔属性 | |
| rows | 数字值 | 规定文本区域的可见高度，以行数计，默认值为2 |
| wrap | 规定在表单提交时文本区域中的文本是如何换行的 | |
| soft | 默认，在到达元素最大宽度的时候，换行显示，但不会自动插入换行符，也就是提交表单时没有换行符 | |
| hard | 在文本到达元素最大宽度的时候，浏览器自动插入换行符(CR+LF) 。在也就是提交表单也提交来换行符。当使用 “hard” 时，需要指定 cols 属性 |
label标签
该标签不会向用户呈现任何特殊效果，但为鼠标用户改进了可用性，如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
| 属性 | 值 | 作用 |
|---|---|---|
| for | element_id | 规定 label 与哪个表单元素绑定 |
| form | form_id | 规定 label 字段所属的一个或多个表单 |
fieldset标签
会在相关表单元素周围绘制边框
| 属性 | 值 | 作用 |
|---|---|---|
| disabled | 规定应该禁用一组表单元素（一个 fieldset），既不可用，文本也不可选择（不能被复制），布尔属性 | |
| form | form_id | 规定 fieldset 所属的一个或多个表单 |
| name | 文本值 | 规定 fieldset 的名称 |
select标签
用来创建下拉列表
| 属性 | 值 | 作用 |
|---|---|---|
| autofocus | 规定下拉列表在页面加载时自动获得焦点，布尔属性 | |
| disabled | 规定下拉列表应该被禁用，既不可用，也不可点击，布尔属性 | |
| form | form_id | 规定下拉列表所属的一个或多个表单的 id 列表，以空格分隔 |
| multiple | 规定可同时选择多个选项， 对于 windows：按住 Ctrl 按钮来选择多个选项 对于 Mac：按住 command 按钮来选择多个选项，布尔属性 | |
| name | 定义下拉列表的名称 | |
| required | 规定用户在提交表单前必须选择一个下拉列表中的选项 | |
| size | 数字值 | 规定下拉列表中可见选项的数目 |
optgroup标签
| 属性 | 值 | 作用 |
|---|---|---|
| disabled | 规定选项组应该被禁用，既不可用，也不可点击，布尔属性 | |
| label | 文本值 | 为选项组规定标签/描述 |
option标签
定义下拉列表中的一个选项
注意：
注释：<option> 标签能够在不带任何属性的情况下使用，但是通常需要 value 属性，该属性定义了发送到服务器的数据
注释：请与 <select> 或 <datalist> 标签结合使用。在其他地方，<option> 标签是无意义的
| 属性 | 值 | 作用 |
|---|---|---|
| disabled | 规定某个选项应该被禁用，既不可用，也不可点击，布尔属性 | |
| label | 文本值 | 选项的更短的版本，长的选项的，选项的简写 |
| selected | 规定在页面加载时预先选定该选项，被预选的选项会显示在下拉列表最前面的位置，布尔属性 | |
| value | 文本值 | 规定在表单被提交时被发送到服务器的值 |
button标签
定义一个按钮
| 属性 | 值 | 作用 |
|---|---|---|
| autofocus | 规定当页面加载时按钮应当自动地获得焦点，布尔属性 | |
| disabled | 规定应该禁用该按钮，被禁用的按钮是无法使用和无法点击的，布尔属性 | |
| form | form_id | 按钮所属表单的 id。 如需引用一个以上的表单，请使用空格分隔的列表 |
| formaction | url | 规定将表单数据发送到的地址 |
| formenctype | 规定在向服务器发送表单数据之前如何对其进行编码(覆盖 form 元素的 enctype 属性，该属性与 type=”submit” 配合使用) | |
| application/x-www-form-urlencoded | 默认选项，在发送前对所有字符进行编码 | |
| multipart/form-data | 不对字符编码。当使用有文件上传控件的表单时，该值是必需的 | |
| text/plain | 将空格转换为 “+” 符号，但不编码特殊字符 | |
| formmethod | 规定用于发送表单数据的 HTTP 方法(覆盖 form 元素的 method 属性，该属性与 type=”submit” 配合使用) | |
| get | 向 URL 追加表单数据（form-data）：URL?name=value&name=value | |
| post | 以 HTTP post 事务的形式发送表单数据（form-data） | |
| formnovalidate | 使用该属性，则提交表单时按钮不会执行验证过程，布尔属性 | |
| formtarget | 规定在何处打开 action URL(覆盖 form 元素的 target 属性，该属性与 type=”submit” 配合使用) | |
| _blank | 在新窗口/选项卡中将表单提交到文档 | |
| _self | 默认选项，在同一框架中将表单提交到文档 | |
| _parent | 在父框架中将表单提交到文档 | |
| _top | 在整个窗口中将表单提交到文档 | |
| framename | 在指定的框架中将表单提交到文档 | |
| name | 文本值 | 规定按钮的名称 |
| type | 规定按钮的类型 | |
| button | 该按钮是提交按钮 | |
| reset | 该按钮是可点击的按钮 | |
| submit | 该按钮是重置按钮 | |
| value | 文本值 | 规定按钮的初始值。可由脚本进行修改 |
output标签
| 属性 | 值 | 作用 |
|---|---|---|
| for | element_id | 描述计算中使用的元素与计算结果之间的关系 |
| form | form_id | 定义输入字段所属的一个或多个表单 |
| name | 文本值 | 定义对象的唯一名称（表单提交时使用） |
其他标签
1 | 水平线：<hr> |
通用属性
| 通用属性 | 作用 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键 |
| class | 规定元素的类名 |
| contenteditable | 规定是否可编辑元素的内容 |
| contextmenu | 指定一个元素的上下文菜单，当用户右击该元素，出现上下文菜单 |
| data-* | 用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向 |
| draggable | 指定某个元素是否可以拖动 |
| dropzone | 指定是否将数据复制，移动，或链接，或删除 |
| hidden | 规定对元素进行隐藏 |
| id | 规定元素的唯一 id |
| lang | 设置元素中内容的语言代码 |
| spellcheck | 检测元素是否拼写错误 |
| style | 规定元素的行内样式 |
| tabindex | 设置元素的 Tab 键控制次序 |
| title | 规定元素的额外信息 |
| translate | 指定是否一个元素的值在页面载入时是否需要翻译 |
编程的路还很长，不要停下脚步呀
微信
相关推荐
评论
.webp)
