【遇见狂神说|前端】HTML5

1. 初识HTML

什么是HTML？

H yper T ext M arkup Language（超文本标记语言）
超文本包括：文字、图片、视频、音频、动画等

HTML5的优势

世界知名浏览器厂商支持（微软苹果谷歌）
市场需求
跨平台

W3C标准

W orld W ide W eb Consortium（万维网联盟）
国际中立性技术标准机构，1994年成立
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

常见IDE

记事本
Dreamweaver
IDEA
WebStorm
......

HTML的基本结构

<body> 开放标签
</body>闭合标签
单独呈现的标签（空元素）<hr/>，即用/来关闭空元素

复制代码

<!--DOCTYPE:告诉浏览器 使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--快捷键 Ctrl+/ 迅速注释-->
<!--head标签 代表网页头部-->
<head>
    <!--meta 描述性标签，描述网站的一些信息，一般用来做SEO搜索引擎优化-->
    <meta charset="UTF-8">
    <meta name="keywords" content="大连海事大学，211院校">
    <meta name="description" content="半军事管理院校">

    <!--title 网页的标题-->
    <title>张记瑄的第一个网页</title>
</head>
<!--body标签 代表网页主体-->
<body>
我的第一个网页
Hello，world!
</body>
</html>

2. 网页基本标签

标题标签

<h1>一级标签</h1>

<h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6>

段落标签

<p>AI 是这个时代最热的关键词。</p>

换行标签

这份调查覆盖了欧美地区 6000 多名企业高管 <br/>

水平线标签

<hr/>

字体样式标签

<h1>字体样式标签</h1> 粗体： <strong>I Love You</strong> <br/> 斜体： <em>I Love You</em>

注释和特殊符号

注释 或者 Ctrl+/快捷键
空格：(NoBreakSpace) <br/> 大于号> <br/> 小于号< <br/> ©版权所有：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title基本标签学习</title> </head> <body>
一级标签

二级标签

三级标签

四级标签

五级标签

六级标签

AI 是这个时代最热的关键词。

从 ChatGPT 引爆生成式 AI 开始，到 Copilot、企业大模型、自动化 Agent 铺天盖地上线，企业在 AI 上的投入可谓"豪掷千金"。不少公司高喊"降本增效"，希望借助 AI 工具提升员工生产力、压缩人力成本，甚至重塑业务流程。

但现实可能没那么乐观。

一项由 National Bureau of Economic Research（美国国家经济研究局）发布的最新调查显示：尽管企业在 AI 上投入巨大，但超过 80% 的公司表示，AI 至今尚未对生产力产生明显影响。

这份调查覆盖了欧美地区 6000 多名企业高管，结果揭示了一个值得开发者深思的现象------AI 的采用率在提升，但真正的生产效率提升却迟迟未兑现。

这份调查覆盖了欧美地区 6000 多名企业高管
结果揭示了一个值得开发者深思的现象------AI 的采用率在提升，但真正的生产效率提升却迟迟未兑现。

字体样式标签
粗体： I Love You
斜体： I Love You
空格：(NoBreakSpace)
大于号>
小于号<
©版权所有： </body> </html>

3. 图像标签

常见的图像格式
- JPG
- GIF
- PNG
- BMP 位图
- ...
  
  src: 图像地址
  alt: 图像的替代文字
  title: 鼠标悬停提示文字
  width: 图像宽度
  height: 图像高度
  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签学习</title> </head> <body> </body> </html>

4. 链接标签

复制代码

<a href="path" target="目标窗口位置">链接文本或图像</a>
href: 链接路径
target: 链接在哪个窗口打开
常用值_self或_blank

超链接
- 页面间链接
  - 从一个页面链接到另一个页面
- 锚链接
  
  顶部
  
  回到顶部
- 功能性链接
  
  点击此处联系我

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a id="top">顶部</a>

<!--a标签学习
a + Tab快捷键
href:必填 表示要跳转到哪个页面
target: 表示窗口在哪里打开，没设置的话默认在当前网页打开
    _blank 在新标签中打开
    _self 在自己的网页中打开
-->
<a href="1.第一个网页.html" target="_blank">点击我跳转到页面一</a>
<br>

<a href="<https://www.baidu.com>" target="_self">点击我跳转到百度</a>
<br>

<!--图片超链接-->
<a href="1.第一个网页.html">
    <img src="../resources/image/1.png" alt="抽象表情包" title="悬停显示文字" width="300" height="300" >
</a>

<p>
    <a href="1.第一个网页.html">
        <img src="../resources/image/1.png" alt="抽象表情包" title="悬停显示文字" width="300" height="300" >
    </a>
</p>
<p>
    <a href="1.第一个网页.html">
        <img src="../resources/image/1.png" alt="抽象表情包" title="悬停显示文字" width="300" height="300" >
    </a>
