JavaWeb>01>HTML

最新推荐文章于 2023-07-31 11:08:34 发布

原创最新推荐文章于 2023-07-31 11:08:34 发布 · 336 阅读

1 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

10 篇文章

订阅专栏

这篇博客主要介绍了JavaWeb中的HTML基础知识，包括Web概述、HTML概念及各类标签的总结，如文本、图片、列表、链接、表格、表单等。通过多个案例，如公司简介、旅游网站和注册页面，深入浅出地讲解了HTML的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仅供个人学习记录，无他用！
1.Web概述

*JavaWeb
	*使用Java语言开发基于互联网的项目
*软件架构：
	1.C/S:Client/Server 客户端/服务器端
			* 在用户本地有一个客户端程序，在远程有一个服务端程序
			* 如：QQ，迅雷...
			* 优点：
				1.用户体验好
			* 缺点：
				1.开发、安装、部署、维护 麻烦
	2.B/S：Browser/Server  浏览器/服务器端
			* 只需要一个浏览器，用户通过不同的网址(URL),客户访问不同的服务器端程序
			* 优点：
				1.开发、安装，部署，维护 简单
			* 缺点：
				1.如果应用过大，用户的体验可能会受到影响
				2.对硬件要求过高

2.概念介绍_源分类

B/S架构详解
	* 资源分类：
		1.静态资源：
			* 使用静态网页开发技术发布的资源
			* 特点：
				* 所有用户访问，得到的结果是一样的
				* 如：文本，图片，音频，HTML，CSS,JavaScript
				* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎，可以展示静态资源。
		2.动态资源
			*使用动态网页及时发布的资源
			*特点：
				* 所有用户访问，得到的结果可能不一样。
				* 如:jsp/servlet，php,asp...
				* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
		* 要学习动态资源，必须学习静态资源！
		* 静态资源：
			* HTML：用于搭建基础网页，展示页面的内容
			* CSS：用于美化页面，布局页面
			* JavaScript：控制页面的元素，让页面有一些动态的效果

3.HTML概念

/*
1.概念:最基础的网页开发语言
	* Hyper Text Markup Language 超文本标记语言
		* 超文本：
			* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
		* 标记语言：
			* 由标签构成的语言。<标签名称> 如 html，xml
			* 标记语言不是编程语言
2.快速入门：
	* 语法：
		1.html文档后缀名  .html  或者 .htm
		2.标签分为：
			1.围堵标签：有开始标签和结束标签。如<html></html>
			2.自闭和标签：开始标签和结束标签在一起。如<br/>
		3.标签可以嵌套：
		     需要正确嵌套，不能你中有我，我中有你
		     错误:<a><b></a></b>
		     正确:<a><b></b></a>
		4.在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
		5.html的标签不区分大小写，但是建议使用小写。
		*/
		<html>
	<head>
		<title>title</title>
	</head>
	<body>
		<font color='red'>Hello World!</font>
		<font color='green'>Hello World!</font>
	</body>
</html>

4.HTML标签总结记录

