Java全栈课程之HTML详解

于 2024-01-25 10:25:42 发布
阅读量898 收藏 23
点赞数 15
分类专栏： Java全栈开发 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Annzz123/article/details/135731180
版权

一、什么是HTML

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

二、HTTML发展史

HTML 1.0 -- 在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准);
HTML 2.0 -- 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时;
HTML 3.2-–1996年1月14日,W3C推荐标准;HTML 4.0-–1997年12月18日,W3C推荐标准;
HTML 4.01 -- 1999年12月24日,是在HTML4.0基础上的微小改进,W3C推荐标准;
HTML 5的第一份正式草案已于2008年1月22日公布,仍继续完善。

三、HTML5的优势

        1.世界知名浏览器厂商对HTML5的支持

                微软、Google、苹果、Opera、Mozilla

        2.市场的需求

        3.跨平台

四、W3C标准

        1.W3C

                ① World Wide Web Consortium(万维网联盟)
                ② 成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
                ③ http://www.w3.org/
                ④ http://www.chinaw3c.org/

        2.W3C标准包括

                ① 结构化标准语言(HTML、XML)
                ② 表现标准语言(CSS)
                ③ 行为标准(DOM、ECMAScript)

五、常见IDE

        1.记事本

        2.Dreamweaver

        3.IDEA

        4.WebStorm

六、HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<body>、</body>等成对的标签,分别叫开放标签和闭合标签单独呈现的标签(空元素),如<hr/>;意为用/来关闭空元素

七、网页基本信息

        1.DOCTYPE声明

        2.<title>标签

        3.<meta>标签

<!DOCTYPE html>
<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<html lang="en">
<!--head标签代表网页的头部-->
<head>
<!--meta描述性标签，用来描述我们网站的一些信息-->
<!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <!--关键词描述-->
    <meta name="keywords" content="内容">
    <!--描述-->
    <meta name="description" content="学习html">
<!--title网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页的主体-->
<body>
HELLO
</body>
</html>

八、网页基本标题

       1.标题标签

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

         2.段落标签

    <!--段落标签-->
    <p>1.二级缓存也叫全局缓存,一级缓存作用域太低了,所以诞生了二级缓存。</p>
    <p>2.基于namespace级别的缓存,一个名称空间,对应一个二级缓存。</p>
    <p>3.工作机制</p>
    <p>① 一个会话查询一条数据,这个数据就会被放在当前会话的一级缓存中。</p>
    <p>② 如果当前会话关闭了,这个会话对应的一级缓存就没了;但是我们想要的是,会话关闭了,一级缓存中的数据被保存到二级缓存中。</p>
    <p>③ 新的会话查询信息,就可以从二级缓存中获取内容</p>
    <p>④ 不同的mapper查出的数据会放在自己对应的缓存(map)中。</p>

        3.换行标签 

    <!--换行标签-->
    1.二级缓存也叫全局缓存,一级缓存作用域太低了,所以诞生了二级缓存。<br/>
    2.基于namespace级别的缓存,一个名称空间,对应一个二级缓存。<br/>
    3.工作机制<br/>
    ① 一个会话查询一条数据,这个数据就会被放在当前会话的一级缓存中。<br/>
    ② 如果当前会话关闭了,这个会话对应的一级缓存就没了;但是我们想要的是,会话关闭了,一级缓存中的数据被保存到二级缓存中。<br/>
    ③ 新的会话查询信息,就可以从二级缓存中获取内容<br/>
    ④ 不同的mapper查出的数据会放在自己对应的缓存(map)中。<br/>

        4.水平线标签 

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

        5.字体样式标签  

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

        6.注释和特殊符号

    <!--注释和特殊符号-->
    注释：<!-- -->
    空格：&nbsp;
    大于号：&gt;
    小于号：&lt;
    版权符号：&copy;

九、图像标签

        1.常见的图片格式：jpg、gif、png、bmp

        2.语法

<!--img学习
src:图片地址(必填)
    相对地址(推荐使用),绝对地址
    ../ 上一级目录
