HTML5<结构>
w3school 在线教程 ：https://www.w3school.com.cn/html/html5_intro.asp
菜鸟教程：https://www.runoob.com/html/html5-intro.html
一，什么是HTML
HTML发展史：
HTML5优势：
W3C标准：
常见IDE
HTML基本结构
二，网页基本信息
网页基本信息：
DOCTYPE声明
<title>标签
<tmeta>标签
<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们网站的一些信息
meta一般用来做SEO搜索引擎优化-->
<meta charset="UTF-8">
<meta name="keywords" content="小破站">
<meta name="description" content="看番，学习">
<!--title网页标题-->
<title>wangsen</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello World!
</body>
</html>
三，网页基本标签
网页基本标签：
标题标签 <title>网页基本标签</title>
段落标签 <p>段落标签可以用来分段</p>
换行标签 换行标签可以用来换行<br/>
水平线标签 <hr/>
字体样式标签 粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
注释和特殊符号
空 格
> > < <
©版权所有王某某
<!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>段落标签可以用来分段</p>
<p>用p来表示</p>
<p>段落标签一段一段空白比较长</p>
<!--水平标签-->
<hr/>
<!--换行标签-->
换行标签可以用来换行<br/>
用br来表示<br/>
换行标签一行一行比较紧凑<br/>
<!--字体样式标签：粗体，斜体-->
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<br/>
<!--特殊符号-->
空 格
空 格
<br/>
> >
< <
<br/>
版权符号 ©版权所有王某某
</body>
</html>
四，图像标签
常见的图像格式 JPG G IF PNG BMP（位图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--img：
src：图片地址
相对地址(推荐使用)，绝对地址
alt:图片加载失败返回的文字
-->
<img src="../resources/image/窥探3.jpg" alt="窥探"title="悬停文字"width="616"height="384">
</body>
</html>
五，超链接标签
<a href="链接路径" target="目标窗口位置"> 点击我跳转到某某页面 </a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--a标签
href：表示要跳转到哪个页面
target：表示窗口在哪里打开
_blank 在新标签中打开
_self 在当前标签中打开<默认>
-->
<a href="四，图像标签.html" target="_blank"> 点击我跳转到一个新的页面</a>
<br/>
<a href="https://www.baidu.com"> 点击我跳转到百度页面</a>
<br/>
<!--图像超链接-->
<a href="https://www.baidu.com">
<img src="../resources/image/窥探3.jpg" alt="窥探"title="悬停文字"width="616"height="384"> </a>
</body>
</html>
锚标签： 跳转到相应的位置
1.需要一个锚标记
2.跳转到标记 #标记名
<!--使用name作为标记-->
<a name="top"> 顶部</a>
<a href="#top">回到顶部</a>
页面间跳转：
<a href="五，.超链接标签应用.html#down"> 跳转</a>
<a name="down">down</a>
功能性链接：
邮件链接：mailto:
QQ链接：
<a href="mailto:1813024293@qq.com">点击可给王某某发邮件</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1123106853&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1123106853:53" alt="你好，加我领取小电影" title="你好，加我领取小电影"/></a>
六，行内元素和块元素
行内元素：如果在行内，它不会换行
块元素：写的标签，新开了一片空间，换了一行
七，列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>有</li>
<li>序</li>
<li>列</li>
<li>表</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>无</li>
<li>序</li>
<li>列</li>
<li>表</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd：列表内容
-->
<dl>
<dt>姓名</dt>
<dd>张三</dd>
<dd>李四</dd>
<dd>王麻子</dd>
<dt>年龄</dt>
<dd>18</dd>
<dd>19</dd>
<dd>20</dd>
</dl>
</body>
</html>
八，表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr rows
列 td
-->
<table border="1px">
<tr>
<!--colspan跨列-->
<td colspan="4">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</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>
<td>3-4</td>
</tr>
</table>
</body>
</html>
九，媒体元素
音频和视频：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<!--<video src="../resources/video/13006cab88d0763b00de3194c257f3a8.mp4" controls autoplay></video>-->
<audio src="../resources/audio/七里香-周杰伦.mp3" controls autoplay></audio>
</body>
</html>
十，页面结构分析
<!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内联框架
<body>
<iframe src="https://www.baidu.com" frameborder="0" width="800px" height="500px"></iframe>
<!--iframe内联框架
src：地址
w-h:宽度高度-->
<iframe src="" name="周杰伦--七里香" frameborder="0" width="1000px" height="800px"></iframe>
<a href="九，媒体元素.html" target="_blank" target="周杰伦--七里香" >点击跳转到新页面播放周杰伦--七里香</a>
</body>
十二，表单post和get提交
Get，它用于获取信息，它只是获取、查询数据，也就是说它不会修改服务器上的数据，从这点来讲，它是数据安全的，而Post它是可以修改数据的
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post,get提交方式
get方式提交：在url中可以看到外面提交的信息，不安全，高效
post方式提交，比较安全，可以传输大文件-->
<form action="九，媒体元素.html" method="get">
<!--文本输入框：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>
十三，表单元素格式
1，value maxlength size
<!--文本输入框：input type="text"
value="张三" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度-->
<p>名字： <input type="text" name="username" value="张三" maxlength="8" size="30"></p>
2，单选框radio
<!--单选框标签
type="radio"：单选框的值
value：单选框的值
name：表示组
-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
3，多选框checkbox
<!--多选框
type="checkbox"
-->
<p>
<input type="checkbox" value="play basketball" name="hobby">打篮球
<input type="checkbox" value="play volleyball" name="hobby">打排球
<input type="checkbox" value="play ping-pong" name="hobby">打乒乓球
<input type="checkbox" value="play badminton" name="hobby">打羽毛球
</p>
4，按钮button image submit reset
<!--按钮
input type="button" 普通按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>按钮
<input type="button" name="button1" value="点击变长">
<input type="image" src="../resources/image/德善.png">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
十四，表单
1，下拉框，列表框
<!--下拉框，列表框
-->
<p>国家
<select name="列表名称" >
<option value="korea">韩国</option>
<option value="china">中国</option>
<option value="US">美国</option>
<option value="Japan">日本</option>
</select>
</p>
2，文本域
<!--文本域-->
<p>反馈：
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
3，文件域
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
4，验证
(4.1)邮件验证email
<!--邮件验证-->
<p>邮箱：
<input type="email" name="email">
</p>
(4.2)URL验证url
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
(4.3)数字验证number
<!--数字-->
<p>商品数量
<input type="number" name="num" max="100" min="0" step="10">
</p>
5，滑块range
<!--滑块
input type="range"
-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="10"></p>
6，搜索search
<!--搜索框-->
<p>搜索：
<input type="search" name="search"></p>
7，表单的应用
表单的应用：
隐藏域：hidden
只读：readonly
禁用：disabled
只读：
名字：
禁用： 女 隐藏域：密码：
8，增强鼠标可用性，label可指向一个位置
<!--搜索框-->
<p>搜索：
<input type="search" name="search" id="mark"></p>
<p>
<!--增强鼠标可用性-->
<p>
<label for="mark">点击此处可指向搜索框</label>
<input type="text">
9，表单初级验证
为什么要进行表单验证？
表单作为客户端向服务器端提交数据的主要载体，表单验证是避免提交的数据不合法的重要途径。
表单验证的必要性：
表单验证可以放在客户端和服务器端，客户端验证实际是直接在已下载到本地的页面中调用脚本来进行验证，它不但能检查用户输入的无效或者错误数据，还能检查用户遗漏的必选项；而服务器端的验证则是将页面提交到服务器处理，服务器上的另一个包含表单的页面先执行对表单的验证，然后再返回相应结果到客户端，它的缺点是每一次验证都要经过服务器，不但消耗时间长，而且会大大增加服务器的负担。在客户端进行验证，能把服务器端的任务分给多个客户端去完成，从而减轻服务器端的压力，让服务器专门做其他更重要的事情。
正则表达式速查表：https://www.jb51.net/tools/regexsc.htm
表单初级验证常用方式：
placeholder：提示信息 用在所有输入框中：
名字：
required：非空判断：密码：
 pattern：正则表达式：<p>自定义邮箱：
<input type="text" name="diymail"
pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
HTML总结
前端知识体系
(1)前端三要素
HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为
(2)结构层（HTML）
(3)表现层（CSS）
CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：
语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；
这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具,提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。
(4)什么是CSS预处理器
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。
常用的CSS预处理器有哪些?
SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。
链接： less官方文档：
(5)行为层（JavaScript）
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。
1，JavaScript框架
JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）
React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；
2，UI框架
Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
BootStrap：Teitter推出的一个用于前端开发的开源工具包
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架
3，JavaScript构建工具
Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载
(6)三端同一
混合开发（Hybrid App）
主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：
云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前身是 PhoneGap）
微信小程序
详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
