看啥推荐读物

专栏名称: ChrisChenJL

今天看啥

微信公众号rss订阅, 微信rss, 稳定的RSS源

微信公众号RSS订阅方法

B站投稿RSS订阅方法

知乎回答RSS订阅方法

知乎专栏 RSS订阅方法

雪球动态RSS订阅方法

微博RSS订阅方法

微博搜索关键词订阅方法

豆瓣日记 RSS订阅方法

Web前端之HTML

ChrisChenJL · CSDN · · 2021-01-11 18:15

大家好，我是ChrisChenJL·宸叡，一个立志奔向Java的自由少年。

博主萌新一枚，理解浅显，不足之处望各位大佬多多指教，谢谢大家 ᕦ(･ㅂ･)ᕤ

Web前端之HTML

一、HTML简介
二、主流浏览器
三、HTML小零碎
四、HTML标签
五、HTML列表
六、HTML表格
七、HTML表单
八、HTML速查列表
九、总结

一、HTML简介

超文本标记语言 （英语：HyperText Markup Language，简称： HTML ）是一种用于创建网页的标准标记语言，用于描述网页中存在哪些网页元素。

HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chris·宸叡（ChrisChenJL）</title>
</head>
<body>
    <h1>Web前端之HTML</h1>
    
    <p>Web前端第一弹：HTML</p>
</body>
</html>

实例解析：
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素，用于标识当前是一个html文档，是一切内容的开头和结束，任何html网页中的内容都包括在这组标签中；并没有实际意义，但却是每个html文档中不可缺少的一个部分。
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。即非网页中显示的内容部分，放在这组标签中。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容。即所有网页中显示的内容部分，都放在这组标签中。
<h1> 元素定义一个大标题
<p> 元素定义一个段落

二、主流浏览器

浏览器的名称	内核	浏览器的由来	浏览器的性能	兼容性
谷歌（chrome）	Webkit Chrome 28以上为Blink内核	Google公司旗下浏览器	快速、安全、搜索引擎好、速度最快的浏览器	-webkit-
火狐（Firefox）	Gecko	mozilla公司旗下浏览器简称：FF	安全性高，速度中等	-moz-
IE浏览器	Trident	微软公司在Mosaic代码的基础之上修改而来的浏览器	速度慢，安全性中等	-ms-
Safari	Webkit	苹果公司旗下浏览器	在苹果系统下是很优秀的浏览器	-webkit-
欧朋(Opera)	Presto Opera 15 版本以上是Blink内核	是挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器	速度快，浏览器界面简洁

那到底要使用哪个呢？

如果你日后是一个前端开发人员，那么你大概需要IE/Edge/火狐/Chrome等多个浏览器，至少市场上主流的浏览器内核中，每个你都需要一个对应的浏览器。以便开发测试效果。
如果你日后是一个程序开发人员，你只需要配合前端开发人员编写极少的前端部分内容，基本上你只需要一个IE/Chrome基本上就够了。
对于日常用户，看个人喜好即可，大多数都用360/QQ等IE内核的浏览器。

三、HTML小零碎

1、注解

注释的作用：

在html中，注释完全是给人看的，也就是给开发者；通常开发着会对自己编写的代码进行一定的文字说明，以便进行工作交接等。在html中写注释的方法是：

你好，<!-- 注释中的内容 -->我是小白。

如上这种写法被叫做“html注释”，具备以下特点：

加载到客户端，会在一定程度上影响网页的打开速度，当然对于至今电脑的性能，这一点可以在一定程度上忽略不计。
不会被执行，不会影响内容加载之后的执行速度。
HTML、CSS、JS的注释可以被第三方工具删除。

2、特殊字符

HTML源代码	显示结果	说明
&lt；	<	小于号或显示标记
&gt；	>	大于号或显示标记
&amp；	&	可用于显示其他特殊字符
&quot；	"	引号
&reg；	®	已注册
&copy；	©	版权
&trade；	™	商标
&ensp；		半个空白位置
&emsp；		一个空白位置
&nbsp；		一个不断行的空白位置

3、预格式化标签

预格式化的作用
<pre></pre> ：规定一个范围，在此范围内的内容都会直接遵从HTML代码中书写时候的样式，而不被html预定义的样式所约束。

<pre>
    2020年1月11日
    预格式化，
    Chris。
