Java后端程序员学习前端之html

CodeCipher2025-04-30 20:37

什么是html

H yper Text M arkup L anguage(超文本标记语言)

超文本包括:文字、图片、音频、视频、动画等

组织**：**W3C

World W ide Web Consortium(万维网联盟)。

成立子1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

http://www.w3.org!

http://www.chinaw3c.org

W3C标准包括
结构化标准语言(HTML、XML)
表现 标准语言(CSS)
行为标准(DOM、ECMAScript)

基本结构：

网页基本信息：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
    <!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签，它用来描述我们网站的一些信息 -->
    <!-- meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keyword" content="加油">
    
    <!-- title网页标题 -->
    <title>我的第一个网页</title>
</head>

<!-- body标签代表网页主体 -->
<body>
    HelloWorld
</body>
</html>

网页基本标签：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 标题标签 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- 段落标签 -->
    <p>窗外的麻雀 在電線桿上多嘴</p>
    <p>你說這一句 很有夏天的感覺</p>
    <p>手中的鉛筆 在紙上來來回回</p>
    <p>我用幾行字形容你是我的誰</p>
    <p>秋刀魚的滋味 貓跟你都想瞭解</p>
    <p>初戀的香味就這樣被我們尋回</p>
    <p>那溫暖 (的陽光) 像剛摘的 (鮮豔草莓)</p>
    <p>你說你捨不得吃掉這一種感覺</p>
    <p>雨下整夜 我的愛溢出就像雨水</p>
    <p>院子落葉 跟我的思念厚厚一疊</p>
    <p>幾句是非 也無法將我的熱情冷卻</p>

    <!-- 水平线标签 -->
    <hr />

    <!-- 换行标签 -->
    窗外的麻雀 在電線桿上多嘴
    <br />
    你說這一句 很有夏天的感覺
    <br />
    手中的鉛筆 在紙上來來回回
    <br />
    我用幾行字形容你是我的誰
    <br />
    幾句是非 也無法將我的熱情冷卻
    <br />

    <!-- 粗体，斜体 -->
    <h1>字体样式标签</h1>
    粗体: <strong>i love you</strong>
    斜体: <em>i love you</em>
    <br />

    <!-- 特殊符号 -->

    <!-- 空格 -->
    空&nbsp;格 <br />
    <!-- 大于 -->
    &gt; <br />
    <!-- 小于 -->
    &lt; <br />
    <!-- 版权符号 -->
    &copy; <br />
    <!-- 注册符号 -->
    &reg; <br />
    

</body>

</html>

图像标签

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- img学习
src:图片地址（必填）
    相对地址（推荐使用），绝对地址
    ../ 上一级目录     
alt: 图片名字（必填）
title: 悬停文字
-->

<img src="../resource/image/2.jpg" alt="张润" title="张润">
</body>
</html>

链接标签

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- a标签 
href: 必填，表示要跳转到哪个页面
target： 表示窗口在哪里打开
    _blank 在新标签打开
    _self 在自己网页打开
-->
<a href="1.我的第一个网页.html" target="_blank" title="悬停文字" width="100px" height="100px">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self"> 点击我跳转到百度</a>
<br>

<a href="1.我的第一个网页.html">
    <img src="../resource/image/2.jpg" alt="张润" width="100" height="100">
</a>
<br>


<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
# 
-->

<a href="#top">回到顶部</a>
<a name="down">回到底部</a>
<br>

<!-- 功能性链接 -->
 <a href="mailto:[email protected]">联系我</a>
</body>
</html>

行内元素和块元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • (p、h1-h6...)
  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以在排在一行
    • a . strong .em ...)

列表标签

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 有序列表
     应用范围:试卷，问答... -->
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ol>
    <hr>
    <!-- 无序列表
     应用范围:导航，菜单，列表... -->
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>
    <hr>
    <!-- 自定义列表
     dl:定义列表
     dt:定义列表的标题
     dd:定义列表的内容
     应用范围:定义列表，术语列表... -->
    <dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>菠萝</dd>
        <dd>橙子</dd>

        <dt>蔬菜</dt>
        <dd>西红柿</dd>
        <dd>黄瓜</dd>
        <dd>茄子</dd>
    </dl>
</body>
</html>

表格标签

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格标签
     table:定义表格
     tr:定义表格的行
     td:定义表格的单元格
     th:定义表格的表头
     
     -->
     <table border="1px">
        <tr>
            <!--colspan 跨列 -->
            <td colspan="4">1-1</td>
        </tr>

        <tr>
            <!--rowspan 跨行 -->
            <td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>

        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
     </table>

</body>
</html>

页面结构分析

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h2>网页头部</h2>
    </header>

    <section>
        <h2>网页主体</h2>
    </section>

    <footer>
        <h2>网页脚部</h2>
    </footer>
</body>
</html>

媒体元素

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 音频和视频
     src: 资源路径
     controls:控制条
     autoplay:自动播放
      -->
     <video src="视频地址" controls autoplay></video>
     <audio src="音频地址" controls autoplay></audio>
</body>
</html>

iframe内联框架

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- iframe内联框架
     src：地址
     w-h：宽度高度 
     -->

     <iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>