</p>
<p>
    <a href="1.第一个网页.html">
        <img src="../resources/image/1.png" alt="抽象表情包" title="悬停显示文字" width="300" height="300" >
    </a>
</p>
<p>
    <a href="1.第一个网页.html">
        <img src="../resources/image/1.png" alt="抽象表情包" title="悬停显示文字" width="300" height="300" >
    </a>
</p>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a id="down">底部</a>

<!--功能性链接
邮件链接: mailto:
QQ链接 QQ推广 官网自动生成 推广链接
-->
<a href="mailto:1520884938@qq.com">点击此处联系我</a>

</body>
</html>

5. 块元素和行内元素

块元素
- 无论内容多少，这个元素单独占一行
- p
- h1...h6
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- a
- strong
- em...

6. 列表标签

分类
- 无序列表
  - ul
- 有序列表
  - ol
- 自定义列表
  - dl
    - dt
    - dd
  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body>
  1. Java
  2. Python
  3. C Primer Plus
  4. Vue
  - Java
  - Python
  - C Primer Plus
  - Vue
  要学的东西
  
  Java
  
  Python
  
  C Primer Plus
  
  Vue
  复制代码
```
<dt>位置</dt>
<dd>辽宁</dd>
<dd>北京</dd>
<dd>天津</dd>
<dd>杭州</dd>
```
  </body> </html>

7. 表格标签

简单通用、结构稳定
table
- tr
- td
  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格学习</title> </head> <body>
  
  1-1 1-2 1-3 1-4
  
  2-1 2-2 2-3 2-4
  
  3-1 3-2 3-3 3-4
  
  </body> </html>

8. 媒体元素

视频
- video
  - controls
  - autoplay
音频
- audio
  - controls
  - autoplay
  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素学习</title> </head> <body>
  
  </body> </html>

9. 页面结构分析

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

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析学习</title>
</head>
<body>

<header><h2>网页头部</h2></header>

<nav>
    <h4>网页导航--1</h4>
    <h4>网页导航--2</h4>
    <h4>网页导航--3</h4>
    <h4>网页导航--4</h4>
</nav>

<section><h2>网页主体</h2></section>

<footer><h2>网页脚部</h2></footer>

</body>
</html>

10.iframe内联框架

<iframe src="引用页面地址" name="框架标识名" height="高度" width="宽度"></iframe>
<!DOCTYPE html> <html lang="en"> <head>i <meta charset="UTF-8"> <title>iframe内联框架学习</title> </head> <body>
点击跳转
</body> </html>

11. 表单post&get提交（重点！）

<form method="post" action="result.html"></form>
表单---------form method：post get提交方式
- get方式提交：可以在URL中看到提交的信息（高效，但不安全）
- post方式提交：比较安全，传输大文件 action：表单提交的位置（可以是网站/请求处理地址）
input：输入属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单学习-登录注册</title> </head> <body>
注册
<form method="post" action="1.第一个网页.html">
名字：

密码：

</form> </body> </html>

12. 表单元素学习

【1】表单元素格式

属性	说明
type	指定元素的类型。text password checkbox radio submit reset file hidden image button
默认为text
name	指定表单元素的名称（必填）
value	元素的初始值。type="radio"时必须指定一个值
size	元素的初始宽度。text/password 以字符为单位，其他以像素px为单位
maxlength	type为text/password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

【2】文本框&单选框

文本框
input+tab
<p>名字：<input type="text" name="username" value="默认值" maxlength="12" size="30"></p>
- value:默认初始的值 maxlength:最大能写几个字符 size:文本框的长度
单选框标签
- input type="radio" name:表示组（name相同的为一组） value:单选框的值（必须有）
  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本框和单选框学习</title> </head> <body>
  注册
  <form method="post" action="1.第一个网页.html">
  名字：
  
  密码：
  
  性别：女男未知
  复制代码
```
<p>
    <input type="submit">
    <input type="reset">
</p>
```
  </body> </html>

【3】多选框

多选框

input type="checkbox"

checked: 默认选中

复制代码

<p>爱好：
    <input type="checkbox" name="hobby" value="sleeping">睡觉
    <input type="checkbox" name="hobby" value="coding" checked>代码
    <input type="checkbox" name="hobby" value="chatting">聊天
    <input type="checkbox" name="hobby" value="gaming">游戏

</p>

【4】按钮

按钮

input type="button" name: value: 按钮上显示的字
input type="image" 图片按钮
input type="submit" 提交按钮

input type="reset" 重置按钮

复制代码

<p>按钮：
    <input type="button" name="btn1" value="点击此处">
    <input type="image" src="../resources/image/1.png" height="200px" width="200px">
</p>

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

【5】下拉框/列表框

下拉框

select name="列表名称"
option:下拉选项

selected: 默认选中

复制代码