1.标签学习：
	1.文件标签：构成html最基本的标签
		* html：html文档的根标签
		* head：头标签。用于指定html文档的一些属性。引入外部的资源
		* title：标题标签
		* body：体标签
		* <!DOCTYPE html>:html5中定义该文档是html文档
	2.文本标签：和文本有关的标签
		* 注释：<!-- 注释内容 -->
		* <h1> to <h6>:标题标签
			h1~h6：字体大小逐渐递减
		* <p>:段落标签
		* <hr/>:展示一条水平线
			* 属性：
				* color:颜色
				* width:宽度
				* size:高度
				* align:对其方式
					* center：居中
					* left：左对齐
					* right：右对齐
				* <b>：字体加粗
				* <i>：字体斜体
				* <font>：字体标签
				* <center>：文本居中
					* 属性：
						* color：颜色
						* size：大小
						* face：字体
				* 属性定义：
					* color：
						1.英文单词：red,green,blue
						2.rgb(值1，值2，值3)：值得范围：0~255 如 rgb(0,0,255)
						3.#值1值2值3：值的范围：00~FF之间。如：#FF00FF
					* width
						1.数值：width='20',数值的单位，默认是px(像素)
						2.数值%：占比相对于父元素的比例
	3.图片标签：
	4.列表标签：
		* 有序列表：
			* ol:
			* li:
		* 无序列表:
			* ul:
			* li:
	5.链接标签：
		* a：定义一个超链接
			* 属性：
				* href:指定访问资源的URL(统一资源定位符)
				* target:指定打开资源的方式
					* _self:默认值，在当前页面打开
					* _blank:在空白页面打开
	6.div和span:
		div ：每一个div占满一整行，块级标签
        span ：文本信息在一行展示，行内标签 内联标签
    7.语义化标签:html5中为了提高程序的可读性，提供了一些标签。
    	1.<header>:页眉
    	2.<footer>：页脚
	6.表格标签：
		* table：定义表格
			* width：宽度
			* border：边框
			* cellpadding：定义内容和单元格的距离
			* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
			* bgcolor：背景色
			* align：对齐方式
		* tr：定义行
			* bgcolor：背景色
			* align：对齐方式
		* td：定义单元格
			* colspan：合并列
			* rowspan：合并行
		* th：定义表头单元格
		* <caption>:表格标题
		* <thead>：表示表格的头部分
		* <tbody>：表示表格的体部分
		* <tfoot>：表示表格的脚部分
	7.案例：旅游网站首页
    	1.确定使用table来完成布局
    	2.如果某一行只有一个单元格，则使用<tr><td></td></tr>
    	3.如果某一行有多个单元格，则使用
    		<tr>
    			<td>
    				<table></table>
    			</td>
    		</tr>
    8.表单标签：
    	* 表单：
			* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
			* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
           	 	* 属性：
                * action：指定提交数据的URL
                * method：指定提交方式
                    * 分类：一共7种，2种比较常用
                           get:
                                1.请求参数会在地址栏种显示。会封装到请求行中(HTTP协议后讲解)
                                2.请求参数的长度有限制
                                3.不太安全
                           post:
                                1.请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议后讲解）
                                2.请求参数的大小没有限制
                                3.较为安全。
                    * 表单项中的数据要想被提交：必须要指定其name属性
        * 表单项标签：
        	* input：可以通过type属性值，改变元素展示的样式
        		* type属性：
        			* text：文本输入框，默认值
        				* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
        			* password：密码输入框
        			* radio：单选框
        				* 注意：
        					1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
        					2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
        					3.checked属性，可以指定默认值
        			* checkbox：复选框
        				* 注意：
        					1.一般会给每一个单选框提供value属性，指定其被选中后提交的值
        					2.checked属性，可以指定默认值
        			* file：文件选择框
        			* hidden：隐藏域，用于提交一些信息
        			* 按钮：
        				* submit：提交按钮。可以提交表单
        				* button：普通按钮
        				* image：图片提交按钮
        					* src属性指定图片的路径
        		* label:指定输入项的文字描述信息
        			* 注意：
        				* label的for属性一般会和input的id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
        	* select:下拉列表
        		* 子元素：option，指定列表项
        	* textarea:文本域
				* cols:指定列数，每一行有多少字符
				* rows:默认多少行。