alt:图片名字(必填)
title:鼠标悬停提示文字
width:图像宽度
height:图像高度
-->
    <img src="../resources/image/tu.jpg" alt="图片" title="悬停文字" width="300px" height="300px">

十、链接标签

        1.文本超链接

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

         2.图像超链接

<a href="1.我的第一个网页.html">
    <img src="../resources/image/tu.jpg" alt="图片" title="悬停文字" width="300px" height="300px">
</a>

        3.锚链接 

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

        4.功能性链接 

<!--功能性链接
邮件链接：mailto
-->
<a href="mailto:1847147914@qq.com">联系我</a>

十一、行内元素和块元素

        1.块元素

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

                ② 例如：p、h1-h6

        2.行内元素

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

                ② a、strong、em

十二、列表

        1.什么是列表

        列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。

        2.列表的分类

                ① 无序列表

<!--无序列表-->
<ul>
    <li>java</li>
    <li>mybatis</li>
    <li>spring</li>
    <li>html</li>
    <li>vue</li>
</ul>

                ② 有序列表 

<!--有序列表-->
<ol>
    <li>java</li>
    <li>mybatis</li>
    <li>spring</li>
    <li>html</li>
    <li>vue</li>
</ol>

                ③ 定义列表 

<!--自定义列表
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>
    <dd>黑龙江</dd>
</dl>

十三、表格

        1.为什么使用表格

                ① 简单通用

                ② 结构稳定

        2.基本结构

                ① 单元格

                ② 行

                ③ 列

                ④ 跨行

                ⑤ 跨列

<!--表格table
行 tr
列 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>

十四、视频和音频

        1.视频元素

<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resources/video/云涛-好想告诉她(标清).mp4" controls autoplay></video>

        2.音频元素 

<audio src="../resources/audio/云涛-好想告诉她.mp3" controls autoplay></audio>

十五、页面结构分析

元素名描述
header标题头部区域的内容（用于页面或页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面的一块区域）
sectionweb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚步</h2>
</footer>

十六、iframe内联框架 

<!--iframe内联框架
src：地址
width：宽度
height：高度
-->
<iframe src="" name="hello" frameborder="no" width="800px" height="500px"></iframe>
<a href="https://blog.csdn.net/Annzz123?type=lately" target="hello">点击跳转</a>

十七、表单语法

        1.表单元素格式

属性说明
type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和 button,默认为text
name称名的素元单表定指
value值个一定指须必时radio为type。值始初的素元
size指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlengthtype为text或password时,输入的最大字符数
checkedtype为radio或checkbox时,指定按钮是否是被选中

        2.表单的应用

<h1>注册</h1>
<!--表单from
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post get 提交方式
    post:不可以在url中看到提交信息，不安全，传输大文件
    get:可以在url中看到提交信息，高效不安全

-->
<form action="1.我的第一个网页.html" method="get">
    <!--文本输入框：input type="text"
     value="小孙同学" 默认初始值
     maxlength="8"    最长能写几个字符
     size="30"          文本框长度
     -->
    <p>名字：<input type="text" name="username" value="小孙同学" maxlength="8" size="30"></p>
    <!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
    <!--单选框标签
         type="radio"
         value：单选框的值
         name：表示组
    -->
    <p>
        性别
        <input type="radio" name="sex" value="boy" checked>男
        <input type="radio" name="sex" value="girl">女
    </p>
    <!--多选框
        type="checkbox"
    -->
    <p>
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--下拉框，列表框-->
    <p>下拉框：
        <select name="列表名称">
            <option value="china" selected>中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
            <option value="yindu">印度</option>
        </select>

    </p>
    <!--文本域-->
    <p>文本域
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
    <!--文件域
        type="file" name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <!--邮件验证-->
    <p>
        <input type="email" name="email">
    </p>
    <!--URL-->
    <p>
        <input type="url" name="url">
    </p>
    <!--数字-->
    <p>
        <input type="number" name="number" max="100" min="0" step="1">
    </p>
    <!--滑块-->
    <p>
        <input type="range" min="0" max="100" name="range">
    </p>
    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>
    <!--按钮
        type="button" 普通按钮
        type="image"  图片按钮
        type="submit" 提交按钮
        type="reset"  重置按钮
    -->
    <p>按钮：
        <input type="button" name="btn1"value="点击变长">
        <input type="image" src="../resources/image/tu.jpg">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

        3.表单的属性

                ① 只读 readonly

                ② 隐藏 hidden

                ③ 禁用 disabled

        4.表单的初级验证

                ① 提示信息 placeholder

                ② 非空判断 required

                ③ 正则表达式 pattern

 

 

 

 

