java开发工程师入门第二阶段(05-web前端(HTML))

已于 2022-03-26 13:11:29 修改
阅读量103 收藏
点赞数
分类专栏： web前端 文章标签： java html5
于 2022-03-26 13:11:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javaLkx/article/details/123754182
版权

文章目录

一.HTML
1.HTML概述

HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。

2.结构

1.文档声明，用来声明HTML文档所遵循的HTML规范。
2.头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
3.体部分，用来存放网页要显示的数据。
4.声明网页标题
5.用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

入门案例:

<!doctype html>
<html>
	<head>
		<title>quickstart</title>
		<!-- 防止中文乱码 -->
		<meta charset="UTF-8"/>
	</head>
	<body>
		hello html ~
		你好呀
		<!-- 
			ctrl c / v 复制粘贴
			ctrl x / d 删除 
			ctrl 上/下 箭头 调整位置
		-->
	</body>
</html>
3.语法
1. HTML标签

HTML是一门标记语言，标签分为开始标签和结束标签，如。

如果开始和结束中间没有内容，可以合并成一个自闭标签

2. HTML属性&注释&空格&换行

HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。

如：<a href="" target="" name="" id=""></a>

格式：<!-- 注释内容 -->

换行：<br/>
空格：在HTML中，多个空格会被当成一个空格来显示。
3.常用标签

1.标题标签(H1—H6 越来越小)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- hbuilder的常用快捷键:复制粘贴ctrl c/v剪切ctrl x-->
		<!-- 1.标题标签 h1大~h6小,自动换行,字体加粗 -->
		<h1>31省份新增本土确诊41例 陕西35例</h1>
		<h2>31省份新增本土确诊41例 陕西35例</h2>
		<h3>31省份新增本土确诊41例 陕西35例</h3>
		<h4>31省份新增本土确诊41例 陕西35例</h4>
		<h5>31省份新增本土确诊41例 陕西35例</h5>
		<h6>31省份新增本土确诊41例 陕西35例</h6>
	</body>
</html>

2.列表标签( 在网页中加入列表效果 )

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- 2.列表标签: 有序无序,列表项自动换行 -->
		<h3>热搜榜</h3>
		<!-- 2.1 无序列表:使用ul+li , unorderlist+list -->
		<ul> 
			<li>31省份新增本土确诊41例 陕西35例</li>
			<li>稳住农业基本盘做好三农工作</li>
		</ul>
		<!-- 2.2 有序列表:使用ol+li , orderlist+list -->
		<ol> 
			<li>31省份新增本土确诊41例 陕西35例</li>
			<li>稳住农业基本盘做好三农工作</li>
		</ol>
	</body>
</html>

3.图片标签 & 超链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- 练习:做一个能被点击的图片 -->
		<a href="https://www.baidu.com">  <img src="3.jpg"/>   </a>
		<br />
		<!-- 4.超链接 
			href属性用来让超链接可以被点击,也可以指定点击的跳转网址
			target属性用来让指定超链接的打开方式,默认是_self当前窗口打开
			      _blank是用新窗口打开
		-->
		<a href="#">百度一下</a>  <br />
		<a href="https://www.baidu.com/" target="_blank">百度一下</a>  <br />
		<!-- 4.2.锚定:从一个位置回到指定的另一个位置 -->
		<a name="top">我是顶部</a>
			<h1>北京富婆通讯录</h1>
			<h1>北京富婆通讯录</h1>
			<h1>北京富婆通讯录</h1>
			<h1>北京富婆通讯录</h1>
			<h1>北京富婆通讯录</h1>
		<a href="#top"> ^ </a> 
		<br />
		<!-- 3.图片标签: 同行展示多个图片
			src属性用来指定图片位置/路径
			(如果图片和网页文件在同级文件夹可以直接写图片名称)
			width属性用来指定图片的宽度,单位是像素px
			height属性用来指定图片的高度,单位是像素px
		-->
		<img src="3.jpg" width="30%" height="800px"/>
		<img src="3.jpg"/>
		<img src="3.jpg"/>
	</body>
</html>

4.Input标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- 1.input标签,表示输入框 -->
		普通的输入框: <input type="text"/> <br />
		密码输入框: <input type="password"/><br />
		数字输入框: <input type="number"/><br />
		日期输入框: <input type="date"/><br />
		星期输入框: <input type="week"/><br />
		单选框: <input type="radio"/>男   <br />
		多选框: <input type="checkbox"/>吃饭   <br />
		普通按钮:
		<input type="button" value="保存"/>
		<button>注册</button>
		<br />
		提交按钮:把用户在浏览器输入的数据,提交给后端的java程序来处理
		<input type="submit" value="保存"/>
		<button type="submit">保存</button>
	</body>
</html>

