HTML语言入门

最新推荐文章于 2024-04-24 15:00:00 发布

馨梓～

最新推荐文章于 2024-04-24 15:00:00 发布

阅读量1.3k

点赞数 6

本文链接：https://blog.csdn.net/ZQ_abc/article/details/101452321

版权

HTML5语言入门

在接触HTML时，很多人可能会有一个疑问到底什么是HTML呢？HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。HTML在开发时遵循的是W3C标准，下面我们就来了解一下HTML。

HTML的发展史

（1）超文本标记语言——1993年6月发布；

（2）HTML2.0——1995年11月发布；

（3）HTML3.2——1996年1月14日发布；

（4）HTML4.0——1997年12月18日发布；

（5）HTML4.01——1999年12月24日发布；

（6）XHTML1.0——2000年1月26日发布；

（7）XHTML1.1——2001年5月31日；

（8）XHTML2.0——草案，因改动太大，学习成本过高，最终失败；

（9）HTML5——2004发布，是目前的最新版本。

HTML5的优势

1、世界知名浏览器厂商对HTML5的支持，如：微软、Google、苹果、Opera、Mozila。

2、市场的需求；现在的市场急需一个统一的互联网通用标准，在HTML5平台上，视频、音频、图像、动画及同计算机的交互都被标准化。

3、跨平台；用户只用打开浏览器即可访问应用，PC网站、各种移动设备、插件等核心代码就可以不需要重复编写，极大的减少了开发人员的工作量。

W3C标准

W3C标准包括了结构化标准语言（HTML、XML）、表现标准语言（CSS）、行为标准语言（DOM、ECMAScript）。

1、为什么要使用W3C标准？

因为发明HTML的初衷是实现信息资料的网络传播和共享，希望同一HTML文档在不同的浏览器看到同样的页面内容和效果。但早期的HTML版本被各大厂商扩展各类标签，导致各浏览器之间的不兼容，所以这就需要有一个组织来制定和维护开发标准，确保多个浏览器兼容。因此，W3C（万维网联盟）就成立了，它是Web技术领域最权威和具有影响力的国际中立性技术标准机构。

2、W3C标准介绍

W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要由三部分组成，即结构（框架）、表现和行为。

在一个网页中，同样可以分为很多部分，包括各级标题、正文、图片、列表等，这就构成了一个网页的”结构“。每个组成部分的字体、颜色、间距等属性就构成了它的”表现“。用户通过单击让页面中某个元素移动、消失等动画交互就称为它的”行为“。

不很严谨的说，”结构“、”表现“、”行为“分别对应了三种非常常用的技术，即HTML、CSS、JavaScript。也就是说，HTML用来决定结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。后续内容将会一一介绍。

了解HTML5

１、HTML５文件的基本结构

HTML的基本框架为：

<html>
    <head>		//头部部分
        <title>我的第一个网页</title>
    </head>
    <body>		//主体部分
    </body>
</html>

2、网页的基本信息

（1）DOCTYPE声明，约束HTML文档结构，同时告诉浏览器，使用哪一种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。

（2）<title>标签，使用title标签描述网页的标题，类似于一篇文章的标题，一般为一个简洁的主题，打开网页后，将在浏览器窗口的标题栏显示网页标题。

（3）<meta>标签，使用该标签描述网页的摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。

在保存文件时编码一定要和HTML5页面中的<meta>标签中的编码方式保持一致，否则，将会出现乱码。

3、网页的基本标签

（1）标题标签

它表示一段文字的标题或主题，并且支持多层次的内容结构。HTML共提供了6级标题标签（<h1>~<h6>），并赋予一定的外观，所有标题字体加粗，<h1>字号最大，<h6>字号最小。例如：

<!DOCTYPE html>		//HTML5的声明
<html>
	<head lang = "en">		//头部
		<meta charset="UTF-8">		//声明编码方式
		<title>不同等级的标题标签对比</title>		//网页标题
	</head>
	<body>			//主体
       				 //<h1>~<h6>效果展示
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	</body>
</html>

运行浏览器将看到：

在这里插入图片描述

（2）段落标签

顾名思义，段落标签<p>……</p>表示一段文字等内容，例如，希望描述“北京欢迎你”这首歌，包括歌名（标题）和歌词（段落），则对应的HTML代码如下所示：

