HTML基础知识

最新推荐文章于 2024-04-11 21:55:05 发布

大巴黎咚咚咚

最新推荐文章于 2024-04-11 21:55:05 发布

阅读量1.4k

点赞数 2

分类专栏： HTML 文章标签： html 搜索引擎前端

本文链接：https://blog.csdn.net/sk142536/article/details/121762654

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础

感谢绿叶学习网提供的学习资源
绿叶学习网

什么是HTML

HTML全称“Hyper Text Markup Language（超文本标记语言）”，是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。
学习HTML就是学习各种标签，来搭建网页的“骨架”。在HTML中，标签有很多种，如文字标签、图片标签、表单标签等。

HTML基本标签

HTML的一个页面是由4个部分组成的

文档声明：<!DOCTYPE html>
html标签对：<html></html>
head标签对：<head></head>
body标签对：<body></body>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
</head>
<body>
   
</body>
</html>

head标签

在HTML中，一般来说，只有6个标签能放在head标签内。
（1）title标签
（2）meta标签
（3）link标签
（4）style标签
（5）script标签
（6）base标签

title标签

在HTML中，title标签唯一的作用就是定义网页的标题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"><!--使用中文-->
    <title>这是网页的标题</title>
</head>
<body>
    <p>这是网页的内容</p>
</body>
</html>

meta标签(重点)

在HTML中，meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。简单来说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。
meta标签有两个重要的属性：name和http-equiv。

name属性

<!DOCTYPE html>
<html>
<head>
    <!--网页关键字-->
    <meta  name="keywords" content="前端、后端、算法、产品" />
    <!--网页描述-->
    <meta  name="description" content="全职位介绍" />
    <!--本页作者-->
    <meta  name="author" content="李狗蛋" />
    <!--版权声明-->
    <meta  name="copyright" content="李狗蛋专属内容" />
</head>
<body>
</body>
</html>

name属性取值说明

属性值	说明
keywords	描述网页内容的关键字，可以是多个
description	网页简要描述
author	作者
copyright	版权信息声明

keywords和description是最常用的两个属性值
2. http-equiv属性
(1)、定义网页所使用的编码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

上面的代码告诉浏览器该页面所使用的编码格式是utf-8，在h5中可以简写：

<meta charset="utf-8" />

(2)、定义网页自动刷新跳转。

<meta  http-equiv="refresh" content="10;url=https://www.taobao.com/"/>

这段代码表示当前页面在10秒后会自动跳转到https://www.taobao.com/这个页面。

style标签

style标签用于定义元素的CSS样式

script标签

script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。

link标签

link标签用于引入外部样式文件（CSS文件）。

base标签

可以忽略

html的注释

又叫注释标签。表示注释的结束。

文本

标题标签

在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

段落标签

HTML中，使用“p标签”来显示一段文字。

<p>段落内容</p>

段落标签会自动换行，并且段落与段落之间有一定的间距

换行标签

<br/>标签可以实现对文字进行换行

文本标签

（1）粗体标签：strong、b
（2）斜体标签：i、em、cite
（3）上标标签：sup
（4）下标标签：sub
（5）中划线标签：s
（6）下划线标签：u
（7）大字号标签：big
（8）小字号标签：small

上面标签都不是自闭合标签，前四个样式比较重要，但是一般不会用html去修改样式，而是使用css处理这些

水平线标签

<hr/>

可以实现一条水平线

div标签

使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式，div标签就像一个个盒子，这些盒子是可以层叠嵌套的。

    <div>
        <p>这是一个盒子</p>
    </div>
    <hr/>
    
    <div>
        <p>这也是一个盒子</p>
    </div>

自闭合标签

在HTML中，标签分为一般标签和自闭合标签。
类似于div标签，具有“开始符号”和“结束符号”，并且在“开始符号”和“结束符号”之间是可以插入其他标签或文字的，叫做一般标签。

“一般标签”和“自闭合标签”。

一般标签：有开始符号和结束符号，可以在内部插入其他标签或文字。
自闭合标签：只有开始符号而没有结束符号，不可以在内部插入标签或文字。

HTML中，常见的自闭合标签如下所示。

标签	说明
<meta />	定义网页的信息（供搜索引擎查看）
<link />	引入“外部CSS文件”
<br />	换行标签
<hr />	水平线标签
<img />	图片标签
<input />	表单标签

块元素和行内元素

块元素

在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。一般情况下，块元素内部可以容纳其他块元素和行内元素。
常见的块元素