</pre>

预格式化标签

4、路径

路径就是需要引用资源的引用地址，分为绝对路径和相对路径。

1）绝对路径

绝对路径可以说是一个完整的地址，根据这个地址，可以完全确定的找到一个资源。与你当前在哪里和任何参照物都无关。

2）相对路径

选定一个参照物，根据这个参照物找到具体的资源确切地址。

/ ：代表根目录
. ：代表当前所在目录（可以省略）
.. ：代表上一层目录

四、HTML标签

1、标签的种类

1）单标签

以“<”开头，中间包含指定意义的字符，然后以“/>”结尾
例如： <br/>

2）双标签

起始标签
以“<”开头，中间包含指定意义的字符，然后以“>”结尾。

终止标签
以“<”开头，中间包含指定意义的字符，然后以“/>”结尾。
要求起始标签和终止标签中的字符必须完全一样
例如： <em></em>

单标签和双标签在意义上是完全相同的，只是因为标识的内容范围不同，所以在写法上有所不同，所以说单标签和双标签的区分是格式上的区分。
事实上很多时候，单标签可以写成双标签，而双标签也可以写成单标签。

2、HTML基本标签

1）标题字标签

<h1></h1> 一级标题
<h2></h2> 二级标题
<h3></h3> 三级标题
<h4></h4> 四级标题
<h5></h5> 五级标题
<h6></h6> 六级标题

被标题标签所约束的内容，其字体大小会有所改变。其中h1为最大，h6为最小。

align属性 ：用于改变标题文字的对齐方式
- left ：向左对齐
- right ：向右对齐
- center ：居中对齐

	<h1 align="center">标题11</h1>
	<h2 align="left">标题12</h2>
	<h3 align="right">标题13</h3>
	<h2 align="20px">标题2</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
 	<h5>标题5</h5>
	<h6>标题6</h6>

2）换行标签

<br/> 单标签，用于将内容换行使用，相当于文档编辑中回车键的作用。

	ChrisChenJL·宸叡<br/>

3）段落标签

<p></p> 段落标签，类似于一个自然段，段落标签中包裹的内容可以视为一个段落，段落标签会在包裹的内容上下各加一个空行。而对于段落标签内部的内容并不受到任何影响。

	<p>ChrisChenJL·宸叡</p>

4）水平线标签

<hr/> 横线标签，用于在网页页面上对应部位输出一条横线。

	ChrisChenJL·宸叡
	<!--横线标签-->
	<hr size="10px" color="pink"/>

5）居中标签

<center></center> 居中标签，将包裹的内容相对于页面居中显示。

<center>
	ChrisChenJL·宸叡
</center>

6）滚动标签

<marquee><marquee> 滚动标签，将包裹的内容在页面中滚动。

<marquee>
	ChrisChenJL·宸叡
</marquee>

3、HTML超链接

1）跳转链接（页面跳转）

通常上网的时候你应该无数次的接触过超链接，例如某些文字和图片可以被鼠标点击，大多数时候点击这些图片或者文字之后浏览器的页面会打开与此图片或者文字内容相关的另一个页面。这种打开页面的行为，我们称之为“ 跳转 ”。而用于点击响应不同功能的内容，我们称之为“ 超链接 ”。

<a></a> ：超链接标签，用于定义一个超链接。

href属性：指定点击当前超链接后，页面所跳转到的地址。

target属性：指定打开新页面的方式

_slef：在当前浏览器正在浏览的页面中打开新的页面。

_blank：另起一个新的页面，打开想要访问的内容。

<body>
    <!--
        超链接标签：a
        href ： 连接目标地址
        target : 设定超链接的打开方式 _self(默认，不创建新的窗口) _blank(创建新的窗口)
        title : 对当前超链接的描述

        |--指向下一级
            |--下级路径/文件名称
        |--指向当前级
            |--./
            |--什么都不加
        |--指向上一级
            |--../
    -->
    <a href="http://www.biqu6.com/19_19126/" target="_blank" title="连载中">点我观看伏天氏</a>
    <a href="pm_2_Test.html" target="_blank">点我进入小练习</a>
    <a href="a/b/c/test.html" target="_blank">点我进入</a>
</body>

2）锚链接

