HTML5知识总结

HTML：超文本标记语言。

超文本：文字、图片、音频、视频、动画等。

1993-2013

2013年HTML5出现

HTML让浏览器之间让网页与电脑之间的交互进行了标准化。

HTML5是W3C和WHATWG合作的结果2006年开始决定创建HTML5。

Web Hypertext Application Technology Working Group（网络超文本应用技术工作组）：一个致力于开发和维护HTML和API等Web技术标准的组织

W3C的标准包括

结构、表现、行为标准：DOM文档对象模型、javascript。

HTML5 教程 | 菜鸟教程

一个HTML文件

doctype：告诉浏览器告诉我们要使用什么规范

html标签：总的标签，所有的代码都要写在这里面。

head：网页端头部

body：网页主体

title：网页端标题，就是浏览器上的

meta：描述性标签，用来描述我们网站的信息。

搜索的时候，网页的搜索就是对meta进行搜索的
做seo的时候可以用
content：

一、网页基本标签

历史：

(1)标题标签h12345

br比较紧凑而p标签行之间有距离。

(2)段落标签p

(3)换行标签br

(4)水平线标签hr

(5)字体样式标签srong、em

(6)注释和特殊符号

使用转义字符表示

  <!-- 特殊符号 
    使用转义字符表示 
    -->
        <!-- 空格无论多少渲染出来只有一个格 -->
    空        格：    
    空&nbsp;格
    空&nbsp;&nbsp;&nbsp;&nbsp;格

    <!-- 大于号 -->
    &gt;
    <br/>
    <!-- 小于号 -->
    &lt;
    <br/>
    <!-- 版权符号 -->
    &copy;版权所有

<!-- 记忆方法 -->
    &g
根据代码提示即可

输入一个&然后输入g提示；

随用随调用

二、图像标签

BMP是位图

画图工具就能导出这些格式

alt图片不显示的时候用问题替代的alt属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签学习</title>
</head>

<body>
<!-- img学习 
 src：相对路径和绝对路径
 项目一般用相对路径-->

 ../代表上一级目录
alt：图片名字是必填的
 <img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
 <img src="../demo/resource/image2.png" alt="海报图片">

</body>

</html>

三、链接标签

target是链接在哪个窗口打开

(1)文本超链接

    <a href="https://www.poolbee.top">我是文字链接点击我跳转</a>

(2)图像超链接

<a src="../demo/resource/image.png" alt="图片未加载显示的文字" title="悬停的文字" width="300" height="300"></a>
<br/>

a标签内嵌图片后会出现手图像，表示点击图片能进行当前页面跳转。

1.新标签打开

2.默认为_self刷新本网页跳转。

(3)超链接

1.页面间跳转链接

从一个页面链接到另一个页面

跳转url或者html页面都可以

    <a href="www.poolbee.top">点击我跳转到博客</a>
    <a href="基本标签.html">点击我跳转到页面一</a>

1.5返回顶部

<a id="top">顶部，我是锚标记</a>

<a href="#top">回到顶部</a>

2.锚链接：应用很多

实现页面间指定位置跳转

down实现跳转到跳转到另一个页面中的底部，默认跳转是到顶部的。

回到顶部和跳转到另一个页面底部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接标签学习</title>
</head>
<!-- a标签
href:必填,表示要跳转到哪个页面
target:表示窗口在哪里打开
    _blank 在新标签中打开
    _self 在自己的网页中打开
-->

<body>
<a id="top">顶部，我是锚标记</a>




    <a href="www.poolbee.top">点击我跳转到博客</a>
    <a href="基本标签.html">点击我跳转到页面一</a>

<!-- 内嵌图片 -->
    <a href="基本标签.html">
        <img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
    </a>

<hr/>




<!-- 锚链接 
1.需要一个锚标记
2.跳转到锚标记 


-->
<!-- 顶部设置a标签， -->
<!-- 使用name进行标记 
新版本：使用id进行标记 
-->


<a href="基本标签.html">
    <img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
</a>
<br/>
<a href="基本标签.html">
    <img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
</a>
<br/>
<a href="基本标签.html">
    <img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
</a>
<br/>
<a href="基本标签.html">
    <img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
</a>
<br/>
<a href="基本标签.html">
    <img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
