HTML

最新推荐文章于 2025-08-16 06:13:53 发布

w7u

最新推荐文章于 2025-08-16 06:13:53 发布

阅读量531

点赞数

CC 4.0 BY-SA版权

文章标签： html 标签框架表单

本文链接：https://blog.youkuaiyun.com/Ludwig_/article/details/70897386

本文介绍了HTML的基础概念、标签使用规范及其在网页布局中的应用。包括文件结构、超链接、框架、表单等内容，旨在帮助读者掌握HTML核心知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【内容简介】

HTML基本标签

uHtml介绍

u文件标签

u排版标签

u块标签

u字体标签

u清单标签

u图形标签

u链接标签

u表格标签

HTML表单标签

uForm标签

uInput种类

uSelect与option标签

uTextarea标签

HTML框架及特殊字符

u框架标签

u其它标签与特殊字符

【第一阶段】

【学习目标】

1. 了解html常用标签

2. 掌握html中的表格标签

3. 理解综合案例

4. 掌握超链接标签

【内容：html基本标签】

Html介绍

1. 什么是html?

Html是用来描述网页的一种语言。

l HTML 指的是超文本标记语言 (Hyper Text Markup Language)

l HTML 不是一种编程语言，而是一种标记语言 (markup language)

l 标记语言是一套标记标签 (markup tag)

l HTML 使用标记标签来描述网页

2. Html的作用？

Web浏览器的作用是读取html文档，并以网页的形式显示它们。浏览器不会显示html标签，而是使用标签来解释页面上的内容.

简单说，html就是用于展示信息的。

3. Html书写规范

a) Html标签

HTML 标记标签通常被称为 HTML标签 (HTML tag)。

l HTML 标签是由尖括号包围的关键词，比如 <html>

l HTML 标签通常是成对出现的，比如 <b>和 </b>

l 标签对中的第一个标签是开始标签，第二个标签是结束标签

l 绝大多数的标签都具有属性,建议属性值使用引号引起。例如:<body text=”red”>

l 大多数标签是可以嵌套的

b) Html创建

Html文件可以直接使用文本编辑器来创建，保存时，后缀名为html或htm

整个文件是在<html>与</html>标签之间在<html>标签间有<head>与<body>子标签。

例如:

c) 空的html标签

l 没有内容的 HTML元素被称为空元素。空元素是在开始标签中关闭的。

l <br> 就是没有关闭标签的空元素（<br>标签定义换行）。

l 在开始标签中添加斜杠，比如 <br/>，是关闭空元素的正确方法，HTML、XHTML和 XML 都接受这种方式。

l 即使 <br>在所有浏览器中都是有效的，但使用<br />其实是更长远的保障。

d) Html大小写不敏感

HTML 标签对大小写不敏感：<P>等同于<p>。许多网站都使用大写的 HTML标签。

W3School 使用的是小写标签，因为万维网联盟（W3C）在HTML 4中推荐使用小写，而在未来 (X)HTML版本中强制使用小写

文件标签

1. html标签

整个文件都处于<html>标签中.

<HTML>用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。

在HTML文件有两部分<head>与<body>

2. head标签

<head>用于加载一些重要的资讯

它的内容不会被显示，只有<body>的内容才会被显示

3. title标签

<title>只能出现于<head>中。

它代表的是标题

4. body标签

<body>中的内容会被显示。

常用属性:

n text:用于设定文字颜色

n background：用于设定背景图片

n bgcolor:用于设定背景色

5. 关于html中颜色取值

颜色由红色、绿色、蓝色混合而成

有三种取取值方式:

1.rgb(0,0,0) 值是在0-255之间

2.#000000 #ff0000 #00ff00 #0000ff #ffffff

3.red green blue

排版标签

1. 注释

在html中注释是

在html中使用注释的目的与java中一样。

2. p标签

<p>标签是段落标签，可以将html文档分割为若干段落。浏览器会自动在段落前后添加空格。

<p>标签常用属性

l align:用于设定对齐方式可选值 left right center 默认值是left.

3. br标签

<br>标签是换行标签。

