javaweb基础 ---- HTML超文本语言-CSDN博客

本文链接：https://blog.csdn.net/m0_46523928/article/details/117395097

javaweb基础 ---- HTML超文本语言

HTML超文本语言的理解：

HTML超文本语言用超链接的方法，将各种不同空间的文字信息组织在一起，常用于搭建基础网页，展示页面的静态资源。
HTML非编程语言，语法格式单一，逻辑性不复杂，难点在于将各类元素及属性有序组合出视觉效果。

HTML超文本语言的使用：

标签效果分类为文本，图片，列表，链接，块，表格，表单。
文本元素中段落标签常嵌套字体，加粗，斜体标签，段内内容自动换行。段标签下段间距大于行标签下行间距。
表单效果标签<input>的属性name,全局属性id都有标识作用：属性name用于对提交到服务器后的表单数据进行标识，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值；name还有引用作用：在客户端通过 JavaScript 引用表单数据。属性id用于对表签本身进行标识，通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式

文本效果标签的测试代码:

<!--分级标题标签-->
<h1>***</h1>
<h2>***</h2>
<h3>***</h3>
<h4>***</h4>
<h5>***</h5>
<h6>***</h6>
<center>***</center>
<!--hr: 显示一条水平线
    *属性：
      *color:颜色
      *width:横向宽度
      *size: 纵向高度
      *align: 位置  
-->
<hr color="?" width="?" size="10" align="?" >
<!--换行-->
<br>
<!--段落标签-->
<p>***</p>
<!--加粗-->
<b>***</b>
<!--斜体-->
<i>***</i>
<!--字体标签,包含颜色，大小，字体，位置等属性-->
<font color="?" size="?" face="?" align="?">

图片效果标签的测试代码：

    <!--img: 展示一张图片
        *属性:
          * src：图片路径
              * ./：代表当前目录  ./image/1.jpg
              * ../:代表上一级目录
          * alt: 位置
          * width: 宽度
          * height: 高度
       -->
    <img src="图片路径" alt="?" width="?" height="?"/>

列表效果标签的测试代码：

  <!-- ol: 有序列表
	  * 属性：
	     * type：标号种类，包括英文字母，数字，罗马数字
		   start: 标号起始的位置
   -->
  <!--列表文本-->
    <ol type="?" start="?">
        <li>***</li>
        <li>***</li>
        <li>***</li>
     </ol>

  <!-- ul: 无序列表-->		 
       * 属性：
	     * type: 标记种类
             disc: 空心圆
             square：方形
             circle: 实心圆
    -->
    <ul type="?">
        <li>***</li>
        <li>***</li>
        <li>***</li>
    </ul>

链接效果标签的测试代码：

<!--点击字样跳转到网址,包含跳转窗口设置属性-->
<a href="http://www.baidu.com" >百度一下</a><!--默认为当前窗口-->
<a href="http://www.baidu.com" target="_self">当前窗口，百度一下</a>
<a href="http://www.baidu.com" target="_blank">新建窗口，百度一下</a>
<!--点击字样跳转到项目资源-->
<a href="./5_列表标签.html">列表标签</a><br> <./为当前窗口>
<!--点击图片跳转到网址-->
<a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>

块效果标签的测试代码：

    <!--div:每一个div占满一整行。块级标签
      -->
    <div>***</div>
  
    <!--span：文本信息在一行展示，行内标签 内联标签
        -->
    <span>***</span>

表格效果标签的测试代码：

<!--table：表格
    * 属性：
       * width:宽度
       * border:边框
       * cellpadding:定义内容和单元格之间的距离
       * cellspacing:定义单元格之间的距离，如果指定为0，则单元格的线会合为一条
       * bgcolor：背景色
       * align：对齐方式
-->
<table border="?" width="?" cellpadding="?" cellspacing="?" bgcolor="?" align="?">       
<！-- thead：表示表格的头部分-->
      <thead>
            <!--caption：表格标题-->
            <caption>表名</caption>
            <!--tr:定义行
                 * 属性：
                 * bgcolor：背景色
                 * aglin：对齐方式
              --> 
            <tr>
                <!--th：定义表头单元格-->
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
       </thead>

        <!-- tbody：表示表格的体部分 -->
        <tbody>
            <tr bgcolor="?" align="?">
                <!--td：定义单元格
                     * colspan：合并列
                     * rowspan：合并行
                  -->
                <td>###</td>
                <td>###</td>
                <td>###</td>
            </tr>
        </tbody>
        
        <!--tfoot：表示表格的脚部分-->
        <tfoot>
            <tr>
                <td>$$$</td>
                <td>$$$</td>
                <td>$$$</td>
            </tr>
        </tfoot>
    </table>

表单效果标签的测试代码:

 <!--form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
     * 属性：
        * action：指定提交数据的URL，当用户单击“提交”按钮时，表单数据将发送到服务器上的指定文件中
        * method:指定提交方式
            get：
             1. 请求参数会在地址栏中显示。会封装到请求行中。
             2. 请求参数大小是有限制的。
             3. 不太安全。
            post： 
             1. 请求参数不会再地址栏中显示。会封装在请求体中。
             2. 请求参数的大小没有限制。
             3. 较为安全。
     * 表单项中的数据要想被提交：必须指定其name属性
 -->

