认识前端
typora的破解版的使用
链接：https://pan.baidu.com/s/1qvoAFEzpGDIueai7Sipwdg?pwd=5zaw
提取码：5zaw
Snipaste截图工具
链接：https://pan.baidu.com/s/1u_BtHqp4Xerp5ls61A47Ag?pwd=nmii
提取码：nmii
向日葵远程控制安装包
链接：https://pan.baidu.com/s/1AeG4YaZtWOHFVcJTXVS7Bg?pwd=8t2g
提取码：8t2g
首先我们的前端的学习，首先需要进行学习的是前端的三角套
html结构， CSS样式， Javascript行为
CS架构和BS架构
首先我们的软件使用分为那个系统软件和应用软件
我们的主要的学习就是进行开发我们的那个应用软件
我们的那个软件的使用的时候，我们是可以实现安装使用，也可以不安装使用
需要我们进行那个安装后才可以实现使用的是那个： C/S 架构 —— Client 客户端
不需要我们安装就可以实现使用就是那个： B/S 架构 —— Browser 浏览器
S —— 服务器Server
服务器的话就是一个中转站，帮助我们进行保存信息，传达信息，所有用户的一个桥梁
所以说对于前端工程师来说，主要的进行开发的就是那个B/S架构的网页
认识浏览器
浏览器的内核就是那个： 用于进行处理浏览器得到的各种资源文件
这些资源就是从我们的那个服务器中进行获取的，服务器进行响应资源给我们的那个浏览器，从而就可以实现基本的一些加载资源
网页和网站的区别：
首先一个网站含有多个网页，网页具有那个样式和行为和结构
HTML实现网页的结构， CSS实现网页的样式， Javascript实现网页的行为
HTML
html是一个超文本的标记语言
html标签类型
同时我们那个标签也可以叫做元素，是html的那个基本额组成单位
<!--双标签-->
<标签名>标签体</标签名> <!--注意，标签名是不用进行区分大小写的，但是标准来说的话，使用的事那个小写-->
<!--单标签-->
<标签名 />
<!--
首先双标签和单标签之间进行比较之后，单标签是十分少的，双标签多一些
-->
<!--开始基本的双标签-->
<marquee>请输入标签体内容</marquee>
<!--开始使用单标签-->
<input />
<!--开始使用基本的嵌套标签-->
<marquee>请输入标签体的基本内容<input /></marquee>
<!--
开始对上面的两标签进行一个解释
marquee标签就是一个普通的一个那个用来实现弹幕功能的效果
input就是我们的输入框
-->
html标签属性
<!--标签属性-->
<标签名 属性名="属性值"...>标签体</标签名>
<!--
添加属性的时候，就是用来实现控制我们的那个超文本标记语言的那个基本的一些显示模式的
-->
<marquee loop="1" bgcolor="red">输入内容</marquee>
<!--
上面标签的两个属性的使用就是那个：使用的就是那个
loop==>来控制一个弹幕的显示的次数，原本的弹幕的实现效果就是实现的那个无线循环，现在就是循环1次就结束了
bgcolor==> 用来控制弹幕颜色
然后注意，我们的那个属性的话，在不同的那个标签中的属性是那个不一样的
上面的属性的添加是用键值对的形式来实现的一个添加属性，但是我们还是可以使用没有的值的来进行添加属性
-->
<input disabled/> <!--这个就是用来表示我们的输入框是一个那个禁止输入的-->
<!--首先我们使用的时候，不可以将我们的属性进行那个重复写入属性，如果重写，那么就是就是那个直接进行选择前面的那个属性-->
html的基本结构
<!---->
<marquee>html结构的开始</marquee>
注意我们的那个html是具有结构的，浏览器进行渲染的时候，首先进行检查的是我们的源代码是否合法
合法的话，就直接进行渲染，不合法的话，那就不进行那个渲染，就是浏览器先进性那个处理，处理后就进行那个渲染
编译器的介绍
使用的开发者工具含有多种，先介绍我喜欢使用的两种：
vscode 一个开源的开发者工具
webstorm 一个收费的开发者工具
vscode的使用
首先先进行安装使用，安装中文插件：Chinese 这个就是用来进行那个转化为中文的模式的(我的建议的话，可以一直使用那个英文)
LiveServer插件的使用，使用这个插件就是实现我们的那个在浏览器中进行打开
open in browser 这个也是实现在那个浏览器中实现打开 alt + b
webstorm的使用
html结构1
首先下面的就是进行使用那个：
<html></html> 标签
<head></head> head标签的使用
<body></body> body标签的使用
html标签中的东西是哪个用来进行一个放置一个那个的
head是用来写一些关于网页的整体属性的
body用来写后面的那写学习了的一些基本标签
<!--基本的html结构-->
<html>
<head>
<title>自定义网页名</title>
</head>
<body>
<!--用来进行书写后面的元素-->
</body>
</html>
html注释
首先我们的html的注释那个：<!--注释的文字内容-->
然后使用编辑工具的快捷键就是那个： ctrl + l
首先我们使用注释的目的就是那个实现基本的一些说明，来方便同事之间可以看懂
html文档说明
首先我们使用那个文档说明的原因就是那个实现我们的向浏览器进行声明浏览器的一些基本的一些标识我们使用的是那种结构进行书写的
<!DOCTYPE html> <!--首先我们这种形式的话，就是声明了我们的是那个html5文档的说明-->
<html>
<head>
</head>
<body>
</body>
</html>
html的字符编码
注意我们的那个编译器的字符编码都是那个utf-8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
</body>
</html>
html设置语言
<!DOCTYPE html> <!--进行设置最后的那个使用的是html5的结构-->
<html lang="zh-CN"> <!--使用这个模式来实现基本的那个设置语言-->
<head>
<meta charset="UTF-8"/> <!--进行设置那个字符编码-->
<title>文件名称</title> <!--进行设置那个你的html文档的名称-->
</head>
<body></body>
</html>
lang的属性含有：
en-US代表的是那个：英文的状态
zh-CN 就是那个中文的简体状态[注意这个的形式的话是我们的额那个国内开发使用的]
html的标准结构
<!DOCTYPE html>
<html lang="zh-CN"> <!--设置语言-->
<head>
<meta charset="utf-8"/> <!--这是字符编码-->
<title>html文件的名字</title>
</head>
<body>
<!--元素标签-->
</body>
</html>
注意我们后面的那个html5的基本的结构的话，还是可以通过后面的那个快捷键直接生成的
直接输入: html:5 + tap
<!doctype html>
<html lang="en">
<head>
<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>Document</title>
</head>
<body>
</body>
</html>
<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">
注意上面的代码的实现是我们的移动端的开发使用的meta的配置，平时是可以不使用的
前端开发的官方网站
w3.org，输入这个，就是前端中的那个官方文档
或者我们使用那个MDN也是可以的
排版标签
排版标签就是用于进行控制网页的面板的内容的，前面的学习，我们进行控制的是整个网页的全局化配置
语义化的实现
首先我们在这里生命的就是那个标签的默认效果不重要，语义才是最重要的，语义即使标签的代表的意思
h1 - h6 代表的是我们的那个标题 —— 这个就是我们的语义
p 代表的是我们的那个段落
为什么标签的默认效果不重要？
是应为我们后面的那个CSS是可以对其中进行修改的样式的
注意，我后面的标签都是写在后面的那个body里面的
然后后面的都是用于对网页的每一个部分的一个小的安排美化
标题标签h1-h6
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>html网页名</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
这六个标签肥的使用就是实现了基本的控制字体的大小，就是标题标签
段落标签p
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>html网页名</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
常用的标签
<br> 换行
<hr> 水平分割线
<pre> 按照原文显示
块级元素和行内元素
首先块级元素是独占一行的：或者说后面的那个设置宽度和高度的时候，最后的实现效果就是最后的那个高度和宽度都是含有效果的
行内元素是那个只占用最后的那个有多少就使用了多少：写了高度和宽度不会有任何的效果
书写的规则：
1.款级元素中，是可以是实现写入： 块级元素和行内元素的
2.行内元素中我们是可以写入： 只可以写入后面的行内元素，不可以写入块级元素
3.然写法的规范的化，都是会形成自己的一些语法规范的，不用死记硬背
文本标签
文本标签的基本用途:就是一般用于包裹词汇，短语等
使用最后的文本标签的话，最后实现的就是最后的那个将文本的需要进行着重的文字标注粗来即可。实现一种强调的功能
常用的文本标签
em元素标签： <em>文字内容</em> <!--就是默认的是斜体的效果-->
strong强调： <strong>文字内容</strong> <!--实现的就是那个加粗的效果-->
div大盒子/ span小盒子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>强调字体</title>
</head>
<body>
<!--首先先开始语义是斜体的标签-->
<p>你好呀，<em>我叫鸿鸿</em></p>
<!--开始使用strong加粗-->
<p>你好呀,<strong>我叫鸿鸿</strong></p>
<!--开始使用没有样式的-->
<p>你好呀，<span>我叫鸿鸿</span></p>
</body>
</html>
不常用的文本标签
cite和dfn 也是斜体的语义
ins和del 就是那个实现的删除文字
sub和sup 就是实现的是那个下标字和上标字
code 就是实现的里面进行放入的是代码
kbd 就是实现的是那个输入后面的那个输入的是：键盘中的一些实现效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>文字设置</title>
</head>
<body>
<p>你好呀<cite>我叫……</cite></p>
<P>你好呀<ins>我叫……</ins></P>
<p>
你好呀<code>alert(1)</code>
</p>
<!--后面的我们就不做过多的演示了，自己敲打即可-->
</body>
</html>
后面如果需要使用的话，那就世界看官方文档就可以了
图片标签 img
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>图片元素</title>
</head>
<body>
<!--首先先开始我们的那个图片链接标签的使用，就是使用的我们的那个img标签-->
<img src="图片路径" alt="图片的描述" width="300px" height="300px" title="这个是一张图片"/>
<!--
注意：width和height的设置一般只用来设置一个就可以了，否则就会导致图片的比例失调
写一个的时候，我们的实现效果就是那个最后的等比例的缩放
-->
</body>
</html>
常见的图片格式
.jpg格式 支持的颜色丰富，内存占用少
.png格式 支持的颜色丰富，支持透明背景
.bmp格式 支持的颜色丰富，保留的细节多
.gif格式
.webp格式 使用这种模式的时候，一定要注意解决浏览器的兼容性问题
.base64格式
每一种的图片的话，都是含有优缺点的，没有绝对好的，也没有绝对差的，慎重使用
超链接
空白链接
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>空白链接</title>
</head>
<body>
<!--首先我们的空连接的表示方法是： # 或者 ###，建议使用的是###-->
<a href="###" target="_blank">空白链接</a>
</body>
</html>
跳转图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>跳转图片</title>
</head>
<body>
<!--开始我们的超链接跳转图片-->
<a href="图片链接.jpg" target="_blank">查看图片</a>
<!--
首先我们需要进行注意的是：我们的target来进行设计的就是我们的那个后面的链接的跳转形式
target="_blank" 就是实现的是在新的页面中进行打开
target="_self" 就是实现的是在本层页面中进行打开，默认的是这俄格
同时我们还是可以实现：在<head/> 上面添加一个那个： <base target="_blank"/>
使用了这个后，我们的后面的实现效果就是那个：后面的a链接中不用添加那个trget="_blank"就可以实现基本的那个在
新页面中进行打开
-->
</body>
</html>
跳转文件
<a href="./resourse/01.jpg">点击查看可查看的文件</a>
<!--强制触发下载-->
<a href="文件的路径" download>就是强制性的触发下载资源</a>
<!--同时我们的后面的那个download后面是可以实现基本的那个命名一哈下载的资源的名称的-->
注意有的文件类型是我们的那个浏览器可以直接打开的
有一些文件九四我们的浏览器不可以直接打开的
这个时候，我们就可以使用download属性，来控制最后的那个强制性的触发下载资源
同时我们也是可以实现给我们的download进行赋值的，这个时候，我们的下载资源就是的名称就是这个值的名称
跳转描点
背景：就是我们在线观看某些含有目录的那个小说的时候，当我们点击目录的时候，直接跳转到了那个位置
实现的基本思路
首先我们的那个定位的元素位置是具有那个id值的，来实现锁定
然后通过a链接来实现#id值，来实现的跳转
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<mete charset="UTF-8"/>
<title>跳转描点</title>
</head>
<body>
<a href="#id01">目录1的内容</a>
<!--设想一下中间含有很多的内容-->
<h1 id="id01">我是目录1的内容</h1>
</body>
</html>
列表的使用
首先我们的列表的使用分为那个有序列表ol,无序列表ul,自定义列表dl
1.然后我们的那个ol，ul都是那个含有列表的li作为列表的一个做列表的元素的内容的
首先我们的那个ol，ul都是含有那个默认的范式的，但是我们都是可以进行修改的
2.我们的那个dl的使用，里面的dt作为每一个标题，dd作为一个那个具体的标题下的内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<!--首先我们的meta中的属性的话，还有一些的设置的，后面补充-->
<title>列表内容</title>
</head>
<body>
<!--有序列表-->
<p>有序列表1</p>
<ol>
<li>列表内容1-1</li>
<li>列表内容1-2</li>
<li>列表内容1-3</li>
</ol>
<!--无序列表-->
<p>无序列表2</p>
<ul>
<li>列表内容2-1</li>
<li>列表内容2-2</li>
<li>列表内容2-3</li>
</ul>
<!--自定义列表-->
<p>自定义列表</p>
<dl>
<dt>自定义列表1</dt>
<dd>内容1-1</dd>
<dd>内容1-2</dd>
<dt>自定义列表2</dt>
<dd>内容2-1</dd>
<dd>内容2-2</dd>
</dl>
</body>
</html>
盒子的使用
首先我们的盒子的使用的使用，就是实现的基本的一些的方法，然后基本的排版的布局的使用，都是实现的是那个盒子和盒子的实现的
div是一个块级元素，span是小盒子的使用
然后我们的都是通过样式的设计来实现的基本的那些的布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<!--开始实现使用盒子的功能来实现基本的那些布局-->
<div>
<!--有序列表-->
<p>有序列表1</p>
<ol>
<li>列表内容1-1</li>
<li>列表内容1-2</li>
<li>列表内容1-3</li>
</ol>
<!--无序列表-->
<p>无序列表2</p>
<ul>
<li>列表内容2-1</li>
<li>列表内容2-2</li>
<li>列表内容2-3</li>
</ul>
<!--自定义列表-->
<p>自定义列表</p>
<dl>
<dt>自定义列表1</dt>
<dd>内容1-1</dd>
<dd>内容1-2</dd>
<dt>自定义列表2</dt>
<dd>内容2-1</dd>
<dd>内容2-2</dd>
</dl>
</div>
<div>
<a href="http://www.baidu.com">百度链接</a>
</div>
</body>
</html>
通过我们后面学习的那个CSS的学习，我们就可以实现基本的那个布局，实现我们的那个静态页面的设计
表格的使用
表格的结构
首先我们先开始对表格的基本的结构进行那个解释
表格具有的那个含有
表格的标题
表格的头部
表格的主体
表格的脚注
在表格的脚注中的那个主要使用的是含有三个结构
表格的标题，表格的头部，表格的主体，这三个部分是必不可少的
表格的脚注只是一个可选的结构，无所必要的部分
表格的标签:table
标题的标签:caption
头部的标签:thead
主体的标签:tbody
脚注的标签:tfoot
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>表格的基本结构</title>
</head>
<body>
<table>
<!--表格的标题-->
<caption>标题</caption>
<!--表格的头部-->
<thead>头部</thead>
<!--表格的主体-->
<tbody>主体</tbody>
<!--表格的脚注-->
<tfoot>脚注</tfoot>
</table>
</body>
</html>
在我们的每一个表格的部分中的行都是使用的那个<tr>来表示的
然后我们的在标题中的表示的形式使用是我们的<th>来代表的每一列
然后再我们的主题中的表示最后的那个实现的效果就是使用的<td>来表示的我们的列
就是除了我们标题而言，我们的最后的使用的都是最后的实现的都是后面的那个td来表示的最后的那个单元格的形式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>表格的基本结构</title>
</head>
<body>
<div>
<table bgcolor="#ff7f50">
<!--表格的标题-->
<caption>标题</caption>
<!--表格的头部-->
<thead>
<tr>
<th>头部1</th>
<th>头部2</th>
<th>头部3</th>
<th>头部4</th>
<th>头部5</th>
</tr>
</thead>
<!--表格的主体-->
<tbody>
<!--首先这个含有的信息的是四行五列-->
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
</tr>
</tbody>
<!--表格的脚注-->
<tfoot>
<tr>
<td>脚注1</td>
<td>脚注2</td>
<td>脚注3</td>
<td>脚注4</td>
<td>脚注5</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
上面的就是我们的最后的实现的基本的形式，实现了我们的最后的那个表格的基本的形式的创建
表格的属性
我们进行那个属性的设计的时候，使用的目的就是实现基本的那个设计表格的基本的样式的使用
最后的效果就是实现我们的那个一些基本的一些让我们的表格更加的好看
table中的属性
table标签中的属性含有那个：基本的一些那个：
首先我们需要注意的是，我们的表格的实现的基本的一些属性添加都是实现的那个最后的那个控制整个表格的属性
border设置我们的表格的外边框的实现，
width进行设置的是整个表格的那个宽度
height进行设置的是整个表格的高度----当我们的设置的高度的时候，实现的是改变后面的那个主体的高度
但是我们的那个标题和脚注的高度没有发生变化
cellspacing 这个就可以设计我们的单元格和单元格之间的间距
cellpadding 这个就可以设计我们的后面的标题和脚注的那个内容的间距
thead中的属性
只可以使用的属性是那个： height,其他的属性都没得
但是这个标签的当中含有的那个属性含有多种：首先的是
align:控制单元格中的水平方向的对求模式—: left center right
valign:控制的是垂直方向上的对齐: top middle bottom
tbody中的属性
tbody中的属性的设计的话，和thead中的属性是一样的，莫得区别
tfoot中的属性
属性和上一个是一样的
tr中的属性
和上面的是一样的
th和td的属性
和上面的一致
单元格的跨行和跨列
实现跨行以及跨列的实现的效果：
1.思路：先进行过那个基本的确定最多的的行数和列数
2.然后实现跨行和跨列
3.最后实现把后面的占用的部分删除
跨行
就是使用的我们的后面的那个跨行：rowspan,这个的话是我们的那个th和td中的属性
跨列
就是使用属性来实现基本的按个跨列： colspan,这个是我们的后面的那个tr中的属性
表单的使用
表单的基本结构
表单是网页中的交互区域，专门用于进行手机用户的一些基本的信息
<!DOCTYPE html>
<html land="zh-CN">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<!--开始表单的基本的结构-->
<form action="https://www.baidu.com/s" target="_blank">
<input type="text" name="wd"/>
<button>
百度搜索
</button>
</form>
</body>
</html>
首先我们的表单的使用，其中的属性的话，就是实现了基本的那个：
action用于连接需要的服务器
target就是实现了我们的最后的那个跳转网页的最后的形式：_self和_blank
method 就是实现了对服务器的请求方式，get请求，post请求，默认的是我们的那个get请求
表单的常用的控件
我们的常用的表单控件的话，含有的是那个多种，
01.普通的文本框---text
02.密码框---password
03.单选框---radio
04.复选框---checkbox---默认选中的属性checked
05.提交按钮---submit---默认选中的属性checked
06.重置按钮---reset
07.普通按钮---button
08.文本域---textarea
09.下拉框---select和option---默认选中的属性selected
10.禁用的表单控件的使用---直接添加属性disabled
label标签的使用：
就是可以提高用户的体验的一个标签，就是实现了我们那个的实现的一个文字和表单组件的联系
最后的实现的是哪个最后的那个文字和表单控件之间的关联
使用表单组件的时候的注意事项：
1.对于单选框和复选框而言，他们的name属性是相同的，但是为了区分他们，所以说，value属性不可以相同
2.对于表单控件而言，我们是可以实现基本的一些默认选择的功能的，就是使用： checked
<form action="???" target="_blank" method="POST">
<!--开始文本域的使用-->
<fieldset>
<!--开始文本域的信息的描述-->
<legend align="center">主要信息</legend>
<!--普通文本-->
<label for="account">请输入账号</label><input type="text" name="account" value="" id="account"/><br>
<!--密码框-->
<label for="password">请输入密码</label><input type="password" name="密码" value="" id="password"/><br>
<!--单选框-->
请输入性别:
<input type="radio" name="gender" value="male" id="male"/><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">女</label><br>
<!--复选框-->
请选择爱好:
<input type="checkbox" name="sport" value="bas" disabled>篮球
<input type="checkbox" name="sport" value="ftb" checked>足球
<input type="checkbox" name="sport" value="ym">羽毛球
<input type="checkbox" name="sport" value="pp">乒乓球
</fieldset>
<br>
<fieldset>
<legend align="center">次要信息</legend>
<!--隐藏域-->
<input type="hidden" name="hidden" value="hidden"/>
<!--就是实现了我们的原本的那个基本的那个看不见摸不着-->
<br>
<!--确认按钮1-->
<button type="submit">确认</button>
<!--确认按钮2-->
<input type="submit" value="确认"/>
<br>
<!--重置按钮1-->
<button type="reset">重置</button>
<!--重置按钮2-->
<input type="reset" value="重置"/><br>
<!--普通按钮-->
<button type="button">普通按钮</button>
<br>
<!--文本域-->
<textarea name="other" cols="10" rows="10"></textarea><br>
<!--下拉框-->
<select name="palce">
<option value="CQ">重庆</option>
<option value="SC" selected>四川</option>
<option value="GZ">贵州</option>
<option value="YN">云南</option>
</select>
</fieldset>
<fieldset>
<legend align="center">h5表单的新增部分</legend>
<!--开始实现我们的那个表单控件新增-->
<!--placeholder的使用-->
<input type="text" placeholder="请输入内容" name="account" value=""/>
<!--required必选项的使用，就是不选择，那就提交不了了-->
<input type="password" requird name="password" value="" placeholder="请输入密码"/>
<!--autofocus自动聚焦-->
<input type="text" autofocus name="content" value=""/>
<!--pattern的使用,对应的值是我们的正则表达式-->
<input type="text" name="re" pattern="\w{6}" required/>
<!--type的新增的属性值邮箱email-->
<input type="email" name="email" value="" placeholder="请输入邮箱内容"/>
<!--url的输入-->
<input type="url" name="url" placeholder="请输入网址"/>
<!--数值的使用number-->
<input type="number" name="number" step="2" value="" placeholder="请输入数值"/>
<!--搜索的使用search-->
<input type="search" name="search" value="" placeholder="请输入搜索内容"/>
<!--tel电话号码的使用-->
<input type="tel" name="tel" value="" placeholder="请输入你要拨打的电话"/>
<!--范围range的使用-->
<input type="range" name="range" value=""/>
<!--颜色color-->
<input type="color" name="color" value=""/>
<!--日期选择date,同时我们也是可以实现基本的那个选择后面的按个month/week/time/datetime-local-->
<input type="date" name="date" value=""/>
</fieldset>
</form>
框架标签
就是使用的最后的那个iframe,使用这个，就可以实现嵌入式的使用
首先这个的话，我们的实现的基本的内容的话，最后的实现的原理是那个第一个路径进行那个请求一个后面的基本内容的展现
<!--进行嵌入普通的网页-->
<iframe src="https://www.bilibili.com/video/BV1p84y1P7Z5?p=5
2&vd_source=bb20c062393ff7c3113f7a3085b1acb1" width="800" height="800"></iframe>
<!--和a连接之间的使用-->
<a href="https://ww.baidu.com" target="iframe">百度搜索</a>
<iframe name="iframe"></iframe>
<!--表单和iframe的混合使用-->
<form action="https://www.taobao.com" target="if">
<input type="text" name="keyword"/>
<input type="submit" value="搜索"/>
</form>
<iframe name="if"></iframe>
meta的属性的介绍
我们对一个文件进行那个操作的时候，我们的目的是实现解决浏览器的兼容性的问题
<!--用于配置网页的字符编码的格式-->
<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">
<!--配置搜索的时候的网页的关键字-->
<meta name="keywords" content="你好呀, 购物...."/>
<!--用于进行配置网页的描述信息-->
<meta name="description" content="对我们的网页的描述信息的介绍"/>
<!--
我们是可以进行搜索具体的那个meta的信息的配置的，到时候直接进行搜索即可
-->
HTML5
我们的那个html5的就是新一代的html的标准
HTML中的布局标签
首先我们的以前的布局的标签的使用的是那个div和p
然后我们现在的实现的就是可以使用那个其他的布局标签
1.header 整个页面或者部分页面的头部
2.footer 整个页面或者部分的底部
3.nav 就是页面的导航
4.article 就是我们的网页的主要内容文字
5.section 就是相当于是我们的那个文章内容
5.aside 就是网页的侧栏部分
6.main 就是整个网页的主要内容
一个article里面是可以含有多个section的
准确来说，我们的那个实现的就是语义化的开发，但是实际上是没有进行添加的具体的样式的
就是相当于是一些具有不同的语义的div,没有其他的新内容
新增音频和视频标签
<!--首先先开始我们的音频标签,具体的使用的效果和前面的按个img差不多-->
<video src="路径"></video>
