HTML5
1.HTML简介
HTML:超文本标记语言包括文字、图片、音频、视频、动画等
发展史：1993-6>2013-5-6HTML5
优势：各浏览器支持、市场需求、跨平台
W3C:万维网联盟成立于1994年，web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括：
结构化标准语言（HTML、XML）
表现标准语言(CSS)
行为标准(DOM、ECMAScript)
注释：
<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!doctype html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述网站的属性-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--title网页标题-->
<title>Document</title>
</head>
<!--body标签代表网页主体-->
<body>
</body>
</html>
2.网页基本标签：
基本标签
<!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>
<!--换行标签-->
<br/>
<!--水平线标签-->
<hr/>
<!--粗体，斜体-->
粗体：<strong> </strong>
斜体：<em> </em>
<!--特殊符号-->
空格： ；
大于号：>；
小于号：<；
版权符号：©；
特殊符号：& ；
</body>
字母+Tab自动生成
Ctrl+D重复上一行
图像标签：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SnGLjjAZ-1634048077468)(D:\C转D\Typora\typora-user-images\image-20211012144515026.png)]
src：图像地址
相对地址、绝对地址
…/上一级目录
alt：图像的代替文字（必填）
title：鼠标悬停提示文字
width：图像宽度
height：图像高度
链接标签：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R9HeznKG-1634048077472)(D:\C转D\Typora\typora-user-images\image-20211012145857177.png)]
<a href=""></a>
<!--a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页打开
-->
超链接：
页面间链接：从一个页面链接到另一个页面
锚链接：
页面间跳转
1.需要一个锚标记
2.跳转到标记 #
<!--使用name作为标记-->
<a name="top">顶部</a>
<a href="#top">回到顶部</a>
功能性链接：
邮件链接：mailto：
<a href="mailto:1234567@qq.com">点击联系我</a>
QQ链接
3.行内元素和块元素
块元素：
无论内容多少，该元素独占一行
如：（p、h1-h6）
行内元素：
内容撑开宽度，左右都是行内元素的可以在排在一行
如：（a.strong.em…）
4.列表
<!--有序列表
应用范围：试卷、问答...
-->
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
<li>语言C</li>
</ol>
-------------------------------------------------------
<!--无序列表
应用范围：导航、侧边栏...
-->
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
<li>语言C</li>
</ul>
-------------------------------------------------------
<!--自定义列表
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>
<dl>
<dt>位置</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
<dd>深圳</dd>
</dl>
5.表格
为什么使用表格：简单通用、结构稳定
基本结构：单元格、行、列、跨行、跨列
<!--表格table
行：tr rows
列：td
跨列：colspan
跨行：rowspan
-->
<table border="1px">
<tr>
<td colspan="4">1-1</td>
</tr>
<tr>
<td rowspan="3">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
6.媒体元素
1.视频元素：video
2.音频元素：audio
<video src="路径.mp4" controls autoplay>视频</video>
<audio src="路径.mp3" controls autoplay>音频</video>
<!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放
-->
7.页面结构分析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wqqo2p9g-1634048077474)(D:\C转D\Typora\typora-user-images\image-20211012162156971.png)]
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
8.iframe内联框架
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lp26GRow-1634048077479)(D:\C转D\Typora\typora-user-images\image-20211012163126288.png)]
<!--iframe内联框架
src：地址
w-h：宽度高度
name
-->
<iframe src="https：//www.baidu.com" name="百度一下" frameborder="0" width="2000px" height="500px"></iframe>
9.初始表单post和get提交
1.表单语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rmWdP28D-1634048077482)(D:\C转D\Typora\typora-user-images\image-20211012164104850.png)]
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
post：比较安全，传输大文件
get：我们可以在url中看到我们提交的信息，不安全，高效
文本输入框：input type=“text”
value="孙悟空" 默认初始值
maxlength="5" 最长能写几个字符
size="30" 文本框的长度
密码框：input type="password"
-->
2.表单元素格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eg1pT4ut-1634048077484)(D:\C转D\Typora\typora-user-images\image-20211012171230011.png)]
3.按钮、单选框和多选框
<!--单选框标签
input type="radio"
value:单选框的值
name：表示组
checked：默认选中
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
------------------------------------------------------------------------------------------------------------
<!--多选框标签-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<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" value="清空表单"> 重置
-->
<p>按钮：
<input type="button" name="btn1" value="点击">
<input type="image" src="../图片地址">
</p>
4.下拉框、列表框
<p>国家：
<select name="列表名称" id="1">
<option value="China">中国</option>
<option value="us">美国</option>
<option value="eth">瑞士</option>
<option value="yd">印度</option>
</select>
</p>
5.文本域
<!--文本域
列：cols="50"
行：rows="10"
-->
<p>反馈
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
6.文件域
上传文件的地方
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
7.搜素框滑块和简单的验证
<!--邮箱验证-->
<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="1">
</p>
-------------------------------------------------------
<!--滑块-->
<p>音量
<input type="range" name="voice" min="0" max="100" step="2">
</p>
-------------------------------------------------------
<!--搜素框-->
<p>搜素
<input type="search" name="search">
</p>
8.表单的应用
<!--增强鼠标可用性>
<p>
<label for="mark">点我</label>
<input type="text">
</p>
-------------------------------------------------------
隐藏域：hidden
只读：readonly
禁用：disabled
9.表单初级验证
提示信息：placeholder
非空判断：required
正则表达式：pattern
10.HTML总结
在这里插入图片
描述
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
