HTML基础

HTML

HTML 是什么：
HTML（超文本标记语言）是用于在Internet上显示Web页面的主要标记语言。网页由HTML组成，用于通过Web浏览器显示文本，图像或其他资源。所有 HTML 都是纯文本，这意味着它不是编译的，可以由人类阅读。HTML文件的文件扩展名为.htm或.html。

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

网页组成元素包括：文字、图片、链接、视频、音频等…

HTML的基本结构
其中<!DOCTYPE html>是文档类型用于告诉使用的html版本 这里使用的是html5版本
<!DOCTYPE >不是一个标签(没有结束符)而是一种声明
<html lang="en"> 文字的显示形式(可以不写)：中文lang="zh"/英文lang="en"
<meta charset="UTF-8">表示使用的字符集 【编码方式】
<html></html>是根标签 表示的是整个网页
<html></html>中必须嵌套<head></head>头标签以及<body><body/>主体标签
<title></title>为标题标签，代表了网页的名字
<body><body/>主体标签中的内容会显示在网页中

HTML的基本模板：
<!DOCTYPE html>                         <!--文档类型-->
<html lang="en">                        <!--根标签-->
<head>                                  <!--网页头部-->
    <meta charset="UTF-8">              <!--国际编码 UTF-8-->
    <title>网页标题</title>               <!--网页标题-->
</head>
<body>                                   <!--网页主体  可视化区域-->

</body>
</html>

常用的标签

HTML标签：

超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。

由尖括号包裹单词构成

HTML标签的大小写无关的，例如“主体”跟表示的意思是一样的，推荐使用小写。

标签可以嵌套，但不能交叉嵌套

标签分类：

双标签：<标签名></标签名>
单标签：<标签名 />
其中 / 代表了关闭符号，单标签无法在内部插入其他标签或文字，只能定义其自身属性

标签关系：

嵌套关系
并列关系

排版标签

描述	标签
标题标签	`<h1></h1>to<h6></h6>`
段落标签	`<p></p>`
水平线标签	`<hr />`
换行标签	`<br />`
网页布局	`<div></div>和<span></span>`

标题标签

1	`<h1><h2>...<h6>`

<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>七级标题</h7>

可以发现最小只有六级标题，不存在七级标题
标题前后会有空行，并且会自动换行

段落标签

<p></p>

<!--段落标签-->
段落1
段落2
<p>段落1</p>
段落2

段落标签用于定义一个段落，不在标签内部的将会另起一段
浏览器会自动地在段落的前后添加空行。
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。

水平线标签

1	`<hr /> <!--水平线标签-->`

换行标签

<!--换行标签-->
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />


<!--换行和p标签对比一下-->
<hr />    <!--水平线标签-->
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
注意：要区分<br />和<p></p>所带来的不同，分段会在段落的前后添加空行。而使用换行标签不会有多余的空行。不能用<p></p>代替<br />

HTML 块元素与内联元素

HTML 块元素

块元素显示时，通常会以新行开始
如：<h1>、<p>、<ul>
独占一行，排斥其他元素跟其位于同一行，包括块元素和内联元素
块元素内部可以容纳其他块元素或内联元素

HTML 内联元素

内联元素通常不会以新行开始
如：<strong>、<a>、<img>
可以与其他内联元素位于同一行
内联元素内部可以容纳内联元素，不可以容纳块元素（链接<a></a>标签除外）

HTML `<div>`元素

<div></div> division 分隔分区
该元素也被称为块元素，其主要是组合HTML元素的容器

代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<h3>床前明月光</h3>
<p>床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。</p>

<!--left左,right右,center居中,justify排版-->
<div style="color:#00FF00" align="justify">
  <h3>床前明月光</h3>
  <p>床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。</p>
</div>
</html>

HTML `<span>`元素

1 2	`<span></span> 跨度、跨距该元素是内联元素，可作为文本的容器`

