JavaWeb基础前置知识：HTML

最新推荐文章于 2024-06-02 23:26:49 发布
最新推荐文章于 2024-06-02 23:26:49 发布
阅读量899 收藏 2
点赞数 1
分类专栏： JavaWeb开发 文章标签： web html5 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48063660/article/details/123998608
版权

JavaWeb基础前置知识：HTML

该部分知识总结自： [尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版] 通过本篇文章可以带你快速入门javaweb的前置知识：HTML

没错，仅仅一篇文章即可😍。

HTML主要内容：

整体框架解释：

学习html首先需要知道它的骨架，观察下面这张图：

在这里插入图片描述

可以发现html是由两部分组成，分为头部head和主体body,而这两个部分将会陪伴你的学习一直到最后…

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开始</title>
</head>
<body bgcolor="#a9a9a9"> <!--基本属性，背景色-->
   这是第一个测试<br/>第二行   <!--单标签换行-->
   <button onclick="alert('成功')">按钮</button> <!--事件属性，直接设置事件响应后的代码-->
   <hr/> <!--单标签水平线-->
</body>
</html>

在这里插入图片描述

Html的代码注释：

关于标签：

1.标签的格式:
<标签名>封装的数据</标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
i. 基本属性：bgcolor=“red” 可以修改简单的样式效果
ii. 事件属性： οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码。
4.标签又分为，单标签和双标签。
i. 单标签格式： <标签名 /> 如：br 换行 hr 水平线
ii. 双标签格式: <标签名> …封装的数据…</标签名>

字体属性：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
</head>
<body> 
<font color="pink" face="黑体" size="5">字体标签</font> <!--font字体标签，粉色，黑体，大小5-->
</body>
</html>

在这里插入图片描述

特殊字符：

请添加图片描述

标题标签：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
</head>
<body> 
<h1 align="left">标题1</h1> <!--最大h1-->
<h3 align="center">标题1</h3> <!--h3-->
<h6 align="right">标题6</h6> <!--最小h6-->
</body>
</html>

在这里插入图片描述

超链接：

a 标签是 超链接
href 属性设置连接的地址*
target 属性设置哪个目标进行跳转
_self 表示当前页面(默认值)
_blank 表示打开新页面来进行跳转

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
</head>
<body> 
<a href="https://www.baidu.com/">百度</a><br/>
<a href="https://www.baidu.com/" target="_self">百度_self</a><br/>
<a href="https://www.baidu.com/" target="_blank">百度_blank</a><br/>
</body>
</html>

在这里插入图片描述

列表标签：

ul 是无序列表
ol 是有序列表
type 属性可以修改列表项前面的符号
li 是列表项

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
</head>
<body>
<ul><!--无序列表-->
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
    <li>冬</li>
</ul>

<ul type="none"><!--type属性可以修改列表前的符号-->
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
    <li>冬</li>
</ul>

<ol><!--有序列表-->
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
    <li>冬</li>
</ol>
</body>
</html>

在这里插入图片描述

理论上来说type等属性还有很多值，但不需要都记住，需要时可以查文档。

img标签：

img 标签是图片标签,用来显示图片
src 属性可以设置图片的路径
width 属性设置图片的宽度
height 属性设置图片的高度
border 属性设置图片边框大小
alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容在JavaSE 中路径也分为相对路径和绝对路径

有关路径的知识点细节🤩：
相对路径: 从工程名开始算
绝对路径: 盘符:/目录/文件名
在 web 中路径分为相对路径和绝对路径两种
相对路径:
.表示当前文件所在的目录*
…表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件,相当于./文件名 ./可以省略
绝对路径:
正确格式是: http://ip:port/工程名/*资源路径
错误格式是:盘符:/目录/文件名

请添加图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
</head>
<body>
<!--img图像标签。属性src是路径、width宽度、height高度、border边框、alt路径失效时的代替显示-->
<img src="../imgs/1.jpg" width="700" height="700" />
<img src="../imgs/2.jpg" width="600" height="600" border="5"/>
<img src="../imgs/3.jpg" width="700" height="700" border="3"alt="找不到该图片"/>
</body>
</html>

请添加图片描述

表格：

table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签
colspan 属性设置跨列
rowspan 属性设置跨行

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
</head>
<body>
<!--table表格，tr行，td单元格-->
<table align="center" border="2" width="300" height="300" cellspacing="10"><!--属性-->
    <tr>
        <td align="center"><b>1.1</b></td><!--居中属性，以及加粗-->
        <th>1.2</th> <!--th为表头标签，相当于加粗+居中-->
        <td>1.3</td>
    </tr>
    <tr>
        <td colspan="2">2.1</td><!--跨2列-->
        <td rowspan="2">2.3</td><!--跨2行-->
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
    </tr>
</table>
</body>
</html>

请添加图片描述