因为浏览器会自动的忽略空白与换行，因此<br>标签成为了我们最常用的标签。

4. hr标签

<hr>标签会生成一条水平线。

常用属性:

l align:设置水平线对齐方式可选值 left right center

l size:设置水平线厚度以像素为单位。默认为2

l width:设置水平线长度.可以是绝对值或相对值。默认为100%

l color:设置水平线颜色.默认为黑色

5. 关于html中数值单位

Html的数值默认单位为像素(px).

在有些位置可以使用百分比来设置。

例如:

<hr size=’3’>这个就代表水平线厚席为3px.

<hr width=’30%’>这个就代表水平线长度为总长度的30%.

块标签

1. div标签

用于在文档中设定一个块区域。

常用属性：

align:left center right

2. span标签

用于在行内设定一个块区域。

Html中绝大多数元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始。例如 div p等

内联元素在浏览器显示时，通常不会以新行来开始。span

字体标签

1. font

<font>标签用于规定文本的字体，大小，颜色。

常用属性:

n face:规定文本的字体

n size:规定文本的大小

n color:规定文本的颜色

2. h1-h6

<h1>-<h6>标签用于定义标题.

<h1>最大标题

<h6>最小标题

列表标签

1. ul

<ul>标签表示的是一个无序列表。

常用属性:

l type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc

2. li

<li>标签表示的是一个列表项

常用属性:

l type:这个属性只适用于无序列表，用于设定项目符号，默认值为disc

l value:这个属性只适用于有序列表，用于设定列表的项目数字

3. ol

<ol>表示的是一个有序列表。

常用属性:

l type:这个属性规定列表中使用的标记类型。可取值1 A a I i.

l start:这个属性规定列表的起始值

图形标签

1. img

<img>是一个图片标签，用于在页面上引入图片.

常用属性：

l src:用于设定要引入的图片的url

l alt:用于设定图像的替代文字

l width:用于设定图片的宽度

l height:用于设定图片的高度

l border：图片边框厚度

l align:用于设定图片的文字的对齐方式

链接标签

1. a

<a>标签用于定义超连接，用于从一个页面链接到另一个页面。

常用属性:

l href:用于设定链接指向页面的url.

l name:用于设定锚的名称

l target:用于设定在何处打开链接页面。

表格标签

1. table

<table>标签用于定义表格

常用属性:

l align:用于设定表格的对齐方式

l bgcolor:用于设定表格的背景颜色。

l border:用于设定表格边框的宽度

l width:用于规定表格的宽度。

2. tr

<tr>标签用于定义表格的行,包含一个或多个th或td元素。

<tr>常用属性:

align:用于设定表格中行的内容对齐方式。

bgcolor:用于设定表格中行的背景颜色。

3. td

<td>标签用于定义表格单元

td元素中的文本一般显示为正常字体且左对齐。

<td>常用属性:

l align:用于设定单元格内容的对齐方式。

l bgcolor:用于设定单元格背景颜色。

l height:用于设定单元格的高度。

l width:用于设定单元格的宽度。

l colspan:用于设定列合并

l rowspan:用于设定行合并。

4. caption

<caption>用于定义表格标题

<caption>标签必须紧随<table>标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。

5. th

<th>标签用于定义表格的表头，<th>内部的文本通常呈现为居中加粗文本。

Html表格中有两种类型的单元格：

表头单元格th:包含表头信息。

标准单元格td:包含数据。

6. thead

<thead>标签用于定义表格的页眉

<thead>标签用于组合HTML表格的表头内容。

<thead>元素应该与<tbody>和<tfoot>元素结合起来使用。

注意:<thead>内部必须有<tr>标签。

7. tbody

<tbody>标签用于定义表格的主体

<tbody>标签用于组合HTML表格的主体内容。

8. tfoot

<tfoot>标签用于定义表格的页脚

<tfoot>标签用于组合HTML表格中的表注内容。

综合案例1-显示商品信息

案例分析与实现

整个页面分成五个部分，这五个部分分别是head,menu,search,content,fott我们使用五个div来控制

1. head部分