</a>
<br/>
<a href="基本标签.html">
    <img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
</a>
<br/>

<a href="#top">回到顶部</a>
<br/>

<a href="锚链接测试跳转到底部.html#down">跳转到目标网页底部</a>

</body>

</html>

跳转记得带上目标页面的名称.html再加上你的#dwon

回到顶部不需要带上目标页面名称

<a href="#top">回到顶部</a>
<br/>

<a href="锚链接测试跳转到底部.html#down">跳转到目标网页底部</a>

锚连接到目标页面底部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚链接测试跳转到底部</title>
</head>

<body>
    
<a src="../demo/resource/image.png" alt="图片未加载" title="悬停的文字" width="300" height="300"></a>
<br/>
<img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
 <br/>
 <a src="../demo/resource/image.png" alt="图片未加载" title="悬停的文字" width="300" height="300"></a>
 <br/>
 <img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
  <br/>
  <a src="../demo/resource/image.png" alt="图片未加载" title="悬停的文字" width="300" height="300"></a>
<br/>
<img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
 <br/>
 <a src="../demo/resource/image.png" alt="图片未加载" title="悬停的文字" width="300" height="300"></a>
<br/>
<img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
 <br/>
 <a src="../demo/resource/image.png" alt="图片未加载" title="悬停的文字" width="300" height="300"></a>
<br/>
<img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
 <br/>
 <a src="../demo/resource/image.png" alt="图片未加载" title="悬停的文字" width="300" height="300"></a>
<br/>
<img src="../demo/resource/image.png" alt="海报图片" title="悬停的文字" width="300" height="300">
 <br/>
 <a src="../demo/resource/image2.png" alt="图片未加载" title="悬停的文字" width="300" height="300"></a>
<br/>
<img src="../demo/resource/image2.png" alt="海报图片" title="悬停的文字" width="300" height="300">
 <br/>
<a id="down">我是目标页面底部</a>

</body>

</html>

3.功能性链接：这个我很常用

邮件链接

<!-- 功能性链接 -->
    <!-- 邮件链接 -->
    <a href="mailto:1066130@qq.com">点击联系我</a>

客服链接，QQ推广链接

QQ推广

选择组件样式，粘贴到网页上即可。

四、概念：行内元素和块元素

块元素

无论内容多少，该元素独占一行

段落标签p、标题标签h12345、等等

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行

例如：字体样式标签strong，em，没有br就无法换行，那种。

【问题】css中也可以让行内元素和块元素相互转换

其他标签

一、列表

(1)无序列表

(2)有序列表

(3)自定义列表

应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 有序列表 -->
     <!-- order list -->
      <ol>
        <!-- 子标签 list -->
        <li>Java</li>
        <li>Python</li>
        <li>前端</li>
        <li>运维</li>
        <li>C/c++</li>
      </ol>
    
      <!-- 无序列表 
    应用范围：导航，侧边栏
    空心原点：可以用css美化出 
    -->
      <!-- unorder list -->
      <ul>
        <!-- 子标签 list -->
        <li>Java</li>
        <li>Python</li>
        <li>前端</li>
        <li>运维</li>
        <li>C/c++</li>
      </ul>

      <!-- 自定义列表 
      definition list 
      -->
      <!-- 
      dl：标签
        dt：列表名称
        dd：列表内容
         
    应用：公司网站底部
    -->
      <dl>
        <dt>JAVA</dt>
        <dd>PYTHON</dd>
        <dd>linux</dd>

        <dt>西安</dt>
        <dd>重庆</dd>
        <dd>新疆</dd>

      </dl>

</body>

</html>

二、表格

为什么用

结构稳定、简单通用

基本结构

单元格
行列
- 跨行
- 跨列

跨四列

<table>
    <!-- 一行四列 -->
    <tr>
        <!-- 跨四列 -->
        <td colspan="4">1-1</td>
    </tr>
    <tr><td>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/>

<table>
    <!-- 一行四列 -->
    <tr>
        <!-- 跨四列 -->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr><td>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>

<table>
    <!-- 一行四列 -->
    <tr>
        <!-- 跨四列 -->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!-- 跨2行 -->
        <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>

3-4被挤出了

注释3-4

将td理解为列更好理解。

课程表实践