<div></div>、<span></span> 这两个标签主要用于网页布局，配合CSS样式使用。


<span> 标签被用来组合文档中的行内元素。简单来说就是用于对文档中的行内元素进行组合。
代码：
<body>
<h3>span标签演示</h3>
<p>html中<span style="color: crimson">span标签</span>的详细介绍</p>
</body>

文本格式化标签

描述	标签
粗体	、
斜体	、emphasized强调
删除线	、
下划线	、
上标字
下标字
预格式文本

1
2
3

注意:
对于粗体、斜体、删除线以及下划线给了两种标签显示，前者只有使用没有强调的意思。
后者的语义更强烈，为XHTML推荐的写法！

粗体、斜体、删除线、下划线

	<!--文本格式化标签-->
	<b>这是粗体</b>  <br />
	<strong>这也是粗体</strong> <br />
#<b>标签为了达到加粗样式而加粗，<strong>标签为了标明文本重点而加粗。两者的实现效果和用法本质上没有区别，且至今所有浏览器都支持这两者加粗功能。大家可以根据需要选择一种标签使用，

	<i>这是斜体</i> <br />
	<em>这也是斜体</em> <br />

	<s>带有删除线</s> <br />
	<del>也带有删除线</del> <br />

	<u>带有下划线</u> <br />
	<ins>也带有下划线</ins> <br />

上下标字

1
2
3

<!--文本格式化标签-->
文本<sup>上标</sup> <br />
文本<sub>下标</sub> <br />

预格式文本

	<!--文本格式化标签-->
	<pre>
    床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。
	</pre>

    <!--实际用途-->
	<p>标题：</p>
	<pre>
    床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。
	</pre>

预格式文本可以保留编辑器中的多空格以及换行等格式。
预格式文本中的空格等格式是从与<body>主体标签对齐的线开始的！！

HTML 字符实体

为了显示源代码，不进行解析【小于号（<）和大于号（>）浏览器会误认为它们是标签】，需要在 HTML 源代码中使用字符实体（character entities）来正确地显示预留字符。

描述				字符实体
空格				&nbsp;
小于号<			&lt;
大于号>			&gt;
和&				&amp;
引号‘’			&quot;
版权©				&copy;
乘号×				&times;
除号÷				&divide;

代码：
    <p>注意，这是测试字符实体</p>
	下面用到特殊字符：<br/>
	空格&nbsp;<br/>
	小于号&lt;<br/>
	大于号&gt;<br/>
	和&amp;<br/>
	引号&quot;<br/>
	版权&copy;<br/>
	乘号&times;<br/>
	除号&divide;<br/>
    &lt;p&gt;这是一个伪装的p标签&lt;p&gt; <br/>

HTML 元素及属性

HTML 元素

1	`HTML 元素指的是从开始标签到结束标签的所有代码`

1
2
3

开始标签【开放标签】			元素内容				结束标签【闭合标签】
<p>						这是一个段落						</p>
<br />

1 2	`没有元素内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的 <br />就是没有关闭标签的空元素`

HTML 属性

<标签名 属性1=“属性1” 属性2=“属性2” ...>内容</标签名>

大多数 HTML 元素可拥有属性，属性提供了有关 HTML 元素的更多的信息。
属性总是以键/值对的形式出现key="value"
属性总是在 HTML 元素的开始标签中规定
新版本的 (X)HTML 要求使用小写属性和属性值
属性值应该始终被包括在引号内。双引号是最常用的，属性值本身就含有双引号，那么包含在单引号内。

常用的标签属性:
<h1>：align属性-对齐方式 <h1 align="center">居中对齐
<body>：bgcolor属性-背景颜色 <body bgcolor="yellow">页面整个背景为黄色
<a>： target属性- 目标窗口弹出方式 <a href="http://www.baidu.com" target="_blank">baidu</a>新窗口弹出
<hr />：width属性- 水平线的长度 <hr width="300" />水平线在中间，长度为300