<!DOCTYPE html>			//HTML声明部分
<html>
	<head lang="en">		//头部
		<meta charset="UTF-8">		//编码方式
		<title>段落标签的应用</title>		//网页标题
	</head>
	<body>		//主体
		<h1>北京欢迎你</h1>		//标题
		<p>北京欢迎你，有梦想谁都了不起！</p>		//段落
		<p>有勇气就会有奇迹。</p>
	</body>
</html>

浏览器显示结果为：

在这里插入图片描述

（3）换行标签

换行标签表示强制换行显示，该标签比较特殊，没有结束标签，它自己本身直接表示标签的开始和结束。像它这种独自一人的叫做单标签，像<html></html>这样的叫做双标签。强制换行表示方式为：

北京欢迎你，有梦想谁都了不起！<br/>			//强制换行
有勇气就会有奇迹。<br/>

输出结果和上方一样。

（4）水平线标签

水平线标签<hr>表示一条水平线它和换行标签一样比较特殊，有时候为了让版面更加清晰、美观，我们会在两个段落间加一条水平线。如：

<h1>北京欢迎你</h1>		//标题标签
		<hr/>		//水平线
		<p>北京欢迎你，有梦想谁都了不起！</p>		//段落标签

（5）字体样式标签

在网页中我们经常会需要给字体加一些样式来突出它的不同，例如：<strong>就是表示加粗的意思，<em>的意思是倾斜。<strong>标签不仅能加粗，它还有强调、加强语气的作用。

（6）图像标签

为了使网页更加美观，我们通常会插入一些图片，下面就是我们插入图片的语法：

<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />

其中，src属性就是表示图片路径；alt属性指定替代文本，表示图像无法显示时替代显示的文本；title属性就是当鼠标移至图片上时显示提示信息；剩下的一个是图片宽度、一个是图片高度；如果不设置那么图片会以默认值显示。

（7）超链接标签

大家在上网时经常会通过超链接查看各个不同的页面或网站，因此超链接<a>标签在网页中极为常用。超链接包含两种，一种是链接地址，即链接目标，可以是某个网址或文件的路径；二是链接文本或图像。基本语法为：

<a href="链接地址" target="目标窗口位置" >链接图像或文本</a>

href表示链接地址的路径，target指定链接在哪个窗口打开，常用的取值有_self(自身窗口)、_blank(新建窗口)。

根据链接地址是指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径。

绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。如：

<a href="http://www.sohu.com/index.html">搜狐</a>

相对路径：相对于当前页面的路径，一般指向本站点内的文件，如：

<a href="login/login.htm" >登录</a>

表示链接地址为当前页面所在路径的login目录下的login.htm页面。

另外，站内使用相对路径时常用到两个特殊符号：“…/”表示当前目录的上级目录，“…/…/”表示当前目录的上上级目录。

超链接的应用场合

i.页面间链接

页面链接就是从一个页面链接到另外一个页面，用于网站导航。如：

<a href="index.html" target="_blank">在线学习平台</a>		//链接到一个新窗口

ii.锚链接

锚链接用于目标页内容很多，需定位到目标页内容中的某个具体位置时，也就是从A页面的甲位置跳到本页中的乙位置。在页面的甲位置语法如下：

<a href="#marker">当前位置甲</a>

在页面的乙位置语法如下：

<a name="marker">目标位置乙</a>

iii.功能性链接

功能性链接就是在页面中调用其他程序功能，如电子邮件、QQ、MSN等。如：

<a href="mailto:bdqnWebmaster@bdqn.cn" >联系我们</a>

注释：

无论是在写什么代码，我们都需要适当的添加一些注释，以便于大家都能看懂，HTML也不例外，在HTML中，写注释的语句是：<!–注释内容–>在HTML中，注释会自动变成灰色，而且不显示在网页中。

当然，在某些时候我们也需要导入一些特殊符号，那这些特殊符号怎么引入呢？下面就是一些常用的特殊符号及其对应的字符实体：

特殊符号	字符实体
空格	&nbsp；
大于号（>）	&gt；
小于号(<)	&lt；
引号（“）	&quot；
版权符号（@）	&copy；

在网页中，我们也会需要用到列表、表格与媒体元素，下面让我们来认识一下它们吧！

列表

1、无序列表

无序列表由<ul>标签和<li>标签组成，使用<ul>作为无序列表的声明，使用<li>标签作为每个列表项的起始，语法为：

<ul>		//无序列表
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
    <li>第4项</li>
</ul>