<!-- 成绩表 -->
<table>
    <tr>
        <!-- 跨3列 -->
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <!-- 跨2行 
           三行三列被挤出-->
        <td rowspan="2">小明</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
        <!-- <td>3-3</td> -->

    </tr>
    <tr>
        <!-- 跨两行
        5-3被挤出 -->
        <td rowspan="2">小红</td>
        <td>英语</td>
        <td>100</td>

    </tr>
    <tr>
        <td>化学</td>
        <td>100</td>
        <!-- <td>5-3</td> -->

    </tr>

</table>

三、视频音频

如果没有控件，可以复制视频地址，然后打开下载该视频。

<body>
    <!-- 音频和视频 -->
     <video src="../demo/resource/video/演示.mp4" ></video>
</body>

<body>
    <!-- 音频和视频 -->
     <video src="../demo/resource/video/演示.mp4" controls></video>
</body>

不显示

 <audio src="../demo/resource/video/音频.mp4" ></audio

有control后会显示。

  <audio src="../demo/resource/video/音频.mp4" controls></audio>

基本：页面结构分析

元素及描述表

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

四、iframe内联框架

1.一个网页中嵌套另一个网页

哔哩哔哩的视频引用

基本使用，直接显示网页

<iframe src="https://www.poolbee.top" frameborder="0" width="1000px" height="800px"></iframe>

2.当做一个容器：

结合a标签的target和空irame对irame添加网页显示


 <iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
 <!-- 通过a标签的target和空的irame，对irame添加网页显示。-->
 <a href="https://www.poolbee.top" target="hello">点击我跳转</a>

五、表单

action向何处发送表单数据

可以是网站url、一个网页.html

method：post，get 提交方式

(1)input标签

养成好习惯，每个input起一个name

get：不安全、但高效

type有自动的提示，可以选择是什么类型。

get方式提交：我们可以在url中看到我们提交的信息，不安全，但是高效。

在form表单中，可以用get方法，在input中用submit提交之后，会向别的网页发送表单数据，会在浏览器地址栏显现。

<form action="基本标签.html" method="get">
    <!-- 文本输入框 input type="text" -->
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password"name="pwd"></p>

    <!-- 提交 -->
    <!-- 重置 -->
    <p>
        <input type="submit">
        <input type="reset">
    </p>
    
</form>

点击提交后，会出现input的name及表单传输的内容。

post：相对安全

<form action="基本标签.html" method="post">
    <!-- 文本输入框
     input type="text" -->
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password"name="pwd"></p>

    <!-- 提交 -->
    <!-- 重置 -->
    <p>
        <input type="submit">
        <input type="reset">

    </p>


</form>

点击提交后，向基本标签.html发送了表单的数据。

但是在审查元素的负载中还是能看到From Data表单数据的信息。

【重点】审查元素中查看信息

抓到post的包：当使用get/post进行发送数据的时候，填写时候在监听get/post请求，点击请求会有

headers（标头）：

请求的网址（发送到数据的目标网址）
状态码:200代表成功

这里可以看到post也不是绝对的安全**，这里的信息还是能在payload（负载）的formdata中看到。**

【】后续加密form表单的技术？

(2)表单语法

表单元素属性及说明表

属性	说明
`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` 时，指定按钮是否是被选中。

name属性必填

value=“poolbee好帅”：默认值

size=”8“：文本框的长度

maxlenth=“8"输入最多的字符

 <p>名字：<input type="text" name="username" value="poolbee好帅" maxlength="8" size="30"></p>
    <p>密码：<input type="password"name="pwd"></p>

养成好习惯input记得闭合

1.radio：做复选和单选

input type = “radio”

value：单选框的值

name：表示组（这个理解很棒）

必须得有value，不然action向目标网页，发送表单传输数据没有值！

复选（因为没有name不算复选框）

没有name属性或不是同一个组，那么原本就是复选框。

单选（分组的概念）

name属性，指定同一个"组”

再次强调：radio，value必须得有。input一定要用name形成规范

2.多选框

<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>

还是一样get会在这里

http://127.0.0.1:5500/demo/%E5%9F%BA%E6%9C%AC%E6%A0%87%E7%AD%BE.html?username=poolbee%E5%A5%BD%E5%B8%85&pwd=&hobby=sleep&hobby=code&hobby=chat&hobby=game

