1. 初识HTML

1.1 What is HTML

HTML
- Hyper Text Markup Language（超文本标记语言）
优势
- 世界知名浏览器厂商对HTML5的支持
  - 微软
  - Google
  - 苹果
  - Opera
  - Mozilla
- 市场需求
- 跨平台
W3C标准
- W3C
  - World Wide Web Consortium（万维网联盟）
  - 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
  - http://www.w3.org
  - http://www.chinaw3c.org
- W3C标准包括
  - 结构化标准语言（HTML、XML）
  - 表现标准语言（CSS）
  - 行为标准（DOM、ECMAScript）
常见的IDE
- 记事本
- DreamWeaver
- IDEA
- WebStorm
- Visual Studio Code

1.2 网页的基本信息

DOCTYPE声明
- 告诉浏览器，我们要是用什么规范
- <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
- <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
- 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
- HTML5 不基于 SGML，所以不需要引用 DTD。
- **提示：**请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
<html>标签
- 此元素可告知浏览器其自身是一个 HTML 文档。所有内容都应该包含其中
<head>标签
- <head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
- 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
- 下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
- <title> 定义文档的标题，它是 head 部分中唯一必需的元素。
<title>标签
- <title> 元素可定义文档的标题。
- 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
<meta>标签
- 元数据（Metadata）是数据的数据信息。
- <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
- META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
- 元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
<body>标签
- body 元素定义文档的主体。
- body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。

2. 标签

2.1 网页基本标签

标题标签

<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

段落标签

<!-- 段落标签 -->
<p>1111 1</p>
<p>222 2</p>

换行标签

<!-- 换行标签 -->
1111 1<br/>
222 2<br/>

水平线标签

<!-- 水平线标签 -->
<hr/>

字体样式标签

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

特殊符号

<!-- 特殊符号 -->
空    格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权归SolitudeAlma所有

2.2 图像标签

常见的图像格式
- JPG
- GIF
- PNG
- BMP
- ...

<!-- img标签学习
src: 图片地址
    相对路径（推荐），绝对路径
    ../ 上一级目录
title: 鼠标悬停显示的文字
alt: 找不到路径时的替代文字
-->
<img src="../resources/image/214d533c880611ebb6edd017c2d2eca2.png" alt="美女不见了" title="色图" width="1510" height="700">

2.3 链接标签

文本超链接
图像超链接

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

<!-- a标签
href：必填，表示要跳转的地址
target：表示窗口在哪里打开
    _blank  在新标签中打开
    _self   在本页面打开
-->

<!-- 文本超链接 -->
<a href="./基本标签.html">click</a>
<a href="https://www.baidu.com">click</a>

<!-- 图像超链接 -->
<a href="./图像标签.html">
    <img src="../resources/image/214d533c880611ebb6edd017c2d2eca2.png" alt="美女不见了" title="色图" width="1510" height="700">
</a>

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

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

<!-- 功能性标签
邮件标签： mailto:
qq链接:
-->

<a href="mailto:2241141629@qq.com">邮我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2241141629&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2241141629:51" alt="联系我，领取小电影" title="联系我，领取小电影"/>
</a>

<!-- 跳转的另一页面的指定位置 -->
<a href="./链接标签.html#bottom">跳转另一页面指定位置</a>

2.4 行内元素和块元素

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

2.5 列表标签

什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快地获得相应地信息
列表的分类
- 无序列表
- 有序列表
- 定义列表

<!-- 有序列表 -->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>C/C++</li>
</ol>

<hr/>

<!-- 无序列表
应用范围：导航，侧边栏。。
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>C/C++</li>
</ul>

<hr/>

<!-- 自定义列表
dl：标签
dt：列表名称
dd：列表内容
应用范围：公司网站底部
-->

<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>运维</dd>
    <dd>C/C++</dd>

    <dt>位置</dt>
    <dd>广东</dd>
    <dd>福建 </dd>
</dl>

2.6 表格标签

为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

<!-- 表格table
行 tr
列 td
-->

<table border="1" style="text-align: center">
    <!-- colspan跨列 -->
    <tr >
        <td colspan="3">成绩</td>
    </tr>
    <tr>
        <td rowspan="2">小明</td>
        <td>语文</td>
        <td>英语</td>
    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
    </tr>

    <tr>
        <td rowspan="2">小红</td>
        <td>语文</td>
        <td>英语</td>
    </tr>

    <tr>
        <td>100</td>
        <td>100</td>
    </tr>
</table>

2.7 媒体标签

视频标签
- video
音频标签
- audio

<!-- 音频视频
controls 控件
autoplay 自动播放
-->
<video src="../resources/video/bandicam%202021-07-04%2022-10-15-035.mp4" controls="controls" autoplay="autoplay"></video>
<audio src="../resources/audio/The%20Weepies%20-%20Gotta%20Have%20You.mp3" controls="controls" autoplay="autoplay"></audio>

3. 页面结构分析

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

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

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

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

4. iframe内联框架

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

<!-- iframe
src：引用地址
name：框架标识名
-->
<iframe src="//player.bilibili.com/player.html?aid=630832946&bvid=BV1Mb4y1Z7Pc&cid=344048459&page=1" scrolling="no"
        border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

