2.2.2 常用标签
HTML 文档的基本结构包括标签、标签、标签及标签。 本节将结合本书后续案例介绍几个较常用的标签。
1．![]()
![]()
标签![]()
标签可以在文档中嵌入一张图片。该标签的属性如下。
• src：包含了文档中嵌入图片的路径，该属性是必需的。
• alt：包含一条对图像的文本描述，为可选属性，如果由于某种状况无法加载图像，普 通浏览器会将 alt 属性中的备用文本显示在页面上。
2．
标签
标签（或 HTML 文档区分标签）是一个通用型的流内容容器，在不使用 CSS 的情况下， 对内容或布局没有任何影响。作为一个纯粹的容器，
元素在语义上不表示任何特定类型的内 容。然而，它可以将内容分组，从而使用 class 或 id 属性方便地定义内容的格式，也可以在一段文 档中划分、标记出使用另一种语言书写的内容等，如代码清单 2-9 所示。
代码清单 2-9 <htmllang="en"><head><metacharset="UTF-8"><title>div Demo</title><style>.content{ border: 5pxsolidred; text-align: center; width: 500px; margin: 0auto; } divimg{ border: 3pxsolidblue; width: 200px; height: 200px; } divp{ border: 1pxsolidgreen; } </style></head><body><divclass="content"><imgsrc="banner.jpeg"alt="This is a picture."><p>I love this picture!</p></div></body></html>
运行结果如图 2-18 所示。
3．标签
标签用于为基于Web的表单创建交互式控件，以便接收来自用户的数据，该元素的工作方式取决于type属性的值，默认值为text。type属性的值如表2-4所示。
表2-4 type属性的值
使用代码清单2-10在页面中定义图片上传按钮。
代码清单2-10
<htmllang="en"><head><metacharset="UTF-8"><title>input Demo</title></head><body><inputtype="file"accept="image/*"></body></html>
运行结果如图2-19所示。
4．标签
标签表示文档中的一个区域，此区域包含交互控件，用于向Web服务器提交信息。该标签的属性如下。
•action：规定当提交表单时，向何处发送表单数据。
•method：规定用于发送form-data的HTTP方法，其值可能为get或post。当其值为get时，表单数据会包含在表单体内然后发送给服务器；当其值为post时，表单数据会附加在action属性的URL中，并以“？”作为分隔符。
示例代码如代码清单2-11所示。
代码清单2-11
<htmllang="en"><head><metacharset="UTF-8"><title>form Demo</title></head><body><formaction="https://www.shipudong.com"method="get"><div><labelfor="username">username：</label><inputtype="text"></div><div><labelfor="password">password：</label><inputtype="text"></div><inputtype="submit"value="submit"></form></body></html>
运行结果如图 2-20 所示。
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.2 常用标签 （下） https://developer.aliyun.com/article/1228305?groupCode=tech_library