遵循W3C标准，<ul>标签里面只能嵌套<li>标签，不能嵌套其他标签。下面介绍一个示例：

<body>	
		<h3>热搜</h3>		//标题
		<ul>		//无序列表
			<li>范冰冰演藏族女孩</li>
			<li>撞死两个人后自拍</li>
			<li>诗隆甜蜜出游</li>
			<li>一线城市楼市退烧</li>
		</ul>
	</body>

运行结果为：
在这里插入图片描述
无序列表的类型也是可以改变的，只不过它的默认值是实心圆点，现在我们就来对比一下：

<ul type="disc">		//无序列表，样式1
			<li>范冰冰演藏族女孩</li>
		</ul>
		<ul type="circle">		//无序列表，样式2
			<li>撞死两个人后自拍</li>
		</ul>
		<ul type="square">		//无序列表，样式3
			<li>诗隆甜蜜出游</li>
			<li>一线城市楼市退烧</li>
		</ul>

运行结果为：
在这里插入图片描述
好了，现在我们来聊聊无序列表的特性：

（1）没有顺序，每个<li>标签独占一行；

（2）默认<li>标签项前面有个实心小圆点；

（3）一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。

2、有序列表

无序列表由<ol>标签和<li>标签组成，使用<ol>作为无序列表的声明，使用<li>标签作为每个列表项的起始，语法为：

<ol>		//有序列表
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
    <li>第4项</li>
</ol>

有序列表和无序列表类似，也有很多的类型，下面就来一个示例：

<h1>ol有序列表样式</h1>		//标题
		<ol type="1">		//有序列表，样式1
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ol>
		<ol type="a">		//有序列表，样式2
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ol>
		<ol type="A">		//有序列表，样式3
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ol>
		<ol type="i">		//有序列表，样式3
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ol>
		<ol type="I">		//有序列表，样式4
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ol>

下面我们来看一下效果：
在这里插入图片描述
有序列表的特性是：

（1）有顺序，每个<li>标签独占一行；

（2）默认<li>标签项前面有有顺序标记；

（3）一般用于排序类型列表，如试卷、问卷选项等。

3、自定义列表

自定义列表是一种特殊的列表形式，是标题及列表项的结合，它使用<dl>标签作为列表的开始，使用<dt>标签作为每个列表项的起始，而对于每个列表项的定义则使用<dd>标签来完成。它的语法结构为：

<dl>		//列表声明部分
    <dt>标题1</dt>	//列表标题1
    <dd>第1项</dd>		//标题1的列表项
    <dd>第2项</dd>
    <dt>标题1</dt>	//列表标题2	
    <dd>第1项</dd>		//标题2的列表项
    <dd>第2项</dd>
</dl>

下面我们就来写一个示例：

<h1>定义列表样式</h1>		//文章标题
			<dl >			//列表声明
			<dt>服装</dt>			//标题1
			<dd>衣服</dd>				//标题1的列表项
			<dd>裤子</dd>
			<dd>裙子</dd>

			<dt>美食</dt>			//标题2
			<dd>火锅</dd>				//标题2的列表项
			<dd>烧烤</dd>
			<dd>甜品</dd>
			</dl>

效果图为：
在这里插入图片描述
定义列表的特性：

（1）没有顺序，每个<dt>、<dd>标签独占一行；

（2）默认没有标记；

（3）一般用于（一个标题下有一个或多个列表项）*n的情况。

表格

表格是由指定数目的行和列组成的，单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格。表格的基本语法是：

<table>
    <tr>		//第一行
    	<th>第一个单元格的内容</th>		//标题单元格
        <th>第二个单元格的内容</th>
    </tr>
     <tr>		//第二行
    	<td>第一个单元格的内容</td>		//标题以外的单元格内容
        <td>第二个单元格的内容</td>
    </tr>
</table>

下面我们就来具体实现一下：

<table border="1">		//表格边框1像素
			<thead>			//表头
				<tr>			//第一行，标题行
					<th>星期</th>
					<th>安排</th>
					<th>日期</th>
				</tr>
			</thead>
			<tbody>		//表身
				<tr>
					<td>星期一</td>
					<td>学习</td>
					<td>9月5日</td>
				</tr>
				<tr>
					<td>星期二</td>
					<td>休息</td>
					<td>9月6日</td>
				</tr>
				<tr>
					<td>星期三</td>
					<td>工作</td>
					<td>9月7日</td>
				</tr>
			</tbody>
		</table>

