java学习之旅（day.21）

HTML

初识HTML

HTML: Hyper Text Markup Language(超文本标记语言)

超文本包括文字、图片、音频、视频、动画等

W3C标准

W3C ：World Wide Web Consortium(万维网联盟)

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

W3C包括：

结构化标准语言（HTML 、XML）
表现标准语言（CSS）
行为标准（DOM（文档对象模型）、ECMAScript）

<!--在这里面写注释 快捷键：ctrl+/ -->

<!--DOCTYPE:告诉浏览器，我们要使用什么样的规范 <!DOCTYPE html>  这句可以去掉，因为浏览器默认的就是html-->

<!DOCTYPE html>

<!--总标签-->

<html lang="en">

<!--head标签  代表网页头部-->

<head>

<!-- meta 描述性标签，用来描述网站的一些信息   -->

<!-- meta标签一般用来做SEO   -->

    <meta charset="UTF-8">

<!-- 再自己写点网站的meta   -->

    <meta name="keywords" content="学java，java">

    <meta name="description" content="学到java">

<!-- title 网页的标题   -->

    <title>我的第一个网页</title>

</head>

<!--body标签  代表网页主体-->

<body>

hello world!

</body>

</html>

    <!--  <>开放标签   </> 闭合标签-->

网页基本标签

标题标签

段落标签

换行标签
或

水平线标签

或

字体样式标签

粗体<strong></>strong>

斜体<em></>em>

注释和特殊符号

注释 <!---->

空格：&nbsp;

>大于号：&gt

小于号:&lt

版权符号：&copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>基本标签学习</title>

</head>

<body>

<!--标题标签-->

<h1>一级标签</h1>

<h2>二级标签</h2>

<h3>三级标签</h3>

<h4>四级标签</h4>

<h5>五级标签</h5>

<h6>六级标签</h6>

<!--段落标签  入锅不用段落标签，下面这行文字就是一行-->

<!--p  tab  自动生成-->

<p>两只老虎，两只老虎，</p>

<p>跑得快，跑得快，</p>

<p>一只没有眼睛，</p>

<p>一只没有尾巴，

    真奇怪！真奇怪！

    两只老虎，两只老虎，

    跑得快，跑得快，

    一只没有耳朵，

    一只没有尾巴，

    真奇怪！真奇怪！</p>

<!--换行标签   <br>或 <br/>br>-->

一只没有尾巴，

真奇怪！真奇怪！<br/>

两只老虎，两只老虎，

跑得快，跑得快，

一只没有耳朵，

一只没有尾巴，<br/>

<!--水平线标签<hr>或<hr/>-->

<hr>

真奇怪！真奇怪！

<!--字体样式标签-->

<!--粗体<strong></>strong>、斜体<em></>em>-->

<h1>字体样式</h1>

粗体：<strong>I love you </strong>

斜体：<em>I love you </em>

<!--注释（）和特殊符号-->

<br/>

<!---->注释

<br/>

<!--特殊符号-->

空        格：&nbsp;

空&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 格

<br/>

>大于号：&gt

<br/>

小于号:&lt

<br/>

版权符号：&copy

<!--

特殊符号记忆方法    &开头  ；结尾

&    ;

-->

</body>

</html>

图形、超链接、网页布局

图像

常见的图像格式

JPG
GIF：动态图
PNG
BMP：位图等

在html中嵌入标签

注释：

src：放图像地址

alt：放图像的替代文字（如果图片加载不出来，可以用文字代替）

title：鼠标悬停提示文字

width：图像宽度

height：图像高度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>图像标签学习</title>

</head>

<body>

<!--img学习

src:图片地址

地址有相对地址和绝对地址

绝对地址：就是哪个盘下哪哪那种，这里一般不建议用而用相对路径

../  表示上一级目录 通过../可以获得上一级目录-->

<img src="../resource/image/netplot.bmp" alt="随便找的图片" title="哈哈哈哈" width="300" height="300">

</body>

</html>

超链接标签及应用

链接标签

链接文本或图像《/a>

