HTML零基础入门

幼儿班的小白

已于 2023-01-13 21:49:52 修改

阅读量2.8k

点赞数 3

分类专栏：学习笔记文章标签： html 前端

于 2022-07-10 15:00:40 首次发布

本文链接：https://blog.csdn.net/weixin_65054907/article/details/125694213

版权

学习笔记专栏收录该内容

1 篇文章 1 订阅

订阅专栏

一、HTML介绍：

Hyper Text Markup Language（超文本标记语言），他是属于一种网页的标准语言，但是不算是一种编程语言，而是一种Markup Language，即标记语言。它是属于前端开发的三大核心技术之一，另外两项是CSS和JavaScript。

HTML、CSS、JavaScript三者有何区别？？

HTML用于构造网页的结构，例如：网页中的文字、表格、按钮、链接等等。而CSS用于修饰网页中的元素，就是把上述这些元素进行调整，例如：文字的大小，颜色，背景的样式等等。JavaScript用于实现网页的交互，比如在点击某个地方后页面会发生跳转，或是网页中需要用到的函数。

通俗的来说将，如果把写网页比作成盖房子，HTML相当于房子的地基，墙，屋顶，用于构造房子；CSS相当于装修你的房子，用作房子的修饰；JavaScript相当于屋内的各种家具，用于实现这个房子的功能。

HTML最初于1989年由CERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。

版本号	说明
HTML 1.0	在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2.0	1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3.2	1997年1月14日，W3C推荐标准。
HTML 4.0	1997年12月18日，W3C推荐标准。
HTML 4.01	（微小改进）：1999年12月24日，W3C推荐标准。
HTML 5	HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

虽然说最新的版本时HTML 5，但是目前为是使用最多的仍然是HTML 4.01版本。

二、HTML基本结构：

在学习基本标签之前，我们先要认识一下html文件的基本结构。

<!DOCTYPE html> 
<html>
    <head>   
    </head>
    <body>
    </body>
</html>

这就是html最核心的结构，不管什么样的网页都是有着几部分构成。这其中的<>我们叫做标签，或者叫做元素。当然我们会发现它们基本上是成对出现的，例如<head>表示head这部分的开始，而</head>表示结束，至于每个标签的含义，下面我们来学习。

<!DOCTYPE html>

这是文档声明，这里表示一个html页面，至于含义，可以看作 DOC TYPE——document type，即文件类型。这是每一个网页必要的一部分，必须要写的。

<html>

</html>

这表示页面的开始和结束，也就是要在这一对标签内书写你网页的所有内容

<head>

</head>

这一对标签表示网页的“头部”，像是添加一个页面标题、定时刷新或是加入外部文件，需要在这一对标签里书写，至于里面的详细内容后面会介绍到。

<body>

</body>

这一对标签表示网页的“身体”，用于网页内容的编写，例如在网页中你所看到的文字，表格或是各种按钮，都是在这一对标签之中。

三、HTML基本标签：

有了对html整体结构的一个认识，下面来介绍每对标签中的详细内容。

1、head标签：

在这一对标签内的子标签都是比较特殊的，内容相对来说比较简单，也比较枯燥，知识点也比较少，所以放在了前面，至于这一块的内容，我们只需要了解这些子标签，以及他们的作用就好了。如果实在记不住也没有关系，忘记的时候再去查询就好了，这一块的知识本就不是一次性就都能记住的，反复的查看，记忆会更深，学的也会更扎实。

head标签有如下几个子标签：

title标签
meta标签
link标签
style标签
script标签

<title>标题</title>

这对标签唯一的作用就是定义网页的标题。

<!DOCTYPE html>
<html>
	<head>
		<title>网页标题</title>
	</head>
	<body>
        <p>文本内容</p>
	</body>
</html>

如上图所示，title标签所展示的标题是整个界面的标题，而<body>标签中<p> 标签中的内容时显示在页面上的。

这个<p>大家可能有些陌生，它表示的是一种文本，后续会讲到。