ifarme 标签:

ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme 和 a 标签组合使用的步骤:
1.在 iframe 标签中使用 name 属性定义一个名称
2.在 a 标签的 target 属性上设置 iframe 的 name 的属性值

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
<iframe src="hello.html" width="1000" height="500" name="1"></iframe>
<br/>
<br/>
<ul>
    <li><a href="hello.html" target="1">hello</a></li>
    <li><a href="image.html" target="1">image</a></li>
</ul>
</body>
</html>

请添加图片描述

请添加图片描述

表单form🤩：

form 标签就是表单
input type=text 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组 checked=“checked” 表示默认选中input
type=checkbox 是复选框 checked=“checked” 表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 ，当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected=“selected” 设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form>
    <h1 align="center">用户信息</h1>
    <table align="center">
        <tr>
            <td>用户名：</td>
            <td><input type="text" value="404 NOT FOUND" /></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td> <input type="password" value="123" /></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td> <input type="radio" name="sex" />男
            <input type="radio" name="sex" checked="checked" />女
            </td>
        </tr>
        <tr>
            <td>技能：</td>
            <td><input type="checkbox" checked="checked" />Java
            <input type="checkbox" checked="checked" />python
            <input type="checkbox" />C++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td><select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>苏联</option>
                <option>美国</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" value="重置按钮" /></td>
            <td><input type="submit" /></td>
        </tr>
        <tr>
            <td><input type="button" value="按钮"></td>
            <td><input type="file" value="选择文件"></td>
        </tr>
    </table>
</form>
</body>
</html>

请添加图片描述

表单提交的细节🤩：

form 标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有 name 属性值
2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
3、表单项不在提交的 form 标签中
GET 请求的特点是：
1、浏览器地址栏中的地址是：action 属性[+?+请求参数] 请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是：
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制
请添加图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="https://www.baidu.com/" method="get">
    <input type="hidden" name="action" value="login" />
    <h1 align="center">用户信息</h1>
    <table align="center">
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="username" value="404 NOT FOUND" />
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td> <input type="password" name="password" value="123" /></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td> <input type="radio" name="sex" value="boy"/>男
            <input type="radio" name="sex" checked="checked" value="girl" />女
            </td>
        </tr>
        <tr>
            <td>技能：</td>
            <td>
                <input name="hobby" type="checkbox" checked="checked" value="java"/>Java
                <input name="hobby" type="checkbox" checked="checked" value="js"/>python
                <input name="hobby" type="checkbox" value="cpp"/>C++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option value="none">--请选择国籍--</option>
                    <option selected="selected" value="Z">中国</option>
                    <option value="S">苏联</option>
                    <option value="M">美国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" value="重置按钮" /></td>
            <td><input type="submit" /></td>
        </tr>
        <tr>
            <td><input type="button" value="按钮"></td>
            <td><input type="file" value="选择文件"></td>
        </tr>
    </table>
</form>
</body>
</html>

其他标签（div、span、p）：

div 标签 默认独占一行
span 标签 它的长度是封装数据的长度
p 段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他</title>
</head>
<body>
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
<p>p 段落标签 1</p>
<p>p 段落标签 2</p>
</body>
</html>

请添加图片描述

✔至此，主要的内容已经学习完成，这部分知识相对简单。不必全部背熟，在需要时可以进行查阅文档，知识点会在重复中记熟。