5.HTML标签_文件标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--  注释 -->
    <!--br 换行-->
    白日依山尽，<!--<br/>--><br>
    黄河入海流。<br>

    <!--标题标签  h1~h6-->
    蜗牛旅游网<br>
    <h1>蜗牛旅游网</h1>
    <h2>蜗牛旅游网</h2>
    <h3>蜗牛旅游网</h3>
    <h4>蜗牛旅游网</h4>
    <h5>蜗牛旅游网</h5>
    <h6>蜗牛旅游网</h6>

    <!-- 段落标签 p -->
    <p>
        1.蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网
    </p>
    <p>
        2.蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网
    </p>
    <p>
        3.蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网蜗牛旅游网
    </p>

    <!--hr 显示一条水平线-->
    <hr color="red" width="200" size="10" align="left"/>

    <!--加粗 b-->
    <b>白日依山尽</b>
    <hr/>
    <!--斜体 i-->
    白日依山尽<br>
    <i>白日依山尽</i>
    <hr/>
    <!--字体标签 font-->
    <font color="red" size="5" face="楷体">白日依山尽</font><br>

    <font color="FF00FF" size="5" face="楷体">程序员</font><br>

    <hr color="red" width="50%" size="10" align="left"/>

    <center>
        <font color="red" size="5" face="楷体">白日依山尽</font><br>
    </center>

<br>
</body>
</html>

6.案例1_公司简介(文本标签练习)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蜗牛旅游网简介</title>
</head>
<body>
<h1>公司简介</h1>
<hr color="#ffd700"/>
<p>
    <font color="red">蜗牛旅游网</font>提供8万余种旅游产品供消费者选择，涵盖<b><i>跟团、自助、自驾、邮轮、酒店、签证、景区门票</i></b>以及公司旅游等，已成功服务累计超过400万人次出游。
</p>
<p>
    同时基于蜗牛旅游网全球中文景点目录以及中文旅游社区，可以更好地帮助游客了解目的地信息，妥善制定好出游计划，并方便地预订旅程中的服务项目。
</p>
<hr color="#ffd700"/>
<font color="gray" size="3">
    <center>
        上海蜗牛科技股份有限公司<br>
        版权所有Copyright&copy;2006-2018，All Rights Reserved 沪ICP备66666666
    </center>
</font>
</body>
</html>

7.HTML标签_图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <!--展示一张图片 img-->
    <!--alt标签图片链接失效时显示-->
    <img src="image/jingxuan_2.jpg" align="center" alt="古镇" width="500" height="500"/>

    <!--
        相对路径
            * 以.开头的路径
                * ./:代表当前目录  ./image/1.jpg
                * ../:代表上一级目录
    -->
    <img src="./image/jiangxuan_1.jpg">

    <img src="../image/jiangxuan_1.jpg">
</body>
</html>

8.HTML标签_列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <!--有序列表  ol-->
    早上起床干的事
    <ol type="I">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ol>

    早上起床干的事
    <ul type="disc">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul>

    早上起床干的事
    <ul type="square">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul>

    早上起床干的事
    <ul type="circle">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul>
</body>
</html>

9.HTML标签_链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
    <!--超链接 a-->
    <a href="http://www.baidu.com">点我</a>
    <br/>
    <a href="http://www.baidu.com" target="_self">点我</a>
    <br/>
    <a href="http://www.baidu.com" target="_blank">点我</a>
    <br/>
    <a href="5_列表标签.html" target="_blank">点我</a>
    <br/>
    <a href="mailto:joker19975535652@163.com">联系我们</a>
    <br/>

    <a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>
</body>
</html>

10.div和span简单介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>
    <!--
        div ：每一个div占满一整行，块级标签
        span ：文本信息在一行展示，行内标签 内联标签
        -->
    <span>程序员</span>
    <span>软件工程师</span>

    <hr/>
    <div>程序员</div>
    <div>软件工程师</div>
</body>
</html>

11.HTML标签_表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
        <tr>
            <!--<td>编号</td>
            <td>姓名</td>
            <td>成绩</td>-->
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张飞</td>
            <td>50</td>
        </tr>
        <tr>
            <td>2</td>
            <td>关羽</td>
            <td>75</td>
        </tr>
        <tr>
            <td>3</td>
            <td>赵云</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

12.HTML标签_表格标签2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
        <caption>学生信息表</caption>
        <tr>
            <!--<td>编号</td>
            <td>姓名</td>
            <td>成绩</td>-->
            <th rowspan="2">编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr bgcolor="#7fffd4" align="center">
            <td>1</td>
            <td>张飞</td>
        </tr>
        <tr>
            <td>2</td>
            <td colspan="2">关羽</td>
        </tr>
    </table>