<meta 属性名=“名称” content=”内容” />

这个标签是用来定义网页的一些特殊信息，例如页面关键字、页面描述等。但是它并不能显示出来，这是给搜索引擎看的。

在这里小伙伴可能也注意到了，他不同与之前所讲述的标签，他没有用作标志结束的标签，事实上像上面这种有两个<>的标签，被叫作双标签，例如之前举的例子：<head>开始，而</head>表示结束，而这个叫做单标签，其中需要注意的是>前面需要加上一个“/”。

并且这里又引入了一个新的概念——属性。他是一对标签里的内容，通常为属性名=“内容”，像是这里的content也可被叫做属性，用来表示内容。而meta标签前面的属性常用的有两种：

name属性
http-equiv属性

（1）name属性：

name属性值取值	说明
keywords	网页的关键字
description	网页的描述
author	作者
copyright	版权信息

<!DOCTYPE html>
<html>
    <head>
        <!--关键字：可以有多个关键字-->
        <meta  name="keywords" content="前端开发,零基础入门" />
        <!--网页描述：对于网页内容的描述-->
        <meta  name="description" content="HTML零基础入门一——基本标签" />
        <!--作者信息-->
        <meta  name="author" content="幼儿班的小白" />
        <!--版权声明-->
        <meta  name="copyright" content="原创不易，请勿转载" />
    </head>
    <body>
    </body>
</html>

（2）http-equiv属性：

http-equiv属性取值	说明
Content-Type	定义网页
refresh	定时刷新界面并跳转

<!DOCTYPE html>
    <html >
    <head>
        <!--页面所使用的编码是utf-8-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
    </body>
</html>

这句代码也可以简写为：

<meta charset="utf-8" />

在实际开发中，为了确保不出现乱码，我们必须要在每一个页面中加上。

<!DOCTYPE html>
    <html >
    <head>
        <meta  http-equiv="refresh" content="6;url=http://www.baidu.com"/>
    </head>
    <body>
    </body>
</html>

这一行代码表述页面在6秒后跳转到百度界面，通常我们见到网页上的小广告，都是这个原理。

<link type="text/css" rel="stylesheet" href="文件路径">

这个标签用于CSS外部文件的引用，其中rel是“relative相对的”的缩写，它的取值是固定的，即stylesheet，表示引入的是一个样式表文件，href表示的是文件的路径。

<style>

</style>

用来写CSS的内容。

<scrip>

</script>

用来写JavaScript的内容。

2、body标签：

body标签中有大量的子标签，为了方便记忆，所以就不再一一列举有哪些标签了，而是分成了六个部分进行展示。分别为：

文本
图像
链接
列表
表格
表单

（1）文本

这个词汇大家一定不陌生，文本就是文字，但是在用HTML写网页是，并不是所有的文字都是一种格式，这里说的文本，实质网页中成段出现的文字，在这里为大家介绍两种格式：

<h1>标题</h1>

在HTML中共有六种大小不同的格式分别为h1到h6，并且大小则h1到h6逐渐变小。这里的标题不同于head标签中的<title>标题，上面讲到过<title>标签指的是网页的标题，而这里的是指网页内容中的标题。

<!DOCTYPE html>
<html>
	<head>
		<title>网页标题</title>
	</head>
	<body>
        <h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	</body>
</html>

这里也可以明显的看到这几级标题大小有着明显的不同，在网页中按照他们的大小代表他们的重要性，通常一个网页中一级标题这能有一个，而后面的h2到h6可以有多个。

<p>段落</p>

这一部分上面也接触到过，叫段落标签，比较常用。通常我们浏览网页中，那种大段的文字都是用的这个标签。在这里需要注意的是<p>标签中的内容是一个段落，在网页呈现的效果是可以自动换行的，因为每一个<p>标签就是一个段落，并且每个段落之间还会有一些空隙。

除此之外还有一些对文本进行处理的文本标签：