注：

href ：链接路径

target：链接在哪个窗口打开常用值 _self _blank

页面间链接：从一个页面链接到另一个页面

锚链接：也是a标签，但要配合一些属性来可以实现页面间的跳转，如回到顶部页面间也可以实现直接跳转到锚链接

功能性链接：

邮件链接 mailto

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>链接标签学习 </title>

</head>

<body>

<!--定义一个锚标记

使用name作为标记-->

<a name="top">顶部</a>

<!--a标签  超链接标签

herf：表示要跳转到哪个页面

target：表示窗口在哪里打开 _bank: 在新标签页中打开

                       _self: 在自己的网页中打开，覆盖（默认是这个）

-->

<!--文本超链接-->

<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>

<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>

<br>

<!--图片超链接(点图片跳转链接)-->

<a href="1.我的第一个网页.html">

    <img src="../resource/image/netplot.bmp" alt="随便找的图片" title="哈哈哈哈" width="300" height="300">

</a>

<p>

    <a href="1.我的第一个网页.html">

        <img src="../resource/image/netplot.bmp" alt="随便找的图片" title="哈哈哈哈" width="300" height="300">

    </a>

</p>

<p>

    <a href="1.我的第一个网页.html">

        <img src="../resource/image/netplot.bmp" alt="随便找的图片" title="哈哈哈哈" width="300" height="300">

    </a>

</p><p>

    <a href="1.我的第一个网页.html">

        <img src="../resource/image/netplot.bmp" alt="随便找的图片" title="哈哈哈哈" width="300" height="300">

    </a>

</p><p>

    <a href="1.我的第一个网页.html">

        <img src="../resource/image/netplot.bmp" alt="随便找的图片" title="哈哈哈哈" width="300" height="300">

    </a>

</p><p>

    <a href="1.我的第一个网页.html">

        <img src="../resource/image/netplot.bmp" alt="随便找的图片" title="哈哈哈哈" width="300" height="300">

    </a>

</p>

<!--锚链接

1.需要一个锚标记

2.跳转到这个标记（通过超链接跳）

#  需要用#来标识，通过#来跳转  #标记的名字-->

<a href="#top">回到顶部</a>

<!--再写个标记-->

<a name="down">down</a>

<!--功能性链接-->

  邮件链接  mailto

<a href="mailto:1913025564@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1913025564&site=qq&menu=yes">

    <img border="0" src="http://wpa.qq.com/pa?p=2:1913025564:53" alt="你好，加加加" title="你好，加加加"/>

</a>

</body>

</html>

=============================================

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>图像标签学习</title>

</head>

<body>

<!--img学习

src:图片地址

地址有相对地址和绝对地址

绝对地址：就是哪个盘下哪哪那种，这里一般不建议用而用相对路径

../  表示上一级目录 通过../可以获得上一级目录-->

<img src="../resource/image/netplot.bmp" alt="随便找的图片" title="哈哈哈哈" width="300" height="300">

</body>

</html>

<!--页面间也可以实现直接跳转到锚链接-->

<a href="4.链接标签.html#down">点击跳转</a>

块元素和行内元素

块元素:无论内容多少，该元素独占一行。如：p、h1

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行。如：a、strong、em

网页布局

列表、表格、媒体元素

列表标签

什么是列表？

列表是信息资源的一种展示形式，它可以是信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应的信息

列表的分类：

无序列表
有序列表
```
<ol>

    <li></li>

</ol>
```
自定义列表

<dl>

    <dt></dt>

    <dd></dd>

    <dd></dd>

    <dd></dd>

    <dd></dd>

</dl>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列表学习</title>

</head>

<body>

<!--有序列表 ol大标签  <li></li>子标签   -->

<ol>

    <li>java</li>

    <li>Python</li>

    <li>运维</li>

    <li>前端</li>

    <li>C++</li>

</ol>

<hr/>

<!--无序列表-->

<ul>

    <li>java</li>

    <li>Python</li>

    <li>运维</li>

    <li>前端</li>

    <li>C++</li>

