Java学习笔记day31

新手小白6

已于 2022-11-07 19:08:06 修改

阅读量232

点赞数

分类专栏： Java学习记录文章标签：学习 html 前端

于 2022-11-07 19:03:12 首次发布

本文链接：https://blog.csdn.net/kouzai8880/article/details/127736971

版权

Java学习记录专栏收录该内容

41 篇文章 0 订阅

订阅专栏

HTML

简介

中文名:超文本标记语句

全称:Hyper Text Markup Language

超文本:以文本展示非文本的内容

标记:有特殊含义的标签

基本格式

方式1:<标签名属性区> 内容区</标签名>

方式2:<标签名属性区 />

注意:

方式1可以在其中嵌套标签,方式2不可以嵌套别的标签

多个属性直接使用空格隔开

方式1,前面的<>称为开始标签,后面的<>称为结束标签

注释

语法: <!-- 注释内容 -->

基本结构

<!-- html的注释 -->
<!--
	<!DOCTYPE html>
	作用:表示当前文档类型为html文件
-->
<!DOCTYPE html>
<!--
	html:网页根标签
	包含网页中的所有内容
-->
<html>
	<!--
		head:头标签
		其中内容是给浏览器看的,如网页编码格式,css样式,js代码
		网页标题
	-->
	<head>
		<!-- title:网页标题,开始标签与结束标签之间为标题名称 -->
		<title>网页标题</title>
		<!--
        	<meta charset="utf-8" />
        	设置网页编码格式为UTF-8
        -->
		<meta charset="utf-8" />
	</head>
	<!--
		body:体标签
		其中内容主要给用户看
	-->
	<body>
		HELLO WORLD
	</body>	
</html>

常用标签

基本标签

文本展示标签:font

图片展示标签:img

音频:audio

视频:video

换行:br

水平分割线:hr

表单标签

input:输入
	type:输入类型
		text:文本输入,默认的类型
		password:密码输入
		radio:单选按钮,注意,name属性值相同则为一组,要求需要value值,该值不会显示,但是后期提交时获取使用
		checkbox:多选按钮
		button:按钮
		submit:提交按钮
		reset:重置按钮
		file:文件上传
		...
	placeholder:提示字,属性值自定义
	name:标签名称,属性值自定义
	value:值,在类型为按钮时,表示按钮上显示的内容

select:选择器
	属性:
		multiple:设置可以多选
		size:展示的子项数量
	子项:option
		属性:
			selected:默认选中
	
textarea:文本域
	属性:
		rows:行
		cols:列
		
form:表单
	属性
		enctype:上传类型
        	application/x-www-form-urlencoded
        		不上传文件就使用该类型,该类型为默认类型
        	multipart/form-data
        		上传文件使用该类型
        	
        method:请求方式
        	get:显式请求
        		如:http://127.0.0.1:8080/?username=admin&password=123456
        		注意:不能超过100个字符
        		经验:get用于下载
        	post:隐式请求
        		注意:上传数据量无限制
        		经验:post用于上传或密码相关
        action:接收请求的地址

超链接标签

示例1:连接网页

<a href="https://www.baidu.com">百度一下</a>
<a href="test.html">到test</a>

示例2:锚点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>锚点</title>
	</head>
	<body>
		<font id="top"></font>
		<a href="#top01">01</a> <!-- 点击"01"跳转到"第一个"的位置 -->
		<br />
		<a href="#top02">02</a> <!-- 点击"02"跳转到"第二个"的位置 -->
		<br />
		<a href="#top03">03</a> <!-- 点击"03"跳转到"第三个"的位置 -->
		<br />

		<font id="top01">第一个</font>
		<br />
		<font >
			1<br />
			1<br />
			1<br />
		</font>

		<font id="top02">第二个</font>
		<br />
		<font >
			1<br />
			1<br />
			1<br />
		</font>
        
		<font id="top03">第三个</font>
		<br />
		<font >
			1<br />
			1<br />
			1<br />
		</font>
		<!--
			a标签中可以放img标签
		-->
		<a href="#top">
			<img src="img/test.png" /> <!-- 点击图片跳转到顶部位置 -->
		</a>
	</body>
</html>

布局标签

标题标签

h1,h2,h3,h4,h5,h6

段落标签：p

列表

ul:无序列表
ol:有序列表

表格

table:表格
tr:行
td:单元格
th:表头

容器标签

<div></div>

fieldset

<fieldset style="width: 300px;">
	<legend>管理员登录</legend>
	<input type="text" placeholder="请输入账号" />
	<br />
	<input type="password" placeholder="请输入密码" />
	<br />
	<input type="button" value="登录" />
</fieldset>

框架标签

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table width="100%" height="830px" border="1" cellspacing="0">
			<tr height="100px">
				<td colspan="2" align="right">
					<img src="img/jd.jpg" />
				</td>
			</tr>
			<tr>
				<td width="20%">
					<a href="https://www.taobao.com" target="myiframe">淘宝</a>
					<br />
					<a href="https://www.jd.com/" target="myiframe">京东</a>
				</td>
				<td width="80%">
					<iframe name="myiframe" width="100%" height="100%"></iframe>
				</td>
			</tr>
		</table>
	</body>
</html>

其他

注意:所有标签都有id,class属性

一个网页中id属性值不能重复
一个网页中class属性值允许重复

注意:所有标签都有onclick(点击)事件

意味着所有标签都可以当做按钮

新手小白6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java学习笔记day31

Java学习笔记day31
复制链接

扫一扫

专栏目录