</body>
</html>

初始表单get和post提交

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>注册页面</h2>
    <!-- form表单
     action:表单提交的位置，可以是网站，也可以是一个请求处理地址
     method：post，get提交方式
        get：我们可以在url中看见我们提交的信息，不安全，高效
        post：比较安全，传输大文件
     -->
    <form action="1.我的第一个网页.html" method="post">
        <!-- 文本输入框：input type="text"  -->
         <p>名字：<input type="text" name="username" placeholder="请输入名字"></p>
         <!-- 密码输入框：input type="password" -->
         <p>密码：<input type="password" name="password" placeholder="请输入密码"></p>

         <p>
            <input type="submit">
            <input type="reset">
         </p>
    </form>
</body>
</html>

文本框和单选框

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>注册页面</h2>
    <!-- form表单
     action:表单提交的位置，可以是网站，也可以是一个请求处理地址
     method：post，get提交方式
        get：我们可以在url中看见我们提交的信息，不安全，高效
        post：比较安全，传输大文件
     -->
    <form action="1.我的第一个网页.html" method="post">
        <!-- 文本输入框：input type="text"  -->
         <p>名字：<input type="text" name="username" placeholder="请输入名字"></p>
         <!-- 密码输入框：input type="password" -->
         <p>密码：<input type="password" name="password" placeholder="请输入密码"></p>


         <!-- 单选框标签
          input type="radio">男
          name：单选框的名称，同一组单选框的name值必须相同
          value：单选框的值
          checked：默认选中
             -->
        <p>
            <input type="radio" name="sex" value="男" checked>男
            <input type="radio" name="sex" value="女">女
        </p>

         <p>
            <input type="submit">
            <input type="reset">
         </p>
    </form>
</body>
</html>

按钮和多选框

html 复制代码 
        <!-- 多选框
         input type="checkbox"
          -->
         <p> 爱好：
            <input type="checkbox" value="sleep" name="hobby">睡觉
            <input type="checkbox" value="eat" name="hobby">吃饭
            <input type="checkbox" value="play" name="hobby">打游戏
         </p>

        <!-- 按钮
         input="button" 普通按钮
         input="image" 图片按钮
         input="submit" 提交按钮
         input="reset" 重置按钮
         -->
        <p>
            <input type="button" name="btn1" value="点击变长">
            <input type="image" src="../resource/image/2.jpg">
        </p>

列表框文本域和文件域

html 复制代码 
        <!-- 下拉框，列表框
          -->
        <p>国家
            <select name="列表名称">
                <option value="china">中国</option>
                <option value="us">美国</option>
                <option value="eth">瑞士</option>
                <option value="yingdu">印度</option>
            </select>
        </p>
        
        <!-- 文本域
            cols="50" rows="10" 
        -->

        <p> 反馈：
            <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
        </p>

        <!-- 文件域
        input type="file" name="files" 
        -->
        <p>
            <input type="file" name="files">
            <input type="button" value="上传" name="upload">
        </p>

搜索滑块和简单验证

html 复制代码 
        <!-- 邮箱验证 -->
        <p>邮箱：
            <input type="email" name="email">
        </p>
        <!-- url -->
        <p>url
            <input type="url" name="url">
        </p>
        <!-- 数字 -->
         <p>商品数量
            <input type="number" name="num" max="100" min="10" step="1">
         </p>


         <!-- 滑块 -->
          <p>音量
            <input type="range" name="voice" max="100" step="2">
          </p>
         <!-- 搜索框 -->
         <p>
            <input type="search" name="search">
         </p>

表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled

表单初级验证

  • placeholder 提示信息
  • required 非空判断
  • pattern 正则表达式
相关推荐
wuhen_n1 小时前
CSS元素动画篇：基于页面位置的变换动画
前端·css·html·css3·html5
liang89993 小时前
Shiro学习（七）：总结Shiro 与Redis 整合过程中的2个问题及解决方案
redis·学习·bootstrap
weixin_486281453 小时前
FFmpeg源码学习---ffmpeg
学习·ffmpeg
Dr_Zobot5 小时前
SLAM学习系列——ORB-SLAM3安装（Ubuntu20-ROS/Noetic）
学习·ubuntu·软件安装
枫叶20006 小时前
OceanBase数据库-学习笔记5-用户
数据库·笔记·学习·oceanbase
Nuyoah.7 小时前
《Vue3学习手记7》
javascript·vue.js·学习
冰茶_7 小时前
WPF之Button控件详解
大数据·学习·microsoft·c#·wpf
北方之mini鱼7 小时前
使用Construct开发一个HTML5小游戏究竟需要多长时间？
前端·html·html5
MrZWCui7 小时前
iOS—仿tableView自定义闹钟列表
学习·macos·ios·objective-c
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03西电B测-计算机网络综合实验(含验收问题)04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05Coze扣子平台完整体验和实践（附国内和国际版对比）06DeepSeek各版本说明与优缺点分析07利用STM32实现语音识别功能08YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】09我决定放弃搞 Java 了10【VIsion Master】机器视觉软件二次开发（C#版本）学习笔记