HTML5 快速入门教程 - 笔记【狂神说Java】

Fetters04

已于 2022-11-23 20:00:27 修改

阅读量314

点赞数 1

文章标签： html5 java html

于 2022-11-02 21:00:40 首次发布

本文链接：https://blog.csdn.net/qq_53569667/article/details/127658378

版权

HTML5 解析

一、初识HTML

HTML是什么

Hyper Text Markup Language（超文本标记语言）

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

HTML5的优势

W3C标准

W3C

World Wide Web Consortium（万维网联盟）
成立于1994，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C中国 (chinaw3c.org)

W3C标准

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

常见IDE

记事本
Dreamweaver
IDEA
WebStorm
…

HTML基本结构

二、网页基本信息

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>

<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签，它用来描述我们网站的一些信息 -->
    <!-- meta一般用来做SEO（搜索引擎优化） -->
    <meta charset="UTF-8">
    <meta name="keywords" content="Java">
    <meta name="description" content="学习Java">
    
    <!-- title网页标题 -->
    <title>Title</title>
</head>
    
<!-- body标签代表网页主体 -->
<body>

</body>
    
</html>

三、网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my page</title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    
    <!-- 段落标签 -->
    <p>我是一个段落</p>
    
    <!-- 水平线标签 -->
    <hr/>
    
    <!-- 换行标签 -->
    HTML<br/>
    CSS<br/>
    JavaScript<br/>
    
    <!-- 字体样式标签 -->
    粗体：<strong>I love you</strong>
    斜体：<em>I love you</em>
    
    <!-- 特殊符号 -->
    空格：&nbsp;
    >：gt;
    <：&lt;
    版权符号：&copy;
    
</body>
</html>

四、图像标签

常见图像格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
    <!-- ..或-- 可以返回上一级目录-->
    <img src="../resources/images/1.jpg" alt="Fetters头像" title="悬停文字">
</body>
</html>

五、超链接标签及应用

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9Xjo7Lg-1667392260824)(C:\Users\Fetters\AppData\Roaming\Typora\typora-user-images\image-20221028210031485.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
    <!--a标签
    href: 必填，表示要跳转到哪个页面
    target: 表示窗口在哪里打开
        - _blank 在新标签中打开
        - _self 在自己的网页中打开（默认）
    -->
    <a href="http://www.baidu.com", target="_blank">点击我跳转到百度</a>
    <a href="my page.html", target="_self">点击我跳转到my page</a>
    <br/>
    
    <!--点击图片也能跳转到对应链接中-->
    <a href="my page.html">
        <img src="../resources/images/1.jpg" alt="Fetters头像" title="悬停文字">
    </a>
</body>
</html>

这样就可以通过点击文字或图片跳转到对应的链接中

跳转到百度（因为设置了 target=“_blank”，所以会在新的页面中打开）

跳转到 my page

锚链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
    <!--使用 id 作为一个标记-->
    <a id="top">顶部</a>    
    
    
    <!--这里省略很多文字-->
    
    
	<!--锚链接
    1.需要一个锚标记
    2.跳转到标记，用 #标记名 来实现
    -->
    <a href="#top">回到顶部</a>

    <!--另一个页面在本页面的标记-->
    <a id="down">down</a>
</body>
</html>

点击回到顶部，可以直接跳转到所标记的位置
在这里插入图片描述

跳转到了标记处，并且会在URL上有标记
在这里插入图片描述

不仅可以实现页面内跳转，还可以实现跨页面跳转

在另一个页面中使用锚链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
    <img src="../resources/images/1.jpg" alt="Fetters头像" title="悬停文字">

    <a href="链接标签.html#down">跳转</a>
</body>
</html>

点击跳转可以转移到 down 标记处

在这里插入图片描述

功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
    <!--功能性链接
	邮件链接：mailto:
	QQ链接（可以使用QQ推广）
	-->
    <a href="mailto:*******@qq.com">点击联系我</a>
</body>
</html>

$(C:\Users\Fetters\AppData\Roaming\Typora\typora-user-images\image-20221028221007565.png)]](https://img-blog.csdnimg.cn/28a78731bb53466bb3efebe182e33e4f.png)$

点击后会出现邮件信息

QQ链接

可以将代码复制到 html 中实现链接的效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F4VmwMUn-1667392260834)(C:\Users\Fetters\AppData\Roaming\Typora\typora-user-images\image-20221028221838253.png)]$

点击就可以向对方发起对话了

六、块元素和行内元素

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnt8NIgA-1667392260834)(C:\Users\Fetters\AppData\Roaming\Typora\typora-user-images\image-20221030200854328.png)]$

七、列表标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <!--有序列表-->
    有序列表：
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>C++</li>
        <li>PHP</li>
    </ol>

    <hr/>
    
    <!--无序列表-->
    无序列表：
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>C++</li>
        <li>PHP</li>
    </ul>
    
    <hr/>

    <!--自定义列表
    dl: 标签
    dt: 列表名称
    dd: 列表内容
    -->
    自定义列表：
    <dl>
        <dt>学科</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>C++</dd>
        <dd>PHP</dd>

        <dt>前端</dt>
        <dd>HTML</dd>
        <dd>CSS</dd>
        <dd>JavaScript</dd>
    </dl>