文本标签	说明
strong、b	粗体
em、cite、i	斜体
sup	上标
sub	下标
s	中划线
u	下划线
big	大字
small	小字

<!DOCTYPE html>
<html>
	<head>	
	</head>
	<body>
        <p>好好学习，天天向上。</p>
		<strong>好好学习，天天向上。</strong><br/>
		<em>好好学习，天天向上。</em><br/>
		<big>好好学习，天天向上。</big><br/>
		<small>好好学习，天天向上。</small><br/>
		<u>好好学习，天天向上。</u><br/>
		<s>原价10.00</s><br/>
		<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
		<p>H<sub>2</sub>SO<sub>4</sub></p>
	</body>
</html>

效果如上图所示，通常比较常用的也就是加粗和倾斜；中划线通常用于价格降价宣传；至于大字号、小字号和下划线可以利用CSS来调整；而上标和下标通常用于公式，比如幂，角标，或是化学式等等。

除此之外需要注意的是除了<p>标签，其他的不会自己换行，需要加上换行标签<br/>，后面会讲到。这是因为<p>标签属于块元素，块元素的意思是在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行，但是块元素的内部允许放其他的块元素或是行内元素，比如之前讲到的h1-h6就属于块元素；至于行内元素与块元素正好相反，行内元素可以与其他行内元素位于同一行的。此外，行内元素内部只可以容纳其他行内元素，不可以容纳块元素，比如这里讲的文本标签都是属于行内元素。

<br/>

<hr/>

有些时候需要我们手动去换行，比如使用那些行内元素的时候，就要用到换行标签<br/>，它是“break”的缩写，这也是一个单标签，可以直接写到<p>标签中。需要注意的是这里的斜杠“/”是写在后面的。

而<hr/>标签的作用是添加一条水平线，他是水平线“horizon的缩写”。

<br/>属于行内元素，<hr/>属于块元素。后面在遇到这种易混淆的的概念，会在为大家解释。

<!DOCTYPE html>
<html>
	<head>	
	</head>
	<body>
		<h2>关雎</h2>
        <p>关关雎鸠，在河之洲。</p>
		<p>窈窕淑女，君子好逑。</p>
        <hr/>
		<p>参差荇菜，左右流之。<br/>窈窕淑女，寤寐求之。</p>
	</body>
</html>

由上图可以看出如果在<p>标签中的文本进行换行，那么会换行但是中间不会有空隙。所以在写网页时可以按照我们的需求，对排版进行调整。

<div>

</div>

这一标签对于现在来说并没用什么用处，不会使页面有什么变化，顶多可以把代码划分出区域，使其结构更加的清晰，但是它可以配合CSS去修饰某一块的样式。也是十分重要的一个知识点。

（2）图像

<img src="图片路径" alt="提示信息" title="提示文字" />

这是图像标签，用于引入一个图片，在这个标签有三个属性：

src属性
alt属性
title属性

（1）src属性

这个属性与上面的<link>标签的href属性类似，那个为文件路径，这个是图片路径，但是上面没有详细解释过，类似与这种路径的写法有两种，一种是相对路径，一种是绝对路径。

相对路径不太好理解，就是需要你要插入的图片和html文件位于同一个目录下，如下图所示：

<!DOCTYPE html>
<html>
	<head>	
	</head>
	<body>
        <img src="img/yasuo.jpg" />
	</body>
</html>

比如说我在html--练习这个文件夹里面创建了个test.html文件，同时这个文件夹里还有一个img文件夹，像引入这个img文件夹里的图片，因为他们处于同一级目录内，所以就可以按照上面所示引入这张照片，也可以是引入同样在html--练习文件夹里的图片，这样的话就不用写前面的img文件夹了。两者的效果是一样的。

<img src="yasuo.jpg" />

至于绝对路径就比较好理解了，相信小伙伴们平时也注意到，在我们安装什么软件时，会有一个安装路径，就是这个文件在你电脑上的位置：

<img src="D:/HBuilderX/project/html--练习/img/yasuo.jpg" />