你虚拟上网的时候通常会看到“到结尾”，“到开头”这种字样的超链接，点击之后并不会跳转到其他网页，而是到当前网页中的某个位置。这种超链接叫做“锚链接”，用于将当前网页浏览位置跳转到其他位置。当然仅仅是本页面，也可以打开一个新的页面，同时跳转到指定的位置。

href属性：属性值以#开头，后面加上要跳转到的位置的内容控件id属性值即可，这种写法叫做“锚点”。
例如：

点击跳转到当前页面中的某个位置 <a href="#b">点击跳转到</a> ，这个#b即是锚点。

点击跳转到另一个页面的指定位置 <a href="d.html#b">点击跳转到</a> ，d.html是要跳转到的页面，#b是存在于b.html页面的一个指定的锚点位置。

	<a href="#last" id="first">跳转到最后</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><h2 id="id2">这里是中间</h2><br><br id="id3">这里是中间<br><br><pean id="id4">这里是中间</pean><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#first" id="last">跳转到开始</a>
    <a href="#id2">跳转到中间</a>

3）功能性链接（用途相对较少）

这种超链接使用场景并不多，一般用于点击后触发某些功能，用途是链接到第三方资源。

如下例举一些功能性链接：

触发发送电子邮件： <a href="mailto:chrischenjl@163.com">给我发邮件</a>

触发拨打电话： <a href="tel:18888888888">给我打电话</a>

触发发送短信： <a href="sms:18888888888">给我发短信</a>

触发内容播放： <a href="a.mp4">播放视频</a>
这种超链接使用场景并不多，一般用于点击后触发某些功能，用途是链接到第三方资源；如下例举一些功能性链接。

4、HTML图像

1）3种图像格式

GIF格式 ：支持256种颜色，最适合显示色调不连续或者具有大面积单一颜色的图像，例如导航条、按钮、图标等一些内容。GIF格式最大的优点是可以制作动态的图像，像是小视频一样的效果。
JPEG格式 ：一种图像压缩格式，而且压缩得非常紧凑。专用于不含有大色块的元素，这个格式有一定的失真度，但是在正常情况下一般根本无法被肉眼所识别。不支持透明色，如果图像需要全色彩模式才能表现效果，那么JPEG就是最佳的选择。
PNG格式 ：一种非破坏性的网页图像文件格式，不仅具备了GIF图像格式大部分的优点，还支持48位色彩。

2）定义一个图像

<img/> ：用于定义一个图片

title属性 ：定义鼠标悬停时候提示文字的内容

alt属性 ：对照片的描述，当图片资源无法找到时，或当路径出现问题时，或还没有加载出来的时候展示的替换文字。

src属性 ：指定图片资源所在的位置，可以是绝对路径或者相对路径

width属性 ：宽度设置

height属性 ：高度设置

border属性 ：增加边框

<img src="chris.jpg" title="ChrisChenJL·宸叡" alt="ChrisChenJL" width="600px" height="750px" border="5px">

5、HTML文本格式化

1）字体加粗

<b></b> ：字体加粗标签，包裹在这组标签中的内容中，文字部分都会加粗显示，相当于world文档中的加粗选项。

2）字体强调

<strong></strong> ：用于强调一段内容，实际上就是字体加粗显示，与字体加粗标签的功能差不多。

3）下划线

<u></u> ：放在这组标签中的内容会显示下方有一条下划线。
<ins></ins> ：着重意思为定义插入字。

4）字体倾斜

<em></em> ：用于设置字体倾斜，报国的内容中文字部分会斜体展示。

<i></i> ： <i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。

5）小号字体

<small></small> ：放在这组标签中的内容会比正常字体小上一些。

6）下标字

<sub></sub> ：放在这组标签中的内容会变成下标字形态。

7）上标字

<sup></sup> ：放在这组标签中的内容会变成上标字形态。

8）删除字体

<del></del> ：放在这组标签中的内容会在字中间有条删除线。

<body>
<!--
    字体加粗：<b></b>
    字体强调（相当于加粗）：<strong></strong>
    字体倾斜：<em></em>
    字体下划线：<u></u>