小孙同学1024
关注
  • 15
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Java中的html （—）
Asukayo的博客
02-07 1165
1.HTML的概述 1.1HTML是什么，有什么用？ 文本:相当于记事本里写的文字。展示信息 超文本:超越了文本仅仅展示信息的功能范畴。泛指:图片、有样式的文字、点击跳转页 语言:工具。v标记:标签。 HTML是由标签所组成的语言，能展示超文本效果, HTML是用来写网页的，是设计页面的基础。 1.2HTML语言...
JavaWeb学习之HTML
weixin_45676761的博客
04-08 168
想要胜任java开发的工作，那么学习JavaWeb是必不可少的一环。只有学习了JavaWeb，你才能了解前端和后端是怎样进行交互，它们是怎样组成一个完整的项目的。今天我们就先来学习JavaWeb中最基础的知识：HTML。
HTML
weixin_48048140的博客
08-06 845
HTML 1 HTML入门 1.1 初识HTML 1.1.1 概述 网络世界已经跟我们息息相关，当我们打开一个网站，首先映入眼帘的就是一个个华丽多彩的网页。这些网页，不仅呈现着基本的内容，还具备优雅的布局和丰富的动态效果，这一切都是如何做到的呢？前端入门课程，为您一层层的揭开网页的面纱。 网页的构成 HTML：通常用来定义网页内容的含义和基本结构。 CSS：通常用来描述网页的表现与展示效果。 JavaScript：通常用来执行网页的功能与行为。 HTML（超文本标记语言——HyperText M
第二十七章：Java编程之HTML
蓝不蓝编程
09-10 1391
什么是HTML HTML是个简写，全称是：Hyper Text Markup Language，其实就是我们平常看到的网页。无论是网易、天猫还是京东、拼夕夕，凡是你看到的网站都是HTML。 可能你觉得还是太神秘，教你一招揭开这些网站的面纱。 如果你使用的是Chrome浏览器，可以在网页上点击鼠标右键，选择“显示网页源代码”。 然后大家就可以看到这样的信息。 你之所以能看到漂漂亮亮的网页，其实就是上面这些字符起的作用，而你所使用的浏览器就是那个把这些字符变成网页神器。 HTML难不难？
JavaWeb --- HTML
乌云的博客
02-28 1951
HTMLHTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等） 跨行跨列
JavaWeb开发 —— HTML
hdakj22的博客
04-10 1908
什么是HTML、CSS、基本标签 & 样式以及标题排版、标题样式、超链接以及正文排版、页面布局以及表格标签、表单标签和表单项标签
JAVA中HTML知识点总结
hhhhhggggddd的博客
03-27 864
一：Web简介    One-->Web的相关技术 （1）客户端技术：运行于客户端，由浏览器来解释运行。包括HTML、CSS、JavaScript、浏览器兼容问题。 （2）服务器端技术：运行于服务器端，可以和数据库进行交互。包括ASP.NET(Active Server Page)、PHP（Hypertext Preprocessor）、JSP(java Server Page)    T
html和java_html与java的区别是什么？
weixin_34941214的博客
02-12 1931
html与java的区别两者本质不一样。Java是一种面向对象编程语言，像C、Basic一样，但各有各的特点。java是一门程序语言，具有众多优点，它是可以编写网页的；但那个语言叫JSP，JSP语言是JAVA程序语言的一种技术。【推荐学习：Java视频教程】在JSP中，可以用HTML做数据展现，Java做服务器端逻辑处理，JAVA等语言可以理解成主要是负责动态编程的，与数据库连接，组织网页内容等。...
01_HTML
qq_43652818的博客
02-13 340
1.html语言是解释型语言，不是编译型 浏览器是容错的 2.html页面中由一对标签组成：<html></html> <html> 称之为 开始标签 </html>称之为 结束标签 3.title 表示网页的标题 4.可以在meta标签中设置编码方式 5.<br/>表示换行 。br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面。 6.p 表示段落标签 7. img 标签图片标签 src属性表示图片文件...
JavaWeb《HTML基础标签》
weixin_44981126的博客
05-02 1209
本笔记学习于Acwing平台本笔记学习于Acwing平台MDN官方文档。
【JavaWeb习笔记】DAY01——HTML页面
m0_62106729的博客
06-29 735
仅供个人学习总结，侵权必删！
JavaWeb学习笔记（一）—— HTML
kuaixiao0217的博客
04-20 1427
关于JavaWeb中HTML的学习笔记
【JAVAWEB】HTML的常见标签
m0_57248752的博客
05-28 1492
1.HTML结构 1.1认识HTML标签 1.2HTML文件基本结构 1.3标签层次结构 1.4快速生成代码框架 2.HTML常见标签 注释标签 标题标签：h1-h6 段落标签:p 换行标签：br 格式化标签 图片标签 超链接标签：a 表格标签
【JavaWeb】前端之HTML基础认知
m0_73067372的博客
06-21 880
1、第一个HTML程序 1.1、创建第一个HTML文件 1.2、HTML文件的基本结构 2、HTML常见标签 2.1、注释标签 2.2、标题标签：h1-h6 2.3、段落标签：p 2.4、换行标签：br 2.5、格式化标签 2.6、图片标签：img 2.7、超链接标签：a 2.8、表格标签 2.8.1、单元格的合并 2.9、列表标签 2.10、表单标签 2.10.1、input标签 2.11、select标签 2.12、textarea标签 2.12、无语义标签
【JavaWeb】HTML
yu_fu_a_bu的博客
11-20 400
6.使用表格标签展示数据 6.1未合并单元格 6.2合并单元格-合并列 6.3合并单元格-合并行 7使用表单标签提交数据 7.1表单标签的作用 7. 2 form标签的介绍 7.2.1 action属性 7.2.2 method属性 7.3表单项标签.
HTML基础语法
sun_yi_wen的博客
08-04 239
html 超文本标记语言 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础语法</title> </head> <body> <!-- 标记语言中的注释: --> <!-- 1.html 超文本标记语言 2...
Java中的HTML
wyq1614406553的博客
06-17 6366
Java中的HTML Html：超文本标记语言，它是与平台无关的，任何平台只需安装了浏览器都可以运行，不区分大小写。 Html的常用标签： 1.网页的头信息：可以设置网页标题，可以通知浏览器使用指定的码表解释html页面 标题标题：h1（一级标题），h2（二级标题），…h6(六级标题) 段落标签：用 换行标签： 字体加粗： 斜体： 大于号：&gt 小于号：&lt 空格：&am...
【JavaEE初阶】 HTML基础详解
最新发布
m0_71731682的博客
11-15 1310
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面一个简单的HTML程序，我们可以直接创建一个文本文档然后我们对该文件进行改名，后缀变为.html即可点击既可以运行了那什么是标签呢？
JavaWeb--------HTML基础
詹煜彪9527
03-06 7564
一. 概念 HTML 是用来描述网页的一种语言，指的是超文本标记语言 (Hyper Text Markup Language)。“超文本”：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 “标记”：是一套标记标签 (markup tag)，HTML使用标记标签来描述网页，大多数都是成对出现。HTML不是编程语言。 打开某个网页只需要单击右键，然后选择“查看源文件”就会打开...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小孙同学1024

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值