<p>国家：
    <select name="列表名称">
        <option value="选项的值">中国</option>
        <option value="选项的值">日本</option>
        <option value="选项的值">韩国</option>
        <option value="选项的值" selected>朝鲜</option>
        <option value="选项的值">印度</option>
    </select>

</p>

【6】文本域

文本域

textarea + Tab
cols:列

rows:行

复制代码

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

【7】文件域

文件域

input type="file"

复制代码

<p>上传你的文件：
    <input type="file" name="files">
    <input type="button" name="upload" value="上传">
</p>

【8】简单的验证

邮件验证

复制代码

<!--    邮件验证
-->
    <p>邮箱：
        <input type="email" name="email" value="">
    </p>

URL验证

复制代码

<!--    URL验证
-->
    <p>URL：
        <input type="url" name="url">

    </p>

数字验证

数字验证
- input type="number" max：最大值 min：最小值 step：步长
  复制代码
```
<p>数字：
    <input type="number" name="number"max="150" min="0" step="any">
</p>
```

【9】滑块

复制代码

<!--滑块
input type="range"
max
min
step
-->
    <p>音量：
        <input type="range" name="volume" max="100" min="0" step="any">
    </p>

【10】搜索框

复制代码

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

13. 表单的应用

隐藏域 hidden
- 传递一些默认值
  
  密码：
  
  密码：

只读 readonly

复制代码

<p>名字：<input type="text" name="username" value="admin" **readonly** maxlength="12" size="30"></p>

禁用 disabled

复制代码

    <p>性别：
            <input type="radio" name="gender" value="girl"checked>女
            <input type="radio" name="gender" value="boy" disabled>男
            <input type="radio" name="gender" value="none">未知
    </p>

增强鼠标可用性

复制代码

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

14. 表单的初级验证

安全
减轻服务器压力

常用方式

placeholder（提示性消息，用于输入框中）

复制代码

  <p>名字：<input type="text" name="username" placeholder="请输入用户名" maxlength="12" size="30"></p>

required（非空判断，表示元素不能为空）也就是带星号必填项

名字：

pattern（正则表达式判断，直接去查找）

复制代码

<p>自定义邮箱：
    <input type="text" name="diyemail" pattern="\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*">
</p>

15. 总结

复制代码

graph LR
  HTML总结 --> 基本结构
  HTML总结 --> 网页的基本标签
  HTML总结 --> 超链接
  HTML总结 --> 行内元素和块元素
  HTML总结 --> 列表
  HTML总结 --> 表格
  HTML总结 --> 媒体元素
  HTML总结 --> 网页的简单布局
  HTML总结 --> 内联框架
  HTML总结 -->表单
  HTML总结 -->表单的应用
  HTML总结 -->表单的初级验证
  网页的基本标签 --> 标题
  网页的基本标签 --> 段落
  网页的基本标签 --> 换行
  网页的基本标签 --> 水平线
  网页的基本标签 --> 注释 --> Ctrl+/
  网页的基本标签 --> 特殊符号
  超链接 --> 锚链接
  超链接 -->功能性链接-->邮箱
  超链接 -->功能性链接-->QQ
  列表 --> 有序列表
  列表 --> 无序列表
  列表 --> 自定义列表
  表格 --> 行
  表格 --> 列
  表格 --> 跨行
  表格 --> 跨列
  媒体元素-->音频-->audio
  媒体元素-->视频-->video
  网页的简单布局 -->头部
  网页的简单布局 -->主体
  网页的简单布局 -->脚部
  内联框架-->iframe
  表单 -->form_post/get
 表单 -->文本框
 表单 -->密码框
 表单 -->单选框
 表单 -->多选框
 表单 -->按钮
 表单 -->下拉框
 表单 -->滑块
 表单的应用 --> 隐藏域
 表单的应用 --> 只读
 表单的应用 --> 禁用
 表单的初级验证 -->用户提示placeholder
 表单的初级验证 -->非空判断required
 表单的初级验证 -->正则表达式pattern

1-1				1-2	1-3	1-4
2-1	2-2	2-3	2-4
2-1	3-1	3-2	3-3	3-4

【遇见狂神说|前端】HTML5

1. 初识HTML

什么是HTML？

HTML5的优势

W3C标准

常见IDE

HTML的基本结构

2. 网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号

一级标签

二级标签

三级标签

四级标签

五级标签

六级标签

字体样式标签

3. 图像标签

4. 链接标签

5. 块元素和行内元素

6. 列表标签

7. 表格标签

8. 媒体元素

9. 页面结构分析

10.iframe内联框架

11. 表单post&get提交（重点！）

注册

12. 表单元素学习

【1】表单元素格式

【2】文本框&单选框

注册

【3】多选框

【4】按钮

【5】下拉框/列表框

【6】文本域

【7】文件域

【8】简单的验证

邮件验证

URL验证

数字验证

【9】滑块

【10】搜索框

13. 表单的应用

14. 表单的初级验证

15. 总结