（2）alt属性

这个属性里面是输入提示信息的，所谓的提示信息指的是，当网页按照前面的路径找不到你存放的照片时，所显示的文字。比如加上alt属性，然后把路径删掉：

<img alt="yasuo"/>

如上图，就会显示你输入的提示信息。

（3）title属性

他和前面一项的提示信息容易混淆，这个提示文字说的是，当你的鼠标放到图片上时，所显现出来的文字：

<img src="img/yasuo.jpg" alt="yasuo" title="灵魂莲华 亚索"/>

事实上是有鼠标的，但因为我这个截图工具的原因，没显示出来，大家理解了就好。

一般情况下，前两个属性是必须写的，而最后这个title属性可写可不写。

（3）链接

<a href="链接地址" target="打开方式"> 文本或图片 </a>

链接标签是一个双标签，同时还是一个行内元素，忘记可以翻看上面。至于它的属性一共有两个：

href属性
target属性

（1）href属性

link标签里面提到过，当时他的意义时你CSS外部文件的地址，而在这里指的是链接的地址，它可以是网址：

<a href="https://blog.csdn.net/weixin_65054907?spm=1000.2115.3001.5343">幼儿班的小白</a>

如上图所示当点击这串文字后就会跳转到我CSDN的主页。当然这串文字也替换为图片，格式就和上面提到的图片格式一样：

<a href="https://blog.csdn.net/weixin_65054907?spm=1000.2115.3001.5343"><img src="img/yasuo.jpg" alt="我的主页"/></a>

样式和上面引入图片后一样，不同的是点击图片会进行页面的跳转。

同时这个属性的内容也可以是你自己写的html文件或者是当前html文件的某一部分，跳转到另一个html文件也比较好理解，只需要把这个链接地址改为你要跳转那个文件的路径，填写路径的方式和图片的一样：

<a href="跳转文件.html">跳转到另一个文件</a>

或者是可以跳转到当前文件的某一部分，这样说可能会有些陌生，当时大家回忆一下，有些网页会有目录，当你点击目录的时候，网页会直接跳转到那一部分，比如某度百科，那个原理是一样的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div>
			<a href="#technology">前端开发核心技术</a><br />
			<a href="#tool">前端开发工具</a><br />
			<a href="#frame">前端开发框架</a><br />
		</div>
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		<div id="technology">
			<h2>前端开发核心技术</h2>
			<ul>
				<li>HTML</li>
				<li>CSS</li>
				<li>JavaScript</li>
			</ul>
		</div>
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		<div id="tool">
			<h2>前端开发工具</h2>
			<ul>
				<li>HBuilder</li>
				<li>Sublime text</li>
				<li>WebStorm</li>
			</ul>
		</div>
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		……<br />
		<div id="frame">
			<h2>前端开发框架</h2>
			<ul>
				<li>Angular</li>
				<li>React</li>
				<li>Vue</li>
			</ul>
		</div>
	</body>
</html>

效果如下：

每当点击上面的目录时，页面就会自动跳转到你所电机的内容部分，当然这个目录也可以是多级的，跳转到某一小部分也是可以的。至于这串代码里面用了一些列表的知识，马上会讲到，先去理解这个链接。

对于href里的内容，用到的时之前讲过的div标签，将我的代码分成了几个部分，并且给每个部分都起了名字，也就是那个id属性，这算是一个通用属性，大部分标签都有，剩余小部分使用的是name属性。而在选取id时使用是“#id名”的方式，后续的CSS也会讲到，因为在CSS里这是一个最常用的方式。

（2）target 属性

这个属性里填写的是链接的打开方式，在基础阶段，就认识两个就可以了：

target属性值	说明
_self	在当前网页打开
_blank	在新窗口打开

这个两个，相信对于经常网上冲浪的小伙伴们来说并不难理解，一个是在点击链接后直接在当前页面进行跳转，另一个是保持原来的页面不变，在新建一个页面并打开点击的链接。需要注意的是这两个属性值前面需要加下划线“_”，别和其他符号弄混。