</body>
</html>

在这里插入图片描述

八、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!--表格 table (border 加边框)
    行 tr
    列 td
    -->
    <table border="1px">
        <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>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
        </tr>
    </table>
</body>
</html>

普通表格
在这里插入图片描述

实现跨行和跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!--表格 table (border 加边框)
    行 tr
    列 td
    -->
    <table border="1px">
        <tr>
            <!--colspan 跨列-->
            <td colspan="4">1-1</td>
        </tr>
        <tr>
            <!--rowspan 跨行-->
            <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>
</body>
</html>

在这里插入图片描述

来用表格实现一个样例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <table border="1px">
        <tr>
            <td colspan="3">学生成绩</td>
        </tr>
        <tr>
            <td rowspan="2">狂神</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>
        <tr>
            <td rowspan="2">谢波</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

九、媒体元素

在这里插入图片描述

可以在项目中建立一个包专门来存放视频和音频以及图片，以便于管理

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
    <!--音频 audio 和视频 video
    src: 资源路径
    controls: 控制条
    autoplay: 自动播放
    -->
    <video src="../resources/video/test.mp4" controls autoplay></video>

    <audio src="../resources/audio/test.mp3" controls autoplay></audio>
</body>
</html>

可以看到视频和音频就在网页中显示出来了

在这里插入图片描述

十、页面结构分析

在这里插入图片描述

使用页面结构标签可以见名知意，使 html 的结构更加清晰，使用方法如下：

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

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

    <section>
        网页主体
    </section>

    <footer>
        网页脚注
    </footer>

</body>
</html>

十一、iframe内联框架

使用iframe内联框架可以在一个网站中嵌入另一个网站

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>
    <!--iframe内联框架
    src: 地址
    name: 框架标识名
    frameborder: 边框
    width: 宽度
    height: 高度
    -->
    <iframe src="https://www.csdn.net/" name = "hello" frameborder="1" width="1000px" height="800px"></iframe>
    
    <!--如果 a 标签的 target 的值和 iframe 标签的 name 相同的话，a 中的内容会在 iframe 中打开-->
    <a href="my page.html" target = "hello">点击跳转</a>
</body>
</html>

在 iframe 窗口中嵌入了 CSDN 网站

在这里插入图片描述

当点击右下角的点击跳转时，则会在 iframe 中打开要跳转到的网页

在这里插入图片描述

十二、初识表单post和get提交

表单就像是页面中的登录框，例如：

在这里插入图片描述

表单语法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>

    <h1>注册</h1>

    <!--表单form
    action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
    method: post, get 提交方法
    -->
    <form method="get" action="my page.html">
        
        <!--文本输入框：input type="text"-->
        <p>名字：<input type="text" name="username"> </p>
        
        <!--密码框：input type="password"-->
        <p>密码：<input type="password" name="pwd"> </p>
        
        <p>
            <input type="submit">
            <input type="reset">
        </p>
    </form>

</body>
</html>

通过上面的代码，可以得到如下效果：

在这里插入图片描述

点击提交可以跳转到 action 的位置，可以看到虽然跳转到了对应网页但是我们的提交信息也显示出来了，这是由于使用了 get 方法提交。

method的区别：

get 方法提交：我们可以在url中看到我们提交的信息，不安全，但是高效；
post方法提交：比较安全，传输大文件。

在这里插入图片描述

以下是使用post方法提交的结果，可以看到没有显示提交信息。

在这里插入图片描述

十三、文本框和单选框

表单元素格式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>

    <h1>注册</h1>

    <!--表单form
    action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
    method: post, get 提交方法
    -->
    <form method="post" action="my page.html">
        
        <!--文本输入框：input type="text"
        value="2333333" 默认初始值
        maxlength="8"   最长能写几个字符
        size="30"       文本框的长度
        -->
        <p>名字：<input type="text" name="username" value="2333333" maxlength="8" size="30"> </p>
        
        <!--密码框：input type="password"-->
        <p>密码：<input type="password" name="pwd"> </p>
       
        
        
        <!--单选框标签
        input type="radio"
        value: 单选框的值
        name:  表示组 (一个组中只能勾选一个)
        -->
        <p>性别：
            <input type="radio" value="boy" name="sex"/> 男
            <input type="radio" value="girl" name="sex"/> 女
        </p>
        
        <p>
            <input type="submit">
            <input type="reset">
        </p>
    </form>

</body>
</html>

效果如下：
在这里插入图片描述

