小白学Java28:HTML

最新推荐文章于 2024-09-11 17:19:54 发布
最新推荐文章于 2024-09-11 17:19:54 发布
阅读量416 收藏
点赞数
分类专栏： 小白学Java 文章标签： html 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44478196/article/details/107772139
版权

小白学Java28:HTML

简单理解,这就是用来写网页的

基本标签

结构标签

  1. 根标签<html>
  2. 网页头标题<head>
  3. 页面标题<title>
  4. 网页正文 <body>

结构标签的属性

  • text 正文中所有文字的颜色
  • bgcolor 设置网页的背景颜色
    设置颜色的两种方式:
    1. :直接设置英文单词如red
    2. 设置以#开头的16进制的值 # 后面跟3位16进制字符,分别代表红绿蓝的权重
    # (红:0-F)(绿0-F)(蓝0-F),如#0f0
  • background 设置网页的背景图片
    设置背景图片会覆盖背景颜色,
<html>
	<head>
		<meta charset="utf-8" />//设置编码格式
		<title>
			这是我的第一个网页
		</title>
	</head>

	<bodytext="red" bgcolor="black">  //设置文字颜色为红色,设置背景颜色为黑色
		这是我的第一个网页
	</body>

</html>

排版标签

  1. 换行标签<br>
  2. 段落标签<p> 文本文字</p>
    特点:段与段之间有空行
  3. 水平线标签<hr/>
<html>
	<head>
		<meta charset="UTF-8">
		<title>排版标签</title>
	</head>
	<body>
		<!--换行-->
		换<br />行
		<!--段落-->
		<p>段落1</p>//默认为居左显示
		<p align="center">段落2</p>//修改为居中展示
		<p align="right">段落3</p>//修改为居右展示
		<!--水平线-->
		<hr />//默认长度为屏幕宽度,默认为居中展示
		<hr / width = "50%" align="left" color="aqua" size="7"> //修改长度,对齐方式,颜色和宽度
	</body>
</html>

文本格式化标签

使用标签实现标签的样式处理

  1. 粗体标签:<b>,<strong>
  2. 斜体标签<i> ,<em>
  3. 大号字体标签<big>
  4. 小号字体标签<small>
  5. 上标 <sup>
  6. 下标<sub>
  7. 删除线<del>
		<b>粗体标签</b>  <strong>粗体标签2</strong>
		<br />
		<i>斜体标签</i>  <em>斜体标签2</em>
		<br />
		<big>大号字体标签</big>  <small>小号字体标签</small>
		<br />
		上标:5M<sup>2</sup>
		<br />
		下标:H<sub>2</sub>O
		<br />
		<del>删除线</del>

在这里插入图片描述

标题标签

数字越大文字越小,字体是加粗的,默认占据一行

		<h1>一号</h1>
		<h2>二号</h2>
		<h3>三号</h3>
		<h4>四号</h4>
		<h5>五号</h5>
		<h6>六号</h6>

在这里插入图片描述

列表标签

无序列表

<ul>

属性: type:
disc:实心圆(默认)
circle: 空心圆
square: 黑色方块

	<ul type="circle">//设置为空心圆
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
			
		</ul>

在这里插入图片描述

有序列表

<ol>

  • 属性:type
    1: 数字
    a: 小写字母
    A: 大写字母
    i: 小写罗马数字
    I: 大写罗马数字
  • 属性: start
    从第几个数开始排序
		<ol type="A" start="4">//使用大写字母,从第四个开始排序
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
			<li>英语</li>
			<li>英语</li> 
		</ol>

在这里插入图片描述

嵌套列表

	<ul>
			<li>文科</li>
			<ol>
				<li>语文</li>
				<li>历史</li>
			</ol>
			<li>理科</li>
			<ol>
				<li>数学</li>
				<li>化学</li>
			</ol>
		</ul>

在这里插入图片描述

图形标签

<img>

属性

  • src:引入图片的位置
  • width/height: 宽/高
  • border: 边框
  • align: 对齐方式
  • alt:提示信息
  • hspace/vspace:左右设置空白/上下设置空白
		前面<img / src="picture/logo.png" align="center">后面

在这里插入图片描述

链接标签