-->
青州学宫，<strong>青州城圣地</strong>，<b>青州城豪门贵族</b>以及<u>宗门世家</u>内<small>半数以上</small>的强者，都从<sub>青州</sub><sup>学宫</sup>走出。<br/>
<del>因而</del>，<em>青州城之人皆以能够入学宫中修行为荣，</em><br/>
<!--下面文字，既能加粗又能加下划线，也能倾斜-->
<strong><u><em>旦有机会踏入学宫，必刻苦求学。</em></u></strong>
</body>

HTML文本格式化

五、HTML列表

1、有序列表

有序列表是一列项目，默认展示效果上每个列表项都有一个序号。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
例如：

第一个列表项
第二个列表项
第三个列表项

<ol></ol> ：用于定义一组有序列表
type属性 ：用于设置当前有序列表的展示效果

type=“1”：使用数字进行编号

type=“A”：使用大写字母进行编号

type=“a”：使用小写字母进行编号

type=“I”：使用大写罗马数字方式进行编号

type=“i”：是用小写罗马数字方式进行编号

start属性 ：规定有序列表的编号起始值，填写一个值，从指定的值开始标号。设置的是一个数字，不需要跟随type属性，更改起始值的内容
reversed属性 ：规定有序列表的标号排序方式为“降序”

reversed=“reversed”

有序列表的嵌套
有序列表同样支持直接嵌套，但是需要注意。 <ol> 标签中只能直接包含 <li> 标签，而后在需要放置二级内容的 <li> 标签后继续添加 <ol> 标签。即 <ol> 标签不能直接包含 <ol> 标签。

对于 <ol> 标签所定义的type属性之对于当前的 <ol> 起作用，对后续嵌套的内容不会有所影响。

<!--有序列表-->
<ol>
    <li>Chris</li>
    <ol>
        <li>Chris</li>
        <li>宸叡</li>
    </ol>
    <li>宸叡</li>
</ol>

2、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。

<ul></ul> ：用于定义一组无序列表。
type属性 ：设置当前无序列表的展示样式

type=“disc”：默认列表项以小黑点开头的样式

type=“circle”：列表项以空心小圆圈开头

type=“square”：列表项以实心方块开头

<li></li> ：列表项标签，用于规划列表中展示的每一项内容。

无序列表的嵌套
无序列表可以进行嵌套分级内容的展示，但是需要注意。 <ul> 标签中只能直接包含 <li> 标签，而后在需要放置二级内容的 <li> 标签中继续添加 <ul> 标签。即 <ul> 标签不能直接包含 <ul> 标签。

对于 <ul> 标签所定义的type属性之对于当前的 <ul> 起作用，对后续嵌套的内容不会有所影响。

<!--无序列表-->
<ul>
    <li>Chris</li>
    <ul>
        <li>Chris</li>
        <li>宸叡</li>
    </ul>
    <li>宸叡</li>
</ul>

3、自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
	<dt>ChrisChenJL·宸叡</dt>
	<dd>做一个立志奔向Java的自由少年。</dd>
</dl>

六、HTML表格

1、表格标签

<table></table> 表格标签，类似于excel中，将内容以划分为表格的方式展示。单独使用此标签没有实质性的效果，需要配合下方的行标签和单元格标签一起使用。

border属性 ：设置表格的边框大小，如果针对于这个属性进行设置只会影响表格四周边框的大小，并不会影响到表格的单元格边框粗细。
bordercolor属性 ：设置表格的边框颜色。（不是所有的浏览器都可以正常展示）
cellspacing属性 ：内框宽度值，用于设置表格内部每个单元格之间的间距。值为数字其单位为像素。
cellpadding属性 ：表格与内容的内边框距离，默认情况下单元格的内容会紧贴着单元格的边框，可以使用cellpadding来设置单元格与单元格中的内容之间的距离。值为数字，单位为像素。
bgcolor属性 ：设置整个表格的背景颜色，取值为颜色值。
background属性 ：设置整个表格的背景图像，取值为图像文件的绝对目录或者相对目录

2、表格行标签

<tr></tr> 表格行标签，需要放在表格标签中使用才有效果，用于划分出单独一行存放单元格。

height属性 ：控制行的高度，值为一个数字，单位为像素。
bordercolor属性 ：控制行的边框颜色，值为颜色取值。（不是所有浏览器都可以正常展示）
bgcolor属性 ：设置当前行的背景颜色，取值为颜色值。
background属性 ：设置当前行所采用的背景图片，值为图片文件所在的绝对或者相对路径。
align属性 ：设置当前行内容的水平对齐方式，不受表格的整体对齐方式影响，却可以被单元格中所定义的对齐方式覆盖。

