HTML5
什么是HTML
HTML
- Hyper Text Markup Language(超文本标记语言)
- 超文本包括:文字、图片、音频、视频、动画等
HTML 5,提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立,提供了许多新的网页功能,如使用网页实现动态渲染图形、图表、图像和动画,以及不需要安装任何插件直接使用网页播放视频等。
W3 C标准
W3C
-
World Wide Web Consortium (万维网联盟)
-
成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
-
http://www.w3.org/
-
http://www.chinaw3c.org/
-
W3C标准包括
-
结构化标准语言(HTML、XML)
-
表现标准语言(CSS)
-
行为标准(DOM、ECMAScript )
常用IDE
- IDEA
网页基本标签
➢标题标签
➢段落标签
➢换行标签
➢水平线标签
➢字体样式标签
➢注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
跑得快 跑得快 <br/>
一只没有耳朵 一只没有尾巴 <br/>
真奇怪 真奇怪<br/>
<!--粗体,斜体-->
<h1>字体样式标签</h1>
粗体:<strong>i love you</strong>
斜体:<em>i love you</em>
<hr/>
<!-- 特殊符号-->
空 格
空 格
<br/>
>
<br/>
<
©版权所有
</body>
</html>
图像标签
常用的图像标签
JPG
GIF
PNG
BMP(位图)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zYt4rdqL-1588763224759)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506070225.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
l<!--img学习
src :图片地址 (必填)
相对地址(推荐使用),绝对地址
../ --上一级目录
alt :图片名字(必填)
-->
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</body>
</html>
链接标签
- 文本超链接
- 图像超链接
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TaLF3GXf-1588763224762)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506071119.png)]
超链接
- 页面间链接
- 从一个页面链接到另一个页面
- 锚链接
- 功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
l<!--a标签
href :必填,表示要跳转到那个页面
target :表示窗口在哪里打开
_blank 在新标签中打开
_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/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<p>
<a href="1.我的第一个页面.html">
<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
</p>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a name="down">尾部</a>
<!--功能性链接
邮件链接: mailto
QQ链接
-->
<a href="mailto:35329226353@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3532926353&site=qq&menu=yes">
<img border="0"
src="http://wpa.qq.com/pa?p=2:3532926353:53"
alt="点击这里给我发消息"
title="点击这里给我发消息"/>
</a>
</body>
</html>
行内元素和块元素
- 块元素
- 无论内容多少,该元素独占- -行
- (p、h1-h6…)
- 行内元素
- 内容撑开宽度,左右都是行内元素的可以在排在一-行
- (a.strong.em…)
列表
-
什么是列表
列表就是信息资源的- -种展示形式。它可以使信息结构化和条理化,并
以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息 -
列表的分类
◆无序列表
◆有序列表
◆定义列表
<!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/c++</li>
</ol>
<hr/>
<!--无序列表
应用范围:导航,侧边栏
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/c++</li>
</ul>
<!--自定义列表
dl:标签
dt :列表名称
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>
表格
-
为什么使用表格
简单通用
结构稳定 -
基本结构
单元格
行
列
跨行
跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table
行 tr rows
列 td cols
-->
<table border="1px">
<tr>
<!--colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan 跨列-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</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/小泽.mp4" controls autoplay></video>
<audio src="../resource/audio/2.mp3" controls autoplay></audio>
</body>
</html>
页面结构分析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VTaOHEcM-1588763224764)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506080538.png)]
<!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
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sNzSwJcB-1588763224765)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506082005.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--iframe内联框架
src:地址
w-h:宽度和高度
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="1.我的第一个页面.html" 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>
表单语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ey5qMqP-1588763224766)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506181143.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ycMxeTnx-1588763224767)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506182313.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
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" value="狂神很厉害" maxlength="8" size="30"></p>
<!-- 密码框:input type="password" name="pwd"-->
<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>
<!--
多选框:
input type="checkbox"
-->
<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" name="btn1" value="点击边长">
<input type="image" src="../resource/image/笑.jpg">
</p>
<!-- 下拉框,列表框
-->
<p>
下拉框:
<select name="列表名称">
<option value="China">中国</option>
<option value="us">美国</option>
<option value="eth" selected>瑞士</option>
<option value="india">印度</option>
</select>
</p>
<!--文本域:
-->
<p>
反馈:
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</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="10" step="1">
</p>
<!-- 滑块
input type="range"
-->
<p>
音量:
<input type="range" name="voice" min="0" max="100" step="5" value="10">
</p>
<!-- 搜索框-->
<p>
搜索:
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
表单的应用
隐藏域 hidden
只读 readonly
禁用 disabled
label for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
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" value="admin" maxlength="8" size="30" readonly></p>
<!-- 密码框:input type="password" name="pwd"-->
<p>密码: <input type="password" name="pwd" value="123456" hidden></p>
<!--单选框标签
input type="radio"
value: 单选框的值
name : 表示组
-->
<p>
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--
多选框:
input type="checkbox"
-->
<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" name="btn1" value="点击边长">
<input type="image" src="../resource/image/笑.jpg">
</p>
<!-- 下拉框,列表框
-->
<p>
下拉框:
<select name="列表名称">
<option value="China">中国</option>
<option value="us">美国</option>
<option value="eth" selected>瑞士</option>
<option value="india">印度</option>
</select>
</p>
<!--文本域:
-->
<p>
反馈:
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</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="10" step="1">
</p>
<!-- 滑块
input type="range"
-->
<p>
音量:
<input type="range" name="voice" min="0" max="100" step="5" value="10">
</p>
<!-- 搜索框-->
<p>
搜索:
<input type="search" name="search">
</p>
<!-- 增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
表单初级验证
为啥要进行表单验证?
安全
减轻服务器压力
-
常用方式
placeholder 提示信息
required 非空判断
pattern 正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
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" placeholder="请输入用户名" required></p>
<!-- 密码框:input type="password" name="pwd"-->
<p>密码: <input type="password" name="pwd" value="123456" hidden></p>
<!--单选框标签
input type="radio"
value: 单选框的值
name : 表示组
-->
<p>
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--
多选框:
input type="checkbox"
-->
<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" name="btn1" value="点击边长">
<input type="image" src="../resource/image/笑.jpg">
</p>
<!-- 下拉框,列表框
-->
<p>
下拉框:
<select name="列表名称">
<option value="China">中国</option>
<option value="us">美国</option>
<option value="eth" selected>瑞士</option>
<option value="india">印度</option>
</select>
</p>
<!--文本域:
-->
<p>
反馈:
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</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="10" step="1">
</p>
<!-- 滑块
input type="range"
-->
<p>
音量:
<input type="range" name="voice" min="0" max="100" step="5" value="10">
</p>
<!-- 搜索框-->
<p>
搜索:
<input type="search" name="search">
</p>
<!-- 增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>自定义邮箱:
<input type="text" name="mymail" pattern=" ^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>