HTML
W3C:万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
HTML02.网页的基本信息
<!--DOCTYPE:告诉浏览器我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部-->
<head>
<!-- meta描述性标签，它用来描述我们的网站的一些信息 -->
<meta charset="UTF-8">
<meta name="keywords" content="小胡学java，cv工程师">
<meta name="description" content="来这个地方学习">
<!-- title网页标签 -->
<title>帅哥网站</title>
</head>
<body>
hello wrold!!!
</body>
</html>
HTML03.网页标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!-- 标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<!--段落标签-->
<p>咏鹅</p>
<p>鹅鹅鹅</p>
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
咏鹅 <br/>
鹅鹅鹅 <br/>
曲项向天歌 <br/>
白毛浮绿水 <br/>
红掌拨清波 <br/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>小胡</strong>
斜体:<em>小胡</em>
<br/>
<!--特殊呼号-->
空 格
空 格
<!--
特殊符号记忆方式
&加上;结尾
空格
%copy;版权所有符号
-->
</body>
</html>
HTML04.图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--
img学习
src:图片地址
相对地址：（推荐使用） 绝对地址
../ --上一级目录
-->
<img src="../resources/img/学籍信息.png"alt="小胡学籍信息">
</body>
</html>
HTML05.超链接标签及应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top"></a>
<!--
a标签
hear：必填，表示要跳转的标签
tarfet:表示窗口在哪里打开
--_blank表示重新打开一个窗体
--_self表示在本窗口进行打开
-->
<a href="1.我的第一个网页.html"target="_blank">点击我跳转到页面一</a>
<br>
<a href="http://www.baidu.com"target="_self">点击我跳转到百度</a>
<br>
<a href="1.我的第一个网页.html">
<img src="../resources/img/学籍信息.png" alt="小胡的学籍信息" title="跳转去网页一" width="1138" height="661">
</a>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/img/学籍信息.png" alt="小胡的学籍信息" title="跳转去网页一" width="1138" height="661">
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/img/学籍信息.png" alt="小胡的学籍信息" title="跳转去网页一" width="1138" height="661">
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/img/学籍信息.png" alt="小胡的学籍信息" title="跳转去网页一" width="1138" height="661">
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/img/学籍信息.png" alt="小胡的学籍信息" title="跳转去网页一" width="1138" height="661">
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/img/学籍信息.png" alt="小胡的学籍信息" title="跳转去网页一" width="1138" height="661">
</a>
</p>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>
<!--功能性标签
邮件连接：mailto
QQ
-->
<a href="mailto:529780274@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好，添加我领取小电影" title="你好，添加我领取小电影"/>
</a>
</body>
</html>
HTML06.列表标签
有序表格：
无序表格：
- 作用：导航栏
自定义表格：
dl:标签
dt:列表名称
dd：列表内容
公司列表的底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!-- 有序列表 -->
<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>
<hr/>
<!-- 自定义列表
dl:标签
dt:列表名称
dd：列表内容
公司列表的底部
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>linux</dd>
<dt>位置</dt>
<dd>宜春</dd>
<dd>温汤</dd>
<dd>江西</dd>
<dd>中国</dd>
</dl>
</body>
</html>
HTML07.表格标签
为什么要是用表格：
-
简单通用
-
结构稳定
基本结构：
- 单元格 border
- 行 tr
- 列 td
- 跨行 rowspam
- 跨列 colspam
- 字体位置 algin: 左：left 中：center 右：right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格 table
行 tr
列 td
-->
<table border="1px">
<tr>
<!--colspam 跨列 -->
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!--rowspam 跨行-->
<td rowspan="2">2-1</td>
<td colspan="2">2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
<table border="1px">
<tr>
<td colspan="3" align="center">学生成绩</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>
</table>
</body>
</html>
HTML08.媒体元素
视频元素：
video
音频元素：
audio
src:资源路径
controls 设置控制条
autoplay: 自动播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!-- 音频和视频
src:资源路径
controls 设置控制条
autoplay: 自动播放
-->
<video src="../resources/video/李荣浩.mkv" controls autoplay></video>
<audio src="../resources/audio/陈奕迅%20-%20倾城%20(Live).mp3" controls autoplay></audio>
</body>
</html>
HTML9.页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容 |
| footer | 标记脚步区域的内容 |
| section | web页面中的一块独立区域 |
| aside | 相关内容或者应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
<!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>
HTML10.iframe
iframe 内联框架
src:引用页面地址
name:mainFrame 框架标识名
w—h：宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架iframe</title>
</head>
<body>
<!-- iframe 内联框架
src:引用页面地址
name:mainFrame 框架标识名
w—h：宽度和高度
-->
<iframe src="" name="hello" frameborder="0" width="800px" height="800px">
</iframe>
<a href="https://www.hao123.com" target="hello" >点击跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10"-->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
</body>
</html>
HTML11.初始表单post和get提交
表单form
action : 表单提交的位置，可以使网站，也可以是一个请求处理的地址
method：post，get 提交方式
get方式提交可以通过url路径看到所提交的信息 不安全，但是高效
post:比较安全 可以进行传输大文件
<form action="1.我的第一个网页.html" method="post">
<!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="post">
<!--文本输入框：input type="text"-->
<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>
HTML12.文本框和单选框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xgE93W6I-1628573848484)(C:\Users\ASUS\Desktop\1.PNG)]
单选框标签
input type=“radio”
value:单选框的值
name:表示组
按钮
input type=“button” 普通按钮
input type=“image” 图像按钮
input type=“submit” 提交信息
input type=“reset” 清空表单
下拉框，列表框
select name="列表名称"
邮箱验证
input type="email"
滑块
input type="range"
<!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" 文本框的长度
-->
<p>名字：<input type="text" name="username" > </p>
<!--文本输入框：input type="password"-->
<p>密码：<input type="password" name="pwd" > </p>
<!--单选框标签
input type="radio"
value:单选框的值
name:表示组
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
-->
<p>学习:
<input type="checkbox" value="java" name="study" checked>java
<input type="checkbox" value="python" name="study">python
<input type="checkbox" value="c++" name="study">c++
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
<input type="submit" 提交信息
<input type="reset" 清空表单
-->
<p>按钮：
<input type="button" value="点击变长" name="btn1">
<!-- <input type="image" src="../resources/img/学籍信息.png" name="btn1">-->
</p>
<!--下拉框，列表框
select name="列表名称"
-->
<p>国家：
<select name="列表名称">
<option value="china">中国</option>
<option value="USA">美国</option>
<option value="eth" selected>瑞士</option>
<option value="yindu">印度</option>
</select>
</p>
<!--文件域
cols="6" 宽
rows="5" 高
-->
<p>反馈：
<textarea name="textarea" cols="6" rows="5">反馈内容</textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="update">
</p>
<!--邮箱验证
<input type="email"
-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL-->
<p>url:
<input type="url" name="url">
</p>
<!--数字-->
<p>数字:
<input type="number" max="100" min="0" step="1">
</p>
<!--滑块
input type="range"
-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="5">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<p>
<input type="submit" >
<input type="reset">
</p>
</form>
</body>
</html>
HTML13表单的应用
只读：readonly
禁用：disable
隐藏：hidden
HTML14.表单的初级验证
placeholder 提示信息（大多数用在需要输入文本的地方）
required：非空判断（使用在必须填选项）
pattern：正则表达式（随用随找）
常用的正则表达式_正则表达式大全_脚本之家 (jb51.net)
HTML15.小结
ep=“1”>
<!--滑块
input type="range"
-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="5">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<p>
<input type="submit" >
<input type="reset">
</p>
HTML13表单的应用
只读：readonly
禁用：disable
隐藏：hidden
HTML14.表单的初级验证
placeholder 提示信息（大多数用在需要输入文本的地方）
required：非空判断（使用在必须填选项）
pattern：正则表达式（随用随找）
常用的正则表达式_正则表达式大全_脚本之家 (jb51.net)
HTML15.小结
https://processon.com/mindmap/60aa5049079129238faf45cb
3838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