head部分有两块内容，一个是左边logo,一个是右边的连接，我们可以使用table来描述，使用一个一行两列的table,左边列显示logo,右边处理这些连接。

分析图

代码如下:

<table>

<tr>

<imgsrc="images/logo.gif">

</td>

<td>

<imgsrc="images/cart.gif">

<a>购物车</a>|

<a>帮助中心</a>|

<a>我的帐户</a>|

<a>新用户注册</a>|

</td>

</tr>

</table>

</div>

我们使用了 ，它代表的是空格，我们使用它来控制列与列之间内容的间隔。后续我们学完css，会有更好的办法来解决间隔问题。

2. menu部分

menu部分我们使用一个一行一列的table来控制，在<td>中我们使用<a>标签来描述所有的菜单，并且设置<td>的背景色及居中对齐，对于超连接中的文本我们使用<font>标签来控制文字颜色。

分析图:

代码如下:

<tr>

<a><fontsize="4" color="yellow">全部商品目录</font></a>  

</td>

</tr>

</table>

</div>

3. search部分

Search我们也使用一个一行一列的<table>来描述，在列中我们使用文本框与按钮来组成搜索界面，并控制<td>中右对齐，后续我们会详细讲解关于文本框与按钮，在这大家看到效果就可以。

分析图:

代码如下:

<tr>

<inputtype="text"><input type="button" value="搜索">

</td>

</tr>

</table>

</div>

4. content部分

content这部分内容比较复杂,在<div id=”content”>中我们嵌套一个一行一列的<table>，在<td>中我们首先使用<div>来描述了关于首页>旅游>图书列表。

接下来我们嵌套了一个<table>,这个<table>也是一行一列的，在<td>中通过<h1>来描述商品目录，<hr>来分隔信息。

接下来通过<div><img></div>来显示商品列表的图片。

最后我们又嵌套多个<table>来完成图书列表的显示。

在图书列表中，我们使用一个一行四列的<table>来描述一行图书信息的显示，向我们上图中，就会使用两个一行四列的<table>来显示商品信息。

分析图

我们在分析一下关于书籍列表的操作

代码如下:

<tablewidth="100%">

<tr>

<td>

首页 > 旅游 > 图书列表   

</div>

<tr>

<td>

<hr>

<h1>计算机类</h1>共xxx种商品

<hr>

<div>

<div>

<tablewidth="100%" align="center">

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

<tablewidth="100%" align="center">

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

5. foot部分

foot中我们使用两行两列的table来描述，但是第一行中第一列跨了两行，我们要使用rowspan=”2”来控制，在第一行第一列中有一张图片，在第第一行第二列中是CONTACT US文本，在第二行中第二列中是其它文字信息。

分析图:

代码如下:

<divid="foot">

<tablebgcolor="#efeedc" width="100%" align="center">

<tr>

<tdrowspan="2" valign="top">          

<imgsrc="images/bottomlogo.gif">

</td>

<td>

<font>CONTACTUS</font>

</td>

</tr>

<tr>

<tdalign="left">

</td>

</tr>

</table>

</div>

【笔试面试题】

div与span的区别

【重点总结】

本阶段的重点

1. 超链接

2. 表格

【第二阶段】

【学习目标】

关于表单的标签，无论我们使用什么语言来完成web开，必然会用到，所有表单标签我们必须很好的掌握

【内容:HTML表单标签】

form标签

<form>标签代表一个表单，表单用于向服务器传输数据。

<form>标签能够包含<input>，可以是文本字段，复选框，单选框或提交按钮等。还可以包含<textarea> <select>等。

<form>常用属性:

l name:用于定义表单的名称

l action:用于规定提交表单时向何处发送表单数据。

l method:用于规定提交的方式。一般取值 POST或GET

关于POST与GET方式区别:

1. get方式只能少量数据,而post可以携带大数据。

2. get方式提交时，数据会在地址栏上显示，安全性差。Post方式提交不会在地址栏上显示数据，更加安全。

input种类

<input>标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

关于<input>标签type属性值说明 :

text

定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

其它常用属性:

l name:定义标签名称

