JavaWeb之HTML

最新推荐文章于 2022-07-29 07:06:22 发布
最新推荐文章于 2022-07-29 07:06:22 发布
阅读量774 收藏 2
点赞数 1
分类专栏： 前端技术栈 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41911251/article/details/121924297
版权

HTML 01:初识HTML

HTML Hyper Text Markup Language 超文本标记语言

超文本：文字、图片、音频、视频、动画等

W3C标准

World Wide Web Consortium（万维网联盟）是Web技术领域中立性技术标准机构

W3C标准包括：

​ 结构化标准语言(HTML、XML)

​ 表现标准语言(CSS)

​ 行为标准(DOM、ECMAScript)

常见IDE：

  1. 记事本
  2. Dreamweaver
  3. IDEA
  4. WebStorm

HTML02:网页的基本信息

注释快捷键：Ctrl + Shift + /

建HTML文件IDEA给写好

<!-- DOCTYPE：告诉浏览器使用什么规范   -->
<!DOCTYPE html>
<html lang="en">
<!--head 标签代表网页头部-->
<head>
    <!--meta描述性标签，用来描述网站一些信息-->
    <meta charset="UTF-8">
    <!--title网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体 -->
<body>
</body>
</html>

HTML03:网页基本标签

快速赋值一行代码到下一行： Ctrl + D

