HTML(H5)
视频链接: https://www.bilibili.com/video/BV1x4411V75C/
资料来源: 遇见狂神说 (https://space.bilibili.com/95256449/channel/detail?cid=146244)
HTML(Hyper Text Markup Language)超文本标记语言
超文本包括 : 文字, 图片, 音频, 视频, 动画等.
HTML5
W3C标准
W3C
- World Wide Web Consortium (万维网联盟)
- 成立于1994年, Web技术邻域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw.org/
W3C标准包括
- 结构化标准语言(HTML, XML)
- 表现标准语言 (CSS)
- 行为标准 (DOM, ECMAScript)
<!--DOCTYPE: 告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--网页头部-->
<head><!--开放标签-->
<!-- meta描述型标签,用来描述我们网站的一些信息 -->
<!-- meta一般用来做SEO<搜索引擎优化>-->
<meta charset="UTF-8">
<meta name="keywords" content="橘子皮的第一个html">
<meta name="description" content="立志成为一名合格的java程序员">
<!--title网页标题-->
<title>Title</title>
</head><!--闭合标签-->
<!--主体部分-->
<body>
</body>
</html>
网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
<!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>i am the king</p>
<p>天不生我李淳罡</p>
<p>剑道万古如长夜</p>
<!--换行标签-->
i <br/>
love <br/>
you <br/>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
粗体 : <strong>gzpstart</strong><br/>
斜体 : <em>baby</em>
<br/>
<!--特殊符号-->
空 格<br/>
空 格
<br/>
>
<br/>
<
<br/>
©
</body>
</html>
图像标签
常见图像格式
- JPG
- GIF
- PNG
- BMP
- ......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--
src:图片地址(必填)
../ 上一级目录
alt:图片名字(-必填-)
-->
<img src="../resources/image/main.jpg" alt="main" title="悬停文字" height="300" width="500"/>
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--a标签
href : 必填, 表示要跳到那个页面
target : 表示窗口在哪里打开
_blank : 在新标签中打开
_self : 在当前页面打开
-->
<a href="3.图像标签.html" target="_blank">点击我跳转页面</a>
<a href="https://www.baidu.com" target="_self">百度</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resources/image/main.jpg" alt="main" title="悬停文字" width="550" height="300">
</a>
</body>
</html>
锚链接
页面之间的跳转
<!--使用name作为标记-->
<a name="top">顶部</a>
......
<br/>
<!--锚链接
1. 需要一个标记
2. 跳转到标记
#
-->
<a href="#top">回到顶部</a>
页面与页面的跳转
<a href="4.链接标签.html#down">down</a>
<a href="down">底部</a>
功能性链接
<!--功能性链接-->
<a href="mailto:1991465755@qq.com">点击联系我</a>
<!--qq推广-->
<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>
行内元素和块元素
块元素
- 无论内容多少,该元素独占一行.
- (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>Web</li>
<li>C</li>
<li>C++</li>
<li>Linux</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>凯撒</li>
<li>楚子航</li>
<li>绘梨衣</li>
<li>夏弥</li>
<li>诺诺</li>
</ul>
<hr/>
<!--自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容
-->
<dl>
<dt>公司</dt>
<dd>阿里</dd>
<dd>腾讯</dd>
<dd>谷歌</dd>
<dd>字节跳动</dd>
</dl>
<dl>
<dt>人物</dt>
<dd>马云</dd>
<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 : 列 column
-->
<table border="1px">
<tr>
<!--colspan : 跨列-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!--rowspan : 跨行-->
<td rowspan="2">gzp</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">start</td>
<td>物理</td>
<td>100</td>
</tr>
<tr>
<td>化学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--媒体元素
src : 资源路径
controls : 控制条
autoplay : 自动播放
muted : 静音
loop: 控制视频循环播放
高版本浏览器，对视频静音后，可以保证视频自动播放
-->
<!--<video src="../resources/video/片头.mp4 " controls autoplay muted>视频</video>-->
<audio src="../resources/audio/海贼.mp3" controls autoplay>音频</audio>
</body>
</html>
页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容(用于页面或页面中的一块区域) |
| footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用(常用于侧边栏) |
| nav | 导航类辅助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<header>
<h4>页面头部</h4>
</header>
<section>
<h3>页面主体</h3>
</section>
<footer>
<h3>页面脚部</h3>
</footer>
</body>
</html>
iframe内联框架
一个网页里面嵌套另一个网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<!--iframe内联框架
src : 路径
w-h : 宽度高度
-->
<!--<iframe src="https://www.baidu.com" frameborder="0" width="850" height="800"></iframe>-->
<iframe src="" name="gzp" frameborder="0"></iframe>
<a href="3.图像标签.html#gzp">点击我跳转</a>
<!--bilibili-->
<!--<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表单*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h2>注册</h2>
<!--表单form
action : 表单提交的位置, 可以是网站, 也可以是一个请求处理的地址
method : post, get 提交方式
get方式提交 : 我们可以在url中看到我们提交的信息, 不安全, 高效.
post : 比较安全, 可以传输大文件.
-->
<form action="6.表格.html" method="post">
<p>名字 : <input type="text" name="username"></p>
<p>密码 : <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表单元素格式
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型. text, password, checkbox, radio, submit, reset, file, hidden, image和button, 默认为text |
| name | 指定表单元素名称 |
| value | 元素的初始值. type为radio时必须指定一个值. |
| size | 指定表单元素的初始宽度. 当type为text或password时,表单元素的大小以字符为单位, 对于其他类型, 宽度以像素为单位. |
| maxlength | 当type为text或password时, 输入最大的字符数. |
| checked | type为radio或checkbox时, 指定按钮是否被选中. |
单选框
<form action="6.表格.html" method="post">
<!--input type="text"
value="gzpstart" 默认初始值
maxLength="8" 最长能写几个字符
size="30" 文本框长度
-->
<p>名字 : <input type="text" name="username"></p>
<p>密码 : <input type="password" name="pwd"></p>
<!--单选框标签
input type="radio"
value : 单选框的值
name : 表示组
-->
<p>性别 :
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
多选框 按钮
<!--多选框
input type="checkbox"
checked : 默认
-->
<p>爱好 :
<input type="checkbox" value="game" name="hobby"/>游戏
<input type="checkbox" value="girl" name="hobby" checked/>女人
<input type="checkbox" value="java" name="hobby"/>java
<input type="checkbox" value="witch" name="hobby"/>表
<input type="checkbox" value="money" name="hobby"/>钱
</p>
<!--按钮
input type="button" : 普通按钮
input type="image" : 图片按钮
input type="submit" : 表单提交按钮
input type="reset" : 重置按钮
-->
<p>按钮 :
<input type="button" value="点击变长" name="btn">
<br/>
<input type="image" src="../resources/image/main.jpg" width="400" height="260"/>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
下拉框 文本域 文件域
<!--下拉框
select/option
selected : 默认
-->
<p>国家 :
<select name="country" id="">
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="Japan" selected>日本</option>
<option value="India">印度</option>
</select>
</p>
<!--文本域
textarea name="textarea"
cols="60" : 列
rows="10" : 行
-->
<p>反馈 :
<textarea name="textarea" cols="60" rows="10" >文本内容</textarea>
</p>
<!--文件域
input type="file"
name="files"
-->
<p>上传文件 :
<input type="file" name="files"/>
<input type="button" name="btn" value="提交"/>
</p>
验证
<!--邮箱验证-->
<p>邮箱 :
<input type="email" name="email">
</p>
<!--url-->
<p>URL :
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量 :
<input type="number" name="number" step="1">
</p>
<!--滑块
range
-->
<p>音量 :
<input type="range" name="volume" step="2">
</p>
<!--搜索框-->
<p>搜索 :
<input type="search" name="search">
</p>
表单的应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
<p>名字 : <input type="text" name="username" value="admin" readonly></p>
<p>密码 : <input type="password" name="pwd" hidden></p>
<p>
<input type="radio" value="boy" name="sex" disabled/>男
</p>
增强鼠标可用性
<!--增强鼠标的可用性-->
<p>
<label for="one">你点我试试</label>
<input type="text" id="one"/>
</p>
......
<p>
<label for="text">搜索 :</label>
<input type="search" name="search" id="text">
</p>
表单初级验证
安全, 减轻压力
常用方式:
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
<p>名字 : <input type="text" name="username" placeholder="请输入用户名" required></p>
<p>密码 : <input type="password" name="pwd" required placeholder="请输入密码"></p>
常用正则表达式
https://www.jb51.net/tools/regexsc.htm
总结
