【HTML】学习笔记
目录
一、网页的相关概念
浏览器内核
Web标准
HTML的基础骨架
HTML标签分类
单标签
双标签
HTML标签关系
HTML开发工具
二：HTML标签
HTML标签的语义化
为什么要有语义化标签
排版标签
标题标签
段落标签
水平线标签
换行标签
div和span标签
pre标签
文本格式化标签
标签属性
HTML实体
编辑 图像标签
标记属性
超链接标签
锚点定位
功能链接
注释标签
列表标签
无序列表 ul (unordered list)
有序列表 ol (ordered list)
自定义列表
语义化容器元素
元素包含关系
iframe标签
其他标签介绍
time (提供给浏览器或搜索引擎阅读的时间)
q (一小段引用文本); blockquote (大段引用的文本)
表格标签
表格的基本语法：
表头单元格
表格属性
合并单元格
表单标签
表单域
input元素（输入框）
label元素 （普通元素，通常配合单选和多选框使用）
select元素 （下拉列表选择框）
textarea元素（文本域，多行文本框）
datalist元素（数据列表）
fieldset元素 （用于表单分组使用）
表格标签总结：
一、网页的相关概念
浏览器内核
负责读取网页内容，整理讯息，计算网页的显示方式并显示网页
查看浏览器市场份额：http://tongji.baidu.com/data/browaer
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| chrome、Opera | Blink | chrome、Opera浏览器内核。Blink其实是WebKit的分支。 |
*android手机使用Webkit内核（二次开发）
ios手机使用自家Webkit
wp7（window系统的手机）使用IE浏览器Trident内核。
Web标准
由W3C组织（万维网联盟）和其他标准化组织制定的一系列标准的集合
构成：主要包括结构（Struture）、表现（Presentation）和行为（Behavior）三个方面
结构：用于对网页元素进行整理和分类 >>HTML
表现：用于设置网页元素的版式，颜色，大小等外观样式 >>CSS
行为：网页模型的定义及交互的编写 >>Javascript
二、HTML入门
HTML（英文 Hyper Text-Markup Language的缩写）中文译为“超文本标签(标记)语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
作用：网页由网页元素组成，这些元素利用HTML标签描述出来，通过浏览器解析，显示给用户
超文本：
1.可以加入图片、声音、动画、多媒体等内容（超越文本限制）
2.可以从一个文件跳转到另一个文件，与世界各地主机的文本连接（超级链接文本）例：<img src="ting.jpg" />
HTML的基础骨架
<html><head><title></title></head><body></body>
</html>HTML骨架标签总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本是放到body里面的，p,h,a,b,u,i,,s,em,del,ins,strong,img等 |
例如：vscode编译器！+回车快速生成html骨架
<!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><!DOCTYPE html>
文档声明，告诉浏览器，当前文档使用的是html标准是HTML5。不写声明文档，将导致浏览器进入怪异渲染模式。
<html lang="en">
lang属性：language，全局属性，表示该元素内部使用的文字是哪一种自然语言书写而成的。
en：英文 zh-CN：中文 fr：法文
<meta>
文档的元数据：附加信息；charset：指定网页内容编码。
HTML骨架的快速生成（vscode）
1.html:5 然后按下Tab键即可生成HTML骨架
2.！ 然后按下Tab键即可生成HTML骨架
HTML标签分类
在HTML标签中，带有“<>"符号的元素被成为HTML标签，如上面提到的<html>、<head>、<body>都是HTML标签，所谓标签就是放在“<>”标签符中表示某个功能的编码命令，也称为HTML标签或者HTML元素。
单标签
<标签名/>
单标签也称空标签，是指用一个标签符号即可完成的描述某个功能，例<br />
双标签
<标签名>内容</ 标签名>
该语法中 “<标签名>” 表示该标签的开始，一般称为 “开始标签(start tag)”，“</标签名>” 表示该标签的作用结束，一般称为 “结束标签(end tag)”。和开始标签相比，结束标签只是在前面加了一个关闭符 “/” 。 比如：<body> 我是body </body>
总结
元素（标签，标记）=起始标记（begin tag）+结束标记（end tag）+元素内容+元素属性
属性=属性名+属性值
属性的分类：1.局部属性：某些元素的特有的属性
2.全局属性：所有属性通用
HTML标签关系
HTML标签的相互关系就分为两种：
嵌套关系（父子关系）
<head><tiele></ title>
</ head>并列关系（兄弟关系）
<head></ head>
<body></ body>总结
如果两个标签之前的关系是嵌套关系，子元素最好缩进一个tab键的身位。
如果是并列关系，最好上下对齐。
HTML开发工具
市面上前端普遍的开发工具有以下几种
Dreamweaver、sublime、Webstrom、HBuilder、Visual Studio Code(微软发布[免费/开源/跨平台]的现代化代码编辑器)
推荐大家去使用Vscode的，一个字牛，不仅运行代码速度快，插件多，而且我最喜欢的是因为它的轻量级。第二个推荐的就是Webstorm了，功能齐全，唯一不舒服的就是比不上Vscode的速度，代码运行起来有些臃肿，不过也算极好的了，当然写代码最重要的不是工具的好坏，找到适合你的工具才是最好的。
————————————————
版权声明：本文为CSDN博主「亦世凡华、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_53123067/article/details/125560732
二：HTML标签
HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以去 MDN 查下手册就可以了。
HTML标签的语义化
所谓标签语义化，就是指标签的含义
1.每一个HTML元素都有具体的含义
a元素：超链接 、p元素：段落、 h1元素：一级标题
2.所有元素与展示效果无关
元素展示到页面的效果应该有css决定，因为浏览器带有默认的css样式
为什么要有语义化标签
1. 方便代码阅读和维护。
2. 同时让浏览器或者网络爬虫可以很好的解析，从而更好分析其中的内容。
3. 使用语义化标签会具有更好的搜索引擎优化。
核心：合适的地方给一个最为合适的标签。
语义是否良好：当我们去掉CSS之后，网页结构依然井然有序，并且有良好的可读性。
遵循的原则：先确定语义的HTML，再选择合适的CSS
排版标签
排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签
标题标签
单词缩写：head 头部，标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，没有<h7>等后面的标题
<!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><h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6>
</body>
</html>
注意：h1标签因为重要，尽量少用，一般h1都是给logo使用
段落标签
单词缩写：paragraph 段落
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是
<p> 我是段落 </p>
p元素是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大下自动换行。
<body><p>我是段落1</p><p>我是段落2</p>
</body>
水平线标签
单词缩写：horizontal 横线
在网页中常常看到一些水平线将段落与段落之间分开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片后实现，也可以简单的通过标记来完成，<hr />就是创建横跨网页水平线的标记其基本格式如下：
<hr /> 也是单标签<body><p>我是段落1</p><hr /><p>我是段落2</p>
</body>
换行标签
单词缩写：break 打断，换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用换行标签。
<br />
<body><p>我是段落1</p>内容1 内容2 内容3内容1 <br />内容2 <br />内容3 <br />
</body>
div和span标签
div和span两个标签是没有语义的，是我们网页布局主要的两个盒子
div就是 division的缩写， 分割，分区的意思 其实有很多用div来组合的网页
span 跨度，跨距，范围
语法格式如下：
<div> 我是div </div> <span> 我是span </span>
pre标签
预格式化文本元素
空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格，而pre标签例外，在pre元素中的内容不会出现空白折叠pre元素内容出现的内容，会按照源代码格式显示到页面上。该元素通常用于在网页中显示一些代码，pre元素功能的本质：它有一个默认的css属性。显示代码时，通常外面套code元素，code元素表示代码区域。
<body><pre><code style="white-space: pre;">var i = 2;if(i){console.log(i);}</code></pre><!-- 两者之间做个比较 --><div>var i = 2;if(i){console.log(i);}</div>
</body>
文本格式化标签
在网页中，有时需要问文字设置粗体、斜体和下划线效果，这时就需要用到HTML中的文本格式化标签，是文字以特殊的方法显现。
| 标签 | 显示效果 |
|---|---|
| <b></b>和<strong></strong> | 文字以粗体的方式显示（html推荐使用strong） |
| <i></i>和<em></em> | 文字以斜体的方式显示（html推荐使用em） |
| <s></s>和<del></del> | 文字以加删除线的方式显示（html推荐使用del） |
| <u></u>和<ins></ins> | 文字以加下划线的方式显示（html不赞成使用u） |
总结：
<b>、<i>、<s>、<u> 只有使用没有强调的意思，正印证了我们上文讲到的写有语义化的标签更加合适<strong>、<em>、<de>l、<ins> 语义更强烈。
标签属性
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签属性加以设置其基本语法格式如下：
<标签名 属性1='属性值1' 属性2='属性值2' ...> 内容 </标签名>
例如
<hr width='400' />在上面的语法中
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名的后面
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
3.任何标签的属性都有默认值，省略该属性则取默认值
采取 键值对 的格式 key = "value"的格式
HTML实体
实体字符 (HTML Entity) 通常用于在页面中显示一些特殊字符。书写格式有两种，如下：
小于符号：<
大于符号：>
空格符号： 
版权符号：©
&符号：&
图像标签
单词缩写：image 图像
HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像，就需要使用图像标签接下来将详细介绍图像标签<img />以及和它相关的属性，其基本格式如下：
该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必需属性：
<img src='图像URL' /><img />标记属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素(XHTML不支持%页面百分比) | 设置图像的宽度 |
| height | 像素(XHTML不支持%页面百分比) | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
<img/>标签书写路径的写法
书写路径分为两种：绝对路径和相对路径
站外资源 (非当前网站的资源) ：书写 绝对路径
站内资源 (当前网站的资源) : 书写 相对路径（或绝对路径）
绝对路径的书写格式：
协议名://主机名:端口号/路径 （schema://host:port/path）
协议名：http、https、file
主机名：域名、IP地址
端口号：协议是http，默认端口号80；协议是https，默认端口号443
相对路径的书写格式：
以./开头，./表示当前资源所在的目录；可以书写../表示返回上一级目录；相对路径:./可以省略.
下一级路径 /
上一级路径 ../
超链接标签
单词缩写：anchor 的缩写，基本解释为：锚，铁锚的。
在HTML中创建超链接非常简单，只需要标签环绕需要被链接的对象即可，其基本语法格式如下：
<a href='跳转目标' target='目标窗口的弹出方式'> 文本或图像 </a>href(Hypertext Reference的缩写，意思是超文本引用)：
用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接功能。
target：用于指定链接页面的打开方式其取值有 _self 和 _blank 两种，其中 _self 为默认值，_blank为在新窗口中的打开方式
这里提一下一个问题，根据上文我们要想点开链接是从新窗口打开的，需要给 a 标签的 target 赋值为 _black，可是在我们日常项目开发中，可能一个网站都要有成百上千的 a 标签，要想每一个都以新窗口打开是不是太费事了？针对这个问题，我在这里讲一下 base 标签的用法。
base标签：可以整体设置链接的打开状态
<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><base target="_blank">
</head>如果又想设置有的标签是当前窗口打开，只需在相应的 a 标签设置 target = "_self" 即可。
注意：
1. 外部链接 需要添加 https://www. ...
2. 内部链接 直接链接内部页面即可，比如 <a href='index.html'>首页</a>
3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为 "#"(即href='#')，表示该链接暂时为一个空链接。
4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
锚点定位
通过创建锚点链接，用户能快速定位到目标内容。创建锚点链接分为两步：
1. 使用 “a href="#id名" 创建链接文本 （id属性：全局属性，表示元素在文档中的唯一编号）
2. 使用相应的id名标注跳转目标的位置
<body><a href="#live">个人生活</a><h2>人生经历</h2><p>我的人生经历</p><h2 id="live">个人生活</h2><p>我的个人生活</p>
</body>锚点定位一般用于网页文章含有大量内容时，方便用户查找自己想要了解的内容而提供的快捷锚点以上代码虽然格式如此，但内容太少看不到效果，vscode可以生成乱文用作测试，lorem*100 Tab或者 回车键 来看一看。
功能链接
点击后，触发某个功能（只做了解即可）
1. 执行JS代码，javascript:
<body><a href="javascript:alert('你好！')">弹出：你好!</a>
</body>
2. 发送邮件，mailto: （不过需要要求用户计算机上安装有邮件发送软件：exchange）
<body><a href="mailto:1111111111@qq.com">点击给我发送邮件</a>
</body>
3. 拨号 tel: （不过需要要求用户计算机上安装有拨号软件，或使用的是移动端访问）
<body><a href="tel:131414141414">点击给我拨打电话</a>
</body>
注释标签
HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签，其基本格式如下：
<body><!-- 注释语句 -->
</body>注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到
列表标签
什么是列表？把....制成表，以表显示
容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是 整齐、整洁、有序。
无序列表 ul (unordered list)
无序列表的各个列表项之间没有顺序级别之分，是并列的。无序列表常用于制作菜单 或 新闻列表。其基本语法格式如下：
<body>xxx美女择偶条件：<ul><li>有责任心</li><li>会家务</li><li>会孝敬老人</li><li>年薪30w</li></ul>
</body>注意：
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己的样式属性，放下那个样式，一会让CSS来！
<li>标签
去掉<li>前面的项目符号（小圆点）
语法：
list-style : one;
有序列表 ol (ordered list)
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<body>把大象放进冰箱，总共分几步？<ol><li>打开冰箱门</li><li>把大象放进去</li><li>把冰箱门关上</li></ol>
</body>
自定义列表
定义列表常用于对术语和名词进行解释和描述，定义列表的列表项前没有任何项目符号，其基本语法如下：
<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl>
示例：
<dl><dt>关注我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>联系我们</dd></dl>
注意：
1.<dl></ dl>里面只能包含<dt></ dt>和<dd></ dd>
2.<dt></ dt>和<dd></ dd>个数没有限制，经常是一个<dt></ dt>对应多个<dd></ dd>
语义化容器元素
容器元素：该元素代表一个块区域，内部用于放置其他元素，之前的文章有提到 div 和 span 标签这两者虽然是容器元素但没有语义，现在在学习其它容器元素但是含有语义：
article： 通常用于表示整篇文章
header: 通常用于表示页头（表示文章的头部）
aside: 通常用于表示侧边栏（附加信息）
section: 通常用于表示文章的章节
footer： 通常表示页脚（表示文章的尾部）
元素包含关系
以前：快级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外；现在元素的包含关系由元素的内容类别决定。
总结：
1. 容器元素中可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的子元素（ul>li, ol>li, dl>dt+dd）
4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
iframe标签
iframe (框架页) 可替换元素，通常用于在网页中嵌入另一个元素。显示的内容取决于元素的属性
<title>Document</title><style>iframe{width: 100%;height: 500px;}</style>
</head>
<body><a href="https://www.baidu.com">百度</a><a href="https://www.douyu.com" target="myframe">斗鱼</a><a href="https://www.taobao.com">淘宝</a><iframe name="myframe" src="https://www.baidu.com">百度</iframe>
</body>这就有点像target中_self和_black一样，不过我们设置的iframe是让当前链接在我们设置的窗口打开，而不是当前页面打开。窗口可以自己设置，需要借用CSS样式 (后期也会单独讲)
其他标签介绍
abbr (缩写词)
<body><abbr title="cascading style sheet">CSS</abbr>是用于为页面添加样式
</body>time (提供给浏览器或搜索引擎阅读的时间)
<body><time datetime="2022-7-4">今年7月</time>我学习了HTML
</body>q (一小段引用文本); blockquote (大段引用的文本)
<body>最近热播的美剧《权力的游戏》中有一句非常经典的台词：<q>在权力的斗争中，非胜即死，没有中间状态。</q><!-- cite(引用别人网站的内容，加一下对方的网站，给自己和别人看) --><blockquote cite="https://develpr.......">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus expedita, nemo itaque tempore maxime magnisit autem velit mollitia molestias aspernatur ducimus neque sunt id similique, labore eveniet nostrumaccusantium.</blockquote>
</body>
link 链接外部资源（CSS,图标）
<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"><!-- content里面的内容直接在百度能搜索到，要排名靠前得加钱 --><meta name="keywords" content="在线商城，美容，微整形"><meta name="author" content="zly,dafafafa@qq.com"><title>Document</title><!-- 网站的图标 --><link rel="icon" href="123.ico">
</head>rel属性：relation,链接的资源和当前网页的关系;
type属性：链接资源的MIME类型
表格标签
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟运用表格就显得很重要，一个清爽简约的表格能够把繁琐的数据表现的很有条理。
表格的基本语法：
<table>
<tr>
<td>单元格内的文字</ td>
...
</ tr>
...
</ table>
1.<table></ table>是用于定义表格的标签
2.<tr></ tr>标签用于定义表格中的行，必须嵌套在<table></ table>标签中，相当于表格的行
3.<td></ td>用于定义表格中的单元格，必须嵌套在<tr></ tr>标签中，相当于一行中的每一格子
4.字母td指表格数据（table data），即数据单元格的内容
表头单元格
<th>标签表示HTML表格的表头部分（table head）
<table>
<tr>
<th>第一行表头单元格内的文字</ th>
...
</ tr>
<tr>
<td>单元格内的文字</ td>
...
</ tr>
...
</ table>
表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left | 规定表格相对周围元素的对齐方式 |
| border | 1或者“” | 规定表格单元是否拥有边框，默认为“”表示没有边框 |
| cellpadding | 像素值 | 规定单元边缘与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或者百分比 | 规定表格的宽度 |
这些属性要写到表格标签table里面
可以将表格分割成表格头部<thead>和表格主体<tbody>两大部分
总结：
1.<thead></ thead>用于定义表格的头部。<thead></ thead>内部必须拥有<tr></ tr>标签，位于第一行
2.<tbody></ tbody>用于定义表格的主体，主要用于放数据本体。
3.以上标签都是放在<table></ table>标签中
合并单元格
合并单元格方式
1.跨行合并：rowspan=“合并单元格的个数”
2.跨列合并：colspan=“合并单元格的个数”
写合并代码：
1.跨行：最上侧单元格，写合并代码
2.跨列：最左侧单元格，写合并代码
表单标签
表单元素有一系列元素，主要用于收集用户数据，接下来会一一列举常见的表单元素
一个完整的表单通常由表单域、表单控件（表单元素）、和提示信息3个部分构成
表单域
是一个包含表单元素的区域
在HTML标签中，<from>标签用于定义表单域，以实现用户信息的手机和传递。
<from>会把它范围内的表单元素信息提交给服务器
<from action=“url地址” method=“提交方式” name=“表单名称”>
各种表单元素控件
</ from>
常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或者post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
input元素（输入框）
在英语单词中，input是输入的意思，而在表单元素中<input>标签用于手机用户信息
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多中形式（可以是文本，字段，复选框，掩码后的文本控件，单选按钮，按钮等）
其语法基本格式如下：
<input type="属性值" />1.<input>标签为单标签
2.type属性设置不同的属性值用来指定不同的控件类型
type属性的属性值及其描述如下：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况用于通过javascript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
radio单选按钮
name是表单元素名字，这里的性别单选按钮必须有相同的名字name，才可以实现多选1
例如：
<form>
性别: <input type="radio" name="xingming"> 男 <input type="radio" name="xingming"> 女<input type="radio" name="xingming"> 人妖
</ form>
除type属性外，<input>标签还有其他很多属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
value:
value用于用户选中后提交给后台的信息，必须要加
总结：
1.name和value是每个表单元素都有的属性值，只要给后台人员使用
2.name表单元素的名字，要求单选按钮和复选框有相同的name值
3.checked元素：用户第一次加载页面时，单选框或者多选框默认选中的那个选项，例如：checked=“checked”或者checked=“true”或者单写一个checked
4.maxlength用于规定文本框最多输入文字（字母，字符）的数量
5.新增：file元素
type=“file” 文件域，上传文件使用的
button元素（按钮元素）
type属性：reset、submit、button，默认值submit
<button>这是一个按钮</button>label元素 （普通元素，通常配合单选和多选框使用）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器的光标自动选择对应的表单元素上，用来增加用户体验。
显示关联——可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值
核心：<label>标签的for属性应当与相关的id属性相同
语法：
<input type="radio" name="sex" id=sex" />
<label for="sex">男</ label>隐式关联——直接将 label 嵌套在单选或多选框外面
<body>请选择性别：<label><input type="radio" name="gebder">男</label><label><input type="radio" name="gebder">女</label>
</body>
select元素 （下拉列表选择框）
select元素通常要和option(表示下拉列表的选项)元素配合使用
语法：
<select>
<option>选项1</ option>
<option>选项2</ option>
<option>选项3</ option>
...
<select>
1.<select>中至少包含一对<option>
2.在<option>中定义selected=“selected”时，当前项即位默认选中项
optgroup标签：
通过 <optgroup> 标签把相关的选项组合在一起，label 属性为选项组规定描述，所有主流浏览器都支持 label 属性
<body>请选择你最喜欢的主播：<select><!-- 通过 <optgroup> 标签把相关的选项组合在一起，label 属性为选项组规定描述，所有主流浏览器都支持 label 属性。 --><optgroup label="才艺表演"><option>周杰伦</option><option>蔡依林</option></optgroup><optgroup label="游戏主播"><option>WEed</option><option>ini</option><option>th00</option><option>123d</option></optgroup></select>
</body>
multiple标签：允许在下拉列表中进行多选
<body>请输入你喜欢的主播：<!-- multiple：允许在下拉列表中进行多选 --><select multiple><optgroup label="才艺表演"><option>冯提莫</option><option>蔡依林</option></optgroup><optgroup label="游戏主播"><option>WETed</option><option>infi</option><option>th000</option><option>123ddd</option></optgroup></select>
</body>
textarea元素（文本域，多行文本框）
<body><h3>请填写简介：</h3><!-- 带有指定高度和宽度的文本区域 --><textarea cols="30" rows="10">（框中宣示的内容）</textarea>
</body>
cols=“每行中的字符数” row=”显示的行数“，我们实际中用CSS来改变大小
datalist元素（数据列表）
该元素本身不会显示到页面上，通常用于和普通文本框配合使用，<datalist> 标签规定了 <input> 元素可能的选项列表，用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
<body><p>请输入你常用的浏览器：<input list="userAgent" type="text"></p><datalist id="userAgent"><option value="Chrome">谷歌浏览器</option><option value="IE">IE浏览器</option><option value="Opera">欧鹏浏览器</option><option value="Safari">苹果浏览器</option><option value="Firefox">火狐浏览器</option></datalist>
</body>
fieldset元素 （用于表单分组使用）
通常我们开发的时候，比如登录框，我们会把账号信息和基本信息进行分组
<body><div><h1>修改用户信息</h1><fieldset><legend>账号信息</legend><p>用户账号：<input type="text" value="admin" readonly></p><p>用户密码：<input type="password"></p></fieldset><fieldset><legend>基本信息</legend><p>用户姓名：<input disabled type="text" value="aaa"></p><p>城市：<select name="" id=""><option value="">Lorem.</option><option value="">Molestiae!</option><option value="">Libero.</option><option value="">Hic?</option><option value="">A?</option><option value="">Ipsum!</option><option value="">Facilis.</option><option value="">Est?</option><option value="">Libero?</option><option value="">Officia?</option></select></p></fieldset><p><button>提交修改</button></p></div>
</body>
设置表单状态
在日常生活中我们可能会遇到一些根本无法点击的按钮，这就涉及到表单的状态了
<body><p><input type="text" disabled></p><p><input type="text" value="123" readonly></p>
</body>
表格标签总结：
<body><p><!-- 普通文本输入框 --><input type="text" placeholder="请输入账号"></p><p><!-- 密码框 --><input type="password" placeholder="请输入密码"></p><p><!-- 日期选择框 --><input type="date"></p><p><!-- 搜索框 --><input type="search"></p><p><!-- 滑块 --><input type="range" min="0" max="6"></p><p><!-- 颜色选择 --><input type="color"></p><p><!-- 数字输入框 --><input type="number" min="0" max="100" step="10"></p><p><!-- 多选框 -->游戏：<input name="loves" type="checkbox">阅读：<input type="checkbox">电影：<input type="checkbox">音乐：<input type="checkbox">其他：<input type="checkbox"></p><p><!-- 单选框 告诉浏览器它们属于一个组 -->性别：<input name="gender" type="radio">男<input name="gender" type="radio">女</p><p><input type="file"></p><p><input type="submit" value="这是一个提交的按钮"></p>
</body>
【HTML】学习笔记相关推荐
- PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...
- 容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
- 2020年Yann Lecun深度学习笔记（上）
2020年Yann Lecun深度学习笔记(上)
- 知识图谱学习笔记（1）
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用 知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
- 计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记 采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
- Go 学习推荐 —（Go by example 中文版、Go 构建 Web 应用、Go 学习笔记、Golang常见错误、Go 语言四十二章经、Go 语言高级编程）
Go by example 中文版 Go 构建 Web 应用 Go 学习笔记:无痕 Go 标准库中文文档 Golang开发新手常犯的50个错误 50 Shades of Go: Traps, Gotc ...
- MongoDB学习笔记(入门)
MongoDB学习笔记(入门) 一.文档的注意事项: 1. 键值对是有序的,如:{ "name" : "stephen", "genda" ...
- NuGet学习笔记(3) 搭建属于自己的NuGet服务器
文章导读 创建NuGetServer Web站点 发布站点到IIS 添加本地站点到包包数据源 在上一篇NuGet学习笔记(2) 使用图形化界面打包自己的类库 中讲解了如何打包自己的类库,接下来进行最重 ...
最新文章
- OpenCV cv :: Mat的串行输出功能的实例(附完整代码)
- 《网站性能监测与优化》一2.3 协作网站
- Serverless在SaaS领域的最佳实践
- 免费报名通道限时开启！解锁QCon「AI 时代下的融合通信技术」专场
- matlab的cylinder函数,matlab cylinder怎么用,Matlab cylinder 函数
- SpringBoot + MyBatis + Thymeleaf 之 HelloWorld
- RSA总裁：2010年需重点关注云计算安全
- 【XLL 框架库函数】 TempMissing/TempMissing12
- 语义分析（输出四元式）
- 桌面多了一个计算机,Win10虚拟桌面：一台电脑多个桌面
- python微信公众号秒杀代码_如何在微信公众号编辑Python代码？
- 迷你世界箱子里物品无限取
- 企业增强型融合通讯解决方案Cnskype
- Linux进程创建fork、进程退出exit()、进程等待waitpid()
- java 怎样设置文本域的字体颜色_java的JTextArea中怎么改变字体颜色
- 暴雪在洛杉矶建了自己的电竞馆，守望先锋锦标赛下个月就会在这里举行
- 导览系统定制开发_景区公园导览互动查询触摸屏一体机系统软件开发定制
- word设置不显示回车和英文下面的红色波浪线
- MySQL 定时任务 重启失效
- Java 实现长图文生成