通用属性:
class：规定元素的类名
id：规定元素唯一ID
style：规定元素的行内样式
写在<head></head>中，通过type引入css样式 <style type="text/css"></style>
title：规定元素的额外信息

图像标签img

单标签

<img src="图片路径" />

图像路径可以是本地路径，网络上的图像可以右键复制图像地址，也可以是网络路径。
路径可以用绝对路径和相对路径，相对路径中src=“../img/1.jpg”中的../代表上一级目录。

标签属性：
1、src：路径属性
2、alt：图像不显示时的替代文本
3、title：鼠标悬停时的提示文本
4、width：宽 height：高 （只用给一个即可，会自动进行缩放，不添加宽高则显示原图像大小）
5、border：图像边框宽度

<img src="图片路径" alt="替代文本" width="宽"  border="边框宽" title=“鼠标悬停” />


在浏览器无法载入图像时，浏览器将显示替代性的文本而不是图像。

链接标签

<a></a> 锚，可以为网址，图片，目标地址
<a href="https://www.shiguangkey.com/">潭州教育</a>

<!--嵌套玩一下-->
<a href='https://www.baidu.com/'> <img src="123" alt="产学研图标" width="200"  border="20" title=“鼠标悬停” /></a>

创建链接

href：（Hypertext Reference 超文本引用）跳转目标地址
外部链接不能省略http://
内部链接直接链接内部页面名称 <a href="index.html">百度</a>
href="#"没有链接目标，用#代表空链接
href="XXX.exe"/"XXX.zip"点击链接会进行下载或允许

1
2
3

target：目标窗口弹出方式
target="_self" 在当前窗口直接跳转（默认方式）
target="_blank"以新窗口打开

代码：
<a href="https://www.shiguangkey.com/">潭州教育本页面跳转</a>
<a href="https://www.shiguangkey.com/ " target="_blank">潭州教育新窗口跳转</a>

“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
文本、图像、表格、音频、视频都可以添加超链接

创建目录(锚点定位 )

1 2	`1，使用<a href=" #id名">跳转到指定标题的链接</a> 2，使用相同的id名标注需要跳转的位置<h1 id="id名">标题名</h1>`

1 2	`1，使用<a href=" #name名">跳转到文字的链接</a> 2，<a name="name名">文字</a>`

1	`注意:这里的name属性与id是一样的，用 <a name="name名">文字</a>可以为普通文本（非标题）创建链接`

代码：
<h1 id="0">目录</h1>
	<a href="#1">第一节课</a> <br />
	<a href="#2">第二节课</a> <br />
	<a href="#3">第三节课</a> <br />
	<a href="#4">第四节课</a> <br />
	<a href="#5">第五节课</a> <br />
	<a href="#6">第六节课</a> <br />
	<a href="#7">第七节课</a> <br />

	<h3 id="1">课程1</h3>
	<a href="#0">返回顶部</a>

	<h3 id="2">课程2</h3>
	<a href="#0">返回顶部</a>

	<h3 id="3">课程3</h3>
	<a href="#0">返回顶部</a>

	<h3 id="4">课程4</h3>
	<a href="#0">返回顶部</a>

	<h3 id="5">课程5</h3>
	<a href="#0">返回顶部</a>

	<h3 id="6">课程6</h3>
	<a href="#0">返回顶部</a>

	<h3 id="7">课程7</h3>
	<a href="#0">返回顶部</a>

base标签

1 2	`单标签： <base /> 定义页面中所有链接的默认地址或默认目标在<head></head>之间写<base />标签`

属性	描述
`href`	所有相对链接的基准 URL
`target`	所有链接的目标窗口弹出方式

代码：
<head>
	<base href="音乐文件夹" target="_blank" />
