狂神说Java__HTML

已于 2024-03-24 17:41:41 修改
阅读量270 收藏 3
点赞数 3
文章标签： java html 开发语言
于 2024-03-24 15:49:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45978592/article/details/136989138
版权

HTML02:网页基本信息

1.我的第一个网页.html

<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->

<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签，它用来描述我们网站的一些信息 -->
    <!-- meta一般用来做SEO，即搜索引擎优化 -->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说java,西部开源">
    <meta name="description" content="来这个地方可以学java">
    <!-- 我的第一个网页 -->
    <title>我的第一个网页</title>
</head>
<!-- CTRL+/ 能够快速生成注释-->

<!-- body标签代表网页主体 -->
<body>
hello,world!
</body>
</html>

HTML03:网页基本标签

2.基本标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>

<!--标题标签-->
<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>

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

<!--换行标签-->
跑得快，     跑得快，<br>

一只没有耳朵， 一只没有尾巴，<br>

真奇怪！    真奇怪！<br>

两只老虎，    两只老虎，<br>

跑得快，     跑得快，<br>

一只没有耳朵， 一只没有尾巴，<br>

真奇怪！     真奇怪！<br>


<!--粗体，斜体-->
<h1>字体样式标签</h1>

粗体: <strong>i love you</strong>
斜体: <em>i love you</em>

<br>
<!--特殊符号-->


空      格:
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:

<br>
&gt;
<br>
&lt;
&copy;版权所有狂神

<!--
    特殊符号记忆方式

&    ;
查百度
-->

</html>

HTML04:图像标签

3.图像标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
src: 图片地址 （必填）
        相对地址，绝对地址
        ../   --上一级目录
alt: 图片名字 （必填）
-->
<img src="G:/HTML./resources./image./1.jpg" alt="狂神头像">

<img src="../resources/image/1.jpg" alt="狂神头像" title="我是你爸爸" width="300" height="300">

<a href="4.连接标签.html#down">跳转</a>

</body>
</html>

HTML05:超链接标签及应用

4.连接标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--使用name作为标记-->
<a name="top">顶部</a>

<!--a标签
href:必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面-</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度-</a>

<br>

<a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="狂神头像" title="悬停文字" width="300" height="300">
</a>

<p>
    a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="狂神头像" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="狂神头像" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="狂神头像" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="狂神头像" title="悬停文字" width="300" height="300">
    </a>
</p>



<!--锚链接-->
1.需要一个锚标记
2.跳转到标记
<a href="#top">回到顶部</a>

<a name="down">down</a>


<!--功能性标签
邮件标签:mailto:
-->

<a href="mailto:24736743@qq.com">点击联系我</a>


</body>
</html>

HTML06:块元素和行内元素

⭕块元素

        ●无论内容多少，该元素独占一行

        ●（p,h1-h6）

⭕

        ●内容撑开宽度，左右都是行内元素的可以排在一行

        ●（a.strong.em...）

HTML07:列表标签

5.列表.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>

<!--有序列表-->
应用范围：试卷，问答...
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

<hr>

<!--无序
应用范围：导航，侧边栏......
列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
</dl>

</body>
</html>

HTML08:表格标签

6.表格.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--表格table
行 tr  rows
列 td
-->

<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>

HTML09:媒体元素

7.媒体元素.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<!--src前加上muted,才能实现自动播放-->
<!--<video muted src="../resources/video/101、第31课-语法.mp4" controls autoplay></video>-->
<audio muted src="../resources/audio/18.mp3" controls autoplay></audio>

</body>
</html>

HTML10:页面结构分析

8.页面结构.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<header>
    <h2>网页头部</h2>
</header>

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

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

</body>
</html>

HTML11:iframe内联框架

9.内联框架iframe.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--iframe内联框架
str:地址
w-h：宽度高度
-->

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

<a href="https://www.baidu.com" target="hello">点击跳转</a>

<!--src是引用页面地址  name是框架标识名-->
<iframe src="//player.bilibili.com/player.html?aid=1501562130&bvid=BV1yD42177kt&cid=1464036398&p=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>

HTML12:初识表单post和get提交

10.学习表单.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post,get提交方式
      get方式提交:我们可以在url中看到我们提交的信息，不安全，高校
      post:比较安全，传输大文件