<a > </a>

属性

  • href: 网址链接(位置别名)
  • target:设置跳转方式
  • name 把当前位置设置别名,方便快捷转到此位置
<a name="top">顶部</a><br />
<a href="文本标签.html" target="">跳转另一个页面</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h4><a href="#top">回到顶部</a></h4>

在这里插入图片描述

表格标签

<table>表
<tr>行
<td>列
<th>带有加粗居中的列

	<table border="2" width="400">
			<tr>
				<th>周一</th>
				<td>周二</td>
				<th>周三</th>
				<td>周四</td>
				<td>周五</td>
			</tr>
		</table>

在这里插入图片描述

行或列的合并

  1. 同行合并列 colspan = ? 有几个值合并成一个
  2. 同列合并行 rowspan = ? 有几个值合并成一个
<table border="2" width="400">
			<tr>
				<th rowspan="2">周一</th>
				<td>周二</td>
				<th>周三</th>
				<td>周四</td>
				<td>周五</td>
			</tr>
			<tr>
				<td>周二</td>
				<th>周三</th>
				<th colspan="2">周四</th>
			</tr>
		</table>

在这里插入图片描述

Html表单标签

用于收集不同类型的用户输入数据

Form常用属性

  • action 动作
  • method: 请求方式
    • get(默认)
    • past
  • enctype: 表示表单提交的类型
    普通表单(默认)
    多部份表单

input元素

接收用户输入的各种类型的数据\

  • 单行文本框:text
  • 密码框:password
  • 单选按钮:radio
  • 复选框checkbox
  • 日期框 date
  • 时间框:time
  • 日期和时间框datetime
  • 电子邮件输入 emial
  • 数值输入 number
  • 文件上传 file
  • 隐藏域 hidden
  • 取值范围 range
  • 取色按钮color
  • 表单提交按钮 submit
  • 普通按钮 button
  • 重置按钮 reset
  • 图片提交按钮 image

属性:placeholder: 设置默认提示信息

		<form action="表格.html" method="get" enctype="application/x-www-form-urlencoded">
		用户名:<input type="text" name="uname"/><br />
		密码: <input type="password" name="upassword"/><br />
		单选按钮:<input type="radio" name="性别" /><input type="radio" name="性别" /><br />
		复选按钮:<input type="checkbox" name="" /><br />
		生日:<input type="date" name="" /><br />
		薪资:<input type="number" /><br />
		电话:<input type="tel" name="" /><br />
		照片:<input type="file" name="" /><br />
		喜欢的颜色:<input type="color" name=""/><br />
		年龄范围:<input type="range" name=""/><br />
		隐藏域:<input type="hidden" name=""/><br />
		<hr />
		<input  type="submit"name=""/><br />
		重置 <input type="reset"name=""/><br />
		图片提交<input type="image" name="" /><br />
		普通按钮<input type="button"  name=""/><br />
		<input type="submit"  value="提交"/>
		</form>

在这里插入图片描述

select元素(下拉列表)

  • 单选下拉列表: <select>
  • 多选下拉列表:<select multiple=“multiple”>
  • 默认选择项:selected
		学历:
			<select name="edu">//单选下拉列表
				<option value="1">研究生</option>
				<option value="2">本科</option>
				<option value="3"selected="selected">大专</option>
				<option value="4">高职</option>
			</select><br />
			爱好:
			<select name="hobby" multiple="multiple">//多选下拉列表
				<option value="1">编程</option>
				<option value="2">游戏</option>
				<option value="3">音乐</option>
				<option value="4">读书</option>
			</select>

在这里插入图片描述

多行文本框

<textarea>

  • cols列
  • rows 行
<textarea cols="10" rows="5" ></textarea>

在这里插入图片描述

html框架标签

框架结构标签:frameset

不能和<body>同时使用,

  • cols:以列进行划分(竖向均分)
  • rows:以行进行划分(横向均分)

框架标签:frame

每个Frame引入一个html页面

  • noresize:不允许用户改变界面大小