运行结果为：
在这里插入图片描述
如上所示，为了更好的区分表头与表身，我们通常会加上<thead>和<tbody>标签，不过不写也没关系，只是为了更方便检查代码。

表格的跨行与跨列

跨行指的是单元格在垂直方向上的合并，语法如下：

<table>
    <tr>
    	<td rowspan="所跨行数">单元格内容</td>
    </tr>
</table>

row为行的意思，rowspan即为跨行。

跨列是指单元格横向合并，语法如下：

<table>
    <tr>
    	<td colspan="所跨列数">单元格内容</td>
    </tr>
</table>

col为列的意思，所以，colspan代表的是跨列。例如：

<table border="1">		//设置表格边框
			<tr>
				<td colspan="3">学生成绩</td>		//设置单元格的跨列
			</tr>
			<tr>
				<td rowspan="2">张三</td>			//单元格的跨行
				<td>语文</td>
				<td>98</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
			<tr>
				<td rowspan="2">李四</td>		//单元格的跨行
				<td>语文</td>
				<td>88</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>91</td>
			</tr>
		</table>

运行效果为：
在这里插入图片描述

媒体元素

1、视频元素

HTML5中video元素是用来播放视频文件的，支持Ogg、MPEG4、WebM等视频格式，它的语法是：

<video src="视频路径" controls="controls"></video>

其中，src属性用于指定要播放的视频文件的路径，controls用于提供播放、暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度。我们在使用这个标签时只能链接一个路径，当并不是所有浏览器都支持同一种video格式，所以我们就需要链接多个不同的格式的video元素，浏览器将自动识别第一个支持的video播放。如：

<video controls>		//声明video元素
			<source src="../img/video.webm"/>		//链接一种video格式
			<source src="../img/video.mp4"/>		//链接第二种video格式
			你的浏览器不支持video标签
		</video>

在video元素中必须指定controls元素来实现播放，如果不加这个元素，则无法直接播放视频，当我们想要视频自动播放时，我们也可以加上autoplay属性。

2、音频元素

HTML5中的audio元素是用来播放音频插件的，支持Ogg、MP3、WAV等音频格式，它的基本语法是：

<audio src="音频路径" controls="controls"></audio>

其实它和视频元素大同小异，它也可以同时引用音频的多种格式，语法和视频元素的一样，这里就不在赘述。

结构元素

一个网页要想美观，仅仅把内容堆叠上去是不够的，它是需要有规律的布局、排列的，那么我们就来了解一下HTML5的结构元素：

元素名	描述
header	标题头部区域的内容
footer	标记脚部区域的内容
section	Web页面中的一块独立的区域
article	独立的文章内容
aside	侧边栏
nav	导航栏

<iframe>框架

<iframe src="引用页面地址" name="框架标识名" ……>

</iframe>

例如：

<body>
	<iframe src="shi1.html" width="500px" height="236px" name="firstPage"/>
</body>

运行效果为：
在这里插入图片描述

表单

在HTML5中，使用<form>来创建表单，其他表单标签要在它的范围内才有效，它有常用的两个属性，如下所示：

属性	说明
action	服务器上处理表单的输出程序，值可以为空或者网页地址
method	告诉浏览器如何将数据发送给服务器，它的值可以是post或get

下面我们来制作一个最基本的表单：

<form method="post" action="result.html">		//创建表单
			<p>名字：<input name="name" type="text"/></p>		//创建文本框，输入用户的名字
			<p>密码：<input name="pass" type="password"/></p>		//创建密码框
			<p>
			<input type="submit" name="Button" value="提交" />		//提交按钮
			<input type="reset" name="Reset" value="重填" />			//重置按钮
			</p>
		</form>

输出效果为：
在这里插入图片描述

<input>标签

有了表单元素，表单才会有意义，那么如何在表单添加表单元素呢？这里我们就要用到<input>标签了。

<input>标签的常用属性有：

属性	说明
type	指定表单的类型，可用表单类型有多种(后面介绍)，默认为text
name	指定表单的名称
value	指定表单元素的初始值
size	指定表单的初始宽度
maxlength	指定在text或password框中可输入的最大字符数
checked	指定按钮默认被选中

1、文本框

在表单中，最常见的就是文本框（text），它用于输入单行文本，若要插入文本框，将type属性设为text类型就可以了，如：

<input type="text" value="" name="fname"/>

2、密码框