</body>
</html>

13.案例_旅游网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蜗牛旅游网</title>
</head>
<body>
<!--采用table完成布局-->
<!--最外层的table，用于整个页面的布局-->
<table width="100%" align="center">
    <!--第1行-->
    <tr>
        <td><img src="image/top_banner.jpg" width="100%" alt=""></td>
    </tr>

    <!--第2行-->
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <img src="image/logo.jpg" alt="">
                    </td>
                    <td>
                        <img src="image/search.png" alt="">
                    </td>
                    <td>
                        <img src="image/hotel_tel.png" alt="">
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第3行-->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr bgcolor="#ffd700" align="center" height="45">
                    <td>
                        <a href="">首页</a>
                    </td>
                    <td>
                        <a href="">门票</a>
                    </td>
                    <td>
                        <a href="">首页</a>
                    </td>
                    <td>
                        <a href="">首页</a>
                    </td>
                    <td>
                        <a href="">首页</a>
                    </td>
                    <td>
                        <a href="">首页</a>
                    </td>
                    <td>
                        <a href="">首页</a>
                    </td>
                    <td>
                        <a href="">首页</a>
                    </td>
                    <td>
                        <a href="">首页</a>
                    </td>
                    <td>
                        <a href="">首页</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第4行 轮播图-->
    <tr>
        <td>
            <img src="image/banner_3.jpg" alt="" width="100%">
        </td>
    </tr>

    <!--第5行 蜗牛精选-->
    <tr>
        <td>
            <img src="image/icon_5.jpg" alt="">
            蜗牛精选
            <hr color="#ffd700">
        </td>
    </tr>

    <!--第6行-->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td>
                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第7行 国内游-->
    <tr>
        <td>
            <img src="image/icon_6.jpg" alt="">
            国内游
            <hr color="#ffd700">
        </td>
    </tr>

    <!--第8行-->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td rowspan="2">
                        <img src="image/guonei_1.jpg" alt="">
                    </td>
                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                </tr>

                <tr>
                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第9行 境外游-->
    <tr>
        <td>
            <img src="image/icon_7.jpg" alt="">
            境外游
            <hr color="#ffd700">
        </td>
    </tr>

    <!--第10行-->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td rowspan="2">
                        <img src="image/jiangwai_1.jpg" alt="">
                    </td>
                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="" height="100%">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                </tr>

                <tr>
                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第11行-->
    <tr>
        <td>
            <img src="image/footer_service.png" alt="" width="100%">
        </td>
    </tr>

    <!--第12行-->
    <tr>
        <td align="center" bgcolor="#ffd700" height="40">
            <font color="gray" size="2">
                上海蜗牛科技股份有限公司<br>
                版权所有Copyright&copy;2006-2018，All Rights Reserved 沪ICP备66666666
            </font>
        </td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
14.表单标签_概述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
     <!--
        form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
            * 属性：
                * action：指定提交数据的URL
                * method：指定提交方式
                    * 分类：一共7种，2种比较常用
                           get:
                                1.请求参数会在地址栏种显示。会封装到请求行中(HTTP协议后讲解)
                                2.请求参数的长度有限制
                                3.不太安全
                           post:
                                1.请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议后讲解）
                                2.请求参数的大小没有限制
                                3.较为安全。
                    * 表单项中的数据要想被提交：必须要指定其name属性
        -->
     <form action="#" method="post">
        用户名：<input name="username"><br/>
        密码:<input name="password"><br>
         <input type="submit" value="登陆">
     </form>
</body>
</html>