5.表格标签( 通常用来展示数据 )

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- 练习表格 ,th是表头效果:加粗居中
			合并单元格:
			合并行/行合并 rowspan:把N行合并成一大行
			合并列/列合并 colspan:把N列合并成一大列
		-->
		<h3>流量调查表</h3>
		<table bgcolor="lightblue" border="1px">
			<tr>
				<th>总页面流量</th>
				<th>共计来访</th>
				<th>会员</th>
				<th>游客</th>
			</tr>
			<tr>
				<td>平均每人浏览</td>
				<td colspan="3">1.58</td>
			</tr>
		</table>
		
		<!-- 1.表格标签 
			table表示表格,tr表示行,td表示列
			bgcolor背景色,width宽度,border边框,cellspacing单元格的间距
		-->
		<table bgcolor="pink" width="500px" border="1px" cellspacing="0">
			<tr>
				<td colspan="2">11</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
			</tr>
		</table>
	</body>
</html>

6.表单标签

只有表单标签,才能提交数据(是指 把前端输入的数据 提交给 java程序 的过程),表单标签本质上就是一个特殊的表格

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- 1.表单标签:比表格多了数据提交的功能
		1.1,要求:必须使用form标签  + 必须有提交按钮 + 必须配置name属性
		1.2,效果: 实现了数据提交,数据都在地址栏进行了拼接,多组数据使用&连接
http://127.0.0.1:8848/hbuilderx/cgb2111/register.html?user=jack&pwd=123
		1.3,数据提交的格式: 属性名=属性值是
		     其中,属性名是 网页上name属性的值 ,属性值 是用户在浏览器中输入的数据
		-->
		<form>
			<h1>注册表单</h1>
			<table bgcolor="lightgray" border="1px" 
					width="500px" cellspacing="0">
				<tr>
					<td>用户名:</td>
					<td>
						<input type="text" name="user"/>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd"/>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" />
					</td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td>
						<input type="text" />
					</td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td>
						<input type="email" />
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" />男
						<input type="radio" />女
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox"/>篮球
						<input type="checkbox"/>足球
						<input type="checkbox"/>乒乓球
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td>
						<select>
							<option>请选择</option>
							<option>北京</option>
							<option>广州</option>
							<option>深圳</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file"/>
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" />
						<img src="a.png" />
						<button>点我换一张</button>
					</td>
				</tr>
				<tr>
					<td>自我描述:</td>
					<td>
						<textarea>请在这里写...</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<button type="submit">提交</button>
						<button type="reset">重置</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