块元素	作用
h1~h6	标题元素
p	段落元素
div	div元素
hr	水平线
ol	有序列表
ul	无序列表

行内元素

在HTML中，行内元素是可以与其他行内元素位于同一行的。行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。
常见的行内元素

行内元素	作用
strong	粗体元素
em	斜体元素
a	超链接
span	常用行内元素，结合CSS定义样式

特殊符号

行内元素	作用	书写方法
空格(重要)	1个汉字约等于3个
"	双引号（英文）	"
‘	左单引号	‘
’	右单引号	’
×	乘号	×
÷	除号	÷
>(重要)	大于号	>
<(重要)	小于号	<
&	“与”符号	&
—	长破折号	—
\|	竖线	\|

列表

有序列表

有序列表从<ol>开始，到</ol>结束。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。
ol元素的子元素只能是li

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

浏览器效果：
在这里插入图片描述

type属性
可以使用type属性来改变列表项符号

<ol type="属性值">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

type属性的取值

属性值	列表序号样式
1	阿拉伯数字：1、2、3……
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……

无序列表

本不能直接放在ul元素内
ul的子元素只能是li
无序列表的列表项是没有顺序的,默认是一种黑色原点

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

浏览器效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X0kC2p32-1638843158066)(html_basicpictures\无序列表.png)]
type属性
可以使用type属性来改变列表项符号

<ul type="属性值">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ul>

type属性的取值

属性值	列表序号样式
属性值	列表项符号
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

前端开发中，网页的工具栏、动态栏等地方都可以用无序列表。

###定义列表
定义列表由两部分组成：名词和描述。

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

dl表示definition list（定义列表）；dt表示definition term（定义名词）；而dd表示definition description（定义描述）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义列表</title>
</head>
<body>
<dl>
    <dt>steam</dt>
    <dd>一个非常棒的学习软件</dd>
    <dt>bilibili</dt>
    <dd>内容丰富的公开课网站</dd>
</dl>
</body>
</html>

浏览器效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hza18JZD-1638843158066)(html_basicpictures\定义列表.png)]

表格

表格结构

表格一般由以下3部分组成。

表格：table标签
行：tr标签
单元格：td标签

<table>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
    </tr>
    <tr>
        <td>单元格21</td>
        <td>单元格22</td>
    </tr>
</table>

浏览器效果：
在这里插入图片描述

tr是table row（表格行）；td是table data cell（表格单元格）。
<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，<td>和</td>表示单元格的开始和结束。

表格完整结构

表格标题 caption

<table>
     <caption>表格标题</caption>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
    </tr>
    <tr>
        <td>单元格21</td>
        <td>单元格22</td>
    </tr>
</table>

一个表格只能有一个标题，默认情况下，标题都是位于整个表格内的第一行。

表头单元格 th

th是table header cell（表头单元格）。td是table data cell（表行单元格），本质上都是单元格。

<table>
     <caption>表格标题</caption>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
    </tr>
    <tr>
        <td>单元格21</td>
        <td>单元格22</td>
    </tr>
</table>

表格语义化

thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚，这三个标签不一定全部都用上，根据实际情况进行选择使用。

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>表行单元格11</td>
            <td>表行单元格12</td>
        </tr>
        <tr>
            <td>表行单元格21</td>
            <td>表行单元格22</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格31</td>
            <td>标准单元格32</td>
        </tr>
    </tfoot>
</table>

合并行 rowspan

<td rowspan = "想要合并的行数"></td>

合并行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并行</title>
</head>
<body>
<table>
    <tr>
        <td>表头1</td>
        <td>表头2</td>
    </tr>
    <tr>
        <td rowspan="2">合并单元格</td>
        <td>单元格12</td>
    </tr>
    <tr>
        <td>单元格22</td>
    </tr>
</table>
</body>
</html>

浏览器效果：
在这里插入图片描述

注意
使用行合并要在需要合并的最上面的行使用rowspan
比如上面的例子，有些人可能会想，在第单元格21上使用rowspan合并是不是和在单元格11上用rowspan上一样，经过测试是不对的。

<table>
    <tr>
        <td>表头1</td>
        <td>表头2</td>
    </tr>
    <tr>
        <td rowspan="2">合并单元格</td>
        <td>单元格12</td>
    </tr>
    <tr>
        <td rowspan="2">合并单元格（无法合并）</td><!--错误的合并方式-->
        <td>单元格22</td>
    </tr>