l value:定义标签值

l size:定义输入字段的长度

l maxlength:定义可输入最大字符个数

password

定义密码字段。该字段中的字符被掩码.

其它常用属性:

l name:定义标签名称

l value:定义标签值

l size:定义输入字段的长度

l maxlength:定义可输入最大字符个数

radio

定义单选按钮。

其它常用属性:

l name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radion的name值必一样。

l value:定义标签值

l checked:定义该标签默认被选中。

checkbox

定义复选框。

其它常用属性:

l name:定义标签名称.注意，一组的checkbox它们的name值应该是一样的。

l value:定义标签值

l checked:定义该标签默认被选中。

button

定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）

其它常用属性:

l name:定义标签名称

l value:按钮显示名称

hidden

定义隐藏的输入字段。

其它常用属性:

l name:定义标签名称

l value:定义标签值

file

定义输入字段和 "浏览"按钮，供文件上传。

其它常用属性:

l name:定义标签名称

submit

定义提交按钮。提交按钮会把表单数据发送到服务器。

其它常用属性:

l name:定义标签名称

l value:按钮显示名称

reset

定义重置按钮。重置按钮会清除表单中的所有数据。

其它常用属性:

l name:定义标签名称

l value:按钮显示名称

image

定义图像形式的提交按钮。

这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。

其它常用属性:

l name:定义标签名称

l src:定义作为提交按钮显示的图像的url

l alt:定义作用图像的替代文本。

select与option标签

1.<select>

用于定义一个下拉列表

常用属性:

l name:定义下拉列表的名称

l size:定义下拉列表中可见选项的数目

l multiple:定义可选择多个选项

2.<option>

用于定义下拉列表中的选项。

<option>需要位于<select>标签内部

常用属性:

l value:定义送往服务器的选项值

l selected:定义选项为选中状态。

textarea标签

<textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)

常用属性:

l name:定义多行文本框名称

l cols:定义多行文本框可见宽度

l rows:定义多行文本框可见行数

l wrap:规定多行文本框中文字如何换行。

表单案例

案例说明:

当我们输入信息后，点击注册按钮后，(method=”#” method=get),这时在浏览器地址栏上我们可以看到/demo11.html?id=001&username=tom&password=123&sex=%C4%D0&hobby=%D7%E3%C7%F2&province=%BA%DA%C1%FA%BD%AD%CA%A1&city=%B9%FE%B6%FB%B1%F5&email=tom%40itcast.cn&f=&remark=who+are+you%3F#

这段信息，是我们向action属性指向的页面提交的信息。仔细观察就会发现红色标出来的，就是我们表单项的名称，而它们是以name=value的方式出现，也就是说，我们向action指定的url提交数据时，如果想要将数据携带，必须给表单项添加name属性。

综合案例2-注册窗口

案例分析与实现:

对于注册页面，与我们之前做的显示商品信息布局差不多，也分成五部分，head menu search content foot,只是我们现在的content它主要是用于设计注册页面，其它的部分我们不需要改变，直接可以使用显示商品信息页面中的就可以。

下面我们分析一下，关于content中内容怎样实现：

对于content我们使用一个一行一列的<table>布局，而在<td>中首先使用<h1>来显示新会员注册，接下来嵌套一个<table>来展示会员邮箱，会员名，密码，重复密码，性别，联系电话，个人介绍信息。接下来在使用<h1>来展示注册校验，下面在嵌套一个<table>来展示输入校验码与校验码图片，最后使用一个<table>来完成同意并提交图片的展示。

分析图:

代码如下:

<formaction="#" method="post">

<tablewidth="850px" border="0" cellspacing="0" bgcolor="#fcfdef"align="center">

<tr>

<td>

<h1>新会员注册</h1>

<tablewidth="70%" border="0" cellspacing="2"align="center">

<tr>

<font color="#999999">请输入有效的邮箱地址</font>

</td>

</tr>

<tr>

<fontcolor="#999999">用户名至少六位</font>

</td>

</tr>

<tr>

<td>密码</td> <td><input type="password"name="password"></td> <td><fontcolor="#999999">密码至少六位</font></td>

</tr>

<tr>

</tr>

<tr>

<input type="radio"name="sex" value="男" checked>男

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

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<tablewidth="70%" border="0" cellspacing="2" align="center">

<tr>

<tdwidth="98">输入校验码</td>

</tr>

<tr>

<tdcolspan="2">

<a href="#">看不清换一张</a>

</td>

</tr>

</table>

<tablewidth="70%" border="0" cellspacing="2">

<tr>

<tdalign="center">

</td>

</tr>

</table>

</td>

</tr>

</table>

</form>

</div>

【笔试面试题】

1. post与get的区别

【重点总结】

对于表单标签要求大家都需要掌握

【第三阶段】

【学习目标】

了解框架及html中的特殊字符

【内容:HTML框架及特殊字符】

其它标签与特殊字符

1. 其它标签

1. meta标签

常用属性：

l content:定义与http-equiv或name属性相关的元信息

l http-equiv:把content属性关联到HTTP头部

l name:把content属性关联到一个名称。

2. link标签

常用属性:

l type:定义被链接的文档的MIME类型

l href:定义被链接的文档的URL

l rel:定义当前文档与被链接文档之间的关系。

关于<link>标签详细用法，我们会在css中介绍

2. 特殊字符

Html原始码	显示结果	描述
		不断行的空白符
<	<	小于号
>	>	大于号
®	®	已注册
©	©	版权

以上只是做一个简单了解，更详细信息，请查询html帮助文档。

框架标签

所谓框架就是将页面划分成几个窗框，就可以让我们在同一个浏览器中显示不止一个页面。

1. <frameset>

<frameset>是框架结构标签，它定义如果将窗口分割为框架.

注意:不能与<frameset></frameset> 标签一起使用 <body></body> 标签。

常用属性:

l cols:垂直切割

l rows:横向切割

l frameborder:定义框架的边框，其值可以有0和 1，0表示不要边框，1表示要显示边框。

l border:定义框架的边框厚度

l bordercolor:定义框架的边框颜色

l framespacing:定义框架与框架之间的距离。

2. <frame>

<frame>是框架标签，它定义放置在每个框架中的页面。

常用属性:

l src:定义此框架要显示的页面url

l name:定义此框架的名称

l frameborder:定义框架的边框，其值可以有0和 1，0表示不要边框，1表示要显示边框。

l framespacing:定义框架与框架之间的距离

l bordercolor:定义框架的边框颜色

l scrolling:定义是否显示卷轴，YES表示要显示，NO表示不显示，AUTO视情况而定。

l noresize:定义框架大小不可以改变。

l marginhight:定义框架高度部分边缘所保留的空间。

l marginwidth:定义框架宽度部分边缘所保留的空间。

3. <iframe>

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

常用属性:

l src:定义些框架要显示的页面url

l name:定义些框架的名称

l width:定义些框架的宽度

l height:定义些框架的高度

l marginwidth:定义插入的页面与框边所保留的宽度

l marginheight: 定义插入的页面与框边所保留的高度

l frameborder:定义框架的边框，1表示显示边框，0表示不显示

l scrolling:定义是否允许卷动，YES允许，NO不允许。

案例说明:

如果浏览器不支持框架，我们可以使用<noframes>

【笔试面试题】

无

【重点总结】

无

【总结】

对于html我们重点要掌握的:

1. <div>与<sap>及区别

2. 超连接<a>

3. 表格<table> <tr><td>

4. 表单中的所有标签

5. 其它内容，做为了解，只要可以看懂就可以。

对于我们今天讲的两个案例，希望大空可以掌握。后面我们还会使用。

【课后作业】

问答题:

什么是html，作用是什么？

Html的主要组在部分，其每部分作用？

Html中的<a>标签是什么，并说明其相关属性作用？

Html中怎样显示一个表格，并说明其相关属性作用？

Html中<form>代表什么，其常用属性有哪些，都有什么作用?

get与post请求方式有什么区别？

例举出五种常用表单的标签

怎样可以将radio的内容设置为一组？