（4）列表

列表也是网页中一种比较常用的排列格式，共分为两种：

有序列表
无序列表

（1）有序列表

<ol type="属性值">

<li>列表内容</li>

</ol>

<ol>标签为有序列表，是ordered list的简称。而他里边的<li>标签是列表的内容，可以有根据你的需求有很多项。

而他的type属性值是用来描述有序列表前边序号的。共有5种：

有序列表type属性值	列表项符号
1	阿拉伯数字：1、2、3……（默认值）
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
    	<h2>前端开发核心技术</h2>
        <ol type="I">
	    	<li>HTML</li>
	    	<li>CSS</li>
		    <li>JavaScript</li>
        </ol>
    </body>
</html>

效果如下：

（2）无序列表

<ul type="属性值">

<li>列表内容</li>

</ul>

这个列表和有序列表大同小异唯一不同的是属性值有一定的变化：

无序列表type属性值	说明
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<h2>前端开发核心技术</h2>
		<ul type="disc">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</body>
</html>

这一部分比较简单，内容也比较少。需要注意的是，首先这两种列表都是属于块元素，也就是需要自己占一行的；同时这两种列表的type属性可以不写，这样的话就会自动使用默认值；还有<ul>无序列表里的子元素只能是<li>，不能是其他标签。

（5）表格

这个表格可能看上去比较复杂，其实和列表有些一些异曲同工之妙。我们可以把表格看作是很多个列表堆叠在一起，把几个列表合成一个，然后加入了一些新的结构。所以这一部分也很简答，只需要记住一个基本结构，和两个基本属性就好了。

基本结构：

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
    </head>
	<body>
		<table>
			<caption>成绩单</caption>		<!--表格标题-->
			<thead>		<!--表头-->
				<tr>	<!--行-->
					<th>姓名</th>
					<th>语文</th>
					<th>数学</th>
					<th>英语</th>
				</tr>
			</thead>
			<tbody>		<!--表身-->
				<tr>
					<td>小明</td>
					<td>59</td>
					<td>60</td>
					<td>90</td>
				</tr>
			</tbody>	
			<tfoot>		<!--表脚-->
				<tr>
					<td>等级</td>
					<td>不及格</td>
					<td>及格</td>
					<td>优秀</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

虽然这个结构看上去会有些复杂，但是如果拆开来看就不会了，首先表格需要在<body>标签里建立一个<table>标签来声明一个表格，与之前列表的ol标签是一样。接着是一个表格的标题，用的是<caption>标签，它会显示在表格最上方的居中位置。然后<tr>标签代表的是行，你的表格最最多需要几行，就会有几个<tr>标签。<tr>标签的里面是<td>标签代表的是单元格，也就是表格的内容或者可以理解为列，其中有一个特殊针对表头的表达方式是<th>标签，他和<td>标签的意思是一样的，只是会自动地加粗文字。最后是<thead>、<tbody>、<tfoot>这三个标签，他们并没有什么实际的作用，但是同<div>标签一样，起个让结构更清晰的作用，同时方便CSS的选取。

上面就是一个表格的完整结构，下面来说说单元格的两个重要属性：

rowspan
colspan

（1）colspan 属性

这个属性的意义是合并列，用于将表格的几列表格合并在一起，写在<td>单元格标签里，属性值说的是合并的数量：

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
		    table,tr,td{border:1px solid black;}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="2">学科</td>
			</tr>
			<tr>
				<td>高等数学</td>
				<td>大学英语</td>
			</tr>
			<tr>
				<td>大学物理</td>
				<td>大学体育</td>
			</tr>
		</table>
	</body>
</html>

因为默认情况下，表格是没有边框的。在这个例子中，我们使用了CSS加入边框，这样会让表格有一个更清晰表格结构，现在就只需要了解就好，这些都属CS的范畴。这里可以看出学科这个单元格占了两列的位置，如果要是没有用这个属性：