</table>

合并列 colspan

<td colspan = "想要合并的列数"></td>

合并行

<table>
    <tr>
        <td>表头1</td>
        <td>表头2</td>
    </tr>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>

    </tr>
    <tr>

<!--        <td colspan="2">合并单元格21</td>-->
        <td colspan="2">合并单元格22</td>
    </tr>

浏览器效果：
在这里插入图片描述

合并列与合并行不同，使用同一行的哪一个单元格合并都可以。

图片

图片标签

图片标签img格式

<img src="" alt="" title="" />

1.scr属性
src用于指定这个图片所在的路径，路径可以是相对路径，也可以是绝对路径。
语法格式：

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

src是img标签必不可少的属性。
2.alt属性

<img src="图片路径" alt="图片无法显示时的描述"/>

alt属性的内容是在图像无法显示的时候加载出来的内容。
3.title属性

<img src="图片路径" title="鼠标悬停在图片上的提示信息"/>

title属性的内容是鼠标悬停在图像上面之后出现的提示信息。

图片格式

1.位图
位图，又叫做“像素图”，它是由像素点组成的图片，放大图片后，图片会失真；缩小图片后，图片也会失真。常见的格式有jpg（或jpeg）、png、gif。
jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。但是jpg体积较大，并且不支持透明。
png是一种无损格式，可以无损压缩以保证页面打开速度。png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。
gif图片效果最差，不过它适合制作动画。
2.矢量图
矢量图是用计算机图形学中点、直线或多边形等表示出来的几何图像。
矢量图最大的优点是：图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）。
矢量图常见格式有：“.ai”、“.cdf”、“.fh”、“.swf”。

超链接

超链接的基本使用

1.a标签

<a href="链接地址">文本或图片</a>

href表示你想要跳转到那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径。
可以将文本或者图片设置为超链接
文本超链接：

  <a href="https://www.baidu.com/">百度搜索</a>

图片超链接

  <a href="https://www.baidu.com/"><img src="图片路径" title="这是一张图片"/></a>

2.target属性
默认情况下，超链接都是在当前浏览器窗口打开新页面的。在HTML中，可以使用target属性来定义超链接打开窗口的方式。

<a href="链接地址" target="打开方式"></a>

a标签的target属性取值:

属性值	功能描述
_self	默认值，在原来窗口打开链接
_blank(常用)	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

锚点链接

有些页面内容比较多，页面很长，为了能够方便浏览，通常设置锚点，当鼠标点到就可以自动跳转到设置的锚点的位置。

点击“第一个锚点”“第二个锚点”“第三个锚点”这3个超链接后，页面就会自动滚动到相应的部分。
设置锚点需要使用id属性，id属性在文章中设置的锚点的位置，这个id名是随便起的（一般是英文）。在同一个页面中，id是唯一的。
a标签的href属性取值时，需要在id前面加上“#”（井号），以表示这是一个锚点链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <a href="#first_point">第一个锚点</a><br />
        <a href="#second_point">第二个锚点</a><br />
        <a href="#third_point">第三个锚点</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="first_point">
        <h3>第一个锚点</h3>
        <ul>
            <li>测试1</li>
            <li>测试2</li>
            <li>测试3</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="second_point">
        <h3>第二个锚点</h3>
        <ul>
            <li>测试1</li>
            <li>测试2</li>
            <li>测试3</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="third_point">
        <h3>第三个锚点</h3>
        <ul>
            <li>测试1</li>
            <li>测试2</li>
            <li>测试3</li>
        </ul>
    </div>
</body>
</html>

表单

表单元素不一定都要放在form标签内。对于要与服务器进行交互的表单元素就必须放在form标签内才有效。如果表单元素不需要跟服务器进行交互，那就没必要放在form标签内。

form标签

表单指的是文本框、按钮、单选框、复选框、下拉列表等的统称，这些元素一般要放到form标签里。

语法：

<form>
    //各种表单标签
</form>

form标签属性

属性	属性作用
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

name属性
一个html页面的表单可能不止一个，一个form标签就是一个表单，使用name属性对表单进行命名区分。

<form name="firstForm">

</form>

method属性
method属性用于指定表单数据使用哪一种http提交方法。method属性有两个取值，一个是“get”，另外一个是“post”，get的安全性较差，post的安全性较好。
action属性
action属性用于指定表单数据提交到哪一个地址进行处理。
target属性
指定窗口的打开方式。一般情况下，使用“_blank”。
enctype属性
用于指定表单数据提交的编码方式，一般情况下，不需要设置，除非用到上传文件功能。

