《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.2 常用标签 （上）

2.2.2 常用标签 

HTML 文档的基本结构包括标签、标签、标签及标签。 本节将结合本书后续案例介绍几个较常用的标签。

1．img> 标签

img> 标签可以在文档中嵌入一张图片。该标签的属性如下。

• src：包含了文档中嵌入图片的路径，该属性是必需的。

• alt：包含一条对图像的文本描述，为可选属性，如果由于某种状况无法加载图像，普 通浏览器会将 alt 属性中的备用文本显示在页面上。

2．div> 标签

div> 标签（或 HTML 文档区分标签）是一个通用型的流内容容器，在不使用 CSS 的情况下， 对内容或布局没有任何影响。作为一个纯粹的容器，

元素在语义上不表示任何特定类型的内 容。然而，它可以将内容分组，从而使用 class 或 id 属性方便地定义内容的格式，也可以在一段文 档中划分、标记出使用另一种语言书写的内容等，如代码清单 2-9 所示。

代码清单 2-9
!DOCTYPE html>
    
html lang="en">
    
head>
    
meta charset="UTF-8">
    
title>
    div Demo/title>
    
style>

.content{
    
border: 5px solid red;
    
text-align: center;
    
width: 500px;
    
margin: 0 auto;

}

div img{
    
border: 3px solid blue;
    
width: 200px;
    
height: 200px;

}

div p{
    
border: 1px solid green;

}
    
/style>
    
/head>
    
body>
    
div class="content">
    
img src="banner.jpeg" alt="This is a picture.">
    
p>
    I love this picture!/p>
    
/div>
    
/body>
    
/html>
    

运行结果如图 2-18 所示。

3．input> 标签

input> 标签用于为基于 Web 的表单创建交互式控件，以便接收来自用户的数据，该元素的工作方式取决于 type 属性的值，默认值为 text。type 属性的值如表 2-4 所示。

表2-4 type 属性的值

使用代码清单 2-10 在页面中定义图片上传按钮。

代码清单 2-10

!DOCTYPE html>
    
html lang="en">
    
head>
    
meta charset="UTF-8">
    
title>
    input Demo/title>
    
/head>
    
body>
    
input type="file" accept="image/*">
    
/body>
    
/html>
    

运行结果如图 2-19 所示。

4．form> 标签

form> 标签表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。该标签的属性如下。

• action：规定当提交表单时，向何处发送表单数据。

• method：规定用于发送 form-data 的HTTP 方法，其值可能为 get 或post。当其值为get 时，表单数据会包含在表单体内然后发送给服务器；当其值为 post 时，表单数据会附加在 action 属性的 URL 中，并以“？”作为分隔符。

示例代码如代码清单 2-11 所示。

代码清单 2-11

!DOCTYPE html>
    
html lang="en">
    
head>
    
meta charset="UTF-8">
    
title>
    form Demo/title>
    
/head>
    
body>
    
form action="https://www.shipudong.com" method="get">
    
  div>
    
label for="username">
    username：/label>
    
input type="text">
    
/div>
    
div>
    
label for="password">
    password：/label>
    
input type="text">
    
/div>
    
input type="submit" value="submit">
    
/form>
    
/body>
    
/html>
    

运行结果如图 2-20 所示。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！