</head>
<body>
	<audio src="mp3路径" controls ></audio> <br />
	<p> 在base中已经给定了一个相对地址，这里的音频会在指定路径下寻找。</p>
	<a href="http://www.baidu.com">百度</a> <br />
	<a href="http://www.sina.com">新浪</a>	
	<p>因为在base中设置了target="_blank"，所以这里的链接都会以新窗口打开</p>
</body>

拓展：多媒体标签

1	`<audio></audio> 音频`

属性						描述
src					播放音频的 URL
autoplay			自动播放
controls			播放控件h
loop				无限循环播放
muted				播放默认为静音

总共有三种音频格式，为了浏览器兼容，至少需要做前两个的音频格式的文件

ogg
mp3
wav

第一种：
	<audio src="音乐路径" controls></audio>
	
	
第二种:
	<audio controls autoplay>
		<source src="音乐路径"/>
		<source src="音乐路径">
		您的浏览器不支持html音频播放功能
	</audio>

列表标签

标签			描述
<ul>	unordered list 无序列表
<ol>	ordered list 有序列表
<li>	list 列表项
<dl>	definition list 自定义列表
<dt>	definition term 自定义列表中的列表项
<dd>	definition description 对自定义列表中列表项的描述

无序列表

1	`<ul></ul> & <li></li>`

标签属性:

	type: <ul type="disc"></ul> 实心圆圈
	<ul type="circle"></ul> 空心圆圈
	<ul type="square"></ul> 实心方块

代码：
	<!--无序列表-->
	无序列表：
	<ul>
		<li>列表项1</li>
		<li>列表项2 <br/>
			<img src="图片路径" width="200">
		</li>
		<li>列表项3
			<p>这是一个段落</p>
		</li>
		<li>列表项4<br/>
			<ul>
				<li>子列表项1</li>
				<li>子列表项2</li>
			</ul>
		</li>
		<li><a href="网址" target="_blank">列表项5</a></li>
	</ul>


<ul type="disc"> <li>实心圆圈</li></ul>
<ul type="circle"><li>空心圆圈</li></ul>
<ul type="square"><li>实心方块</li></ul>

<ul type="disc"> <li>实心圆圈<ul type="circle"><li>空心圆圈<ul type="square"><li>实心方块</li></ul></li></ul></li></ul>

1
2
3

<ul>标签里只能放<li>，不能写其他标签，如<p>
<li>标签里面可以使用其余标签。例如列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
默认嵌套列表使用实心圆圈、空心圆圈、实心方块…

有序列表

1	`<ol></ol> & <li></li>`

标签属性:

1，type: 不写type为默认数字列表
<ol type="A"></ol> 字母列表A.B.C.D...
<ol type="a"></ol> 小写字母列表a.b.c.d....
<ol type="I"></ol> 罗马字母列表I.II.III.IV....
<ol type="i"></ol> 小写罗马字母列表i.ii.iii.iv....

2，start：<ol start="10"></ol> 列表项的序列号从10开始

代码：
<!--有序列表-->
	有序列表：
	<ol>
		<li>列表项1</li>
		<li>列表项2 <br/>
			<img src="图片路径" width="200">
		</li>
		<li>列表项3
			<p>这是一个段落</p>
		</li>
		<li>列表项4<br/>
			<ul>
				<li>无序子列表项1</li>
				<li>无序子列表项2</li>
			</ul>
			<ol>
				<li>有序子列表项1</li>
				<li>有序子列表项1</li>
			</ol>
		</li>
		<li><a href="网址" target="_blank">列表项5</a></li>
	</ol>


<ol type="A"><li>字母列表A.B.C.D...</li></ol>
<ol type="a"><li>小写字母列表a.b.c.d....</li></ol>
<ol type="I"><li>罗马字母列表I.II.III.IV....</li></ol>
<ol type="i"><li>小写罗马字母列表i.ii.iii.iv....</li></ol>
<ol start="10"><li>列表项的序列号从10开始</li></ol>

1
2

<ol>标签里只能放<li>，不能写其他标签，如<p>
<li>标签里面可以使用其余标签。例如列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