<form action="?" method="?">
  <!--input: 表单输入 
      * 属性：
         * type：输入内容类型
             text:文本  附placeholder：编辑框提示文字
             password:密码   附placeholder：编辑框提示文字
             radio:单选框  附checked：初始默认选项
             checkbox：复选框 附checked：初始默认选项
             file:图片
             color:取色器
             hidden:隐藏域
             date: 生日 
             datetime-local:生日
             email:邮箱
             number:年龄
             submit：提交数据
             button：按钮
             image：图片
         * name：键名
         * value:键值
         * id：键的id号
   -->
    提示名称：<input type="?" name="?" placeholder="编辑框提示文字" id="？"><br>

 <!--select:下拉框-->
    提示名称：<select name="?">
            <option value="">--请选择--</option>
            <option value="1">下拉选项名</option>
            <option value="2">下拉选项名</option>
            <option value="3" selected>下拉选项名</option>
         </select><br>
<!--textarea:多段文本输入框,cols：指定列数，每一行有多少个字符,rows：默认多少行。-->
  <textarea cols="20" rows="5" name="des"></textarea>
</form>

旅游网首页测试代码：

<!DOCTYPE html><!--<!DOCTYPE html>：html5中定义该文档是html文档-->
<html lang="en"><!--html:html文档的根标签-->
<head><!--head：头标签。用于指定html文档的一些属性。引入外部的资源-->
    <meta charset="UTF-8">
    <title>黑马旅游网</title><!--title：标题标签。-->
</head>

<!--页面元素分析    
    0.body中用table布局整体，调整table宽度占比，对齐方式
    1.第一行插入一个单元格并调整宽度占比，对齐方式；单元格插入图片
    2.第二行一列嵌套一行多列表格来实现多个单元格效果并调整table宽度占比，对齐方式；分别插入图片
    3.第三行一列嵌套一行多列表格并调整table宽度占比，对齐方式；调整内嵌表格一行的宽度，背景色，对齐位置；分别插入文字跳转链接作导航栏
    4.第四行同第一行，图片可设置未加载成功时的显示信息
    5.第五行插入一个单元格，单元格插入图片，水平线并调整水平线的颜色，宽度，高度，位置
    6.第六行插入多个单元格同第二行处理方式，单元格分别插入图片，文字段落，字体
    7.同第五行
    8.第八行一列内嵌两行多列表格，第一列合并上下两个单元格，单元格插入内容同第六行
    9.同第五行
    10.同第八行
    11.同第一行
    12.调整行的宽度，背景色，对齐方式；并插入字体文本
 -->


<body><!--body：体标签-->
<!---->
<!--最外层的table，用于整个页面的布局-->
<!--在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来-->
<!--html的标签不区分大小写，但是建议使用小写-->
<!--table定义表格:属性如下
			* width：宽度
			* border：边框
			* cellpadding：定义内容和单元格的距离
			* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
			* bgcolor：背景色
			* align：对齐方式 -->
<table width="100%" align="center">
    <!-- 第1行 -->
    <tr>
        <td>
            <!--图片可用网络资源的绝对路径或者相对路径
            相对路径用./代表当前目录，用../:代表上一级目录-->
            <img src="image/top_banner.jpg" width="100%" alt="">
        </td>
    </tr>

    <!-- 第2行 -->
    <!-- 一行有多个单元格
     <tr>
         <td>
             <table></table>
         </td>
     </tr>
     <tr>
     -->
    <td>
        <!--宽度width：
            数值 ，单位默认是 px(像素)
            数值%：占比相对于父元素的比例-->
        <table width="100%" align="center">
            <tr>
               
                <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">
                <!---->
                <!--背景颜色bgcolor:
                             red,green,blue
                             rgb(值1，值2，值3)：值的范围：0~255
                             #值1值2值3：值的范围：00~FF之间。如： #FF00FF-->
                <!--高度height：
               数值 ，单位默认是 px(像素)
               数值%：占比相对于父元素的比例-->
                <!---->
                <tr bgcolor="#ffd700" align="center" height="45">
                    <td>
                        <a href="" target="_blank">首页</a>
                    </td>

                    <td>

                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第4行 轮播图 -->
    <tr>
        <td>
            <!--alt属性用作图片无法正常显示而替代性地显示alt属性值-->
            <img src="image/banner_3.jpg" alt="" width="100%">
        </td>
    </tr>

    <!-- 第5行 黑马精选-->
    <tr>
        <td>
            <img src="image/icon_5.jpg" alt="">
            本站精选
            <hr color="#ffd700" width="100%" size="2" align="left">
        </td>
    </tr>

    <!-- 第6行 -->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td>

                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p><!--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><!--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：合并行
                    colspan：合并列-->
                    <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">
                传智播客有限公司
                版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
            </font>
        </td>
    </tr>

</table>

注册表单页面的测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>

<!--页面效果分析：
 1.整体框架：整体定义为表单，用table搭建框架：九行，前八行两列，最后一行一列
 2.点击提示名，对应输入框子自动出现光标：提示名称写进lable标签，指向对应input标签的id
 3.性别单选框：input标签type属性为radio
 4.出生日期选择日历: input标签type属性为date
 5.单行点击注册，提交数据：行标签type属性为列合并，提交数据即input标签type属性为submit
-->
<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="email" 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="tel" id="tel"></td>
            </tr>

            <tr>
                <td><label>性别</label></td>
                <!--要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。-->
                <!--一般会给每一个单选框提供value属性，指定其被选中后提交的值-->
                <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>