可以清晰地看出多了一条线，所以需要根据自己的需要，对表格进行调整。

（2）rowspan属性

如果弄明白上面的那个属性，那么这个也就好理解了，这个属性是意义是合并行，也就是把几行合并在一起：

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
		    table,tr,td{border:1px solid black;}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td rowspan="2">学科</td>
				<td>高等数学</td>
				<td>大学英语</td>
			</tr>
			<tr>
				<td>大学物理</td>
				<td>大学体育</td>
			</tr>
		</table>
	</body>
</html>

这个也比较好理解，rowspan="2"指的是合并行，然后后面继续写第一行的东西，而第二行的时候

因为第一列已经一个占了两行的学科，所以就直接写后面两列就好了。那如果合并行在不在第一列应该怎么写：

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
		    table,tr,td{border:1px solid black;}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>小红</td>
				<td rowspan="2">学科</td>
				<td>高等数学</td>
				<td>大学英语</td>
			</tr>
			<tr>
				<td>小明</td>
				<td>大学物理</td>
				<td>大学体育</td>
			</tr>
		</table>
	</body>
</html>

如上方所示，就直接每一行的第一个单元格直接加就可以。只要在写表格时候，清楚我们每一个单元格的位置，如果有合并多行或是多列的情况就只跳过就好了。

（6）表单

表单的结构与表格有些类似，首先在写表格之前，需要先用table标签先声明一个表格，然后再在这个table标签里面写，而表单则是需要一个from标签来声明。但是两者还是有本质上的区别，表格很好理解，就是表格，而表单指的是文本框、按钮、单选框、复选框、下拉列表等的统称。之所以把他放在最后，是因为是这几项功能里边最复杂最重要的一项。

在<from>标签中共有这3种子标签：

<input>标签
<textarea>标签
<select>标签

(1)form标签

<form name="表单名称" method="提交方式" action="提交地址" target="打开方式" enctype="编码方式"></form>

1、name属性
用来区分各个表单，就是给你得每个表单去一个名字。和前边的id属性有点类似，只不过不一样的是：首先id的值是不能一样的，每个标签都是一个独一无二的名字，而name属性的值是可以一样的。

2、method属性
用来写提交的方式，属性值有两个，一个是"post"，另一个是"get"，但是一般使用的是"post"，因为安全性比较高

3、action属性
用于填写表单中数据提交的地址或是，一般情况下，这三个属性是配合着使用的。

4、target属性
用于写提交的方式在前边的a标签中提到过，和前边的用法完全一样，主要有"_self"和"_blank"两个属性值，再打开一个新的页面时，控制当前页面是否在当前页面打开

5、enctype属性
一般情况下不会用到，他是用来控制提交表单时的编码方式。

(2)input标签

<input type="类型"/>

需要注意的是input标签都是单标签，即自闭和标签。

input标签顾名思义，是用来输入信息的。标签中最重要的就是type属性，用来控制表单的类型。共有下面几种类型：

type属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button	普通按钮
submit	提交按钮
reset	重置按钮
file	上传文件

1、单行文本框

单行文本框type属性取值为"text"时，呈现出的是单行文本框，通常用于网页中填写用户名或是注册信息等等输入信息的文本框。

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <form>
            用户名：<input type="text">
        </form>
    </body>
</html>

效果如下：

当type取"text"值的时候有几个常用的属性：

size属性
maxlength属性
placeholder属性
value属性

size属性

控制文本框的长度，但是一般情况下都是后面再用css调整，而不是在input标签里直接写入。

效果如下：

maxlength属性

控制文本框中可输入的文字的最大长度，比如日常见到的输入电话，身份证号等。

效果如下：

placeholder属性

这个属性的取值将会显示在文本框中，但是当点击文本框输入信息时，提示文字就会消失。

效果如下：

value属性

给文本框加一个默认的值，与前边一个不同的时，这个value属性里边的值会直接输入在文本框里，而placeholder属性的值再输入值的时候会直接消失。