自定义列表

1	`<dl></dl> & <dt></dt> & <dd></dd>`

1
2

·有序列表和无序列表都是一列项目，而自定义列表不仅仅是一列项目，而是项目及其注释的组合。
·自定义列表以 <dl> 标签开始，自定义列表项以 <dt> 开始，每个自定义列表项的注释以 <dd> 开始。

<!--自定义列表-->
自定义列表：
<dl>
	<dt>列表项1</dt>
	<dd>列表项1的解释1</dd>
	<dd>列表项1的解释2</dd>
	<dt>列表项2</dt>
	<dd>列表项2的解释1</dd>
	<dd>列表项2的解释2</dd>
</dl>

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

表格标签table

表格						描述
<table>					表格
<caption>				表格标题
th						表格的表头
tr						表格的行
td						表格的单元格
thead					表格的页眉
tbody					表格的主体
tfoot					表格的页脚

表格及其属性

1	`<table></table> & <tr></tr> & <td></td>`

不用表格标签来进行网页布局，常用来处理显示表格式数据
HTML表格中没有列，<tr></tr>（table row）代表了表格中的行，<td></td>（table data）代表表格一行中数据单元格中的内容【相当于列】。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

标签属性:

width：表格外边框的宽 height：表格外边框的高 <table width="500" height="300"></table>
border：边框属性，如果不定义边框属性，表格将不显示边框。<table border="1"></table>
align: 对齐方式align=”left”/“right/“/“center” 在<table>中加代表整个表格在页面中的位置
在<tr><td>中加代表单元格中的文字内容在单元格的位置
cellspacing：单元格间距，单元格边框之间的距离以及单元格边框与表格外边框的距离
cellpadding：单元格边距，单元格文字内容与其边框之间的距离
bgcolor：表格背景颜色 bgcolor=”red”，<table>、<tr>、<td>标签中均可以添加
background：表格背景图像 background=”1.png”

<!--表格-->
<table border="1">
    <tr>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
    </tr>
</table>

1 2	`<tr>中只能嵌套<td> <td>中可以容纳所有元素，包含文本、图片、列表、段落、表单、水平线、表格等等`

表头标签及表格标题

1 2	`表头标签 <th></th> 表头便签即是用<th></th>(table head)代替<td></td>，浏览器会把表头显示为粗体居中的文本`

代码:
	<!--表格-->
	<table border="1" width="100" height="90">
		<tr>
			<th>姓名</th> <!--表头标签-->
			<th>性别</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>男</td>
		</tr>
		<tr>
			<td>李四</td>
			<td></td> <!--空单元格-->
		</tr>
	</table>

1 2	`空单元格可以用<td></td> 也可以用<td> </td> 其中 (no-breaking 空格)是一个字符实体`

1 2	`·表格标题 <caption></caption> 表格标题可以随着表格进行移动，并且位于表格上方居中的位置。`

代码：
	<!--表格-->
	标题： <!--非表格标题-->
	<table border="1" width="100" height="90" align="center">
		<caption>信息表2</caption>  <!--表格标题-->
		<tr>
			<th>姓名</th> <!--表头标签-->
			<th>性别</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>男</td>
		</tr>
		<tr>
			<td>李四</td>
			<td></td> <!--空单元格-->
		</tr>
	</table>

表格结构

1
2
3

<thead>、<tbody>、<tfoot>定义表格的页眉、主体、页脚，用于对 HTML 表格中的内容进行分组，方便使用 CSS 使这些元素改变表格的外观。

注意：<thead> 内部必须拥有 <tr> 标签！

代码：
<head>
	<style type="text/css">
		thead {color:green}
		tbody {color:blue;height:50px}
		tfoot {color:red}
	</style>
</head>	
	
