Java学习5.20
Posted panmao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Java学习5.20相关的知识，希望对你有一定的参考价值。
html
关于HTML的历史等
之前忘记了记录，详情见视频遇见狂神说
HTML文件的基本信息
<!--DOCTYPE:告诉浏览器，我们用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head表示网页头部-->
<head>
<!--meta描述性标签,用它来描述网站的一些信息-->
<!--一般用来做stu-->
<meta charset="UTF-8">
<meta name = "keywords" content="狂神说Java">
<meta name = "description" content="在这里学Java">
<!--title网页标题-->
<title>Title</title>
</head>
<body>
</body>
</html>
基本标签
<!--标题标签-->
<h1>一级标签</h1>
<h2>一级标签</h2>
<h3>一级标签</h3>
<h4>一级标签</h4>
<!--段落标签-->
<p>你
<p>好</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
你<br/>
说<br>
啥?<br>
<!--粗体,斜体-->
<h1>字体样式标签</h1>
<strong>粗体</strong>
<em>斜体</em>
<br/>
<!--特殊符号-->
空格:空 格
<br/>
>
<br/>
<
©
<!--
特殊符号记忆方式
& ;
-->
图片标签
<!--src:图片地址
相对地址,绝对地址
../ 上一级目录
alt: 图片名字
-->
<img src="../resources/image/12.png" alt="小图片" title="悬停文字">
链接标签
<!--
a标签
herf:表示要跳转到哪个页面
target:表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己标签下打开
-->
<a href="1.我的第一个网页.html" target="_blank">点我跳转至页面一</a>
<a href="https://www.baidu.com">点我跳转到百度</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resources/image/12.png" alt="小图片" title="悬停文字">
</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<!--功能性标签
邮件链接: mailto
qq链接:从qq官网->推广
-->
<a href="mailto:自己的qq号@qq.com">点击联系我</a>
列表
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ol>
<hr>
<!--无序列表
导航等
-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>学科</dt>
<dd>JAVA</dd>
<dd>JAVA</dd>
<dd>JAVA</dd>
<dt>地址</dt>
</dl>
表格
<!--表格table
行 tr
列 td
colspan="3" 跨3列
rowspan="2" 跨2行
border="1px" 表格宽度为1
-->
<table border="1px">
<tr>
<td colspan="3" > 学生成绩</td>
</tr>
<tr>
<td rowspan="2">狂神</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">秦将</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
媒体元素
<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../resources/video/Test0000_1_HD_DOWNLOAD.mp4" controls autoplay></video>
<audio src="../resources/audio/Broken%20Vessel.mp3" controls autoplay></audio>
页面结构
<header><h2>头部</h2></header>
<section><h2>主体</h2></section>
<footer><h2>脚部</h2></footer>
内联框架
<!--iframe内联框架
src:地址
w-h:宽-高
-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.cnblogs.com/panmao/" target="hello">点击跳转</a>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method: post,get提交方式
get:可以在url中看到我们的信息,高效但不安全
post:比较安全,传输大文件
-->
<form action="1.我的第一个网页.html" method="get">
<!--文本输入框<input type="text">
value="你好帅" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
placeholder="请输入用户名" 提示信息
required 非空判断
pattern 正则表达式
redonly 只读
hidden 隐藏
disabled 禁用-->
<p>名字:<input type="text" name="username" placeholder="请输入用户名" required> </p>
<!--密码输入框<input type="password">-->
<p>密码 <input type="password" name="pwd" value="123456" hidden></p>
<p>性别:
<!--单选框标签:
input type = "radio"
value:单选框的值
name:表示组(必须相同才能单选)
checked:默认选中
-->
<input type="radio" value="boy" name="sex" checked disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<!--多选框标签
input type = "checkbox"
-->
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="study" name="hobby" checked>学习
<input type="checkbox" value="play" name="hobby">玩
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>
<input type="button" name="btn1" value="点击这里">
<!--<input type="image" src="../resources/image/12.png">-->
</p>
<p>
<!--文件域-->
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--下拉框 多选框
-->
<p>下拉框:
<select name="列表名称" >
<option value="china">中国</option>
<option value="us">美国</option>
<option value="ruishi" selected>瑞士</option>
<option value="indu">印度</option>
</select>
</p>
<p>反馈
<!--文本域
clos 列
rows 行
-->
<textarea name="textarea" cols="10" rows="2">文本内容</textarea>
</p>
<p>email:
<!--邮件验证-->
<input type="email" name="email">
</p>
<p>自定义邮箱:
<input type="text" name="zidingyiyouxiang" pattern="^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$">
</p>
<p>URL:
<!--URL-->
<input type="url" name="url">
</p>
<p>数字:
<!--数字验证-->
<input type="number" name="num" max="100" min="0" step="10">
</p>
<p>音量:
<!--滑块-->
<input type="range" name="voice" min="0" max="100" step="10">
</p>
<p>搜索框
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
<p>
<!--label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。-->
<lable for="">你点我试试</lable>
<input type="text" id="mark">
</p>
</p>
</form>
</body>
</html>
学习内容来自:b站up遇见狂神说
以上是关于Java学习5.20的主要内容，如果未能解决你的问题，请参考以下文章
[原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段