在一些特殊情况下，用户希望输入的数据被处理，以免他人看到，如密码。这时候使用文本框无法满足要求，就需要使用密码框了。设置了type属性为password后，在密码框输入的字符全都以黑色实心的圆点来显示，从而实现对数据的处理。如：

<input type=password" value="" name="pass" size="22"/>

3、单选按钮

单选按钮用于一组相互排斥的值，组中的每个单选按钮应具有相同的名称，用户一次只能选中一个单选按钮，如：

<input type="radio" value="男" name="sex"/>男
<input type="radio" value="女" name="sex"/>女

4、复选框

复选框与单选按钮相似，只不过，复选框允许用户选择多个选项，复选框的命名可以有各自不同的名称，如：

<form method="post" action="">		//定义表单
			爱好：
			<input type="checkbox" name="interest" value="sports" />运动
			<input type="checkbox" name="interest" value="talk" />聊天
			<input type="checkbox" name="interest" value="play" />玩游戏
		</form>

运行结果为：

在这里插入图片描述

5、按钮

按钮在表单中经常用到，在HTML5中按钮分三种，分别是：普通按钮（button）、提交按钮（submit）、重置按钮（reset）。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填的信息。如：

<form method="post" action="">		//创建表单
			<p>用户名：<input name="name" type="text"/></p>			//文本框
			<p>密码：<input name="pass" type="password"/></p>		//密码框
			<p>
				<input type="reset" name="butRerset" value="reset按钮" />		//重置按钮
				<input type="submit" name="butSubmit" value="submit按钮" />	//提交按钮
				<input type="button" name="butButton" value="button按钮" onclick="alert(this.value)"/>												//普通按钮
			</p>
		</form>

运行结果为：
在这里插入图片描述

6、文件域

文件域的作用是实现文件的选择，它通常应用于文件上传的操作，如选择需要上传的文本、图片等。如：

<form action="" method="post" enctype="multipart/form-data">		
    //创建表单，enctype属性必须写，否则上传不了文件
			<p><input type="file" name="files" /><br/>
			<input type="submit" name="upload" value="上传" /></p>
		</form>

文件域在不同浏览器显示效果不一样，但是功能都是一样的，如果想要在不同浏览器显示的效果都一样，可以使用CSS样式进行修改。

7、邮箱

email类型是一种专门用于输入Email地址的文本框，与上面不同的是email在提交表单的时候会自动验证email文本框的值，如果不是一个有效的邮箱地址，则该输入不允许提交表单。如：

<form action="" method="post">		//创建表单
			<p>
				邮箱：
				<input type="email" name="email" />		//邮箱类型
			</p>
			<input type="submit" />
		</form>

8、数字

number类型提供用于输入数字的文本框，我们还可以对所接收的数字进行限制，包括规定允许的最大值和最小值，合法的数字间隔或默认值等。如：

<form action="#" method="post">		//创建表单
			<p>
				请输入数字：
				<input type="number" name="num" min="0" max="100" step="10" />//number类型
			</p> 
			<input type="submit"/>
		</form>

9、滑块

range类型提供用于输入包含一定范围内的数字值的文本框，在网页中显示为滑动条，我们还可以对所接收的数字进行限制，包括规定允许的最大值、最小值、合法数字间隔或默认值等，它和number类型大同小异。如：

<form action="#" method="post">			//创建表单
			<p>
				请输入数字：
				<input type="range"  name="range1" min="0" max="10" step="2"/>//range类型
			</p>
			<input type="submit" />
		</form>

10、搜索框

search类型用于提供输入搜索关键词的文本框，当在搜索框输入内容之后，在搜索框的右边就会出现一个“×”，单击“×”按钮就可以清除已经输入的内容。如：

<form action="#" method="post">		//创建表单
			<p>
				请输入搜索的关键词：
				<input type="search" name="sousuo" />
				<input type="submit" value="Go" />
			</p>
		</form>

运行效果为：
在这里插入图片描述

11、设置表单的隐藏域

将type属性设置为hidden隐藏类型即可创建一个隐藏域，例如，在登录页中使用隐藏域保存用户的信息，代码如下：

<form action="" method="get">			//创建表单
			<p>用户名：<input name="name" type="text"/></p>
			<p>密码：<input name="pass" type="password"/></p>
			<p><input type="submit" value="提交"/></p>
			<p><input type="hidden" value="666" name="userid"/></p>		//隐藏域
		</form>

