Java学习笔记之HTML5

作者： 作者的头像   SolitudeAlma ,  2021-08-26 12:42:50 ,  所有人可见 ,  阅读 323

2


3

更好的阅读体验

1. 初识HTML

1.1 What is HTML

  • HTML
  • Hyper Text Markup Language（超文本标记语言）
  • 优势
  • 世界知名浏览器厂商对HTML5的支持
    • 微软
    • Google
    • 苹果
    • Opera
    • Mozilla
  • 市场需求
  • 跨平台
  • W3C标准
  • W3C
  • 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/>
>
<br/>
<
<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站投稿视频

4 评论

用户头像
lixiaoqian_qwq   2021-08-26 14:11         踩      回复

能不能在外面加3个点，不然看起来就是[HTML_REMOVED]

用户头像
SolitudeAlma   2021-08-26 16:28         踩      回复

转义的问题，没认真看，哈哈哈

用户头像
SolitudeAlma   2021-08-26 16:45         踩      回复

我是直接用[HTML_REMOVED]转义，在acwing不能正常显示，csdn和我的博客都是没问题的，具体的晚点再研究，也可以考虑用反引号

用户头像
lixiaoqian_qwq   2021-08-26 17:33    回复了 SolitudeAlma 的评论         踩      回复

谢谢