left：靠左对齐（默认）

right：靠右对齐

middle：居中对齐

valign属性 ：设置当前行内容的垂直对齐方式，不受表格整体对齐方式影响，却可以被单元格中所定义的对齐方式覆盖。

top：靠上对齐

middle：居中对齐（默认）

botton：靠下对齐

3、表格单元格标签

<td></td> 表格单元格标签：放在单元格行标签内，用于展示一个单一的单元格。单元格内可以包含任何你需要包含的内容。

默认情况下，单元格的宽度和高度会随着内容的大小自动调整，但是我们也可通过width属性和height属性进行干预。但是如果我们设置了表格的高和宽，这将会覆盖tr和table中已经定义的样式。

width属性 ：设置单元格的宽度，值位数字，单位为像素。
height属性 ：设置单元格的高度，职位数字，单位为像素。
bgcolor属性 ：设置单元格的背景颜色，值为颜色取值。
background属性 ：设置单元格的背景图片，值为图片文件的绝对路径或者相对路径。
align ：设置单元格内容的水平对齐方式。
valign ：设置单元格内容的垂直对齐方式。

4、列标题单元格标签

<th></th> 列标题单元格标签，与单元格标签类似，只是会针对于单元格内的内容进行加测和居中显示，更加美观，所以适合作为列标题使用。当然，也比更不是只能加在第一行，这个标签这是提供了格式和样式，位置随意，没有硬性规定。

<body>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>小路</td>
        <td>22</td>
    </tr>
    <tr>
        <td>小兰</td>
        <td>21</td>
    </tr>
    <tr>
        <td>小率</td>
        <td>20</td>
    </tr>
</table>
</body>

HTML表格

5、TABLE中的合并单元格

可以联想一下Excel中针对于单元格的合并，无非两种方式：横向合并、纵向合并。

rowspan属性 ：跨行合并单元格（纵向合并）
colspan属性 ：跨列合并单元格（横向合并）
合并后的单元格归属原则都是左上原则，即下归上，右归左，越往左上角越优先

<table border="1" width="300" height="200px">
    <tr>
        <td></td>
        <td></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

TABLE中的合并单元格

七、HTML表单

1、表单的定义

<form></form> ：定义一个表单。如果希望一个控件有效使用，那么必须将空间放在表单标签中。

• action属性 ：表单提交到的目标地址
• name属性 ：给表单一个命名，通常来说这个属性在大多数情况下不是必须的。但是为了防止表单提交到后台之后程序处理出现混乱，也有时候会给表单一个命名。表单名称中不可以包含特殊字符和空格。
• mehtod属性 ：采取的提交方式
• enctype属性 ：提交编码方式
• target属性 ：用于指定目标窗口的打开方式，同超链接中的使用方法完全一致。

2、表单控件

1）input输入标签

<input /> ：大多数的表单控件标签，都是input标签。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

type属性 ：指定当前控件的类别

type=“text”：文本框（供用户输入内容使用）

name属性 ：文字字段的名称，用于和页面中其他控件加以区别，名称由英文、字母、下划线区分，但是区分大小写。

size属性 ：文本框在网页上展示的长度，值为数字，以字符为单位。最小值为1，最大值取决于浏览器的宽度。

maxlength属性 ：用来设置文本框中最多可以输入的字符个数。

value属性 ：文字字段的默认取值

placeholder属性 ：提示文字的内容（老版本的浏览器可能不支持）

type=“password”：密码框（供用户输入内容使用，不现实实际内容。）

name属性 ：文字字段的名称，用于和页面中其他控件加以区别，名称由英文、字母、下划线区分，但是区分大小写。

size属性 ：密码框在网页上展示的长度，值为数字，以字符为单位。最小值为1，最大值取决于浏览器的宽度。

maxlength属性 ：用来设置密码框中最多可以输入的字符个数。

value属性 ：密码字段的默认取值

placeholder属性 ：提示文字的内容（老版本的浏览器可能不支持）

type=“radio”：单选框（多个选项只允许同时有效选择其中一项使用。）

name属性 ：同上。

value属性 ：当前单选框的实际值

checked属性 ：用于让当前单选框默认处于选中状态：当设置 checked=“checked” 时，该选项被默认选中