-->

<form action="1.我的第一个网页.html" method="post">

    <!--文本输入框：input type="text"-->
    <p>名字: <input type="text" name="username"></p>

    <!--密码框：input type="password"-->
    <p>密码: <input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">

    </p>


</form>

</body>
</html>

HTML13:文本框和单选框

10.学习表单.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post,get提交方式
      get方式提交:我们可以在url中看到我们提交的信息，不安全，高校
      post:比较安全，传输大文件
-->

<form action="1.我的第一个网页.html" method="get">

    <!--文本输入框：input type="text"
    value="狂神好帅"  默认初始值
    maxlength="8"    最多能写几个字符
    size="30"        文本框的长度
    -->
    <p>名字: <input type="text" name="username"></p>

    <!--密码框：input type="password"-->
    <p>密码: <input type="password" name="pwd"></p>

    <!--单选框标签
    input type = "radio"
    value : 单选框的值
    name : 表示组
    -->
    <p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <p>
        <input type="submit">
        <input type="reset">

    </p>


</form>

</body>
</html>

HTML14:按钮和多选框

10.学习表单.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post,get提交方式
      get方式提交:我们可以在url中看到我们提交的信息，不安全，高校
      post:比较安全，传输大文件
-->

<form action="1.我的第一个网页.html" method="get">

    <!--文本输入框：input type="text"
    value="狂神好帅"  默认初始值
    maxlength="8"    最多能写几个字符
    size="30"        文本框的长度
    -->
    <p>名字: <input type="text" name="username"></p>

    <!--密码框：input type="password"-->
    <p>密码: <input type="password" name="pwd"></p>

    <!--单选框标签
    input type = "radio"
    value : 单选框的值
    name : 表示组
    -->
    <p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <!--多选框
    input type = "checkbox"
    -->
    <p>
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="code" name="hobby"/>敲代码
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby"/>游戏
    </p>

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

    <p>
        <input type="submit">
        <input type="reset">

    </p>


</form>

</body>
</html>

