• JavaWeb---HTML

    目录

    1.1web概念概述

    1.2软件架构：

    1. 2.1C/S: Client/Server 客户端/服务器端

    1.2.2.B/S: Browser/Server 浏览器/服务器端

    1.3.1静态资源：

    1.3.2 动态资源：

    2.HTML

    2.1概念：是最基础的网页开发语言

    2. 2快速入门：

    2.3标签学习：

    2.3.1文件标签：构成html最基本的标签

    2.3.2 文本标签：和文本有关的标签

    2.3.2案例：简介

    2.4图片标签：

    2.5列表标签：

    2.6链接标签：

    2.7div和span：

    2.8语义化标签：

    2.9表格标签：

    2.9案例：旅游网站首页

    2.10表单标签

    2.10.1表单：

    2.10.2表单项标签：

    1.1web概念概述

     JavaWeb：使用Java语言开发基于互联网的项目

    1.2软件架构：

    1. 2.1C/S: Client/Server 客户端/服务器端

    在用户本地有一个客户端程序，在远程有一个服务器端程序

    如：QQ，迅雷...

    优点：用户体验好

    缺点：

    1. 开发、安装，部署，维护 麻烦

    1.2.2.B/S: Browser/Server 浏览器/服务器端

    只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序

    优点：开发、安装，部署，维护 简单

    缺点：

    1. 如果应用过大，用户的体验可能会受到影响

    2. 对硬件要求过高

    1.3B/S架构详解

    资源分类：

    1.3.1静态资源：

    使用静态网页开发技术发布的资源。

    特点：

    所有用户访问，得到的结果是一样的。

    如：文本，图片，音频、视频, HTML,CSS,JavaScript

    如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

    1.3.2 动态资源：

    使用动态网页及时发布的资源。

    特点：

    所有用户访问，得到的结果可能不一样。

    如：jsp/servlet,php,asp...

    如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

    我们要学习动态资源，必须先学习静态资源！

    静态资源：

    HTML：用于搭建基础网页，展示页面的内容

    CSS：用于美化页面，布局页面

    JavaScript：控制页面的元素，让页面有一些动态的效果

    2.HTML

    2.1概念：是最基础的网页开发语言

    Hyper Text Markup Language 超文本标记语言

    超文本:

    超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.

    标记语言:

    由标签构成的语言。<标签名称> 如 html，xml

    标记语言不是编程语言

    2. 2快速入门：

    语法：

    1. html文档后缀名 .html 或者 .htm

    2. 标签分为以下两种：

    1. 围堵标签：有开始标签和结束标签。如

    2. 自闭和标签：开始标签和结束标签在一起。如

    3. 标签可以嵌套：

    需要正确嵌套，不能你中有我，我中有你

    错误：

    正确：

    4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

    5. html的标签不区分大小写，但是建议使用小写。

    1. html>
    2. <html lang="ch">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>呵呵title>
    6. head>
    7. <body>
    8. 呵呵
    9. body>

    2.3标签学习：

    2.3.1文件标签：构成html最基本的标签

    html:html文档的根标签

    head：头标签。用于指定html文档的一些属性。引入外部的资源

    title：标题标签。

    body：体标签

    ：html5中定义该文档是html文档

    2.3.2 文本标签：和文本有关的标签

    注释：

    to

    ：标题标签(h1~h6:字体大小逐渐递减)

    ：段落标签


    ：换行标签

    ：展示一条水平线

    属性：

    color：颜色

    width：宽度

    size：高度

    align：对其方式

            center：居中

            left：左对齐

            right：右对齐

    ：字体加粗

    ：字体斜体

    :字体标签

    :文本居中

    属性：

            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. 数值%：占比相对于父元素的比例

    2.3.2案例：简介

    1. html>
    2. <html lang="ch">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     title>
    6. head>
    7. <body>
    8. <header>
    9.     <div id="header">
    10.     <h1>
    11.         公司简介
    12.     h1>
    13.  
    14.     div>
    15.  
    16. header>
    17. <hr color="#ffd700">
    18.  
    19. <p>
    20. <font color="#FF0000">"程序员训练营"font>是由<b><i>XXXi>b>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
    21. p>
    22.  
    23. <p>
    24. 目前，“程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
    25. p>
    26.  
    27. <p>
    28.  
    29. 学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
    30. 程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
    31. p>
    32.  
    33. <p>
    34.  
    35. 一直以来，程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
    36. p>
    37.  
    38. <hr color="#ffd700">
    39. <footer>
    40.  
    41.     <div id="footer">
    42.     <font color="gray" size="2">
    43.         <center>
    44.             股份有限公司<br>
    45.             版权所有Copyright 2006-2018©
    46.         center>
    47.     font>
    48.     div>
    49. footer>
    50.  
    51. body>
    52. html>

    2.4图片标签：

    img：展示图片

    属性：src：指定图片的位置

    代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>图片标签title>
    6.  
    7. head>
    8. <body>
    9.  
    10.     
    11.  
    12.     <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
    13.  
    14.     
    15.  
    16.     <img src="./image/jiangwai_1.jpg">
    17.  
    18. body>
    19. html>
    2. 			
    3. <img src="./image/jiangwai_1.jpg">
    4. 			
    5. <img src="../image/jiangwai_1.jpg">

    2.5列表标签：

    有序列表：

    ol:定义一个有序列表        

    li:定义一个列表项

    无序列表：

    ul:定义一个无须列表

    li:定义一个列表项

    2.6链接标签：

    a:定义一个超链接

    属性：

    href：指定访问资源的URL(统一资源定位符)

    target：指定打开资源的方式，有以下两种方式

    _self:默认值，在当前页面打开

    _blank：在空白页面打开

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>连接标签title>
    6. head>
    7. <body>
    8.  
    9.     
    10.  
    11.     <a href="http://www.itcast.cn">点我a>
    12.     <br>
    13.  
    14.     <a href="http://www.itcast.cn" target="_self">点我a>
    15.     <br>
    16.     <a href="http://www.itcast.cn" target="_blank">点我a>
    17.  
    18.     <br>
    19.  
    20.     <a href="./5_列表标签.html">列表标签a><br>
    21.     <a href="mailto:itcast@itcast.cn">联系我们a>
    22.  
    23.     <br>
    24.     <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg">a>
    25.  
    26.  
    27. body>
    28. html>

    2.7div和span：

    div:每一个div占满一整行。块级标签

    span：文本信息在一行展示，行内标签 内联标签

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>块标签title>
    6. head>
    7. <body>
    8.     
    9.  
    10.     <span>黑马程序员span>
    11.     <span>传智播客span>
    12.  
    13.     <hr>
    14.     <div>黑马程序员div>
    15.     <div>传智播客div>
    16.  
    17.  
    18. body>
    19. html>

    2.8语义化标签：

    html5中为了提高程序的可读性，提供了一些标签。

    1.

    ：页眉

    2.

    ：页脚

    2.9表格标签：

    table：定义表格

            width：宽度

            border：边框

            cellpadding：定义内容和单元格的距离

            cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、

            bgcolor：背景色

            align：对齐方式

    tr：定义行

            bgcolor：背景色

            align：对齐方式

    td：定义单元格

            colspan：合并列

            rowspan：合并行

    th：定义表头单元格

    ：表格标题

    ：表示表格的头部分

    ：表示表格的体部分

    ：表示表格的脚部分

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>表格标签title>
    6. head>
    7. <body>
    8.  
    9.     <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    10.         <tr>
    11.            
    12.             <th>编号th>
    13.             <th>姓名th>
    14.             <th>成绩th>
    15.  
    16.         tr>
    17.  
    18.         <tr>
    19.             <td>1td>
    20.             <td>小龙女td>
    21.             <td>100td>
    22.  
    23.         tr>
    24.  
    25.         <tr>
    26.             <td>2td>
    27.             <td>杨过td>
    28.             <td>50td>
    29.  
    30.         tr>
    31.  
    32.     table>
    33.  
    34.  
    35.     <hr>
    36.  
    37.  
    38.     <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    39.  
    40.         <thead>
    41.             <caption>学生信息表caption>
    42.  
    43.             <tr>
    44.                 
    45.                 <th>编号th>
    46.                 <th>姓名th>
    47.                 <th>成绩th>
    48.  
    49.             tr>
    50.         thead>
    51.  
    52.  
    53.  
    54.         <tbody>
    55.             <tr bgcolor="#7fffd4" align="center">
    56.                 <td>1td>
    57.                 <td>小龙女td>
    58.                 <td>100td>
    59.  
    60.             tr>
    61.  
    62.             <tr>
    63.                 <td>2td>
    64.                 <td>杨过td>
    65.                 <td>50td>
    66.  
    67.             tr>
    68.  
    69.         tbody>
    70.  
    71.         <tfoot>
    72.             <tr>
    73.                 <td>3td>
    74.                 <td>尹志平td>
    75.                 <td>10td>
    76.  
    77.             tr>
    78.  
    79.         tfoot>
    80.  
    81.  
    82.     table>
    83.  
    84.     <hr>
    85.  
    86.     <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    87.         <tr>
    88.  
    89.             <th rowspan="2">编号th>
    90.             <th>姓名th>
    91.             <th>成绩th>
    92.  
    93.         tr>
    94.  
    95.         <tr>
    96.  
    97.             <td>小龙女td>
    98.             <td>100td>
    99.  
    100.         tr>
    101.  
    102.         <tr>
    103.             <td>2td>
    104.             <td colspan="2">杨过td>
    105.  
    106.  
    107.         tr>
    108.  
    109.     table>
    110.  
    111.  
    112.     <hr>
    113.  
    114.  
    115.  
    116.  
    117. body>
    118. html>

    2.9案例：旅游网站首页

    1. 确定使用table来完成布局

    2. 如果某一行只有一个单元格，则使用

    3. 如果某一行有多个单元格，则使用

    1. <tr>
    2.     <td>
    3.         <table>table>
    4.     td>
    5. tr>

    4. 代码实现

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>黑马旅游网title>
    6. head>
    7. <body>
    8.  
    9.     
    10.     
    11.     <table width="100%" align="center">
    12.        
    13.         <tr>
    14.             <td>
    15.                 <img src="image/top_banner.jpg" width="100%" alt="">
    16.             td>
    17.         tr>
    18.  
    19.         
    20.         <tr>
    21.             <td>
    22.                 <table width="100%" align="center">
    23.                     <tr>
    24.                         <td>
    25.                             <img src="image/logo.jpg" alt="">
    26.                         td>
    27.                         <td>
    28.                             <img src="image/search.png" alt="">
    29.                         td>
    30.                         <td>
    31.                             <img src="image/hotel_tel.png" alt="">
    32.                         td>
    33.                     tr>
    34.                 table>
    35.  
    36.             td>
    37.         tr>
    38.  
    39.         
    40.         <tr>
    41.             <td>
    42.                 <table width="100%" align="center">
    43.                     <tr bgcolor="#ffd700" align="center" height="45" >
    44.                         <td>
    45.                             <a href="">首页a>
    46.                         td>
    47.  
    48.                         <td>
    49.                             门票
    50.                         td>
    51.  
    52.                         <td>
    53.                             门票
    54.                         td>
    55.  
    56.                         <td>
    57.                             门票
    58.                         td>
    59.  
    60.                         <td>
    61.                             门票
    62.                         td>
    63.  
    64.                         <td>
    65.                             门票
    66.                         td>
    67.  
    68.                         <td>
    69.                             门票
    70.                         td>
    71.  
    72.                         <td>
    73.                             门票
    74.                         td>
    75.  
    76.                         <td>
    77.                             门票
    78.                         td>
    79.  
    80.                         <td>
    81.                             门票
    82.                         td>
    83.                     tr>
    84.                 table>
    85.             td>
    86.         tr>
    87.  
    88.         
    89.         <tr>
    90.             <td>
    91.                 <img src="image/banner_3.jpg" alt="" width="100%">
    92.             td>
    93.         tr>
    94.  
    95.         
    96.         <tr>
    97.             <td>
    98.                 <img src="image/icon_5.jpg" alt="">
    99.                 黑马精选
    100.                 <hr  color="#ffd700" >
    101.             td>
    102.         tr>
    103.  
    104.         
    105.         <tr>
    106.             <td>
    107.                 <table align="center" width="95%">
    108.                     <tr>
    109.                         <td>
    110.  
    111.                             <img src="image/jiangxuan_1.jpg" alt="">
    112.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    113.                             <font color="red">¥ 899font>
    114.                         td>
    115.  
    116.                         <td>
    117.  
    118.                             <img src="image/jiangxuan_1.jpg" alt="">
    119.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    120.                             <font color="red">¥ 899font>
    121.                         td>
    122.  
    123.                         <td>
    124.  
    125.                             <img src="image/jiangxuan_1.jpg" alt="">
    126.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    127.                             <font color="red">¥ 899font>
    128.                         td>
    129.  
    130.                         <td>
    131.  
    132.                             <img src="image/jiangxuan_1.jpg" alt="">
    133.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    134.                             <font color="red">¥ 899font>
    135.                         td>
    136.                     tr>
    137.                 table>
    138.             td>
    139.         tr>
    140.  
    141.         
    142.         <tr>
    143.             <td>
    144.                 <img src="image/icon_6.jpg" alt="">
    145.                 国内游
    146.                 <hr  color="#ffd700" >
    147.             td>
    148.         tr>
    149.  
    150.         
    151.         <tr>
    152.             <td>
    153.                 <table align="center" width="95%">
    154.                     <tr>
    155.                         <td rowspan="2">
    156.                             <img src="image/guonei_1.jpg" alt="">
    157.                         td>
    158.  
    159.                         <td>
    160.  
    161.                             <img src="image/jiangxuan_2.jpg" alt="" height="100%">
    162.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    163.                             <font color="red">¥ 699font>
    164.                         td>
    165.  
    166.                         <td>
    167.  
    168.                             <img src="image/jiangxuan_2.jpg" alt="">
    169.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    170.                             <font color="red">¥ 699font>
    171.                         td>
    172.  
    173.                         <td>
    174.  
    175.                             <img src="image/jiangxuan_2.jpg" alt="">
    176.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    177.                             <font color="red">¥ 699font>
    178.                         td>
    179.                     tr>
    180.  
    181.                     <tr>
    182.                         <td>
    183.  
    184.                             <img src="image/jiangxuan_2.jpg" alt="">
    185.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    186.                             <font color="red">¥ 699font>
    187.                         td>
    188.  
    189.                         <td>
    190.  
    191.                             <img src="image/jiangxuan_2.jpg" alt="">
    192.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    193.                             <font color="red">¥ 699font>
    194.                         td>
    195.  
    196.                         <td>
    197.  
    198.                             <img src="image/jiangxuan_2.jpg" alt="">
    199.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    200.                             <font color="red">¥ 699font>
    201.                         td>
    202.  
    203.  
    204.                     tr>
    205.                 table>
    206.             td>
    207.         tr>
    208.  
    209.         
    210.         <tr>
    211.             <td>
    212.                 <img src="image/icon_7.jpg" alt="">
    213.                 境外游
    214.                 <hr  color="#ffd700" >
    215.             td>
    216.         tr>
    217.  
    218.         
    219.         <tr>
    220.             <td>
    221.                 <table align="center" width="95%">
    222.                     <tr>
    223.                         <td rowspan="2">
    224.                             <img src="image/jiangwai_1.jpg" alt="">
    225.                         td>
    226.  
    227.                         <td>
    228.  
    229.                             <img src="image/jiangxuan_3.jpg" alt="" height="100%">
    230.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    231.                             <font color="red">¥ 699font>
    232.                         td>
    233.  
    234.                         <td>
    235.  
    236.                            <img src="image/jiangxuan_3.jpg" alt="">
    237.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    238.                             <font color="red">¥ 699font>
    239.                         td>
    240.  
    241.                         <td>
    242.  
    243.                            <img src="image/jiangxuan_3.jpg" alt="">
    244.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    245.                             <font color="red">¥ 699font>
    246.                         td>
    247.                     tr>
    248.  
    249.                     <tr>
    250.                         <td>
    251.  
    252.                            <img src="image/jiangxuan_3.jpg" alt="">
    253.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    254.                             <font color="red">¥ 699font>
    255.                         td>
    256.  
    257.                         <td>
    258.  
    259.                            <img src="image/jiangxuan_3.jpg" alt="">
    260.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    261.                             <font color="red">¥ 699font>
    262.                         td>
    263.  
    264.                         <td>
    265.  
    266.                            <img src="image/jiangxuan_3.jpg" alt="">
    267.                             <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
    268.                             <font color="red">¥ 699font>
    269.                         td>
    270.  
    271.  
    272.                     tr>
    273.                 table>
    274.             td>
    275.         tr>
    276.         
    277.         <tr>
    278.             <td>
    279.                 <img src="image/footer_service.png" alt="" width="100%">
    280.             td>
    281.         tr>
    282.  
    283.         
    284.         <tr>
    285.             <td align="center" bgcolor="#ffd700" height="40">
    286.                 <font color="gray" size="2">
    287.                 江苏传智播客教育科技股份有限公司
    288.                 版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
    289.                 font>
    290.             td>
    291.         tr>
    292.         
    293.     table>
    294.  
    295.  
    296. body>
    297. html>

    图片自行获取。

    效果如下：

    2.10表单标签

    2.10.1表单：

    用于采集用户输入的数据的。用于和服务器进行交互。
    form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
    属性：
    action：指定提交数据的URL
    method：指定提交方式
    method的分类：一共7种，2种比较常用为get与post
    get：
    1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
    2. 请求参数大小是有限制的。
    3. 不太安全。
    post：

    1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
    2. 请求参数的大小没有限制。
    3. 较为安全。

    表单项中的数据要想被提交：必须指定其name属性

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>表单标签title>
    6. head>
    7. <body>
    8.  
    9.     
    10.  
    11. <form action="#" method="post">
    12.  
    13.     用户名：<input type="text" name="username"><br>
    14.     密码：<input name="password"><br>
    15.  
    16.     <input type="submit" value="登录" >
    17. form>
    18.  
    19. body>
    20. html>


    2.10.2表单项标签：

    input：可以通过type属性值，改变元素展示的样式
    type属性：
    text：文本输入框，默认值
    placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息    
    password：密码输入框
    radio:单选框
    radio注意事项：
    1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
    2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    3. checked属性，可以指定默认值
    checkbox：复选框
    checkbox注意事项：
    1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    2. checked属性，可以指定默认值

    file：文件选择框
    hidden：隐藏域，用于提交一些信息。
    按钮分为：
    submit：提交按钮。可以提交表单
    button：普通按钮
    image：图片提交按钮，src属性指定图片的路径    

    label：指定输入项的文字描述信息

    label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
    注意： label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
    select: 下拉列表，子元素：option，指定列表项
    textarea：文本域
    cols：指定列数，每一行有多少个字符
    rows：默认多少行。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>表单标签title>
    6. head>
    7. <body>
    8.  
    9.     
    10.  
    11. <form action="#" method="get">
    12.  
    13.     <label for="username"> 用户名 label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    14.     密码：<input type="password" name="password" placeholder="请输入密码"><br>
    15.     性别：<input type="radio" name="gender" value="male" >  男
    16.          <input type="radio" name="gender" value="female" checked>  女
    17.             <br>
    18.     爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
    19.         <input type="checkbox" name="hobby" value="java"  checked> Java
    20.         <input type="checkbox" name="hobby" value="game"> 游戏<br>
    21.  
    22.     图片：<input type="file" name="file"><br>
    23.     隐藏域：<input type="hidden" name="id" value="aaa"> <br>
    24.  
    25.     取色器：<input type="color" name="color"><br>
    26.     生日：<input type="date" name="birthday"> <br>
    27.     生日：<input type="datetime-local" name="birthday"> <br>
    28.     邮箱：<input type="email" name="email"> <br>
    29.     年龄：<input type="number" name="age"> <br>
    30.  
    31.     省份：<select name="province">
    32.             <option value="">--请选择--option>
    33.             <option value="1">北京option>
    34.             <option value="2">上海option>
    35.             <option value="3" selected>陕西option>
    36.          select><br>
    37.  
    38.     自我描述：
    39.         <textarea cols="20" rows="5" name="des">textarea>
    40.  
    41.     <br>
    42.     <input type="submit" value="登录" >
    43.     <input type="button" value="一个按钮" ><br>
    44.     <input type="image" src="img/regbtn.jpg">
    45.  
    46.  
    47. form>
    48.  
    49. body>
    50. html>

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>注册页面title>
    6. head>
    7. <body>
    8.  
    9.     
    10.     <form action="#" method="post">
    11.         <table border="1" align="center" width="500">
    12.             <tr>
    13.                 <td><label for="username">用户名label>td>
    14.                 <td><input type="text" name="username" id="username">td>
    15.             tr>
    16.  
    17.             <tr>
    18.                 <td><label for="password">密码label>td>
    19.                 <td><input type="password" name="password" id="password">td>
    20.             tr>
    21.  
    22.             <tr>
    23.                 <td><label for="email">Emaillabel>td>
    24.                 <td><input type="email" name="email" id="email">td>
    25.             tr>
    26.  
    27.             <tr>
    28.                 <td><label for="name">姓名label>td>
    29.                 <td><input type="text" name="name" id="name">td>
    30.             tr>
    31.  
    32.             <tr>
    33.                 <td><label for="tel">手机号label>td>
    34.                 <td><input type="text" name="tel" id="tel">td>
    35.             tr>
    36.  
    37.             <tr>
    38.                 <td><label>性别label>td>
    39.                 <td><input type="radio" name="gender" value="male"> 男
    40.                     <input type="radio" name="gender" value="female"> 女
    41.                 td>
    42.             tr>
    43.  
    44.             <tr>
    45.                 <td><label for="birthday">出生日期label>td>
    46.                 <td><input type="date" name="birthday" id="birthday">td>
    47.             tr>
    48.  
    49.             <tr>
    50.                 <td><label for="checkcode">验证码label>td>
    51.                 <td><input type="text" name="checkcode" id="checkcode">
    52.                     <img src="img/verify_code.jpg">
    53.                 td>
    54.             tr>
    55.  
    56.  
    57.             <tr>
    58.                 <td colspan="2" align="center"><input type="submit" value="注册">td>
    59.             tr>
    60.         table>
    61.  
    62.  
    63.     form>
    64.  
    65. body>
    66. html>

  • 相关阅读:
    电路图中电阻分类字母速记说明图文
    mysql文档--myisam存储引擎--myisam引擎全解--底层探索
    HTTP响应详解
    低代码平台技术分享官 | 漫话iGIX前端设计模式
    python基础——列表【创建，下标索引，常见操作方法】
    CSS基础（10）- 常规流
    如何使用csproj构建C#源代码组件NuGet包？
    资源画像，看得见的容器资源优化助手
    UART、RS232、RS485、I2C和SPI的介绍
    Linux线程同步对象：互斥体、信号量、条件变量、读写锁
  • 原文地址：https://blog.csdn.net/weixin_65440201/article/details/126007838