效果如下：

2、密码文本框

密码文本框的tpye属性取值为"password"，与普通的文本框基本一样，唯一一点不同的是，当你在密码文本框输入信息时，不会显示你所输入的信息。

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <form>
            密码：<input type="password">
        </form>
    </body>
</html>

效果如下：

3、单选框

单选框的type属性取值为"radio"，单选框通常在调查问卷或是注册时会见到，比较常用。

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <form>
            最喜欢的水果：<br/>
            <input type="radio" name="friut" value="西瓜">西瓜
            <input type="radio" name="friut" value="草莓">草莓
            <input type="radio" name="friut" value="苹果">苹果
        </form>
    </body>
</html>

效果如下：

当type属性取值为"radio"时，效果为单选框，其中会用到一下属性：

name属性
value属性
checked属性

name属性

这里的name属性和之前form标签中的不太一样，前边的name属性只是用来命名，后期可以通过JavaScript或是其他方式使用数据。而这里name属性主要是为了将单选的内容进行分组，什么意思呢，因为是单选框每一组选项只能选择一个选项，所以需要name属性对其进行分组，使得在name相同的一组中选择一个选项。如果name属性不同或是根本没有写name属性，则会出现可以同时选择多个选项的情况，所以这个属性是必须写的。

value属性

在这里value属性不同文本框中的value属性，因为是单选框所以，不会有默认的输入答案，但它也是单选框必须写的一个元素。从上面的示例可以看出每一个选项后边的文字并不是value属性里边的，而是">"后边的文字，所以说在表单中你的选择和对应选项其实是没有什么关系的，而value属性正式确定了这一关系，通常value的值是和选项的文字完全一样的。

这样做的原因是，需要让你的选择可以被提取并使用，否则在你写的页面中无法答案确定你到底选择了什么。

checked属性

<input type="radio" name="friut" value="苹果" checked />苹果

这个属性在这里就比较好理解了，就是给你的单选框一个默认值，当你打开页面后就会直接选择那个选项，在HTML5的版本，这个属性可以不用写属性值，全写是'checked="checked"'。

4、复选框

复选框的type属性取值为"checkbox"

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <form>
            喜欢的水果：<br/>
            <input type="checkbox" name="friut" value="西瓜">西瓜
            <input type="checkbox" name="friut" value="草莓">草莓
            <input type="checkbox" name="friut" value="苹果">苹果
        </form>
    </body>
</html>

效果如下：

至于替他属性，单选框的属性完全适用于多选框，两者唯一不同的就是，在分好组的情况下一个只能选择一个选项，一个可以多选。并且两者的选择框的图形也不一样，可以直接在图片上看到。

checked属性表示默认，这也是一样，只不过是可以在多个标签下写。

5、普通按钮

普通按钮的type属性取值为"button"。

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <script>
            window.onload = function ()
            {    
                var oBtn = document.getElementById("baidu");
                oBtn.onclick = function()
                {    
                    window.location.href="https://www.baidu.com";
                }
            }
        </script>
    </head>
    <body>
        <form>
            <input type="button" id="baidu" value="按钮">            
        </form>
    </body>
</html>

效果如下：

这里的普通按钮通常用和JavaScript配合使用，来完成一些网页的交互。至于上面的代码属于JavaScript的范畴，原理为新建一个函数，通过捕获按钮的id，来建立两者的联系，最后跳转到百度的页面。目前不需要考虑。

按钮的value属性则是在按钮上的提示信息。

6、提交按钮

提交按钮的type属性取值为"submit"。
可以理解为特殊类型的普通按钮，在外观上和普通按钮没有任何区别。至于作用就是提交数据，和在form标签中的method、action等属性一起使用的，最终把form表单中的文本框，单选框等中的数据提交到相应的位置。

7、重置按钮

重置按钮的type属性取值为"reset"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form method="post">
            账号：<input type="text"/><br/>
            密码：<input type="password"/><br/>
            <input type="reset" value="重置" />
        </form>
    </body>