15.表单标签_表单项input1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
     <!--
        form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
            * 属性：
                * action：指定提交数据的URL
                * method：指定提交方式
                    * 分类：一共7种，2种比较常用
                           get:
                                1.请求参数会在地址栏种显示。会封装到请求行中(HTTP协议后讲解)
                                2.请求参数的长度有限制
                                3.不太安全
                           post:
                                1.请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议后讲解）
                                2.请求参数的大小没有限制
                                3.较为安全。
                    * 表单项中的数据要想被提交：必须要指定其name属性
        -->
     <form action="#" method="get">
        <label for="username">用户名</label>：<input type="text"  name="username" placeholder="请输入用户名" id="username"><br/>
        密码:<input type="password" name="password" placeholder="请输入密码"><br>
        性别:<input type="radio" name="gender" value="male" checked> 男
             <input type="radio" name="gender" value="female">  女<br>
         爱好：<input type="checkbox" name="hobby" value="shopping" checked>逛街
            <input type="checkbox" name="hobby" value="java">游戏
            <input type="checkbox" name="hobby" value="game">Java<br>
            <input type="submit" value="登陆">
     </form>
</body>
</html>

16.表单标签_表单项input2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
     <form action="#" method="get">
        <label for="username">用户名</label>：<input type="text"  name="username" placeholder="请输入用户名" id="username"><br/>
        密码:<input type="password" name="password" placeholder="请输入密码"><br>
        性别:<input type="radio" name="gender" value="male" checked> 男
             <input type="radio" name="gender" value="female">  女<br>
         爱好：<input type="checkbox" name="hobby" value="shopping" checked>逛街
            <input type="checkbox" name="hobby" value="java">游戏
            <input type="checkbox" name="hobby" value="game">Java<br>

         图片:<input type="file" name="file"><br>
         隐藏域：<input type="hidden" name="id" value="aaa">
         取色器：<input type="color" name="color"><br>
         生日：<input type="date" name="birthday"><br>
         生日：<input type="datetime-local" name="birthday"><br>
         邮箱：<input type="email" name="email"><br>
         年龄：<input type="number" name="age">
         
         <br>
            <input type="submit" value="登陆">
            <input type="button" value="一个按钮"><br>
            <input type="image" src="img/regbtn.jpg"><br>
     </form>
</body>
</html>

17.案例_注册页面(HTML版)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <!--定义菜单 form-->
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="username" id="email"></td>
            </tr>
            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="name" id="name"></td>
            </tr>
            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="text" name="password" id="tel"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女</td>
            </tr>
            <tr>
                <td><label for="birthday">出生日期</label></td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>
            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td><input type="text" name="checkcode" id="checkcode">
                    <img src="img/verify_code.jpg">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>
    </form>
</body>
</html>

18.HTML标签_表单标签_表单项select&textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
     <form action="#" method="get">
        <label for="username">用户名</label>：<input type="text"  name="username" placeholder="请输入用户名" id="username"><br/>
        密码:<input type="password" name="password" placeholder="请输入密码"><br>
        性别:<input type="radio" name="gender" value="male" checked> 男
             <input type="radio" name="gender" value="female">  女<br>
         爱好：<input type="checkbox" name="hobby" value="shopping" checked>逛街
            <input type="checkbox" name="hobby" value="java">游戏
            <input type="checkbox" name="hobby" value="game">Java<br>

         图片:<input type="file" name="file"><br>
         隐藏域：<input type="hidden" name="id" value="aaa">
         取色器：<input type="color" name="color"><br>
         生日：<input type="date" name="birthday"><br>
         生日：<input type="datetime-local" name="birthday"><br>
         邮箱：<input type="email" name="email"><br>
         年龄：<input type="number" name="age"><br>

         省份：<select name="province">
                    <option value="">--请选择--</option>
                    <option value="1">北京</option>
                    <option value="2" selected>上海</option>
                    <option>成都</option>
                </select><br>

         自我描述：
            <textarea cols="20" rows="5" name="des"></textarea>
         
         <br>
            <input type="submit" value="登陆">
            <input type="button" value="一个按钮"><br>
            <input type="image" src="img/regbtn.jpg"><br>
     </form>
</body>
</html>