注意：同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。

type=“hidden”：隐藏域（一种看不到的控件，可以保存一个值。后续有场景会使用到。经常在需要在页面元素中保存一个内容的时候使用。）

name属性 ：同上

value属性 ：同上

type=“file”：文件选择框（可供用户点击后选择本地计算机上的文件）

size属性 ：设置文件选择框的宽度，以字符为单位。

name属性 ：同上。

value属性 ：同上

type=“checkbox”：复选框（多个选项可以同时有效选中其中多项使用。）

name属性 ：同上。

value属性 ：同上

checked属性 ：用于让当前单选框默认处于选中状态，当设置 checked=“checked” 时，该选项被默认选中

type=“button”：按钮控件（用于各类综合场景使用，最普通的按钮。）

name属性 ：同上。

value属性 ：可以设定按钮上所展示的文字。

type=“image”：图片按钮（与普通的按钮功能相同，只是按钮上支持放图片，也有其他方式实现同样的按钮图片效果。）

name属性 ：同上。

value属性 ：可以设定按钮上所展示的文字，但是如果设定了图片，则文字不可见。

src属性 ：引用图片的地址（绝对目录或相对目录）

type=“submit”：提交按钮控件（用于表单提交数据的时候使用）

name属性 ：同上。

value属性 ：可以设定按钮上所展示的文字，不影响提交功能。

type=“reset”：重置按钮控件（用于表单内容重置的时候使用）

name属性 ：同上。

value属性 ：可以设定按钮上所展示的文字，不影响提交功能。

<form action="#">
	用户名：<input type="text" size="30" maxlength="20" placeholder="请输入用户名"><br/>
	密 &nbsp;&nbsp;码：<input type="password" size="30" maxlength="20" placeholder="请输入密码"><br/>
	验证码：<input type="text"><input type="button" value="获取验证码"><br/>
	<input type="button" value="注册"><br/>
	<input type="checkbox">是否同意条框
</form>

2）select下拉框标签

<select></select> 下拉框标签：用于在表单中定义一个下拉框控件。

• size属性 ：规定下拉框显示选项的数量；
例：size=“4”
• multipe属性 ：规定下拉框可以同时有效选中多个选项；
例：multiple="multiple"或者multiple

<option><option> 下拉框选项标签：用于在下拉框中定义具体的选项。

<tr>
	<td>经验&nbsp;<select size="1">
		<option>无经验</option>
		<option>1年</option>
		<option>3年</option>
		<option>5年</option>
	</select></td>
</tr>

3）textarea文本域标签

<textarea></textarea> ：相当于一个比较大的文本框，供用户输入大量文字内容的时候使用。

• cols属性 ：规定文本区内可见的宽度
• rows属性 ：规定文本区内可见的行数
• maxlength属性 ：文本输入的最大字符数量

<textarea cols="50" rows="8" placeholder="包括cols,rows,maxlength等属性">

4）label标记标签

<label></label> ：标记标签本身没有比较特殊的作用，主要用于代替标签本身对于用户的操作做出一定而响应。

例如单选框选中文字实现单选框的选中。

<input type="checkbox" id="send"><label for="send">确认发送</label>

3、控件的只读/禁用

1）只读属性

readonly="readonly" ：这个属性的作用是只读，设定之后，空间的外观不会有任何变化（主流浏览器中是这样，不绝对。）但是无法针对于空间中的内容进行任何更改。

这个属性仅针对于三个控件有效：

文本框

密码框

文本域

2）禁用属性

disable="disable" ：禁用属性用于标识一个控件禁止被使用，也就是不能进行有效的操作，设定这个属性之后，空间的外观会有所改变。在主流的浏览器中会变成灰色，这个时候你无法针对于当前空间进行任何形式的操作。

这个属性针对于所有的表单控件都有效。

八、HTML速查列表

HTML 速查列表，可以打印出来备用噢~
来源于: 菜鸟教程·HTML速查列表 .

九、总结

本系列博文主要用于博主本人日常的复习，既可以作为笔记保存，又可以随时翻看进行复盘使用。也希望在未来的某一刻可以帮得上大家~

不足之处还请各位大佬多多指教~嘻嘻

原文地址：访问原文地址
快照地址：访问文章快照

分享到微博