</ul>

<!--自定义列表

<dl> 标签

<dt></dt> 列表名称

<dd></dd> 列表选项或内容

-->

<dl>

    <dt>学科</dt>

    <dd>java</dd>

    <dd>Python</dd>

    <dd>Linux</dd>

    <dd>C</dd>

    <dt>位置</dt>

    <dd>上海</dd>

    <dd>北京</dd>

    <dd>江苏</dd>

</dl>

</body>

</html>

表格标签

基本结构：

单元格 table创建表格
行 tr 创建行
列 td
跨行（合并单元格） rowspan
跨列 colspan

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格学习</title>

</head>

<body>

<!--表格table

行 tr

列 td

-->三行三列   border  边框宽

<table border="1px">

    <tr>

<!--跨列 合并单元格colspan 4代表跨4列       -->

        <td colspan="4">1-1</td>

    </tr>

    <tr>

<!-- 跨行       -->

        <td rowspan="2">2-1</td>

        <td>2-2</td>

        <td>2-3</td>

    </tr>

    <tr>

        <td>3-1</td>

        <td>3-2</td>

    </tr>

</table>

</body>

</html>

媒体元素

视频和音频

视频元素：video

音频元素：audio

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>媒体元素学习</title>

</head>

<body>

<!--音频和视频

src 资源路径

controls 控制播放的选项

autoplay自动播放 但是谷歌是限制自动播放的，用其他浏览器可以

-->

<video src="../resource/video/4.薄脆的制作.mp4" controls autoplay></video>

<audio src="../resource/audio/录音.m4a" controls autoplay></audio>

</body>

</html>

页面结构分析

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>页面结构分析</title>

</head>

<body>

<header><h2>网页头部</h2></header>

<section><h2>网页主体</h2></section>

<footer><h2>网页脚部</h2></footer>

</body>

</html>

iframe内联框架

在一个网站里嵌套另外一个网页

《iframe src="path "name="mainFrame">《/iframe》

注：

path 引用页面地址

mainFrame 框架标识名

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--iframe 内联框架

src 地址

在一个框架里面打开一个网站    网站中嵌入一个百度网页-->

<!--<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>-->

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<!--可以跳转到指定的iframe中-->

<a href="https://blog.kuangstudy.com" target="hello">点击跳转</a>

<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"

        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

</body>

</html>

表单及表单应用

初识表单（form） post和get提交

登陆注册那个页面就是一种表单

表单元素格式：

checkbox 单选框

radio 多选框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录注册</title>

</head>

<body>

<h1>注册</h1>

<!--表单form

action  表单提交到哪个位置（可以是网站，也可以是请求处理地址）

method  post get  提交方式 一般用get 这里用post测试

使用get方式提交，url:http://localhost:63342/HTML/html/1.%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.html?username=shabi&pwd=shabihahah

我们可以在url中看到提交的信息，这样不安全，但高效

使用post方式提交，url：http://localhost:63342/HTML/html/1.%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.html

在url中看不到提交的信息，较安全，可以传输大文件，get方式不能传输大文件

-->

<form action="1.我的第一个网页.html" method="post">

<!--    input type="text" 文本输入框

所有的input标签都命一个名字 name 代表这个标签叫什么名字-->

    <p>名字：<input type="text" name="username"></p>

<!--    密码框 input type="password"-->

    <p>密码：<input type="password" name="pwd"></p>

<!--    提交和重置     块-->

    <p>

        <input type="submit">

        <input type="reset">

    </p>

</form>

</body>

</html>

列表框文本域和文件域

表单初级验证

搜索框滑块和简单验证

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录注册</title>

</head>

<body>

<h1>注册</h1>

<!--表单form

action  表单提交到哪个位置（可以是网站，也可以是请求处理地址）

method  post get  提交方式 一般用get 这里用post测试

使用get方式提交，url:http://localhost:63342/HTML/html/1.%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.html?username=shabi&pwd=shabihahah

我们可以在url中看到提交的信息，这样不安全，但高效

