当前位置：首页 > article >正文

【网络信息资源】HTML的使用

article 2024/11/28 0:12:26

1 实验目的

2 实验内容

3 源代码

4 解释

4.1 运行结果

4.2 分析

4.3 填写数据

1 实验目的

了解HTML的基本内容及主要标签的用法。

2 实验内容

编写一个具有<a>、<title>、<form>等常用标签的网页。

3 源代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>饮品店</title>

</head>

<body bgcolor="#FFF8DC">

<body>

<div text-align="up">



<img src="1.jpg" alt="饮品店" width="500" height="500"> <br>



<h1>请先登录</h1>

<form>

用户名: <input type="text" name="用户名"><br>

密码: <input type="password" name="密码">

</form>



<h1>您想喝点什么？</h1>

<h2>本店目前仅出售以下饮品：</h2>



<form>

柠檬水：<input type="checkbox" name="柠檬水"><br>

卡布奇诺：<input type="checkbox" name="卡布奇诺"><br>

玛奇朵：<input type="checkbox" name="玛奇朵"><br>

拿铁：<input type="checkbox" name="拿铁"><br>

蔬菜汁：<input type="checkbox" name="蔬菜汁"><br>

可乐：<input type="checkbox" name="可乐">

</form>



<a href="https://baike.baidu.com/item/%E6%9F%A0%E6%AA%AC%E6%B0%B4/4843707">柠檬水介绍</a>

<a href="https://baike.baidu.com/item/%E5%8D%A1%E5%B8%83%E5%A5%87%E8%AF%BA/54971?structureClickId=54971&structureId=7e4db7414b91644e5dd90cb5&structureItemId=5c986f705e7063feacc8f0b7">卡布奇诺介绍</a>

<a href="https://baike.baidu.com/item/%E7%8E%9B%E5%A5%87%E6%9C%B5/8129600?fromModule=lemma_search-box">玛奇朵介绍</a>

<a href="https://baike.baidu.com/item/%E6%8B%BF%E9%93%81/2024425?fromModule=lemma_search-box">拿铁介绍</a>

<a href="https://baike.baidu.com/item/%E8%94%AC%E8%8F%9C%E6%B1%81?fromModule=lemma_search-box">蔬菜汁介绍</a>

<a href="https://baike.baidu.com/item/%E5%8F%AF%E4%B9%90/3044413?fromModule=lemma_search-box">可乐介绍</a>



<h2>您对温度的要求是什么？</h2>

<form>

常温:<input type="radio" name="s" >

正常冰:<input type="radio" name="s" >

少冰:<input type="radio" name="s" >

温热:<input type="radio" name="s" >

</form>



<h2>您对糖度的要求是什么？</h2>



<form>

正常糖:<input type="radio" name="s" >

七分糖:<input type="radio" name="s" >

五分糖:<input type="radio" name="s" >

</form>



<h2>您还有其他要求吗？</h2>

<textarea >

</textarea>



<br>

<br>



<button type="button">我要去结算</button>

<button type="button">我要重新选</button><br>

<img src="2.jpg" alt="下次再见" width="150" height="50">



</div>

</body>

</html>

4 解释

4.1 运行结果

4.2 分析

1.<!DOCTYPE html>：<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。<!DOCTYPE> 标签没有结束标签且<!DOCTYPE> 声明不区分大小写。

2.<html> 标签告知浏览器这是一个 HTML 文档，是 HTML 文档中最外层的元素，是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

3.<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息,结束标签</head>。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

4.<meta> 元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容，没有结束标签。

5.charset 属性规定 HTML 文档的字符编码。

6.<title> 标签定义文档和浏览器工具栏中的标题，在所有 HTML 文档中是必需的。一个 HTML 文档中不能有一个以上的 <title> 元素。如果没有 <title> 标签，文档作为 HTML 是无效的。

7.<body> 标签定义文档的主体,包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）,bgcolor规定文档的背景颜色。

8.<a> 标签定义超链接，用于从一个页面链接到另一个页面,最重要的属性是 href 属性，它指定链接的目标。

9.<img> 标签定义 HTML 页面中的图像,有两个必需的属性：src 和 alt。scr表示文件名或规定显示图像的 URL，alt规定图像的替代文本，width和height可以调整图片的大小。

10.<br> 标签插入一个简单的换行符。

11.<h1>-<h6> 标签被用来定义 HTML 标题。<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。

12.<form> 标签用于创建供用户输入的 HTML 表单。name规定表单的名称。单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器。radio定义单选按钮。checkbox定义复选框。password定义密码字段（字段中的字符会被遮蔽）。text默认定义一个单行的文本字段（默认宽度为 20 个字符）。

13.align 属性规定 div 元素中的内容的水平对齐方式，up表示向上对齐。

14.<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

15.<button> 标签定义一个按钮。在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。