input标签

<input type="表单类型" />

input是自闭合标签。type属性取值与效果如下表所示。

在这里插入图片描述

单行文本框

单行文本框使用input标签来实现，其中type属性取值为“text”。

<input type="text" />

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行文本框</title>
</head>
<body>
<form method="post">
    用户名：<input type="text" />
</form>
</body>
</html>

浏览器效果：
在这里插入图片描述

单行文本框属性

属性	说明
value	设置文本框的默认值
size	设置文本框的长度
maxlength	设置文本框中最多可以输入的字符数

密码文本框

密码文本框在外观上与单行文本框相似，两者拥有相同的属性（value、size、maxlength等）。不过密码文本框中输入的字符不可见。

<input type="password" />

密码文本框举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密码文本框</title>
</head>
<body>
<form method="post">
    用户名：<input type="text" /><br>
    密码：  <input type="password" />
</form>
</body>
</html>

浏览器效果：
在这里插入图片描述

单选框

单选框使用input标签来实现，其中type属性取值为“radio”。

<input type="radio" name="组名" value="取值" />

name属性表示单选按钮所在的组名，value表示单选按钮的取值，这是两个必须的属性。
单选框举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
</head>
<body>
<form method="post">
    我最爱的宠物：
    <input type="radio" name="pets" value="猫" />猫
    <input type="radio" name="pets" value="狗" />狗
    <input type="radio" name="pets" value="袖珍兔" />袖珍兔
</form>
</body>
</html>

浏览器效果：
在这里插入图片描述

对于这一组单选按钮，只能选中其中一项，而不能同时选中两项或更多。
如果想要默认选定一个选项，只需要在这个选项里添加checked属性，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
</head>
<body>
<form method="post">
    我最爱的宠物：
    <input type="radio" name="pets" value="猫" />猫
    <input type="radio" name="pets" value="狗" />狗
    <input type="radio" name="pets" value="袖珍兔" checked="checked" />袖珍兔
</form>
</body>
</html>

但是在h5中，可以对默认选中简写：

 <input type="radio" name="pets" value="袖珍兔" checked />袖珍兔

注意

如果没有添加name属性
没有加上name属性，预览效果没有变化。但是当我们选取的时候，可以同时选择多个选项。
name属性设置不一样的取值
name属性设置不一致，同样可以同时选择多个选项。

复选框的书写规范

为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来。

    <lable><input type="radio" name="pets" value="猫" />猫</lable>
    <lable><input type="radio" name="pets" value="狗" />狗</lable>
    <lable><input type="radio" name="pets" value="袖珍兔" checked="checked" />袖珍兔</lable>

关于value属性
value属性取值跟后面的文本是相同的。之所以加上value属性，是为了方便JavaScript或者服务器操作数据。

复选框

复选框使用input标签来实现，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项。

<input type="checkbox" name="组名" value="取值" />

同单选框一样，name和value也是两个必须的属性。
复选框的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框</title>
</head>
<body>
<form method="post">
    我最爱的宠物：
    <input type="checkbox" name="pets" value="猫" />猫
    <input type="checkbox" name="pets" value="狗" checked/>狗
    <input type="checkbox" name="pets" value="袖珍兔" checked="checked" />袖珍兔
</form>
</body>
</html>

浏览器效果：
在这里插入图片描述

同单选框一样，想要默认选中哪一项，同样可以使用checked来实现，复选框中的name跟单选框中的name都是用来设置“组名”的，表示该选项位于哪一组中。

按钮

html常见的按钮有3种，分别是普通按钮（button）、提交按钮（submit）和重置按钮（reset）。

普通按钮 button

普通按钮一般情况下都是配合JavaScript来进行各种操作的。

<input type="button" value="取值" />

按钮上的值就是value的取值

提交按钮 submit

提交按钮一般都是用来给服务器提交数据的。

<input type="submit" value="取值" />