使用post方式提交，url：http://localhost:63342/HTML/html/1.%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.html

在url中看不到提交的信息，较安全，可以传输大文件，get方式不能传输大文件

-->

<form action="1.我的第一个网页.html" method="get">

<!--    input type="text" 文本输入框

所有的input标签都命一个名字 name 代表这个标签叫什么名字

value="狂神好帅"  默认初始值

 maxlength="8" 最长能写几个字符

 size="30" 文本框的长度

 -->

    <p>名字：<input type="text" name="username" ></p>

<!--    密码框 input type="password"-->

    <p>密码：<input type="password" name="pwd"></p>

<!-- 单选框标签input type="radio"

value: 单选框的值

name： 表示组，name一样就是一个组，这里不加name的话，尽管是单选框，但不在一个组里，还是可多选

   -->

    <p>性别：

        <input type="radio" value="boy" name="sex" checked>男

        <input type="radio" value="girl" name="sex">女

    </p>

<!-- 多选框 input type="checkbox" checked 默认选中 -->

    <p>爱好：

        <input type="checkbox" value="sleep" name="hobby" >睡觉

        <input type="checkbox" value="code" name="hobby"checked >敲代码

        <input type="checkbox" value="chat" name="hobby" >聊天

        <input type="checkbox" value="game" name="hobby" >游戏

    </p>

<!--    按钮

input type="button" 普通按钮

input type="image"  图像按钮

input type="submit"  提交按钮

input type="reset"   重置按钮

-->

    <p>按钮

        <input type="button" value="点击变长" name="btn1">

<!--图片按钮-->

<!--        <input type="image" src="../resource/image/netplot.bmp">-->

    </p>

<!--    提交和重置     块-->

    <p>

        <input type="submit">

        <input type="reset">

    </p>

<!--    文件域file

input type="file" name="files" 通过name属性上传

所有的表单都需要name属性

-->

    <p>

        <input type="file" name="files">

        <input type="button" value="上传" name="upload">

    </p>

<!--    下拉框、列表框

加selected 就是默认选中该国

下拉框select

下拉框选项option

-->

    <p>下拉框国家：

        <select name="列表名称" >

            <option value="选项的值">中国</option>

            <option value="选项的值">美国</option>

            <option value="选项的值" selected>德国</option>

            <option value="选项的值">韩国</option>

        </select>

    </p>

<!--    文本域textarea   多行文本

cols="30"  列

rows="10"  行-->

    <p>反馈

        <textarea name="textarez"  cols="30" rows="10">文本内容</textarea>

    </p>

<!--带验证的一些功能-->

<!--    邮件验证-->

    <p>邮箱

        <input type="email" name="email">

    </p>

    <!--   URL-->

    <p>URL

        <input type="url" name="url">

    </p>

<!--数字验证-->

    <p>数量

        <input type="number" name="num" max="100" min="0" step="10">

    </p>

<!--滑块range

   input type="range"

   -->

    <p>音量滑块

        <input type="range" name="voice" min="0" max="100" step="2">

    </p>

<!-- 搜索框 search  -->

    <p>搜索

        <input type="search" name="search">

    </p>

    <p>

        <input type="submit">

        <input type="reset">

    </p>

</form>

</body>

</html>

表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled

表单初级验证

常用方式：

placeholder 提示信息用于输入框等控件中

required 非空判断（有值才能提交，不能为空）用于所有的文本框

pattern 正则表达式自己查（https://www.jb51.net/tools/regexsc.htm）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录注册</title>

</head>

<body>

<h1>注册</h1>

<!--表单form

action  表单提交到哪个位置（可以是网站，也可以是请求处理地址）

method  post get  提交方式 一般用get 这里用post测试

使用get方式提交，url:http://localhost:63342/HTML/html/1.%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.html?username=shabi&pwd=shabihahah

我们可以在url中看到提交的信息，这样不安全，但高效

使用post方式提交，url：http://localhost:63342/HTML/html/1.%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.html

在url中看不到提交的信息，较安全，可以传输大文件，get方式不能传输大文件