十四、按钮和多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>

    <h1>注册</h1>

    <!--表单form
    action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
    method: post, get 提交方法
    -->
    <form method="post" action="my page.html">
        
        <!--文本输入框：input type="text"
        value="2333333" 默认初始值
        maxlength="8"   最长能写几个字符
        size="30"       文本框的长度
        -->
        <p>名字：<input type="text" name="username" value="2333333" maxlength="8" size="30"> </p>
        
        <!--密码框：input type="password"-->
        <p>密码：<input type="password" name="pwd"> </p>
        
        
        
        <!--多选框标签
        input type="checkbox"
        -->
        <p>爱好：
            <input type="checkbox" value="sleep" name="hobby"> 睡觉
            <input type="checkbox" value="code" name="hobby"> 敲代码
            <input type="checkbox" value="game" name="hobby"> 玩游戏
        </p>
        
        
        <!--按钮
        input type="button"  普通按钮
        input type="image"   图像按钮
        input type="submit"  提交按钮
        input type="reset"   重置
        -->
        <p>按钮：
            <input type="button" name="btn1" value="点击变长"> 
            <input type="image" src="../resources/image/1.jpg">
        </p>
        
        
        <p>
            <input type="submit">
            <input type="reset" value="清空表单">
        </p>
        
    </form>

</body>
</html>

效果如下，点击图像标签和提交标签都能跳转到 action 对应的页面：

在这里插入图片描述

十五、列表框文本域和文件域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>

    <h1>注册</h1>

    <!--表单form
    action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
    method: post, get 提交方法
    -->
    <form method="post" action="my page.html">
        
        <!--文本输入框：input type="text"
        value="2333333" 默认初始值
        maxlength="8"   最长能写几个字符
        size="30"       文本框的长度
        -->
        <p>名字：<input type="text" name="username" value="2333333" maxlength="8" size="30"> </p>
        
        <!--密码框：input type="password"-->
        <p>密码：<input type="password" name="pwd"> </p>
        
        
        
        <!--多选框标签
        input type="checkbox"
        -->
        <p>爱好：
            <input type="checkbox" value="sleep" name="hobby"> 睡觉
            <input type="checkbox" value="code" name="hobby" checked> 敲代码
            <input type="checkbox" value="game" name="hobby"> 玩游戏
        </p>

        
        
        <!--下拉框，列表框-->
        <p>国家：
            <select name="列表名称">
                <option value="china">中国</option>
                <option value="us" selected>美国</option>
                <option value="eth">瑞士</option>
                <option value="yingdu">印度</option>
            </select>
        </p>
        
        
        <!--文本域-->
        <p>
            <textarea name="textarea" rows="10" cols="50">文本内容</textarea>
        </p>
        
        
        <!--文件域-->
        <p>
            <input type="file" name="files">
            <input type="button" value="上传" name="upload">
        </p>
        
        
        <p>
            <input type="submit">
            <input type="reset" value="清空表单">
        </p>
        
    </form>

</body>
</html>

效果如下：
在这里插入图片描述

在 select 标签中用 selected 可以指定选择默认值

在 checkbox 标签中用 checked 可以指定勾选值
在这里插入图片描述

在这里插入图片描述

使用文件域 file 的地方可以选择文件

在这里插入图片描述

十六、搜索框滑块和简单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>

    <h1>注册</h1>

    <!--表单form
    action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
    method: post, get 提交方法
    -->
    <form method="post" action="my page.html">
        

        <!--下拉框，列表框-->
        <p>国家：
            <select name="列表名称">
                <option value="china">中国</option>
                <option value="us" selected>美国</option>
                <option value="eth">瑞士</option>
                <option value="yingdu">印度</option>
            </select>
        </p>
        
        
        <!--文本域-->
        <p>反馈：
            <textarea name="textarea" rows="10" cols="50">文本内容</textarea>
        </p>
        
        
        <!--文件域-->
        <p>
            <input type="file" name="files">
            <input type="button" value="上传" name="upload">
        </p>
        
        
        <!--邮箱验证-->
        <p> 邮箱：
            <input type="email" name="email">
        </p>
        
        
        <!--URL验证-->
        <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" max="100" min="0" step="10">
        </p>
        
        
        <!--搜索框-->
        <p> 搜索：
            <input type="search" name="search">
        </p>
        
        
        <p>
            <input type="submit">
            <input type="reset" value="清空表单">
        </p>
        
    </form>

</body>
</html>

在这里插入图片描述

十七、表单的应用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post, get 提交方法
-->
<form method="post" action="my page.html">

    <p>名字：<input type="text" name="username" value="admin" readonly> </p>

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

    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled/> 男
        <input type="radio" value="girl" name="sex"/> 女
    </p>
    
    
    <!--文本域-->
    <p>反馈：
        <textarea name="textarea" rows="10" cols="50">文本内容</textarea>
    </p>


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

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

    <!--增强鼠标可用性，点文字可以跳到文本框-->
    <p>
        <label for="mark">点我试试</label>
        <input type="text" id="mark">
    </p>
    

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

</form>

</body>
</html>

在这里插入图片描述

十八、表单初级验证

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post, get 提交方法
-->
<form method="post" action="my page.html">

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

    <p>密码：<input type="password" name="pwd" placeholder="请输入密码" required> </p>


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


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


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


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


    <!--数字验证-->
    <p> 商品数量：
        <input type="number" name="num" max="100" min="0" step="10" required>
    </p>


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


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


    <p> 自定义邮箱：
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
    </p>
    

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

</form>

</body>
</html>