HTML
🍈初识HTML
- HyperTextMarkupLanguage（超文本标记语言）
- < body >、< /body>等成对的标签，分别叫做开放标签和闭合标签，
- 单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素。
- html注释：< !–注释内容–>
案例1：第一个网页
<!-- Dectype:告诉浏览器使用什么规范 -->
<!DOCTYPE html>
<!-- 语言--en是英语，zh中文-->
<html lang="zh">
<!--头部标签-->
<head>
<!--meta标签用来描述网站的一些信息-->
<!---charest为编码格式-->
<meta charset="UTF-8">
<meta name="keywords" content="小钰的网站">
<meta name="description" content="这是Java工程师的学习笔记网站">
<!--网站标题标签-->
<title>Title</title>
</head>
<!--网站主题标签-->
<body>
Hello World！
</body>
</html>
🍌网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
案例2：基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--1.标题标签<h>-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<hr/>
<!--段落标签<p>-->
<p>消失的下雨天</p>
<p>我好想再淋一遍</p>
<p>没想到失去的勇气我还留着</p>
<p>好想再问一遍</p>
<p>你会等待还是离开</p>
<p>刮风这天我试过握着你手</p>
<p>但偏偏雨渐渐大到我看你不见</p>
<p>还要多久我才能在你身边</p>
<hr/>
<!--水平线标签<hr>-->
<hr/>
<hr/>
<!--换行标签<br>(与段落标签行距不一致)-->
没想到失去的勇气我还留着<br/>
好想再问一遍<br/>
你会等待还是离开<br/>
刮风这天我试过握着你手<br/>
但偏偏雨渐渐大到我看你不见<br/>
还要多久我才能在你身边<br/>
<hr/>
<!--粗体<strong>,斜体<em>标签-->
粗体: <strong>i love you</strong><br/>
斜体: <em>i love you</em>
<hr/>
<!--特殊符号< ,>,<,©>-->
空 格
<br/>
空 格
<br/>
大于号:>
<br/>
小于号:<
<br/>
版权:©
</body>
</html>
🍍图像和链接
图像标签
链接标签
- href： 必填，表示要跳转到那个页面**
- target：表示窗口在那里打开
- _blank：在新标签中打开
- _self： 在自己的网页中打开
案例3：图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--
src:是图片路径,可以是绝对路径,也可以是相对路径,推荐相对路径会性能好
alt:图片名称,当图片路径不存在,或者加载不出才会显示
title:悬屏文字,鼠标位于图片时会提示
width:是图片的宽度
height:是图片的高度
-->
<img src="resources/img/hz.jpg" alt="虎杖头像" title="虎杖" width="100%" height="100%">
</body>
</html>
案例4：链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<a name="t">顶部</a>
<a href="#r">去到底部</a>
<br/>
<!--
1.链接
href:必填,表示要跳转到那个页面
target:跳转的目标窗口,默认为当前窗口,
_blank:是target标签的参数,表示在新窗口打开
-->
<a href="https://www.xiaoyudazhuzai.top">点击我去到Blog</a><br/>
<a href="https://www.baidu.com" target="_blank">点我跳转到百度</a>
<hr/>
<a href="我的第一个网页.html">
<img src="resources/img/hz.jpg" alt="虎杖头像" title="虎杖" width="100%" height="100%">
</a>
<!--
2.锚链接
可以定位到标签处
-->
<p>
<p><a href="我的第一个网页.html">
<img src="resources/img/hz.jpg" alt="虎杖头像1" title="虎杖" width="100%" height="100%">
</a></p>
<p><a href="我的第一个网页.html">
<img src="resources/img/hz.jpg" alt="虎杖头像2" title="虎杖" width="100%" height="100%">
</a></p>
<p><a href="我的第一个网页.html">
<img src="resources/img/hz.jpg" alt="虎杖头像3" title="虎杖" width="100%" height="100%">
</a></p>
<p><a href="我的第一个网页.html">
<img src="resources/img/hz.jpg" alt="虎杖头像4" title="虎杖" width="100%" height="100%">
</a></p>
<p><a href="我的第一个网页.html">
<img src="resources/img/hz.jpg" alt="虎杖头像5" title="虎杖" width="100%" height="100%">
</a></p>
</p>
<a name="r">底部</a>
<a href="#t">回到顶部</a>
<!--
3.功能链接
邮箱链接:mailto
-->
<br/>
<a href="mailto:2270183219qq.com">博主QQ</a>
</body>
</html>
🍑行内元素和块元素
-
块元素
- 无论内容多少，该元素独占一行
例如：<p></p><hr/> <h1>...<h6> -
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
例如：<a><strong><em>
🍉列表
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
列表的分类
- 无序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
- 有序列表
<ul><!--无序列表-->
<li>123
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>2</li>
<li>3</li>
</ul>
- 定义列表
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容-->
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
<dt>语言</dt>
<dd>中文</dd>
<dd>英语</dd>
<dd>日语</dd>
</dl>
案例5：列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--
1.有序列表
<ol>:order list为顺序,秩序
<li>:list为表单
-->
<ol>
<li>javaSE</li>
<li>javaEE</li>
<li>mySql</li>
</ol>
<!--
2.无序列表
<ul>:unorder list为非秩序,非顺序
<li>:list为表单
-->
<ul>
<li>javaSE</li>
<li>javaEE</li>
<li>mySql</li>
</ul>
<!--
3.自定义列表
<dl>:标签 definition list 定义列表
<dt>:列表名称 definition term 定义术语
<dd>:列表内容 definition description 定义说明
-->
<dl>
<dt>后端</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
<dd>mySql</dd>
</dl>
<dl>
<dt>前端</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>VUE</dd>
</dl>
</body>
</html>
表格
表格的基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
案例6：学习成绩表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签学习</title>
</head>
<body>
<!--
表格标签
<table>:表示一个表格
<tr>:行
<td>:列
-->
<!--bgcolor为表格背景颜色,border为间距-->
<table bgcolor="#7fffd4" border="2px">
<!--colspan:为合并列-->
<tr>
<td colspan="3" align="center">学习成绩表</td>
</tr>
<tr>
<td rowspan="2">小钰</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>90</td>
</tr>
<tr>
<!--rowspan:为合并行-->
<td rowspan="2">小林</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
🍐视频和音频
- video
- audio
案例7：视频和音频输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体标签学习</title>
</head>
<body>
<!--
音频和视频
<video>:视频
<audio>:音频
scr:视频路径
controls:播放选项,控制条
autoplay:自动播放
-->
<video src="resources/video/saber.mp4" controls autoplay></video>
<audio src="resources/audio/把美好拼好给你.mp3" controls autoplay></audio>
</body>
</html>
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或者页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用 |
| nav | 导航类辅助内容 |
案例8：头身尾结构
<!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>
- ifram标签，必须要有src属性即引用页面的地址
- 给标签加上name属性后，可以做a标签的target属性，即在内联窗口中打开链接
案例8：内联视频和网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架学习</title>
</head>
<body>
<!--
-->
<!--哔哩哔哩内联视频-->
<iframe
src="//player.bilibili.com/player.html?aid=953386181&bvid=BV1Zs4y137Xs&cid=1124324827&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" height="950" width="100%">
</iframe>
<!---->
<iframe src="https://www.xiaoyudazhuzai.top" style="width:240px; height:380px; border: 0;display:block"></iframe>
</body>
<iframe src="" name="hello" frameborder="0"></iframe>
<a href="我的第一个网页.html" target="hello">点击跳转我的第一个网页</a>
</html>
🍒表单语法(重点)
from标签，action属性为所提交的目的地址，method选择提交方式
可以选择使用post或者get方式提交
- get效率高，但在url中可以看到提交的内容，不安全，不能提交大文件
- post比较安全且可以提交大文件
| 标签 | 说明 |
|---|---|
| input标签 | 大部分表单元素对应的标签有text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text，可以提交用户名、密码等等 |
| select标签 | 下拉选择框 |
| textarea标签 | 文本域 |
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text |
| name | 指定表单元素的名称（提交时所对应的key） |
| value | 元素的初始值，radio必须提供 |
| size | 指定表单元素的初始宽度。当type为text或者password时，以字符为单位；其他type以像素为单位 |
| maxlength | type为text或者password时，输入的最大字符数 |
| checked | type为radio或者checkbox时，指定按钮是否被选中 |
- 一些其他的属性
| 属性 | 说明 |
|---|---|
| readonly | 只读，不可更改 |
| disable | 禁用 |
| hidden | 隐藏，虽然不可见但是会提交 |
| id | 标识符，可以配合label的for属性增加鼠标的可用性 |
| placehoder | text 文字域等输入框内的提示信息 |
| required | 不能为空 |
| patten | 正则表达式验证 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<!--
form:表单
-->
<div class="div1" align="center">
<h1>注册</h1>
<form action="我的第一个网页.html" method="post">
<!--
action:表单提交的位置,可以是网站,亦可以是一个请求处理地址
method:提交方式
get:这个提交方式不安全,因为可以在url中看到,但是高效
post:这个提交方式安全,在url中是隐蔽的,同时还能传输文件
value="":默认值
maxlength="":输入字符长度
size="":文本框长度
-->
<!--文本框-->
<p>姓名:<input type="text" name="username" value="小钰" readonly maxlength="10" size="30"></p>
<!--密码框-->
<p>密码:<input type="password" name="pwd" maxlength="6-10" value="123456" size="30"></p>
<!--单选框-->
<p>性别:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--复选框-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby" disabled>睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="game" name="hobby">打游戏
<input type="checkbox" value="read" name="hobby">看书
</p>
<!--提交和重置按钮-->
<input type="submit">
<input type="reset">
<!--按钮-->
<p>按钮:
<input type="button" value="点击变长" name="bt"><br/>
<input type="image" src="resources/img/saber.webp">
</p>
<!--下拉框,列表框-->
<p>
<select name="列表名称" id="">
<option value="2">美国</option>
<option value="3">英国</option>
<option value="4">法国</option>
<option value="1" selected>中国</option>
</select>
</p>
<!--文本域-->
<p>
<textarea name="text" cols="30" rows="10"></textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮件验证-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--url验证-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字验证-->
<p>数字:
<input type="number" name="number">
</p>
<!--滑块-->
<p>
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search" id="mark">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">你点我就能定位搜索</label>
</p>
</form>
</div>
</body>
</html>
