JAVA WEB从入门到精通day01 HTML语言的学习_java web 从入门到精通 epub-优快云博客

本文详细介绍了HTML的基础知识，包括HTML的概念、基本语法、常用标签及其实战应用案例。通过本文，读者可以快速掌握如何使用HTML创建简单的网页。

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

本节思维导图

这里写图片描述

HTML简介

什么是HTML？

    超文本标记语言（HyperText Markup Language）
    “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
    是一种网页语言

HTML的规范

1.一个HTML文件以<HTML></HTML>作为开始和结束标签。
2.html的结构包括两部分
    （1）<head>设置相关信息</head>
    （2）<body>页面的具体内容</body>
3.html代码不区分大小写。

    第一个html程序
    <html>
        <head>
            <title>这是一个标题</title>
        </head>
        <body>
            第一个html页面
        </body>
    </html>

html中常用的标签

-文字标签：修改文字的样式 <font></font>
    *属性：size和color
            *size取值范围1-7
            *color可以使用英文单词或者十六进制数来表示颜色

-注释标签：<!-- html的注释-->

-标题标签：<h1></h1>  <h2></h2>......<h6></h6>  从h1到h6大小依次减小

-水平线标签：<hr>
    *属性:size和color
    *size表示水平线的粗细，color表示颜色

-特殊字符：&lt表示<  &gt表示>  &nbsp表示空格

-列表标签
    *分层列表
    <dl>
        <dt>上层内容</dt>
        <dd>下层内容</dd>
    </dl>
    *有序列表
    <ol type="a"> --type决定以哪种形式排序，默认是数字
        <li>列表项</li>
    </ol>
    *无序列表
    <ul type="circle"> --type决定列表项前的符号，默认是实心圆
        <li>列表项</li>
    </ul>  


-图像标签
    <img src="图片的路径"/>
    *属性 src：图片的路径  width：图片的宽度  height：图片的高度    


-超链接标签
    （1）链接资源：
    <a href="链接到资源的地址"></a>
    *属性：href：链接资源的地址  
    target：打开的方式。默认是当前页打开
            _blank:在一个新窗口打开
            _self:在当前页打开。默认的方式

    （2）定位资源
    先在某一个位置定位，然后可以点击设置好的链接回到这个位置。
    定位：
    <a name="位置名字"></a>
    回到这个位置
    <a href="#刚才设置的位置名字"></a>   


-表格标签
    *<table>
        <caption>表格的标题</caption>
        <tr>  --表示行
            <td></td>  -- 表示单元格
        </tr>
    </table>

    属性：width：宽度  height：高度  border：表格线
          bordercolor：表格线的颜色 cellspacing：单元格之间的距离
          align：对齐方式 
    合并单元格的两个属性：
            rowspan：跨行合并 例如：<td rowspan="3"></td>
            colspan：跨列合并     


-表单标签
    用来采集数据。
    <form></form>
    *属性：
        action：提交到某个地址。默认提交到当前页面。
        method：表单提交方式 常用的是get和post，默认是get数据
        笔试题目：
            get和post区别：
            （1）get请求地址栏会携带提交的数据，post则不会
            （2）get请求安全级别较低，post较高
            （3）get请求有数据大小的限制，post没有


表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等
    * 文本框  <input type="text" name=""> 保证数据的精确采集，name必须是独一无二的
    * 文本域  <textarea name="" cols="" rows="">指定行数和列数的一片文本输入区域
    * 密码框  <input type="password" name=""> 输入的文本都会以原点的形式显示
    * 隐藏域  <input type="hidden" name="" value=""> 用来收集不可见元素
    * 单选框  <input type="radio" name="" value=""> 单选框是以组为单位的，同一组中name必须相同，value不能相同
    * 复选框  <input type="checkbox" name="" value=""> 复选框允许选中多项内容，同一组中name必须相同，value不能相同
    * 文件上传框 <input type="file" name=""> 用来上传文件
    * 下拉选择框 <select name="">
                        <option value="">选项内容</option>
                  </select>
    *提交按钮 <input type="submit" name="" value="" > value定义按钮的显示文字
    *重置按钮 <input type="reset" name="" value="">
    *普通按钮 <input type="button" name="" value="">   



-其他常用标签
    <b></b>加粗
    <s></s>删除线
    <u></u>下划线
    <i></i>斜体
    <pre></pre>原样输出
    <sub></sub>下标
    <sup></sup>上标    


-html头标签的使用
    <meta>设置页面的一些相关内容
    -<meta name="" content=""> 搜索引擎在搜索信息时，从name和content找到该页面的相关信息
    <base>设置超链接的基本设置
    -<base target="_blank"> 可以设置当前页面所有超链接的打开方式都为新页面打开
    <link> 引入外部文件，可以引入css文件

实战：实现注册页面

--------

<html>
    <head>
        <title>注册页面</title>
    </head>
    <body>
    <center>
        <form method="post">
        <table>
            注册邮箱:<input type="text" name="zhuce">
            <br><br><br>
            密码    :<input type="password" name="pwd">
            <br><br><br>
            真实姓名:<input type="text" name="name">
            <br><br><br>
            性别:<input type="radio" name="sex" value="men">男<input type="radio" name="sex" value="women">女
            <br><br><br>
            出生日期:<select name="year">
                <option value="1991">1991</option>
                <option value="1992">1992</option>
                <option value="1993">1993</option>
                <option value="1994">1994</option>
                <option value="1995">1995</option>
            </select>
            <select name="month">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <select name="day">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <br><br><br>
            <input type="submit" value="提交">
        </table>    
        </form>
    </center>
    </body>
</html>

这里写图片描述