提交按钮的应用说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://localhost:8080/a" method="get">
        用户名<input type="text" name="username"/><br/>
        姓名<input type="text" name="name"/><br/>
        密码<input type="password" name="password"/><br/>
        确认密码<input type="password"/><br/>
        <!--radio 单选按钮，属于同一个name的radio才有效果-->
        性别<input type="radio" name="gender" value="female" checked>男<input type="radio" name="gender" value="male">女<br/>
        兴趣爱好<input type="checkbox" name="hobby" value="smoke"/>抽烟
                <input type="checkbox" name="hobby" value="net"/>上网
                <input type="checkbox" name="hobby" value="drink"/>喝酒<br/>
        学历<select name="xueli">
                <option value="gaozhong">高中</option>
                <option value="dazhuan">大专</option>
                <option value="benke" selected = "selected">本科</option>
            </select><br/>
        简介<textarea cols="60" rows="60" name="introduction"></textarea><br/>
       <!-- 使用input输入域，type="submit"表示该按钮是一个提交按钮，具有提交表单的能力。-->
        <input type="submit" value="提交">		
    </form>

</body>
</html>

action属性：

action 定义一个 URL，当点击提交按钮时，向这个 URL 发送数据。

method属性：

get:用户提交的信息会显示在浏览器的地址栏上，默认get。
post：用户提交的信息不会显示在浏览器地址栏上。

表单提交数据给服务器的格式：

http://localhost:8080/xx/xxxx?username=abc&userpwd=111
格式为action?name=value&name=value&name=value&name=value&…

注意：

表单项name属性有值的，会提交给服务器，无name属性则不会提交给服务器。
文本框和密码框的value不需要开发人员指定，用户输入什么value就是什么。当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。后台代码得到的是：String username = “”。

重置按钮 reset

<input type="reset" value="取值" />

在文本框中输入内容，然后按下重置按钮，就会清空内容。不过重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。

<form method="post">
        账号：<input type="text" /><br />
        密码：<input type="password" /><br />
        <input type="reset" value="重置" />
</form>

比如上面的reset只能重置这个表单的内容。

文件上传

在HTML中，文件上传使用input标签来实现，其中type属性取值为file。

<input type="file" />

文件上传的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框</title>
</head>
<body>
<form method="post">
    上传文件：
    <input type="file"/>
</form>
</body>
</html>

浏览器效果：
在这里插入图片描述

当我们点击“选择文件”按钮后会发现并不能上传，因为这需要和后端数据库服务器绑定。

多行文本框

行文本框可以输入多行文本，在HTML中，多行文本框使用的是textarea标签。

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

多行文本框的默认显示文本是在标签内部设置的，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。

    <form method="post">
        简介：<br/>
        <textarea rows="10" cols="25">对自己进行简单介绍</textarea>
    </form>

下拉列表

HTML中，下拉列表由select和option这两个标签配合使用来表示的。

<select>
    <option>选项1</option>
    <option>选项2</option>
    ……
    <option>选项n</option>
</select>

下拉列表的使用：

<form method="get">
    <select>
        <option>猫</option>
        <option>狗</option>
        <option>鱼</option>
        <option>鼠</option>
        <option>兔</option>
    </select>
</form>

浏览器效果：
在这里插入图片描述

select标签属性

属性	效果
multiple	设置下拉列表可以选择多项,使用“Ctrl+鼠标左键”来选取
size	设置下拉列表显示几个列表项

说明

下拉列表的multiple属性没有属性值，这是HTML5的最新写法，这个跟单选框中的checked属性是一样的。
size取值为1、2、3时，会发现Chrome浏览器无效。这是因为Chrome浏览器最低是4个选项。

option标签属性

|属性 |效果|
|selected |默认选中|
|value |选项值|
说明

几乎所有表单元素都有value属性，这个属性是配合JavaScript以及服务器进行操作的。
这里的checked也是HTML5的最新写法，跟单选框中的checked属性相同。

框架

iframe框架

iframe标签来实现一个内嵌框架。就是在当前页面再嵌入另外一个网页。
src是必选的，用于定义链接页面的地址。width和height这两个属性是可选的，分别用于定义框架的宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <iframe src="https://www.baidu.com/" width="200" height="150"></iframe>
    <iframe src="http://taobao.com" width="200" height="150"></iframe>
</body>
</html>

大巴黎咚咚咚

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识

HTML基础感谢绿叶学习网提供的学习资源绿叶学习网什么是HTMLHTML全称“Hyper Text Markup Language（超文本标记语言）”，是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。学习HTML就是学习各种标签，来搭建网页的“骨架”。在HTML中，标签有很多种，如文字标签、图片标签、表单标签等。HTML基本标签HTML的一个页面是由4个部分组成的文档声明：<!DOCTYPE html>html标签对：<html></
复制链接

扫一扫