<body>                                  <!--网页主体  可视化区域-->
	<!--表格-->
	<table border="1">
		<thead>   <!--页眉-->
    		<tr>
     			 <th>商品</th>  <!--表头标签-->
      			<th>价格</th>
    		</tr>
  		</thead>

  		<tbody>  <!--主体-->
   			 <tr>
      			<td>手机</td>
      			<td>$100</td>
    		</tr>
    		<tr>
      			<td>书</td>
      			<td>$80</td>
    		</tr>
  		</tbody>

  		<tfoot> <!--页脚-->
    		<tr>
     		 <td>总计</td>
      		<td>$180</td>
    		</tr>
  		</tfoot>
	</table>
</body>

1
2
3

<style type="text/css">:
	text是指对象为网页中的文本
	css或是javascript是指当前指定的文本类型...

合并单元格

1
2

跨行合并rowspan rowspan="2"代表跨行合并2个单元格，保留上面的单元格，删除下面的
跨列合并colspan colspan="2"代表跨列合并2个单元格，保留左边的单元格，删除右边的

<!--表格-->
<table border="1">
	<caption>个人信息表</caption> <!--表格标题-->
	<tr align="center">  <!--内容居中对齐-->
		<th>姓名</th> <!--表头标签-->
		<th>性别</th>
		<th colspan="2">电话</th> <!--跨列合并2个单元格-->
	</tr>
	<tr align="center">
		<td>张三</td>
		<td rowspan="2">男</td> <!--跨行合并2个单元格-->
		<td>123</td>
		<td>456</td>
	</tr>
	<tr align="center">
		<td>李四</td>
		<td colspan="2">789</td> <!--跨列合并2个单元格-->
	</tr>
</table>

表单标签

表单包含了:

表单控件（表单元素）
提示信息
表单域

input 控件

<input type=" "/> 单标签
type属性决定了控件的类型

1，文本框：type="text"
2，密码框：type="password"
3，单选框：type="radio" 通过name属性使得同一组控件，只能选择一个
4，复选框：type="checkbox" 也是通过name属性关联一组控件，可进行多选

标签属性checked=“checked”来表示默认选择

按钮组：
	button 普通按钮，通过属性value=" "来设置按钮控件中的显示名称
	submit 提交按钮，具有默认名称为提交，可以通过value进行修改
	reset 重置按钮，具有默认名称为重置
	image 图像按钮，用一个图像作为按钮
	file 文件域，按钮名称为选择文件，不能通过value进行修改

标签属性value=" "来表示input控件中默认文本值
标签属性maxlength来表示控件允许输入的最多字符数

	<!--input控件-->
	用户名：<input type="text" value="请输入用户名"/> <br />
	<!--用户名：<input type="text" placeholder="请输入用户名"/> <br />-->
	密　码：<input type="password" /> <!--i用全角中文输入空格-->  <br />
	性　别：<input type="radio" name="sex" checked="checked" />女
			<input type="radio" name="sex" />男 <br />
	爱　好：<input type="checkbox" name="hobby" checked="checked"/>唱歌
			<input type="checkbox" name="hobby" checked="checked"/>跳舞
			<input type="checkbox" name="hobby"/>RAP
			<input type="checkbox" name="hobby"/>敲代码 <br />
	上传头像：<input type="file" /> <br />
	<hr />

<!--<a href="https://www.baidu.com/">-->
	<input type="image"  src="(%60D%6011Y08QP~U2W%25%5D5E9S%5BK.png" width="88"/> <br />
<!--</a>-->
	<input type="submit" value="提交表单" />
	<input type="reset" value="重置表单" /

label标签

与<input />标签搭配，可以实现点击提示信息，自动定位焦点到input控件。

1
2

一个表单控件，直接用<label></label>包裹<input />控件
多个表单控件，需要定位到特定某个控件，通过<label>标签属性for=“id名”和<input>标签属性id=“id名”的格式进行

	<!--input控件-->
	用户名1：<input type="text" /> <br />
	<!--label标签-->
	<label>用户名2：<input type="text" /> <br /></label>
	<label for="3">
	文本框1：<input type="text" id="1"/> <br />
	文本框2：<input type="text" id="2"/> <br />
	文本框3：<input type="text" id="3"/> <br />
	文本框4：<input type="text" id="4"/> <br />
	</label>
	
