目录
3.1 html声明
1.CSS、HTML、JavaScript定义。
CSS:全称Cascading Style Sheet(层叠样式表),是用来控制网页外观的一种技术。
HTML:全称Hyper Text Markup Language(超文本标记语言)
JavaScript:就是我们通常所说的JS,是一种嵌入到HTML页面中的脚本语言,由浏览器一边解释一边执行。
"HTML是网页的结构,CSS是网页的外观,而JavaScript是网页的行为。"
对于前端开发来说,最核心的技术:HTML、CSS、JavaScript。
2.PHP、JSP、ASP.NET
PHP是一种通用开源脚本语言,其语法吸收了C语言、Java和Perl的特点,易于学习,使用广泛,主要适用于Web开发领域。
JSP技术有点类似ASP技术,它在传统的网页HTML文件中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件。用JSP开发的Web应用是跨平台的,既可以在Windows系统中运行,也能在其他操作系统(如Linux)中运行。
ASP.NET的前身就是我们常说的ASP技术,绿叶学习网就是使用ASP.NET开发的。此外,很多人认为“网站就是很多网页的集合”,其实这个理解是不太恰当的。准确来说,网站是前端与后端的结合。
学习路线:HTML → CSS → JavaScript → jQuery → CSS3 → HTML5 → Vue.js
webpack、gulp、babel、express等。
3. HTML结构
HTML的基本结构,我们从中可以看出,一个页面是由四个部分组成的。
3.1 <!DOCTYPE html>
文档声明<!DOCTYPE html>是一个文档声明,表示这是一个HTML页面。
HTML标签的作用是告诉浏览器,这个页面是从<html>开始,然后到</html>结束的。
3.2 head标签
<head></head>是网页的“头部”,用于定义一些特殊的内容,如页面标题、定时刷新、外部文件等。只有6个标签能放在head标签内。title、meta、link、style、script、base。
3.2.1 title标签
是head标签的内部标签,其中<title></title>标签内定义的内容是页面的标题。这个标题不是文章的标题,而是在浏览器栏目中显示的那个标题。
3.2.2 meta标签
meta标签在HTML中,meta标签一般用于定义页面的特殊信息,例如页面关键字、页面描述等。这些信息不是提供给人看的,而是提供给搜索引擎蜘蛛(如百度蜘蛛、谷歌蜘蛛)看的。简单来说,meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。在Web技术中,我们一般形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”。在HTML中,meta标签有两个重要的属性:name和http-equiv。此外,<meta charset="utf-8" />这一句必须放在title标签以及其他meta标签前面。
在HTML中,meta标签有两个重要的属性:name和http-equiv。
name:
<!DOCTYPE html>
<html>
<head>
<!--网页关键字-->
<meta name="keywords" content="测试网站"/>
<!--网页描述-->
<meta name="description" content="该网站用于测试"/>
<!--本页作者-->
<meta name="author" content="helicopter">
<!--版权声明-->
<meta name="copyright" content="本站所有教程均为原创,版权所有,禁止转载。否则必将追究法律责任。"/>
</head>
<body>
</body>
</html>
![name属性取值](https://i-blog.csdnimg.cn/blog_migrate/19d3e14dc2503b3999e31cab1656dbfb.png)
http-equiv:在HTML中,meta标签的http-equiv属性只有两个重要作用:定义网页所使用的编码;定义网页自动刷新跳转。
语法定义网页所使用的编码
<meta charset="utf-8"/>
定义网页自动刷新跳转
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
//这段代码表示当前页面在6秒后会自动跳转到http://www.baidu.com这个页面。
3.2.3 style标签
在HTML中,style标签用于定义元素的CSS样式。
3.2.4 style标签
在HTML中,script标签用于定义页面的JavaScript代码,也可以引入外部JavaScript文件。
3.2.5 link标签
在HTML中,link标签用于引入外部样式文件(CSS文件)。这也是属于CSS部分的内容,这里不需要深究。
<!DOCTYPE html>
<html >
<head>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
3.2.6 base标签
这个标签一点意义都没有,可以直接忽略。知道有这么一个标签就行了,看到了直接忽略处理。
3.3 body标签
<body></body>是网页的“身体”。对于一个网页来说,大部分代码都是在这个标签对内部编写的。
3.4 注释
“<!---->”又叫做注释标签。“<!--”表示注释的开始,“-->”表示注释的结束。
//即使你在页面中用了JavaScript,它也不是动态页面,除非你还用到了后端技术。
4.文本
4.1 标题标签
在HTML中,共有六个级别的标题标签:h1、h2、h3、h4、h5、h6。其中h是header的缩写。这六个标题标签在页面的重要性是有区别的,其中h1标签的重要性最高,h6标签的重要性最低。这里要注意一下,一个页面一般只能有一个h1标签,而h2~h6标签可以有多个。
title标签用于显示地址栏的标题,而h1标签用于显示文章的标题.
4.2 段落标签
<p></p>是段落标签,用于定义一段文字。
段落标签会自动换行,并且段落与段落之间有一定的间距。
br标签是用来给文字“换行”的,而p标签是用来给文字“分段”的。
4.3 文本标签
常用标签:
- 粗体标签:strong、b
- 斜体标签:i、em、cite
- 上标标签:sup
- 下标标签:sub
- 中划线标签:s
- 下划线标签:u
- 大字号标签:big
- 小字号标签:small
在实际开发中,如果想要对文本实现加粗效果,尽量使用strong标签,而不要使用b标签。这是因为strong标签比b标签更具有语义性 。
sup,是“superscripted(上标)”的缩写。sup,是“superscripted(上标)”的缩写。
可以使用s标签来实现文本的中划线效果。对于删除线、下划线效果,一般用CSS来实现,几乎不会用s、u标签来实现。
![](https://i-blog.csdnimg.cn/blog_migrate/6d9d19d99b70603e4717c41386d470ae.png)
4.4 div标签
在HTML中,我们可以使用div标签来划分HTML结构,从而配合CSS来“整体”控制某一块的样式。
div,全称“division(分区)”,用来划分一个区域。div标签内部可以放入所有其他标签,例如p标签、strong标签、hr标签等。div标签最重要的用途是划分区域,然后结合CSS针对该区域进行样式控制。
4.5 自闭合标签
一般标签:由于有开始符号和结束符号,因此可以在内部插入其他标签或文字。
自闭合标签:由于只有开始符号而没有结束符号,因此不可以在内部插入标签或文字。所谓的“自闭合”,指的是本来要用一个配对的结束符号来关闭,然而它却“自己”关闭了。
![](https://i-blog.csdnimg.cn/blog_migrate/5f8c235406d33d436ea230087d90706f.png)
4.6 块元素和行内元素
在浏览器预览效果,有些元素是独占一行的,其他元素不能跟这个元素位于同一行,如p、div、hr等。而有些元素不是独占一行的,其他元素可以跟这个元素位于同一行,如strong、em等。特别注意一下,这里所谓的“独占一行”,并不是在HTML代码里独占一行,而是在浏览器显示效果中独占一行。
4.6.1块元素
在HTML中,块元素在浏览器显示状态下将占据一整行,并且排斥其他元素与其位于同一行。此外,一般情况下,块元素内部可以容纳其他块元素和行内元素。
![](https://i-blog.csdnimg.cn/blog_migrate/1b42c5fcf015d3b09a6041573f74143e.png)
总结:
- 块元素独占一行,排斥其他元素(包括块元素和行内元素)与其位于同一行。
- 块元素内部可以容纳其他块元素和行内元素。
4.6.2 行内元素
在HTML中,行内元素跟块元素恰恰相反,行内元素是可以与其他行内元素位于同一行的。此外,行内元素内部(标签内部)只可以容纳其他行内元素,不可以容纳块元素。
![](https://i-blog.csdnimg.cn/blog_migrate/cc83658a931490e205288e908adeaf71.png)
总结:
- 行内元素可以与其他行内元素位于同一行。
- 行内元素内部可以容纳其他行内元素,但不可以容纳块元素。
4.7 特殊符号
空格 
![](https://i-blog.csdnimg.cn/blog_migrate/9bf11fda74bf6c54d1d1c3ea7f777e8e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/906946e8f076f1d91c10dffd56c4ac55.png)
5.列表
在HTML中,列表共分为三种:有序列表、无序列表和定义列表。
5.1 有序列表
5.1.1 有序列表简介
在HTML中,有序列表中的各个列表项是有顺序的。有序列表从<ol>开始,到</ol>结束。有序列表一般采用数字或字母作为顺序,默认是采用数字顺序。
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
ol,即ordered list(有序列表)。li,即list(列表项)。
在该语法中,<ol>和</ol>标志着有序列表的开始和结束,而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。
注意,ol标签和li标签是配合一起使用的,不可以单独使用,而且<ol>标签的子标签只能是li标签,不能是其他标签.
5.1.2 type属性
在HTML中,我们可以使用type属性来改变列表项符号。默认情况下,有序列表使用数字作为列表项符号。
<ol type="属性值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
![](https://i-blog.csdnimg.cn/blog_migrate/674ce7b139b9535ed5d05087cb7cb29d.png)
学了CSS之后,可以放弃type属性,而使用list-style-type属性来取代。
5.2 无序列表
5.2.1无序列表简介
有序列表的列表项是有一定顺序的,而无序列表的列表项是没有顺序的。默认情况下,无序列表的列表项符号是●,不过可以通过type属性来改变。ul,即unordered list(无序列表)。li,即list(列表项)。
ul元素的子元素只能是li,不能是其他元素。ul元素内部的文本,只能在li元素内部添加,不能在li元素外部添加。
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
5.2.1 type属性
跟有序列表一样,我们也可以使用type属性来定义列表项符号。
![](https://i-blog.csdnimg.cn/blog_migrate/de6c27db528210b21d354e31a03e1ca9.png)
5.3 定义列表
在HTML中,定义列表由两部分组成:名词和描述。
<dl>
<dt>名词</dt>
<dd>描述</dd>
……
</dl>
dl即definition list(定义列表),dt即definition term(定义名词),而dd即definition description(定义描述)。
在该语法中,<dl>标记和</dl>标记分别定义了定义列表的开始和结束;dt标签用于添加要解释的名词;而dd标签用于添加该名词的具体解释。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定义列表</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>制作网页的标准语言,控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表,控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言,控制网页的行为</dd>
</dl>
</body>
</html>
结果
在实际开发中,定义列表虽然用得比较少,但是在某些高级效果(如自定义表单)中也会用到
6. 表格简介
6.1 基本结构
在HTML中,一个表格一般会由以下三个部分组成。表格:table标签行:tr标签单元格:td标签
<table>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
<tr>
<td>单元格 3</td>
<td>单元格 4</td>
</tr>
</table>
tr,指的是table row(表格行)。td,指的是table data cell(表格单元格)。
<table>和</table>表示整个表格的开始和结束,<tr>和</tr>表示行的开始和结束,而<td>和</td>表示单元格的开始和结束。在表格中,有多少组<tr></tr>,就表示有多少行。
6.2 完整结构
一个表格的完整结构不仅仅只有table、tr、td这三个部分,还包括caption、th等。
6.3.1 表格标题:
caption在HTML中,表格一般都会有一个标题,我们可以使用caption标签来实现。
<table>
<caption>BP</caption>
<tr>
<td>Rosie</td>
<td>Lisa</td>
</tr>
<tr>
<td>jisoo</td>
<td>jennie</td>
</tr>
</table>
一个表格只能有一个标题,也就是只能有一个caption标签。在默认情况下,标题都是位于整个表格内的第一行。
6.3.2 表头单元格:
th在HTML中,单元格其实有两种:表头单元格,使用th标签;表行单元格,使用td标签。
th,指的是table header cell(表头单元格)。td,指的是table data cell(表行单元格)。
<table>
<caption>BP</caption>
<tr>
<th>Rosie</th>
<th>Lisa</th>
</tr>
<tr>
<td>jisoo</td>
<td>jennie</td>
</tr>
</table>
th和td在本质上都是单元格,但是并不代表两者可以互换,它们之间具有以下两种区别。
- 显示上:浏览器会以“粗体”和“居中”来显示th标签中的内容,但是td标签不会。
- 语义上:th标签用于表头,而td标签用于表行。
6.4 语义化
一个完整的表格包含:table、caption、tr、th、td。为了更深入地对表格进行语义化,HTML引入了thead、tbody和tfoot这三个标签。
thead、tbody和tfoot把表格划分为三部分:表头、表身、表脚。有了这三个标签,表格语义更加良好,结构更清晰,也更具有可读性和可维护性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格语义化</title>
<!--这里使用CSS为表格加上边框-->
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
<tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
thead、tbody和tfoot这三个标签也是表格中非常重要的标签,它从语义上区分了表头、表身和表脚,很多人容易忽略这三个标签。
此外,thead、tbody和tfoot除了使得代码更具有语义之外,还有另外一个重要作用:方便分块来控制表格的CSS样式。
6.4 合并行:rowspan
在HTML中,我们可以使用rowspan属性来合并行。所谓的合并行,指的是将“纵向的N个单元格”合并。
<td rowspan = "跨越的行数"></td>
所谓的合并行,其实就是将表格相邻的N个行合并。在这个例子中,rowspan="n"实际上是让加上rowspan属性的这个td标签跨越n行。
6.5 合并列:colspan
在HTML中,我们可以使用colspan属性来合并列。所谓的合并列,指的是将“横向的N个单元格”合并。
<td colspan = "跨越的列数"></td>
7. 图片
7.1 图片标签
在HTML中,我们可以使用img标签来显示一张图片。对于img标签,我们只需要掌握它的三个属性:src、alt和title。
<img src="" alt="" title="" />
7.1.1 src属性
src用于指定图片所在的路径,这个路径可以是相对路径,也可以是绝对路径。
<img src="图片路径" />
所谓的图片路径,指的就是图片地址,这两个叫法是一样的意思。任何一个图片必须指定src属性才可以显示。也就是说,src属性是img标签必不可少的属性。
7.1.2 alt属性和title属性
alt和title属性都是用于指定图片的提示文字。一般情况下,alt和title属性的值是相同的。不过两者也有很大的不同。
alt属性用于描述图片,这个描述文字是给搜索引擎看的,并且当图片无法显示时,页面会显示alt中的文字。title属性也用于描述图片,不过这个描述文字是给用户看的,并且当鼠标指针移到图片上时,会显示title中的文字。
下图分别为alt和title属性
src和alt这两个是必选属性,一定要添加;而title是可选属性,可加可不加。
7.2 图片路径
在HTML中,路径分为两种:绝对路径和相对路径。
绝对路径,指的是图片在你的电脑中的完整路径
<img src="D:/website/img/rosie.png" />
相对路径,指的是图片相对当前页面的位置,“../”表示上一级目录。
<img src="img/rosie.png" />
在实际开发中,站内文件不管是图片还是超链接等,我们都使用相对路径,几乎不会用绝对路径。
7.3 图片格式
在网页中,图片格式有两种:一种是“位图”,另外一种是“矢量图”
7.3.1 位图
位图,又叫“像素图”,它是由像素组成的图片。将位图放大后,图片会失真;缩小图片后,位图同样也会失真。
在实际开发中,最常见位图的图片格式有三种(可以从图片后缀名看出来):.jpp(或.jpeg)、.png和.gif。
- 如果想要展示色彩丰富而高品质图片,可以使用.jpg格式;
- 如果是一般图片,为了减少体积或者想要透明效果,可以使用.png格式;
- 如果是动画图片,可以使用.gif格式。
7.3.2 矢量图
矢量图,又叫“向量图”,它是用计算机图形学中点、直线或多边形等表示出来的几何图像。
矢量图是以一种数学描述的方式来记录内容的图片格式。
举个例子,我们可以使用y=kx来绘制一条直线,当k取不同值时就会绘制不同角度的直线,这就是矢量图的构图原理。
矢量图最大的优点是:图片无论放大、缩小或旋转等都不会失真。最大的缺点是:难以表现色彩丰富的图片效果(非常差)。矢量图常见格式有:.ai、.cdf、.fh、.swf。
对于位图和矢量图的区别
- 位图适用于展示色彩丰富的图片,而矢量图不适用于展示色彩丰富的图片。
- 位图的组成单位是“像素”,而矢量图组成单位是“数学向量”。
- 位图受分辨率影响,当图片放大时会失真;而矢量图不受分辨率影响,当图片放大时不会失真。
- 网页中的图片绝大多数都是位图,而不是矢量图。
8. 超链接
8.1 超链接简介
超链接随处可见,可以说是网页中最常见的元素。超链接,英文名是hyperlink。每一个网站都是由非常多的网页组成,而页面之间通常都是通过超链接来相互关联的。超链接能够让用户在各个独立的页面之间方便地跳转。
8.1.1 a标签
在HTML中,我们可以使用a标签来实现超链接。
<a href="链接地址">文本或图片</a>
8.1.2 target属性
默认情况下,超链接都是在当前浏览器窗口打开新页面的。在HTML中,我们可以使用target属性来定义超链接打开窗口的方式。
<a href="链接地址" target="打开方式"></a>
![](https://i-blog.csdnimg.cn/blog_migrate/453d1e87f8cf915a8f45a03ec82bd155.png)
一般情况下,我们只会用到_blank这一个值。_blank属性是以下划线(_)开头,而不是中划线-。
8.2 内部链接
在HTML中,超链接有两种,一种是“外部链接”,另外一种是“内部链接”。外部链接指向的是“外部网站的页面”,而内部链接指向的是“自身网站的页面”。
8.3 锚点链接
有些页面内容比较多,导致页面过长,用户需要不停拖动浏览器上的滚动条才可以查看内容。
为了方便用户操作,我们可以使用锚点链接来优化用户体验。
在HTML中,锚点链接其实是内部链接的一种,它链接地址(也就是href)指向的是当前页面的某个部分。所谓的锚点链接,简单来说,就是点击某一个超链接,然后它就会跳到“当前页面”的某一部分。
想要实现锚点链接,需要定义两个。
- 目标元素的id。
- a标签的href属性指向该id。
9 表单
9.1 表单简介
前面,我们学习了各种各样的标签。不过使用这些标签做出来的都是静态页面,没办法实现动态页面。如果想要做出一个动态页面,我们就需要借助表单来实现。其中表单最重要的作用就是:在浏览器端收集用户的信息,然后将数据提交给服务器来处理。
从外观上来划分,表单可以分为以下八种。
- 单行文本框
- 密码文本框
- 单选框复选框
- 按钮
- 文件上传
- 多行文本框
- 下拉列表
9.2 form标签
9.2.1 form标签简介
必须要把所有表单标签放在form标签内部。常说的表单,指的是文本框、按钮、单选框、复选框、下拉列表等的统称。
<form>
//各种表单标签
</form>
![](https://i-blog.csdnimg.cn/blog_migrate/8f6d024d6c4beb4bb84eb54ee4f73b9a.png)
1. name属性
为了区分表单,使用name属性来给表单进行命名。
<form name="myForm"></form>
2. method属性
在form标签中,method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个,一个是get,另外一个是post。get在安全性较差,而post安全性较好。所以在实际开发中,我们都是使用post。
<form method="post"></form>
3. action属性
在form标签中,action属性用于指定表单数据提交到哪一个地址进行处理。
<form action="index.php"></form>
4. target属性
在form标签中,target属性与a标签的target属性是一样的,都是用来指定窗口的打开方式。一般情况下,只会用到_blank这一个属性值。
<form target="_blank"></form>
5. enctype属性
在form标签中,enctype属性用于指定表单数据提交的编码方式。一般情况下不需要设置,除非用到上传文件功能。
9.3 input标签
在HTML中,大多数表单都是使用input标签来实现的。
<input type="表单类型" />
nput是自闭合标签,它是没有结束符号的。其中type属性取值如表所示。
![](https://i-blog.csdnimg.cn/blog_migrate/237a9be43e11614bb99af577d007d822.png)
9.4 单行文本框
9.4.1 单行文本框简介
在HTML中,单行文本框是使用input标签来实现的,其中type属性取值为text。单行文本框常见于注册登录功能。
<input type="text" />
效果:
9.4.2 单行文本框属性
![](https://i-blog.csdnimg.cn/blog_migrate/a0dd9d4a5df13fa01c76f59fd7071bec.png)
value属性用于设置单行文本框中默认的文本,如果没有设置,就是空白。
9.5 密码文本框
9.5.1 密码文本框简介
密码文本框在外观上与单行文本框相似,两者也拥有相同的属性(value、size、maxlength等)。不过两者也有着本质上的区别:在单行文本框中输入的字符可见,而在密码文本框中输入的字符不可见。
<input type="password" />
文本框属性同单行文本框。
9.6 单选框
在HTML中,单选框也是使用input标签来实现的,其中type属性取值为radio。
<input type="radio" name="组名" value="取值" />
name属性表示单选按钮所在的组名,而value表示单选按钮的取值,这两个属性必须要设置。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
性别:
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女
</form>
</body>
</html>
name取值一样时,实现单选效果;如果name取值不一样、可多选。
为了得到更好的语义化,表单元素与后面的文本一般都需要借助label标签关联起来。
value属性取值一般跟后面的文本相同,之所以加上value属性,是为了方便JavaScript或者服务器操作数据。所有表单元素的value属性的作用都是一样的。
9.7 复选框
在HTML中,复选框也是使用input标签来实现的,其中type属性取值为checkbox。单选框只能选择一项,而复选框可以选择多项。
<input type="checkbox" name="组名" value="取值" />
name属性表示复选框所在的组名,而value表示复选框的取值。单选框一样,这两个属性也必须要设置。
两者都设置name属性,为什么单选框只能选中一项,而复选框可以选择多项呢?
因为浏览器会自动识别这是“单选框组”还是“复选框组”(其实就是根据type属性取值来识别)。如果是单选框组,就只能选择一项;如果是复选框组,就可以选择多项。
想在默认情况下,让复选框某几项选中,也可以使用checked属性来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
你喜欢的水果:<br/>
<input type="checkbox" name="fruit" value="苹果" checked/>苹果
<input type="checkbox" name="fruit" value="香蕉"/>香蕉
<input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
<input type="checkbox" name="fruit" value="李子"/>李子
</form>
</body>
</html>
9.8 按钮
在HTML中,常见的按钮有三种:普通按钮button、提交按钮submit和重置按钮reset。
9.8.1 普通按钮
button在HTML中,普通按钮一般情况下都是配合JavaScript来进行各种操作的。
<input type="button" value="取值" />
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
oBtn[0].onclick = function ()
{
alert("I ❤ HTML !");
};
}
</script>
</head>
<body>
<form method="post">
<input type="button" value="表白"/>
</form>
</body>
</html>
9.8.2 提交按钮submit
在HTML中,提交按钮一般用来给服务器提交数据。我们可以把提交按钮看成是一种特殊功能的普通按钮。
<input type="submit" value="取值" />
9.8.3 重置按钮reset
在HTML中,重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。
重置按钮只能清空它所在form标签内表单中的内容,对于当前所在form标签之外的表单清除无效。提交按钮也是针对当前所在form标签而言的。
总结:
- 普通按钮一般情况下都是配合JavaScript来进行各种操作的。
- 提交按钮一般都是用来给服务器提交数据的;
- 重置按钮一般用来清除用户在表单中输入的内容。
9.9 文件上传
在HTML中,文件上传也是使用input标签来实现的,其中type属性取值为file。
<input type = "file"/>
9.10 多行文本框
在HTML中,多行文本框使用的是textarea标签,而不是input标签。
<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
多行文本框的默认显示文本是在标签对内部设置,而不是在value属性中设置的。一般情况下,不需要设置默认显示文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
个人简介:<br/>
<textarea rows="5" cols="20">请介绍一下你自己</textarea>
</form>
</body>
</html>
HTML有三种文本框:单行文本框、密码文本框、多行文本框。
单行文本框和密码文本框使用的都是input标签,多行文本框使用的是textarea标签。
9.11 下拉列表
9.11.1 下拉列表
在HTML中,下拉列表由select和option这两个标签配合使用来表示的。
<select>
<option>选项内容</option>
……
<option>选项内容</option>
</select>
9.11.2 select标签属性
在HTML中,select标签常用属性有两个, select标签常用属性
9.11.3 option标签属性
10. 框架
10.1 iframe标签
在HTML中,我们可以使用iframe标签来实现一个内嵌框架。内嵌框架,就是在当前页面再嵌入另外一个网页。
<iframe src="链接地址" width="数值" height="数值"></iframe>
src是必选的,用于定义链接页面的地址。width和height这两个属性是可选的,分别用于定义框架的宽度和高度。(位于body内)
iframe实际上就是在当前页面嵌入另外一个页面,我们也可以同时嵌入多个页面。