-->

<form action="1.我的第一个网页.html" method="get">

<!--    input type="text" 文本输入框

所有的input标签都命一个名字 name 代表这个标签叫什么名字

value="狂神好帅"  默认初始值

 maxlength="8" 最长能写几个字符

 size="30" 文本框的长度

 -->

    <p>名字：<input type="text" name="username" ></p>

<!--   只读value="admin" readonly-->

    <p>名字：<input type="text" name="username" value="admin" readonly ></p>

<!--    提示信息   placeholder  请输入用户名    用于输入框的控件中-->

    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>

<!--    required 非空判断-->

    <p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>

<!--    密码框 input type="password"-->

    <p>密码：<input type="password" name="pwd"></p>

<!--    隐藏域hinden   可以利用隐藏域传递默认值  隐藏了，但是值还在-->

    <p>密码：<input type="password" name="pwd" hidden value="1234"></p>

<!-- 单选框标签input type="radio"

value: 单选框的值

name： 表示组，name一样就是一个组，这里不加name的话，尽管是单选框，但不在一个组里，还是可多选

   -->

    <p>性别：

        <input type="radio" value="boy" name="sex" checked>男

<!--  禁用disabled  -->

        <input type="radio" value="boy" name="sex" checked disabled>男

        <input type="radio" value="girl" name="sex">女

    </p>

<!-- 多选框 input type="checkbox" checked 默认选中 -->

    <p>爱好：

        <input type="checkbox" value="sleep" name="hobby" >睡觉

        <input type="checkbox" value="code" name="hobby"checked >敲代码

        <input type="checkbox" value="chat" name="hobby" >聊天

        <input type="checkbox" value="game" name="hobby" >游戏

    </p>

<!--    按钮

input type="button" 普通按钮

input type="image"  图像按钮

input type="submit"  提交按钮

input type="reset"   重置按钮

-->

    <p>按钮

        <input type="button" value="点击变长" name="btn1">

<!--图片按钮-->

<!--        <input type="image" src="../resource/image/netplot.bmp">-->

    </p>

<!--    提交和重置     块-->

    <p>

        <input type="submit">

        <input type="reset">

    </p>

<!--    文件域file

input type="file" name="files" 通过name属性上传

所有的表单都需要name属性

-->

    <p>

        <input type="file" name="files">

        <input type="button" value="上传" name="upload">

    </p>

<!--    下拉框、列表框

加selected 就是默认选中该国

下拉框select

下拉框选项option

-->

    <p>下拉框国家：

        <select name="列表名称" >

            <option value="选项的值">中国</option>

            <option value="选项的值">美国</option>

            <option value="选项的值" selected>德国</option>

            <option value="选项的值">韩国</option>

        </select>

    </p>

<!--    文本域textarea   多行文本

cols="30"  列

rows="10"  行-->

    <p>反馈

        <textarea name="textarez"  cols="30" rows="10">文本内容</textarea>

    </p>

<!--带验证的一些功能-->

<!--    邮件验证-->

    <p>邮箱

        <input type="email" name="email" required>

    </p>

    <!--   URL-->

    <p>URL

        <input type="url" name="url" required>

    </p>

<!--数字验证-->

    <p>数量

        <input type="number" name="num" max="100" min="0" step="10">

    </p>

<!--滑块range

   input type="range"

   -->

    <p>音量滑块

        <input type="range" name="voice" min="0" max="100" step="2">

    </p>

<!-- 搜索框 search  -->

    <p>搜索

        <input type="search" name="search">

    </p>

<p>

<!--    增强鼠标可用性label  即点击文字也能定位到框中，可以指向一个位置

id="mark"这句加到哪，点  点我就会跳转到哪个框-->

    <label for="mark">点我</label>

<!--  for可以指向一个ID input一个标签-->

    <input type="text" id="mark">

</p>

<!--正则表达式pattern-->

<p>自定义邮箱

    <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/

/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

</p>

    <p>

        <input type="submit">

        <input type="reset">

    </p>

</form>

</body>

</html>