Locus-
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb基础知识点.html
02-03
如遇到积分不足，又有需要的；可以到我的博客，对应的思维导图分类对应的文章留下邮箱，看到后，会第一时间发给你了。
html，css的前置知识
m0_58768090的博客
08-23 105
1.前后端分离的介绍 目前企业级的项目都是基于前后台分离的项目 java ssh ssm jsp(前端页面) 前端工程师：页面的重构(html、css、js) + 数据交互(使用工具和后台服务交互) 后端工程师：java => 接口 2.B/S架构 基于：浏览器 = 服务器 校园官网：浏览器 = 学校服务器 学生管理系统：浏览器 = 公司服务器 3.C/S架构：客户端 = 服务器 桌面上的qq、微信、浏览器：...
一篇文章指明做JavaWeb项目需要的前置知识+完整项目初解读(萌新必看，十分友好)
PSMYZC的博客
06-14 591
前言 过了web这个阶段了，项目也完成了的我想给各位后来者总结一下我整个项目从开始到结束的经验，当然，也不是一帆风顺，报错有时候折磨的要死，废话不多说，现在就开始吧。 本文一共分为两个部分：纯理论科普和对一个完整项目的解读。 一.web前置知识（纯理论，如已知可跳到详细项目解读） 1.涉及知识 1）前端部分 技术总结：http，css，JavaScript，jquery，Ajax等 框架总结：bootstrap，VUE等 说白了，如果一个后端人不太能写出像样的页面，最好就是套模板，然后根据自己学到的知识去改
JavaWeb前置学习内容——html
sunshine的博客
04-14 1256
html
【JavaWeb】前置知识：CSS与JavaScript知识汇总
黄小黄的博客
10-04 964
本文总结了学习JavaWeb时需要了解的CSS与JavaScript的知识，并提供了案例，供读者消化吸收。
JavaWeb前置知识
m0_47397088的博客
03-12 120
JavaWeb前置知识
JAVAWEB前置知识
weixin_44005107的博客
06-01 211
莫欺少年穷！
【JAVAWeb】java的前置知识
m0_53026267的博客
07-11 288
JAVA的前置知识前言一、计算机语言1.机器语言2.汇编语言3.高级语言二、了解和认识Java1.Java （计算机编程语言）2.语言特点3.技术应用三、JDK的下载安装以及环境变量的配置1.什么是JDK？2.JDK的下载3.环境变量的配置四、IDEA的下载和使用1.什么是IDE2.IDEA3.IDEA的安装和使用1.下载和安装2.IDEA的使用五、后言 前言 这是本人写的第一篇文章，简单地总结一下今日所学。 我们开始吧！ 一、计算机语言 计算机语言，简单来讲就是用于人与计算机之间通讯的语言。为了使电子计
JavaWeb前置知识与环境配置
AnswerCoder的博客
11-19 380
JavaWeb前置知识与环境配置 1. HTTP 协议 1.1 简介 超文本传输协议（HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 HTTP的发展是由蒂姆·伯纳斯-李于1989年在欧洲核子研究组织（CERN）所发起。HTTP的标准制定由万维网协会（World Wide Web Consortium，W3C）和互联网工程任务组（Internet Engineering Task Force，IE
【JavaWeb】前端三剑客—JavaScript基础知识
耀的博客
03-24 3262
目录 一、JavaScript 是什么 JavaScript (简称 JS) JavaScript 和 HTML 和 CSS 之间的关系 JavaScript 运行过程 二、前置知识 第一个程序 JavaScript 的书写形式 行内式 内嵌式 外部式 输入输出 三、语法概览 变量的使用 基本数据类型 number 数字类型 string 字符串类型 boolean 布尔类型 undefined 未定义数据类型 四、数组 创建数组 获取数组元素 新增数组元素 删
零基础学JavaWeb开发：JSPServletStrutsSpringHibernateAjax
07-22
其中，第1～12章是基础篇，介绍了Java Web开发中必不可少的各种基础知识；第13～16章是进阶篇，主要讲解Java Web开发中常用的各种框架和新兴技术，包括Struts、Spring、Hibernate和Ajax等，这些技术在实际的项目开 ...
Java/JavaWeb基础知识源码
09-23
涵盖Java、JavaWeb各位方面的知识 代码看起来通俗易懂... Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。...
[超详细]JavaWeb基础知识点总结
09-08
学习、复习必备，思维导图，JavaWeb基础知识点总结，条理清晰，脉络分明 Xmind软件打开
javaWeb期末考察项目：工资管理系统
01-09
使用框架：SpringBoot，layui 前端：H5+CSS+JS+ajax 后端：servlet+mybatis 数据库：mysql
HTML5 新的语义化标签
一名全栈开发工程师
06-02 492
CSS3 和 HTML5 引入了大量新特性，为前端开发提供了更多功能和更好的语义化支持。这本教程将详细介绍 CSS3 新语法和技巧，以及 HTML5 新的语义化标签元素，如等。希望通过本教程，读者能够掌握这些新特性的使用方法，提高前端开发水平。
HTML5常用标签表格
最新发布
qq_40432598的博客
06-02 770
HTML5常用标签表格
HTML5 新表单元素详解
一名全栈开发工程师
06-02 540
HTML5 引入了多种新的 类型，使得表单的输入更加语义化和用户友好。 用于接收电子邮件地址，浏览器会自动进行格式验证。
HTML5新元素探索：重塑网页结构与功能的革新
艾恩小灰灰的博客
06-02 225
header>和元素为页面或区域提供了明确的开头和结尾标识，增强了文档的结构清晰度。用于定义独立的内容块，如新闻文章、博客帖子等，而则用于对文档进行逻辑分组，每个应有其自身的主题或目的。元素专门用于包裹导航链接，有助于屏幕阅读器等辅助技术识别和操作。用于表示和页面主要内容相关但可以独立分开的内容，如侧边栏、注释等。元素用于表示媒体内容（图片、图表、视频等）及其caption（说明文字），
javaweb基础知识
06-02
JavaWeb 的基础知识包括： 1. Servlet：JavaWeb 的核心技术之一，用于处理 HTTP 请求和响应，可以通过继承 HttpServlet 类来编写 Servlet。 2. JSP：JavaServer Pages 的缩写，是一种动态网页技术，可以将 Java ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值