二.CSS
@吟游诗人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端开发第二阶段——javascript基础
qq_43151638的博客
10-14 540
一、JS定义 面向对象能力的，解释型的程序设计语言 相对安全性的客户端脚本语句（常见为浏览器） 目的：验证发往服务器端的数据，增加web互动，加强，用户体验度等 二、语言核心和c、c++、java相似 三、JS三大方面 核心（ECMAScript组织）ecma规范 es5 文档对象模型（DOM） 浏览器对象模型（BOM) 四、JS使用 行内：例如 οnclick=“fn()” 内嵌：sc...
1.WEB前端开发：html基础（上）
jinxiaofei8的博客
05-25 451
吹着微燥的夏风，看着校园中暖暖的风景，为了帮助很多热爱web前端开发兄弟们打算写一下教程与朋友们一起共勉。 根据网页的作用分类：（1）展示内容：图、文、表、音、视频、动画。 （2）搜集信息：表单。 （3）页面交互信息管理：JavaScript（jsp、php+mysql） 我们要学习html+css进行网页内容+布局的学习、页面交互、信息收集与信息管理的学习。 一、html文档结构 文档都是有结构的： ...
java开发工程师入门第二阶段(08-web前端(VUE-02))
javaLkx的博客
03-27 138
文章目录VUE7.web资源1. 概述2.服务器3.web资源和服务器关系4.网络访问三要素4.4 总结8.tomcat1.Apache介绍2.Tomcat安装和卸载3.tomcat安装过程中出现的问题4.如何部署资源到tomcat服务器,然后进行访问5.IDEA整合tomcat6.Idea创建动态资源项目, 发布到tomcat服务器.9.Servlet1.概述和作用2.Servlet入门3.Servlet运行中出现的问题4.入门代码5.Servlet访问流程6.Servlet生命周期7.Servlet的体
java开发工程师入门第二阶段(08-web前端(VUE-01))
javaLkx的博客
03-27 128
文章目录Vue1.vue概述和入门案例1.1 框架概述1.2 Vue概述1.3 入门案例(抽奖系统)1.4 Vue的入门案例1.5Vue的入门升级案例(带有方法)2.Vue常用指令2.1 Vue常用指令2.2 文本插值(v-html)2.3 绑定属性(v-bind)2.4 条件渲染(v-if /v=else/v-else-if /v-show)2.5 事件绑定(v-on)2.6 循环指令(v-for)2.7 循环指令json数组2.8 双向绑定( v-model )2.9 案例(模拟电商网站数量加减)3.v
Java开发 - 尚硅谷JavaWeb学习笔记 - Part1_Web概述&HTML入门
codeLearnerEternally的博客
06-22 754
用Java技术来解决相关web互联网领域的技术栈.使用JAVAEE技术体系开发企业级互联网项目. 项目规模和架构模式与JAVASE阶段有着很大的差别. 在互联网项目下,首先需要明白客户端和服务器的概念客户端 :与用户进行交互，用于接收用户的输入(操作)、展示服务器端的数据以及向服务器传递数据手机APP微信小程序PC端程序PC浏览器其他设备服务端:与客户端进行交互，接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的数据“服务器”是一个非常宽泛的概念，
Web前端系列技术之HTML基础（从入门开始）①
小柴爱程序的博客
07-14 970
Java系列技术之HTML基础（从入门开始）①
Web前端系列技术之CSS基础（从入门开始）①
小柴爱程序的博客
07-22 868
Java系列技术之CSS基础（从入门开始）
web前端学习路线-20个真实web开发项目集合
webqianduan1的博客
07-08 2222
目前web前端工程师日均岗位缺口已经超过50000，随着互联网+的深入发展，html5作为前端展示技术，市场人才需求量将呈直线上涨。 Web前端工程师的岗位职责是利用HTML、CSS、Java、DOM等各种web技能结合产品的界面开发，制作标准化纯手工代码，并增加交互功能，丰富互联网的Web开拓，致力于改进用户体验。现如今，Web前端工程师已经成为各大互联网公司不可或缺的热门职位，从业者队伍日渐庞大，这其中不乏零基础学习者和转行人士。为了方便大家系统而全面的掌握前端基础知识，小编特意整理了web前端开发入
Java Web从入门到实战
m0_67393342的博客
07-30 1681
操作系统：管理计算机硬件与软件资源的计算机程序，同时也是计算机系统的内核与基石。主流操作系统Linux发展历程Linux特点Linux与其它操作系统的区别Linux发行商和常见发行版先安装虚拟机，再安装CentosVmware简介Vmware下载：https://www.vmware.com/cn.htmlCentOS镜像下载：https://www.centos.org/download/ 高速下载地址简介：SecureCRT是一款支持SSH（SSH1和SSH2）的终端仿真程序，简单地说是Windows下
2024年网安最新ctfshow-WEB-web6_ctf(1)
2401_84297899的博客
05-03 992
ctf.show WEB模块第6关是一个SQL注入漏洞,注入点是单引号字符型注入,并且过滤了空格,我们可以使用括号()或者注释/**/绕过先来一个万能账号,注意使用括号()替换空格,用户名输入以下payload,密码随便输成功登录既然是SQL注入漏洞,那么flag肯定就藏在当前使用的数据库中,我们使用获取当前使用的数据库,用户名输入以下payload,密码随便输当前数据库是web2。
spring事务详细讲解-深入浅出
小电玩
09-08 409
Spring 事务是本身就是对数据库的事务的支持，没有数据库的事务 Spring 是本身无法实现事务的。Spring只提供了统一事务管理接口，具体的实现还是由各数据库自己实现。在使用 Spring 事务时，可以通过注解或编程方式将需要进行事务管理的方法和代码块标记为事务性操作，当这些操作被执行时，Spring 会负责开启时根据当前环境中设置的隔离级别，调整数据库隔离级别。
Java多线程：深入探索与详细解析
m0_63550220的博客
09-08 1420
作为Java中的基本执行单元，线程是轻量级的进程，由线程ID、程序计数器、Java虚拟机栈、本地方法栈、和线程私有内存等部分组成。每个线程都有独立的执行路径，但共享进程的资源（如内存）。：进程是系统资源分配的基本单位，它包含了一个或多个线程以及这些线程运行所需的资源。在Java中，JVM（Java虚拟机）就是一个进程，而运行在JVM上的多个线程则共享JVM的内存空间。：并发指的是多个任务在同一时间段内交替执行，而并行则指的是多个任务在同一时刻真正同时执行。
JAVA基础：数据类型、命名规范
weixin_53755148的博客
09-05 1344
变量类型就是用来指定变量中存储数据的类型。也称为数据类型。
Java集合——Stack详解
最新发布
yang_brother的博客
09-10 343
Java 中的Stack类是一个后进先出（LIFO, Last In First Out）的数据结构，它继承自Vector类。尽管Stack是一个可用的类，但它被认为是遗留的，并且在新代码中不推荐使用。通常建议使用Deque或ArrayDeque作为替代。
自定义Stater
m0_63624484的博客
09-07 689
我们平时在导入依赖的时候，大部分导入的都是xxx-spring-boot-stater。那是因为它们都基于spring的规则将写好的框架定义成一个stater，这样方便springboot引用它们写好的功能。那我们为什么也要自定义stater呢？
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 551
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
MyBatis面试
Tony_yitao的博客
09-09 548
MyBatis面试
springboot数据库连接由localhost改成IP以后访问报错500（2024/9/7
不起眼小菜菜的博客
09-07 309
步骤很详细，直接上教程……
SpringBoot总结
2302_77073236的博客
09-06 232
都做成图了，方便理解和掌握全局关系。
HTML5移动Web开发实战宝典：从入门到精通
此部分对于Web前端开发工程师、UI设计师、项目经理和策划人员，以及对手机Web开发感兴趣的开发者具有很高的实用价值。 本书适合所有希望通过学习HTML5来扩展移动Web开发技能的人群，无论他们的背景是前端开发、UI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值