5. 表单

HTML 表单用于收集用户输入。
HTML表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<h1>注册</h1>
<!-- 表单form
action：表单提交的地址，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
    get提交方式可以在url中看到提交的信息，不安全但高效
    post提交方式比较安全，传输大文件
-->
<form action="./图像标签.html" method="get">
    <!-- 文本输入框：input type="text" -->
    <label>用户名：
        <input type="text" name="username" />
    </label>
    <br/>
    <!-- 密码输入框：input type="password" -->
    <label>密码：
        <input type="password" name="password" />
    </label>

    <input type="submit" />
    <input type="reset" />
</form>

5.1 文本框单选框

表单元素格式（input标签）

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

<h1>注册</h1>
<!-- 表单form
action：表单提交的地址，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
    get提交方式可以在url中看到提交的信息，不安全但高效
    post提交方式比较安全，传输大文件
-->
<form action="./图像标签.html" method="get">
    <!-- 文本输入框：input type="text" -->
    <!-- value="SolitudeAlma" 默认初始值
         size="30"            文本框的长度
         maxlength="8"        最多容纳几个字符
    -->
    <label>用户名：
        <input type="text" name="username" value="SolitudeAlma" size="30" maxlength="8"/>
    </label>
    <br/>
    <!-- 密码输入框：input type="password" -->
    <label>密码：
        <input type="password" name="password" />
    </label>

    <!-- 单选框标签
    input type="radio"
    value ：从单选框获取到的值
    name ：分组名称，同一组才能不同时选中
    -->
    <label>
        <input type="radio" value="male" name="sex"/>男
    </label>
    <label>
        <input type="radio" value="female" name="sex"/>女
    </label>
    <input type="submit" />
    <input type="reset" />
</form>

5.2 按钮和多选框

<h1>注册</h1>
<!-- 表单form
action：表单提交的地址，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
    get提交方式可以在url中看到提交的信息，不安全但高效
    post提交方式比较安全，传输大文件
-->
<form action="./图像标签.html" method="get">
    <!-- 文本输入框：input type="text" -->
    <!-- value="SolitudeAlma" 默认初始值
         size="30"            文本框的长度
         maxlength="8"        最多容纳几个字符
    -->
    <label>用户名：
        <input type="text" name="username" value="SolitudeAlma" size="30" maxlength="8"/>
    </label>
    <br/>
    <!-- 密码输入框：input type="password" -->
    <label>密码：
        <input type="password" name="password" />
    </label>

    <!-- 单选框标签
    input type="radio"
    value ：从单选框获取到的值
    name ：分组名称，同一组才能不同时选中
    -->
    <label>
        <input type="radio" value="male" name="sex"/>男
    </label>
    <label>
        <input type="radio" value="female" name="sex"/>女
    </label>

    <!-- 多选框
    input type="checkbox"
    -->
    <label>
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </label>
    <label>
        <input type="checkbox" value="code" name="hobby">敲代码
    </label>
    <label>
        <input type="checkbox" value="chat" name="hobby">聊天
    </label>
    <label>
        <input type="checkbox" value="game" name="hobby">游戏
    </label>
    <!-- 按钮
    input type="submit"     提交按钮
    input type="button"     普通按钮
    input type="image"      图像按钮
    input type="reset"      重置按钮
    -->
    <label>
        <input type="button" name="xxButton" value="点击变长"/>
        <input type="image" src="../resources/image/214d533c880611ebb6edd017c2d2eca2.png" />
    </label>
    <input type="submit" />
    <input type="reset" />
</form>

5.3 列表框文本框和文件域

<h1>注册</h1>
<!-- 表单form
action：表单提交的地址，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
    get提交方式可以在url中看到提交的信息，不安全但高效
    post提交方式比较安全，传输大文件
-->
<form action="./图像标签.html" method="get">
    <!-- 文本输入框：input type="text" -->
    <!-- value="SolitudeAlma" 默认初始值
         size="30"            文本框的长度
         maxlength="8"        最多容纳几个字符
    -->
    <label>用户名：
        <input type="text" name="username" value="SolitudeAlma" size="30" maxlength="8"/>
    </label>
    <br/>
    <!-- 密码输入框：input type="password" -->
    <label>密码：
        <input type="password" name="password" />
    </label>

    <!-- 单选框标签
    input type="radio"
    value ：从单选框获取到的值
    name ：分组名称，同一组才能不同时选中
    checked：默认选中
    -->
    <label>
        <input type="radio" value="male" name="sex" checked="checked" />男
    </label>
    <label>
        <input type="radio" value="female" name="sex"/>女
    </label>

    <!-- 多选框
    input type="checkbox"
    checked：默认选中
    -->
    <label>
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </label>
    <label>
        <input type="checkbox" value="code" name="hobby" checked="checked">敲代码
    </label>
    <label>
        <input type="checkbox" value="chat" name="hobby">聊天
    </label>
    <label>
        <input type="checkbox" value="game" name="hobby">游戏
    </label>
    <!-- 按钮
    input type="submit"     提交按钮
    input type="button"     普通按钮
    input type="image"      图像按钮
    input type="reset"      重置按钮
    -->
    <label>
        <input type="button" name="xxButton" value="点击变长"/>
        <input type="image" src="../resources/image/214d533c880611ebb6edd017c2d2eca2.png" />
    </label>
    <input type="submit" />
    <input type="reset" />

    <!-- 下拉框，列表框
    -->
    <label>
        <select name="列表名称">
            <option value="China" selected="selected">中国</option>
            <option value="India">印度</option>
            <option value="America">美国</option>
            <option value="Switzerland">瑞士</option>
        </select>
    </label>

    <!-- 文本域
    cols="20" 行数
    rows="10" 列数
    -->
    <label>
        <textarea name="textarea" cols="20" rows="10">请输入内容</textarea>
    </label>

    <!-- 文件域
    type="file"
    name="uploadFile"
    -->
    <label>
        <input type="file" name="uploadFile">
        <input type="button" value="上传" name="uploadButton">
    </label>