多选框username是有值，pwd没有值，hobby为sleep，code，chat，game都是传的value。

一般用数组接收

用post在审查元素中，还是可以看到发送的value。

3.按钮

button

input type = “button” name = “btn1”

 <p>
    <input type="button" name="btn1" value="点击变长"/>
 </p>

图片为按钮-会提交表单数据

<p>
    <input type="image" src="../demo/resource/image.png" >
</p>

点击图片后，也会submit，提交表单的数据到目标的网页中。

在早期 Web 开发或特殊场景中，开发者可通过判断用户点击的坐标位置来实现更进一步的交互，比如：

在图片地图（image map）上点击不同区域跳转至不同页面。
根据点击坐标执行相应的后台逻辑。

浏览器会捕捉到你点击这张图片时的坐标位置（相对于图片左上角的像素坐标），并将这两个坐标值以 x 和 y 这两个参数的形式传递到 URL 中。这就是为什么你会在 URL 中看到类似 x=332&y=48 这样的参数。

4.重置reset

与button的value一样，并不是作为vlaue随表单传输走了，而是按钮的字。

  <input type="reset" value="清空表单">

小总结

1.1 radio 、checkbox两个value是提交表单的值。

input type = “button” 普通按钮

input type = “image” 图像按钮

input type = “submit” 提交按钮

input type = “reset” 重置按钮

1.2 button、submit、reset的value改变button的字。

1.3 image的value实测无用

补充：默认值为checked，默认选中

单选radio/多选框checkbox默认是checked

4.下拉框

    <p>国家：
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="yingdu">印度</option>
        </select>
    </p>

如果没有selected那么第一个就是默认，selected是默认选中

name列表的名称+option选项的vlaue值

5.文本域

<p>反馈：
    <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>
</p>

这里的文本内容为默认

6.文件域

<!-- 文件域 -->
<p>
    <input type="file"name="files">
    <!-- 一般设置一个button -->
    <input type="button" value="上传" name="upload">
</p>

还是，input一定要有name，如果没有name属性，url中不会有内容。

带功能的

7.邮件、url、数字、滑块、搜索

<!-- 带验证性
默认是@前后有字符即可
 
-->
<p>邮件
    <input type="email" name="email">
</p>

<!-- 网址验证 -->
<p>url
    <input type="url" name="url">
</p>
<!-- 数字验证 -->
<p>
    <input type="number" name="num" max="100" min="0" step="10">
</p>

<!-- 滑块 -->
 <p>音量
    <input type="range" name="voice" id="" min="0" max="100">
 </p>

 <!-- 搜索 -->
  <p>
    <input type="search" name="search" id="">
  </p>

商品数量，step步长设置为1

搜索

自己带一个x，可以清空。

键值对的获取形式。

总结：

整个form表单中都需要name属性

(3)表单的应用

只读- readonly

就无法填写这个，无法删除修改。没有任何作用。

禁用- disable

属性，更本无法使用了，禁用了。

隐藏域

hidden属性

隐藏了密码的input，但是pwd这个name还是会作为表单发送。

那么这里可应用

1.传输默认值

 <p>密码：<input type="password"name="pwd" hidden value="123456"></p>

虽然隐藏，但是可以给password设置vlaue，传输默认值

2.增强鼠标可用性（点击文字也可以实现选择该框）

点击文字也会选中该框

  <!-- 增强鼠标可用性 -->
  <p>
    <label for="mark">点击我试试</label>
    <input type="search" id="mark">
  </p>

(4)表单初级验证

为什么要进行表单验证？

减轻服务器的压力，例如：给提示信息。也可以保证数据安全性。

常用方式

placeholder 提示信息
required 非空判断
pattern 正则表达式

1.placeholder：提示信息

所有输入框的控件都可用

区分input 的 value默认值

删除默认值会出现提示信息。

2.required 非空判断

如果直接点击提交，有required的标签，会有提示信息。

3.pattern 正则表达式

pattern属性

需要用什么查什么

脚本之家

常用的正则表达式_正则表达式大全_脚本之家

<p>邮件
    <input type="email" name="diyemail"pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>

HTML大总结：

HTML大总结-HTML大总结