点击‘用户名2’后，鼠标光标会自动定位焦点到后面的文本框。
点击‘文本框1’～‘文本框4’，鼠标光标都会定位焦点到‘文本框3‘的文本框

3、textarea控件（文本域）

1
2

与前面文本框只能输入单行字段不同，<textarea> 元素定义多行输入字段（文本域）。
不能用value属性建立文本域中显示的初始值，多行文本框的默认文字内容写在<textarea></textarea>之间就可以了

	<!--textarea控件-->
	请输入留言：<br/>
	<textarea  rows="20" cols="20">
	留言一
		留言二
			留言三
	</textarea>
	</label>
	
rows：行
cols：列

注意：在文本域中的文字保留了空格以及换行，并且会自动换行！！
文本域中可以自己键入文本。

4、下拉菜单 select

1 2	`<select></select>控件 <option></option>`

代码：
<select>
	<option  style='display: none'></option>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
</select>

’选项1‘默认会显示在下拉菜单中，如果要修改默认项，通过<option>的标签属性selected="selected"实现。
	<!--select控件-->
	住址：
	<select>
	<option>北京</option>
	<option>上海</option>
	<option selected="selected">广州</option>

5、表单域 form

<form action="xxx.php"(提交的后台) method="GET"/"POST"（提交的方式） name="表单名称">
	<input />
	...
<form>

1，action：定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。通过xxx.php指定了某个服务器脚本来处理被提交表单。
如果省略 action属性，则action 会被设置为当前页面。

2，method 属性规定在提交表单时所用的 HTTP 方法（GET默认方法 或 POST）
GET：表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。使用GET时，表单数据在页面地址栏中是可见的。最适合少量数据的提交。浏览器会设定容量限制。

3,POST：表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

注意：如果要正确地被提交，每个输入字段必须设置一个 name 属性

代码：
<form>
		<fieldset>
			<legend>个人信息</legend>
			姓名：<input type="text" /> <br />
			邮箱：<input type="email" /> <br/>
			手机：<input type="tel"> <br />
			出生年月:<input type="month" /> <br />
		</fieldset>
		<fieldset>
			<legend>时间信息</legend>
			时间：<input type="time"> <br />
			年月日： <input type="date"> <br/>
			星期年：<input type="week"> <br/>
		</fieldset>
		颜色：<input type="color"> <br/>
		滑块：<input type="range"> <br/>
		搜索框：<input type="search"> <br/>
		<br />
			<input type="submit"> <input type="reset">
	</form>
	

fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
legend 元素为 fieldset 元素定义标题（caption）。

#frontend

HTML基础

http://auspiow.github.io/blog/2025/01/01/HTML基础/

作者

Auspiow

发布于

2025年1月1日

许可协议

JavaScript基础1 上一篇

HTML基础

HTML

常用的标签

排版标签

标题标签

段落标签

水平线标签

换行标签

HTML 块元素与内联元素

HTML 块元素

HTML 内联元素

HTML <div>元素

HTML <span>元素

文本格式化标签

粗体、斜体、删除线、下划线

上下标字

预格式文本

HTML 字符实体

HTML 元素及属性

HTML 元素

HTML 属性

图像标签img

单标签

链接标签

创建链接

创建目录(锚点定位 )

base标签

拓展：多媒体标签

列表标签

无序列表

有序列表

自定义列表

表格标签table

表格及其属性

标签属性:

表头标签及表格标题

表格结构

合并单元格

表单标签

input 控件

label标签

3、textarea控件（文本域）

4、下拉菜单 select

5、表单域 form

HTML `<div>`元素

HTML `<span>`元素