</form>

5.4 搜索框滑块和简单验证

<h1>注册</h1>
<!-- 表单form
action：表单提交的地址，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
    get提交方式可以在url中看到提交的信息，不安全但高效
    post提交方式比较安全，传输大文件
-->
<form action="./图像标签.html" method="get">
    <!-- 文本输入框：input type="text" -->
    <!-- value="SolitudeAlma" 默认初始值
         size="30"            文本框的长度
         maxlength="8"        最多容纳几个字符
    -->
    <label>用户名：
        <input type="text" name="username" value="SolitudeAlma" size="30" maxlength="8"/>
    </label>
    <br/>
    <!-- 密码输入框：input type="password" -->
    <label>密码：
        <input type="password" name="password" />
    </label>

    <!-- 单选框标签
    input type="radio"
    value ：从单选框获取到的值
    name ：分组名称，同一组才能不同时选中
    checked：默认选中
    -->
    <label>
        <input type="radio" value="male" name="sex" checked="checked" />男
    </label>
    <label>
        <input type="radio" value="female" name="sex"/>女
    </label>

    <!-- 多选框
    input type="checkbox"
    checked：默认选中
    -->
    <label>
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </label>
    <label>
        <input type="checkbox" value="code" name="hobby" checked="checked">敲代码
    </label>
    <label>
        <input type="checkbox" value="chat" name="hobby">聊天
    </label>
    <label>
        <input type="checkbox" value="game" name="hobby">游戏
    </label>
    <!-- 按钮
    input type="submit"     提交按钮
    input type="button"     普通按钮
    input type="image"      图像按钮
    input type="reset"      重置按钮
    -->
    <label>
        <input type="button" name="xxButton" value="点击变长"/>
        <input type="image" src="../resources/image/214d533c880611ebb6edd017c2d2eca2.png" />
    </label>
    <input type="submit" />
    <input type="reset" />

    <!-- 下拉框，列表框
    -->
    <label>
        <select name="列表名称">
            <option value="China" selected="selected">中国</option>
            <option value="India">印度</option>
            <option value="America">美国</option>
            <option value="Switzerland">瑞士</option>
        </select>
    </label>

    <!-- 文本域
    cols="20" 行数
    rows="10" 列数
    -->
    <label>
        <textarea name="textarea" cols="20" rows="10">请输入内容</textarea>
    </label>

    <!-- 文件域
    type="file"
    name="uploadFile"
    -->
    <label>
        <input type="file" name="uploadFile">
        <input type="button" value="上传" name="uploadButton">
    </label>

    <!-- 邮件验证 -->
    <label>
        邮箱：
        <input type="email" name="email" />
    </label>
    <!-- url验证 -->
    <label>
        <input type="url" name="url" />
    </label>
    <!-- 数字验证 -->
    <label>
        <input type="number" name="number" max="10" min="0" step="1"/>
    </label>
    <!-- 滑块 -->
    <label>
        <input type="range" name="volume" max="100" min="0" step="2"/>
    </label>
    <!-- 搜索框 -->
    <label>
        <input type="search" name="search" />
    </label>
</form>

5.5 表单的应用

隐藏域 hidden
只读 readonly
禁用 disable
增强鼠标的可用性
- 被label包围的标签可以通过点击文字来选中它（绑定），或者是通过label中的for属性与标签的id属性对应

5.6 表单的初级验证

为什么要进行验证
- 避免直接让后端校验，减轻服务器压力
- 增加安全性
常用方式
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式

附属代码
 所有资源来源于狂神说的B站投稿视频

Java学习笔记之HTML5

1. 初识HTML

1.1 What is HTML

1.2 网页的基本信息

2. 标签

2.1 网页基本标签

2.2 图像标签

2.3 链接标签

2.4 行内元素和块元素

2.5 列表标签

2.6 表格标签

2.7 媒体标签

3. 页面结构分析

4. iframe内联框架

5. 表单

5.1 文本框单选框

5.2 按钮和多选框

5.3 列表框文本框和文件域

5.4 搜索框滑块和简单验证

5.5 表单的应用

5.6 表单的初级验证

一言

标签

🎵音乐

👨‍💻友链