快捷键： 标签 + tab

  • 插代码块：```

  • 插入有序列表：1. + 空格

  • 插入无序列表：* - + 空格

  1. 标题标签
  2. 段落标签
  3. 换行标签
  4. 水平线标签
  5. 字体样式标签
  6. 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<!--段落标签-->
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
<p>跑得快        跑得快</p>
<p>一只没有耳朵    一只没有尾巴</p>
<p>真奇怪      真奇怪</p>

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

<!--换行标签-->
两只老虎    两只老虎 <Br/>
跑得快       跑得快 <Br/>
一只没有耳朵     一只没有尾巴<Br/>
真奇怪      真奇怪<Br/>
两只老虎     两只老虎<Br/>
跑得快        跑得快<Br/>
一只没有耳朵    一只没有尾巴<Br/>
真奇怪      真奇怪<Br/>

<!--粗体  斜体-->
<strong>OK</strong>
<em>OK</em>

<!--特殊符号-->
空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
大于号&gt;大于号    greater than
小于号&lt;小于号    lower  than
版权符号&copy;版权符号

<!--
    特殊符号记忆方式：
    & ;
    百度
-->
</body>
</html>

HTML04: 图像标签

常见的图片格式：

  • JPG
  • GIF
  • PNG
  • BMP(位图)
  • …
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
    
</head>
<body>
<!--图片标签
src:图片地址
相对地址(推荐)
绝对地址
./  --- 上级目录
alt：图片名字
-->
<img src="./resource/image/1.png" alt="截图" title="悬停文字">

</body>
</html>

HTML05:链接标签

  • 普通超链接
  • 锚超链接
  • 功能性超链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--a标签
href：必填，表示要跳转到那个页面
target:表示窗口在哪里打开
  _blank 在新标签中打开
  _self  在自己的网页中打开

-->
<a name="top">到这了</a>
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面</a>
<a href="2.基本标签.html" target="_self">点击我跳转到页面</a>
<Br/>
<p>
  <a href="1.我的第一个网页.html">
  <img src="./resource/image/1.png" alt="截图" title="悬停文字">
</a>
</p>

<a href="#ref"></a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<!--
功能性链接
  邮件链接：
  mailto:
QQ功能性链接:从QQ网站找代码
-->
<a href="mailto:2654179853@qq.com">点击联系我</a>
</body>

HTML06:块元素和行内元素

  • 块元素

    无论内容多少，该元素独占一行 (p、h1-h6)

  • 行内元素

    内容撑开宽度，左右都是行内元素的可以在排在一行(a、strong、em)

HTML07:列表标签

列表：

  • 无序列表
  • 有序列表
  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
order  list
list item
-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>HTML</li>
</ol>

<hr>

<!--无序列表
unorder list
list item

-->
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>HTML</li>
</ul>
<!--自定义列表
dl:标签    definition lists
dt:列表名称  definition term
dd:列表内容  definition description
-->
<dl>
  <dt>学科</dt>

  <dd>Java</dd>
  <dd>Python</dd>
  <dd>Linus</dd>
  <dd>C</dd>

  <dt>位置</dt>
  <dd>大庆</dd>
  <dd>潍坊</dd>
</dl>

</body>
</html>

HTML08:表格标签

基本结构：

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--表格table
行：tr   table row
列：td   table data cell
跨行：rowspan
跨列：colspan
-->
<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-2</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>

</table>

</body>
</html>

HTML09:媒体元素

视频元素

  • video

音频元素

  • audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<video src="./resource/video/1.mp4" controls autoplay></video>
<audio src="./resource/audio/1.mp3" controls></audio>
</body>
</html>

HTML10:页面结构分析

在这里插入图片描述

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

header、footer、nav更重要

HTML11:iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
iframe内联框架
src：路径地址
w-h： 宽度和高度
name:框架标识名
-->
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
</body>
</html>

HTML12:初识表单post和get提交(重要)

在这里插入图片描述

<!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"-->
  <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:文本框和单选框

在这里插入图片描述

<!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：最长能写几个字符
  size：输入框长度
-->
<p>名字：<input type="text" name="username" value="利" maxlength="5" size="30"></p>
<!--密码框：input type="password"-->
<p>密码：<input type="password" name="pwd"></p>
<p>
  <!--单选框radio
  value：单选框的值
  name：标识组    name要加
  -->
<p>姓别：
  <input type="radio" value="boy" name="sex"/>男
  <input type="radio" value="girl" name="sex"/>女
  
 </p>
  <!--提交 重置-->
  <input type="submit">
  <input type="reset">
</p>
</form>
</body>
</html>

HTML14:多选框和复选框

<!--多选框
    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="点击">
    </p>

HTML15:列表框文本域与文件域

<!--下拉框，列表框 -->
  <p>下拉框：
      <select name="列表名称" >
          <option value="china">中国</option>
          <option value="usa">美国</option>
          <option value="eth" selected>瑞士</option>
          <option value="Idian">印度</option>
      </select>

<!--文本域-->
    <p>
    <textarea name="textarea" id="1" cols="30" rows="10">文本内容</textarea>
    </p>

<!--文件域
    input type="file"
 -->
    <p>
    <input type="file" name="files">
    </p>

HTML16:搜索框滑块和简单验证

​

</p>
    <!--邮箱验证-->
    <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="0" step="10">
    </p>

    <!--滑块  调声音大小-->
    <p>音量：
        <input type="range" min="0" max="100" name="voice" step="2">
    </p>
    <!--搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>

HTML17:表单的应用

表单应用：

  • 隐藏域
  • 只读
  • 禁用
<!--只读-->
    <p>姓名：
        <input type="text" name="姓名" value="肖" readonly>
    </p>

    <!--禁用-->
    <p>姓名：
        <input type="text" name="姓名" value="肖" disabled>
    </p>

    <!--隐藏-->
    <p>姓名：
        <input type="text" name="姓名" value="肖" hidden>
    </p>

    <!--增强鼠标可用性-->
    <p>
        <label for="mark">点我一下试试</label>
        <input type="text" id="mark">
    </p>

HTML18:表单的初级验证

常用方式

  • placeholder
  • required
  • pattern
<!--placeholder提示信息-->
   <p>用户名:
       <input type="text" name="username" placeholder="请输入用户名">
   </p>
   <!--required 非空判断
   -->
   <!--pattern 正则表达式
   	https://www.jb51.net/tools/regexsc.htm
   -->
   <p>用户名:
       <input type="text" name="username" pattern="">
   </p>

HTML19:总结

在这里插入图片描述

​

灵动鱼
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java中的html （—）
Asukayo的博客
02-07 1163
1.HTML的概述 1.1HTML是什么，有什么用？ 文本:相当于记事本里写的文字。展示信息 超文本:超越了文本仅仅展示信息的功能范畴。泛指:图片、有样式的文字、点击跳转页 语言:工具。v标记:标签。 HTML是由标签所组成的语言，能展示超文本效果, HTML是用来写网页的，是设计页面的基础。 1.2HTML语言...
Javaweb后端开发必学(HTML、CSS、JS、Vue)
u014685437的博客
04-11 2718
函数(方法)是被设计为执行特定任务的代码块。
【JavaWeb—HTML标签】
DJL_new_life的博客
07-29 901
HTML
html如何直接连接java_我如何连接Java代码到我的HTML页面?
weixin_36173545的博客
03-04 8119
如何将Java代码连接到我的HTML页面？大多数人会告诉你使用框架，却不一定会一五一十地告诉你如何使用。我曾经处于你的位置，这感觉就像魔法一样。Java是在服务器上运行的，也就是一台电脑。在很多情况下，比如你在本地计算机上运行时，它和客户端是同一台计算机。它渲染HTML文本，并将其 "服务 "在一个特定的位置(URL)。浏览器或客户端 "浏览"(发送一个HTTP GET请求)到该位置，并将HTML...
JavaWeb仿小米在线商城ShoppingMall
06-30
JavaWeb在线商城开发知识总结(java+jsp+servlet+MySQL+jdbc+css+js+jQuery) 可以实现浏览商品，查看商品详情，添加购物车，计算价格等功能 项目文章：...
javaWeb自学-html基础
最新发布
03-09
javaWeb自学-html基础
SpringBoot开发之JavaWeb回顾
10-15
2. JSP（JavaServer Pages）：JSP是动态网页技术，允许开发者在HTML中嵌入Java代码，实现视图层的动态渲染。然而，Spring Boot推荐使用模板引擎如Thymeleaf、Freemarker或Mustache等替代JSP，以提高开发效率和可维护...
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
javaweb项目实（含笔记与详细实现步骤）
07-20
9. **前端技术**：虽然JavaWeb主要关注后端，但理解HTML、CSS和JavaScript也是必要的。它们用于构建和美化用户界面，与Java后端进行交互。 10. **笔记与详细实现步骤**：项目中的笔记和详细步骤是学习过程的重要...
javaWebhtml 网页配色方案
07-20
javaWebhtml 网页配色方案 javaWebhtml 网页配色方案 javaWebhtml 网页配色方案javaWebhtml 网页配色方案javaWebhtml 网页配色方案 javaWebhtml 网页配色方案 javaWebhtml 网页配色方案
用java写的一个简单web浏览器
10-11
用java编写的一个简单web浏览器 如果有朋友完善了 可以一起探讨
JavaWEB【jsp基本语法&表单提交方式&request对象】
m0_64522859的博客
03-25 1839
一、jsp简介 什么是jsp？ 1、jsp全名为 Java Server Pages 2、中文名叫 java服务器页面 3、它是在传统的网页HTML文件(*.html，*.htm)中插入Java程序段和jsp标记；标签通常以<%开头以%>结束。 4、后缀名为（*.jsp） 5、其根本是一个简化的Servlet设计 为什么要有jsp？ 1、直接使用html文件是没有办法输出java当中的信息 2、使用servlet来去输出一个网页非常的麻烦 3、于是就出现了jsp，又能写htm
java学习篇——Javaweb ：HTML基本（我们是后端）
zhang19971014的博客
04-06 774
简单介绍： ——————HTML页面—————— 作用：负责搭建页面内容和结构。 HTML:HyperTextMarkupLanguage —— 超文本标记语言 超文本：不是只有文字。 基本操作： 新建maven项目，将src删除，新建Web文件夹。新建day01文件夹。新建01文本标签html页面。 标题标签：<h1>内容标题1</h1>——————————内容加粗，间隔固定，独占一行。 水平分割线：<hr> 换行：<br>协..
javaWeb-HTML
weixin_45154559的博客
06-02 619
目录标题1.HTML(1)HTML使用场景(2)语法1.标签分为(3)文件标签(4)文本标签1.特殊字符编码表2.文本标签案例2.css(1)css使用场景3.javaScript(2)javaScript使用场景 1.HTML (1)HTML使用场景 用于搭建基础网页,展示页面的内容,按钮 (2)语法 1.标签分为 围堵标签:有开始标签和结束标签.如 标签是可以嵌套:需要正确嵌套,不能你中有我,我中有你 自闭和标签:开始标签和结束标签在一起.如换行标签 在开始标签中可以定义属性.属性是由键值对构成,值需
JavaWeb之HTML和CSS
qq_38596491的博客
06-22 3364
一、概述 1、B/S软件结构 JavaSE中，C/S结构：客户端（Client）——服务端（Server） JavaWeb中，B/S结构：浏览器（Browser）——服务器（Server） 2、前端开发流程 PS制作效果图——>前端工程师：做成静态网页——>Java程序员：将静态网页改为动态网页 3、网页的组成部分 内容（结构，页面中的内容，使用HTML展现）、表现（布局，颜色，大小等，使用CSS实现）、行为（页面中元素与输入设备交互的响应，一般使用JS技术实现） 4、HTML简介 （Htper
javaweb html
09-18
在Java Web中，使用Java语言编写后台逻辑代码，而HTML则用于描述网页的结构和内容。与Java文件需要编译后才能运行不同，HTML文件直接由浏览器进行解析执行。 HTML是一种标记语言，用于描述网页的结构。它具有一定的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值