<frameset cols="*,*,*">//均三等分
		<frame src="Helloworld.html" />
		<frame src="Helloworld.html" / noresize="noresize">
		<frameset rows="10%,*,*" />//第一个占10%.剩下两个均分
			<frame  src="文本标签.html"/ >
			<frame src="图形标签.html" /noresize="noresize">
			<frame src="表单.html" />
		</frameset>
	</frameset>
Java小白入门——学习感受随笔
Null_Kun
02-07 2357
Java小白入门——学习感受随笔 浅谈为何想学Java？ 这篇博客是为了大多数和我一样的入门小白或者即将入门的萌新们写的，其实在刚接触编程的时，仅仅是凭着《微微一笑很倾城》的肖奈的喜爱，便开始一发不可收拾的对所有从事IT，技术一流大佬的有着迷一般的崇拜，渴望自己也能拥有一位“直男”男友。但是在大学由于专业原因真正接触到C语言的时候，开始迷茫了，凭着不能挂科的求生欲便主动学习了，能让我坚持下去...
小白学习Java第一天，开发环境的搭建
12-20
本文主要介绍了JDK、JRE和JVM之间的关系，以及如何安装JDK，这对于小白学习Java至关重要。 首先，我们需要理解Java的核心概念：JVM（Java Virtual Machine）是Java程序运行的基础。它是一个抽象的计算机系统，能够...
小白学Java30:JavaScript
weixin_44478196的博客
08-21 1651
小白学Java30:JavaScript什么是JavaScriptJavaScript的基本语法使用JavaScriptJavaScript数据类型变量声明基本类型数字类型(Number)字符串类型(String)布尔类型(boolean)引用类型数组类型JavaScript的运算符逻辑运算符关系运算符单目运算符JavaScript的函数JavaScript的DOM浏览器的BOM 什么是JavaScript JavaScript的基本语法 使用JavaScript 在html文件中声明一个<scri
小白学习Java第四十天
sjxxxx_的博客
09-30 4784
vue
Java 学习路线：适合小白的超细学习路线及实例代码
最新发布
weixin_44892179的博客
09-11 1633
模式匹配（Pattern Matching）: 了解 Java 17 和未来版本中的模式匹配特性，以简化类型检查和条件逻辑。: 使用工具（如 JVisualVM、YourKit、JProfiler）来分析性能瓶颈，了解如何进行性能调优。记录类（Record Classes）: 学习 Java 16 引入的记录类，它是一种简洁的类定义方式。: 掌握不同的锁机制，包括 synchronized、ReentrantLock、读写锁等。: 识别和优化代码中的性能瓶颈，包括算法优化和数据结构选择。
第二十七章：Java编程之HTML
蓝不蓝编程
09-10 1413
什么是HTML HTML是个简写，全称是：Hyper Text Markup Language，其实就是我们平常看到的网页。无论是网易、天猫还是京东、拼夕夕，凡是你看到的网站都是HTML。 可能你觉得还是太神秘，教你一招揭开这些网站的面纱。 如果你使用的是Chrome浏览器，可以在网页上点击鼠标右键，选择“显示网页源代码”。 然后大家就可以看到这样的信息。 你之所以能看到漂漂亮亮的网页，其实就是上面这些字符起的作用，而你所使用的浏览器就是那个把这些字符变成网页神器。 HTML难不难？
新手小白学JAVA IDEA下载使用手册
程序媛泡泡的博客
05-14 2万+
IDEA 新手使用手册 1 简介 IDEA的全称是IntelliJ IDEA，这是一个java编程语言开发的集成环境。 IDEA的每一个方面都是为了最大限度地提高开发人员的工作效率而设计的,它的智能编码辅助和人机工程学设计会让开发过程变得愉悦且高效. IDEA是JetBrains公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。它的旗舰版本还支持HTML，CSS，PHP，MySQL，Python等。免费版只支持Java,Kotlin等少数语言。 IntelliJ在业界被
Java学习第一步：JDK环境搭建（手把手教你）
2401_85767533的博客
06-28 998
如果你想要学习Java的话，我给你分享一些Java的学习资料，你不用浪费时间到处搜了，从Java入门到精通的资料我都给你整理好了，这些资料都是我做Java这几年整理的Java最新学习路线，Java笔试题，Java面试题，Java零基础到精通视频课程，Java开发工具，Java练手项目，Java电子书，Java学习笔记，PDF文档教程，Java程序员面经，Java求职简历模板等，这些资料对你接下来学习Java一定会带来非常大的帮助，每个Java初学者都必备，请你进我的**Java技术qq交流群。
Java学习篇——JavaWeb：JavaScript
zhang19971014的博客
04-06 2万+
作用：负责给页面做动态效果。 有什么用 ————语言特点：弱类型。let name=“ss” let age=15 name可以等于16不报错。 ————脚本语言：不需要编译解析直接执行。 ————基于面向对象开发。 ————只能访问浏览器的网站：安全性强。 ————交互性强：直接嵌入html页面中。 怎么用：如何在html中使用js语言 内联：在标签事件属性后面的，事件触发时执行。 在标签上添加// 内部：用 script标签 外部：新建javaScript ...
教妹学 Java：晦涩难懂的泛型
沉默王二
05-17 5885
泛型
（小白学Java）Java简介和基本配置
热门推荐
Lucky Home
07-01 4万+
本来7月2号考完大美就可以溜回家了，但又通知要在学校待到20号搞比赛，唉，那便刚好学学下学期要用的Java，把比赛的代码好好写一下，估计还要学机器学习相关的。也不妨是一个很好的项目实践经历吧。 Java介绍 Java 是由 Sun Microsystems 公司于 1995 年 5 月推出的 Java 面向对象程序设计语言和 Java 平台的总称。由 James Gosling和同事们共同研发，并在 1995 年正式推出。 后来 Sun 公司被 Oracle （甲骨文）公司收购，Java 也随之成为 Or
2019最新java在线学习资料.html
09-08
本资源为java学习网站，本网站提供了视频教学+文本教学+源码+解答，很适合初学者零基础的同学学习，
2020年最新java在线学习网站
03-19
Java是一种广泛使用的编程语言，以其跨平台、面向对象的特点深受开发者喜爱。对于想要学习Java的人来说，有很多在线资源可供选择，而"2020年最新java在线学习网站"的离线版本提供了一种方便的方式，让人们可以在没有...
MySQL数据库中插入数据的几种方式
weixin_44478196的博客
04-14 817
insert into 最简单也是最基础的插入方式,传入List集合,然后在Sql语句中遍历取出 insert into `TableName`(field1,field2,field3,...) values <foreach item="item" index="index" collection="list" separator=","> ( #{item.value1}, #{item.value2}, #{item.value3}) </foreach&g
Nacos使用MySQL做持久化遇到的那些坑
weixin_44478196的博客
10-18 649
Nacos遇到的那些坑
小白学Java35:jQuery
weixin_44478196的博客
09-03 352
小白学Java35:jQueryjQuery使用导入jQueryjQuery语法基础语法选择器常用事件jQuery特效隐藏/显示 jQuery使用 导入jQuery 本地导入 <script src="jquery-3.4.1.min.js"></script> 网络导入 百度:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> 新浪:<script src="https:/
小白学Java44:SpringCloud
weixin_44478196的博客
01-24 290
一. SpringCloud 1.1微服务架构 微服务架构只是一个样式,一种风格 将一个完整的项目,拆封成多个模块去分别开发 每个模块都是单独的运行在自己的容器中 每一个模块都是需要相互通信的 每一个模块之间是没有依赖关系的,单独部署 可以使用多种不同的开发语言去开发 使用数据库,Redis Es 去存储数据,也可以使用多个Mysql 总结: 将复杂臃肿的单体应用进行细粒度的划分,每个拆分出来的服务都各自打包部署 1.2 SpringCloud介绍 SpringCloud是微服务架构落地的一套技术
小白学Java32:JSP
weixin_44478196的博客
08-29 271
小白学Java32:JSPJSP是啥?JSP开发创建JSPjsp编写Java代码访问jspJSP与Servlet的区别JSP与HTML集成开发脚本JSP注释语法规则JSP指令page指令include指令taglib指令动作标签include(动态包含)useBeansetProperty和getPropertyforward(转发)param(参数传递)内置对象四大域对象pageContext作用EL表达式EL表达式基础应用EL跟JSP脚本的区别EL获取引用类型EL获取数组/集合的元素 JSP是啥?
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值