input元素中email类型、url类型、number类型都有自动验证输入是否合法的功能。

列表框

列表框的目的主要是使用户快速、方便、正确地选择一些选项，并且节省页面时间。它是通过<select>标签和<option>标签来实现的，每个选项由一个<option>标签表示，<select>标签至少包含一个<option>标签。它的默认选中属性是selected，如果不写，就把第一个选项当做默认值。如：

<form method="post" action="">			//声明表单
			出生日期：
			<input type="text" name="byear" value="yyyy" size="4" maxlength="4" />年
			<select name="bmon">		//调用列表框
				<option value="">[选择月份]</option>		//列表框的每个选项都需要独占一行
				<option value="1">一月</option>
				<option value="2">二月</option>
				<option value="3">三月</option>
				<option value="4">四月</option>
				<option value="5">五月</option>
				<option value="6">六月</option>
				<option value="7">七月</option>
				<option value="8">八月</option>
				<option value="9">九月</option>
				<option value="10">十月</option>
				<option value="11">十一月</option>
				<option value="12">十二月</option>
			</select>月
			<input type="text" name="bday" value="dd" size="2" maxlength="2" />日
		</form>

运行结果为：

在这里插入图片描述

多行文本域

当在网页中需要输入两行或者两行以上的文本时，怎么办呢？显然，文本框是不能满足的，那么我们就需要使用多行文本框<textarea>了。如：

<textarea name="textarea" cols="显示的列数" rows="显示的行数">
</textarea>

在多行文本框中不能用value属性给它赋初值。

表单的只读与禁用

只读：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示，例如：注册或交易协议、商品价格等；

禁用：只有满足某个条件后，才能选用某项功能，例如：只有用户同意注册协议后，才允许单击“注册”按钮，播放器控件在播放状态时，不能再单击“播放”按钮等。如：

<form action="" method="get">		//创建表单
			<p>用户名：<input name="name" type="text" value="张三" readonly/>"</p>	//只读
			<p>密码：<input name="pass" type="password"/></p>
			<p><input type="submit" value="修改" disabled/></p>					//禁用
		</form>

表单元素的标注

当我们想要单击文本后，自动选中相应的表单元素时，我们可以使用<label>标签，它使用for属性来指定当鼠标单击标注文本时，焦点对应表单元素，如：

<form method="post" action="#">		//创建表单
			请选择性别：
			<label for="male">男</label>		//单选按钮 “男” 的标注
			<input type="radio" name="gender" id="male" />
			<label for="male">女</label>		//单选按钮 “女” 的标注
			<input type="radio" name="gender" id="female" />
		</form>

对于以上表单元素而言，name属性和id属性都是必需的，因为name属性由表单负责处理，而id属性是给标签<label>标签和表单元素进行关联使用的。所以在表单元素标注了的情况下，我们可以直接单击与单选按钮对应的文本，即可选中。

表单的验证

1、placeholder

placeholder属性用于为input类型的文本框输出提示语，当输入为空时显示，当在文本框写入内容时消失，如：

<form action="#" method="post">		//创建表单
			<p>
				请输入搜索的关键词：
				<input type="search" name="sousuo" placeholder="请输入要搜索的关键字" />
				<input type="submit" value="Go" />
			</p>
		</form>

输出为：

在这里插入图片描述

2、required

required属性用于规定文本框填写内容不能为空，否则不允许提交表单，如：

<form action="#" method="post">		//创建表单
			<p>
				用户名：
				<input type="text" name="username" required />		//非空验证
				<input type="submit" value="提交" />
			</p>
		</form>

3、pattern

pattern属性用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配，用户输入的内容必须符合正则表达式所指的规则。如：

<form action="#" method="post">		//创建表单
			<p>
				电话号码：
				<input type="text" name="tel" pattern="^1[358]\d(9)" />	//正则表达式验证
				*以13、15、18开头的11位数字
				<br/>
				<input type="submit" value=提交" />
			</p>
		</form>

好了，今天的分享就到这里了，我们下次再聊。

馨梓～

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
HTML语言入门

HTML5语言入门在接触HTML时，很多人可能会有一个疑问到底什么是HTML呢？HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。HTML在开发时遵循的是W3C标准，下面我们就来了解一下HTML。HTML的发展史（1）超文本标记语言——1993年6月发布；（2）HTML2.0——1995年11月发布；（3）HTML3.2——1...
复制链接

扫一扫