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>

2.64

2.65

posted on 2021-02-06 19:32 懵逼的程序小白阅读(74) 评论(0) 收藏举报