of.silence
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javaweb笔记+代码(狂神说java)
08-27
"javaweb笔记+代码(狂神说java)"可能是一份由知名讲师“狂神”编写的教程资料，包含了学习JavaWeb开发的知识点以及相应的实践代码。 在JavaWeb开发中，以下是一些关键知识点： 1. **Servlet**: Servlet是Java Web...
狂神说上课笔记未删减 Java基础到技术升级
08-09
1、JavaSE：Java入门 2、JavaSE：基础语法 3、JavaSE：流程控制 4、JavaSE：方法 5、JavaSE：数组 6、JavaSE：面向对象 7、JavaSE：异常机制 8、JavaSE：常用类 9、JavaSE：集合框架 10、JavaSE：IO流 11...
狂神说springboot员工管理系统静态资源.zip
10-26
《狂神说springboot员工管理系统静态资源》是一个与Java开发相关的学习资料压缩包，主要针对Spring Boot框架在构建员工管理系统的应用。这个压缩包包含了该系统的一些关键静态资源，可以帮助学习者理解Spring Boot...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
狂神说 JavaWeb 笔记
12-31
狂神说笔记将涵盖JSON的序列化与反序列化，并讲解与Java对象之间的转换。 9. **Tomcat服务器**：作为JavaWeb的常用应用服务器，Tomcat的安装、配置、部署以及优化技巧也是学习的重要部分。 10. **安全机制**：包括...
配置Java开发环境
Broken_x的博客
07-10 1576
Java开发环境配置
Java方法练习-双色球彩票系统
T1798218285的博客
07-11 283
红色球号码从1-33中选择；蓝色球号码从1-16中选择。投注号码由6个红色球号码和1个蓝色球号码组成。三等奖 5+1 / 5+0 3000。四等奖4+1 / 4+0 200。六等奖1+1 / 1+0 5。一等奖6+1 1000w。二等奖6+0 500w。五等奖3+1 / 2+1。
elk部署springboot
Chihirozy的博客
07-11 394
elk部署springboot。
基于Java技术的校园台球厅人员与设备管理系统
heye0910032的博客
07-12 534
本文介绍了一个基于Java技术和SpringBoot框架开发的校园台球厅人员与设备管理系统。该系统利用MySQL数据库进行数据存储，实现了包括首页、个人中心、用户管理、会员账号管理、会员充值管理、球桌信息管理、会员预约管理、普通预约管理、留言反馈和系统管理等多功能集成。系统设计考虑了用户友好性和操作便捷性，旨在提高校园台球厅人员与设备管理的效率和质量。本文介绍了一个基于Java技术和SpringBoot框架开发的校园台球厅人员与设备管理系统。
从零手写实现 nginx-27-return 指令
最新发布
07-14 474
大家好，我是老马。很高兴遇到你。我们为 java 开发者实现了 java 版本的 nginx如果你想知道 servlet 如何处理的，可以参考我的另一个项目：手写从零实现简易版 tomcatminicat。
JavaSE 面向对象程序设计进阶 IO流 字节流详解 抛出异常
牛马程序员的博客
07-10 792
存储和读取数据的解决方案内存中数据不能永久化存储 程序停止运行 数据消失File只能对文件本身进行操作 不能读写文件里存储的数据读写数据必须要有IO流可以把程序中的数据保存到文件当中还可以把本地文件中的数据读取到数据当中。
uboot的功能
weixin_43732386的博客
07-13 35
uboot=裸机程序，uboot的核心功能是启动内核。
项目实战--XML文档解析工具
qq_40623672的博客
07-11 893
XML (eXtensible Markup Language)指可扩展标记语言，标准通用标记语言的子集，可以标记数据、定义数据类型，可以允许自定义标记语言进行数据承载，通常被用来传输和存储数据，定义也简单，遵循核心DTD（文档类型定义）语法约束。> < site > < name > CSDN博客网站 </ name > < url > https://blog.csdn.net/ </ url > < desc > 技术学习网站 </ desc > </ site >
【JavaEE】Spring AOP详解
m0_74105656的博客
07-10 899
SpringAOP知识点的详细讲解
【C++】模版与泛型编程
m0_52602233的博客
07-12 352
C++模板 函数模板 类模板
Java设计模式 ---（二）
As_Yua的博客
07-10 1469
适配器模式（Adapter Pattern）包括类适配器模式和对象适配器模式两种主要形式。类适配器模式通过继承实现适配器功能，将一个类的接口转换成客户端所期望的另一个接口；而对象适配器模式则通过组合实现适配器功能，持有适配者的实例来实现接口转换。类适配器模式对于需要重定义适配者行为的情况适用，但对象适配器模式更灵活且符合合成复用原则，通常推荐使用。对其他对象提供一种代理以控制对这个对象的访问。代理的作用代理模式的主要作用是为其他对象提供一种代理以控制对这个对象的访问。
初级java每日一道面试题-2024年7月14日
qq_43071699的博客
07-14 210
类提供了一系列静态方法用于文件和目录的操作，这些方法是基于Java NIO.2（Java New I/O 2）框架的。类中常用的静态方法。
深入解析发生 OOM 的三大场景
祝你身体健康，美满幸福
07-12 884
本文将深入探讨OOM的三大场景：堆内存溢出、方法区内存溢出和栈内存溢出，并分析它们的原因，提供相应的实战解决方案。
探索Web开发的无限可能：LangChain支持的Web框架全景
2401_85339615的博客
07-14 928
通过本文的详细介绍，你现在应该已经了解了LangChain支持的多种Web框架，以及如何在不同框架中编写基本的Web应用。无论是选择轻量级的Flask、全功能的Django、快速开发的Spring Boot、灵活的Express还是全栈的Ruby on Rails，LangChain都能够提供必要的支持。掌握这些Web框架的使用，将帮助你根据项目需求和团队技能选择合适的技术栈，快速构建高质量的Web应用。如果你对Web框架的选择和使用有更深入的问题或需求，不要忘记查阅相关文档或参与社区讨论。
狂神说java系列集合
07-05
《狂神说Java系列》是一套由阿里巴巴技术专家“狂神说”编写的Java编程教程和实战指南。这套系列主要聚焦于Java集合框架的讲解，包括了ArrayList、LinkedList、HashMap、TreeMap、HashSet、LinkedHashSet等常用数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值