</html>

效果如下：

他唯一的作用就是将当前表单中的所有输入数据清空，比如如上图所示在将账号和密码输入完成后，点击重置按钮将会，你所输入的数据将会被清空，达到一个重置的作用。

需要注意的是重置按钮只会重置当前表单中的数据，也就是在form标签中的，如果想要重置另一个form标签或是重置按钮在form标签外面，则不会重置数据。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            <input type="button" value="普通按钮" />
            <input type="submit" value="提交按钮" />
            <input type="reset" value="重置按钮" />
        </form>
    </body>
</html>

效果如下：

这三种按钮在外观上不会有任何的不同，但是每一个按钮的功能都是不一样的，所以需要在合适的地方使用合适的按钮。

8、上传文件

上传文件的的type属性取值为"file"

上传文件的功能通常用于邮箱，网盘等地方。但是这个功能通常是和后端挂钩的，目前不需要考虑。样式和按钮差不多，旁边会有你所选择的文件的提示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            <input type="file" value="上传文件" />
        </form>
    </body>
</html>

效果如下：

(3)textarea标签

<textarea rows="行数" cols="列数" placeholder="提示文字" maxlength="最大字数"></textarea>

textarea标签表示的是多行文本框，和input标签下的两种文本框大同小异

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            <textarea rows="10" cols="20" placeholder="提示文字" maxlength="20"></textarea>
        </form>
    </body>
</html>

效果如下：

不同的是这里多了rows属性和cols属性。分别控制多行文本框的大小和每一行的输入的最大字数。placeholder属性和maxlength属性和前边的文本框完全一样，分别可以控制文本框的提示文字和所输入的最大字数。

需要注意的是这里的textarea标签是双标签，而前面的两种文本框--input标签是单标签。

(4)select标签

select标签表示下拉列表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            请选择你的大学：<br/>
            <select>
                <option>清华大学</option>
                <option>北京大学</option>
                <option>北京理工大学</option>
                <option>北京工业大学</option>
                <option>北京科技大学</option>
            </select>
        </form>
    </body>
</html>

效果如下：

这里还需要另一个标签--option标签。他的结构类似于表格，一个select标签是一个下拉列表，一个option标签是一个选项。

两个标签分别有两个常用的属性

select标签

<select multiple="multiple" size="显示的数量（整数）"></select>

multiple属性可以是下拉列表可以多选，但是需要CTRL+鼠标左键来操作。但是同时也会改变下拉列表的样式。同时这个属性也可以直接简写为multiple，和前边的checked属性原理是一样的。

效果如下：

size属性是用控制下拉列表的长度，比如像上图改为可多选后现实的长度就会默认为4格，而size属性的取值就是最后所显示的长度。

仔细观察，修改完属性值后下拉列表的像样式改变了，只要是设置了可多选，或是size的属性值不为1，则最后的样子都是如上图的可以滑动的列表的样子。

option标签

<option selected="selected" value="属性值">选项</option>

selected类似于之前的checked属性，是给下拉列表一个默认值。同时它也可以简写和checked属性原理一样。

value属性则是前边单选框中的value属性意义一样，是为了后边的JavaScript对下拉列表可以进行数据的处理。

到这里我对于HTML的分享也就告一段落了，其中有一些内容因为编辑器的原因不能在目录中体现出来，深感抱歉。对于整理的内容，由于我也是初学乍道，可能会有一些理解或是使用上错误，还望各位大佬批评指教。

幼儿班的小白

关注

3
点赞
踩
28

收藏

觉得还不错? 一键收藏
2
评论
HTML零基础入门

HTML用于构造网页的结构，例如：网页中的文字、表格、按钮、链接等等。而CSS用于修饰网页中的元素，就是把上述这些元素进行调整，例如：文字的大小，颜色，背景的样式等等。JavaScript用于实现网页的交互。...........................
复制链接

扫一扫