目录
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> 元素创建的按钮之间的不同之处。
4.3 填写数据
填写后的结果如下图所示：
