HTML5

最新推荐文章于 2021-04-01 02:21:46 发布

StartOn2020

最新推荐文章于 2021-04-01 02:21:46 发布

阅读量886

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/StartOn2020/article/details/105957162

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5

什么是HTML

HTML

Hyper Text Markup Language(超文本标记语言)
超文本包括:文字、图片、音频、视频、动画等

HTML 5,提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

W3 C标准

W3C

World Wide Web Consortium (万维网联盟)
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准包括
结构化标准语言(HTML、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript )

常用IDE

IDEA

网页基本标签

➢标题标签

➢段落标签

➢换行标签

➢水平线标签

➢字体样式标签

➢注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>跑得快     跑得快</p>
<p>一只没有耳朵  一只没有尾巴</p>
<p>真奇怪     真奇怪</p>
<p>两只老虎    两只老虎</p>
<p>跑得快     跑得快</p>
<p>一只没有耳朵  一只没有尾巴</p>
<p>真奇怪     真奇怪</p>

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

<!--换行标签-->
跑得快     跑得快 <br/>
一只没有耳朵  一只没有尾巴 <br/>
真奇怪     真奇怪<br/>

<!--粗体,斜体-->
<h1>字体样式标签</h1>
粗体:<strong>i love you</strong>
斜体:<em>i love you</em>

<hr/>

<!-- 特殊符号-->

空      格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
&copy;版权所有

</body>
</html>

图像标签

常用的图像标签

JPG

GIF

PNG

BMP（位图）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zYt4rdqL-1588763224759)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506070225.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
l<!--img学习
src :图片地址 (必填)
    相对地址(推荐使用)，绝对地址
    ../     --上一级目录
alt :图片名字(必填)
-->

<img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</body>
</html>

链接标签

文本超链接
图像超链接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TaLF3GXf-1588763224762)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506071119.png)]

超链接

页面间链接
- 从一个页面链接到另一个页面
锚链接
功能性链接

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

<a name="top">顶部</a>

l<!--a标签
href :必填,表示要跳转到那个页面
target :表示窗口在哪里打开
    _blank 在新标签中打开
    _self 在自己的网页中打开
-->


<a href="1.我的第一个页面.html" target="_blank">点击我跳转到网页一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>

<br>
<a href="1.我的第一个页面.html">
    <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
</a>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>
<p>
    <a href="1.我的第一个页面.html">
        <img src="../resource/image/笑.jpg" alt="刘星笑了" title="悬停文字" width="450" height="355">
    </a>
</p>

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


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

<a name="down">尾部</a>

<!--功能性链接
邮件链接: mailto
QQ链接
-->

<a href="mailto:35329226353@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3532926353&site=qq&menu=yes">
    <img border="0"
         src="http://wpa.qq.com/pa?p=2:3532926353:53"
         alt="点击这里给我发消息"
         title="点击这里给我发消息"/>
</a>
</body>
</html>

行内元素和块元素

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

列表

什么是列表

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

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

<!--有序列表
应用范围:试卷，问答
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/c++</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/c++</li>
</ul>
<!--自定义列表
dl:标签
dt :列表名称
dd :列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd> Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>

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


</body>
</html>

表格

为什么使用表格
简单通用
结构稳定
基本结构

单元格

行

列

跨行

跨列

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

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

<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>
    </tr>
</table>


</body>
</html>

视频和音频

视频元素

video
音频元素

audio

很多浏览器限制自动播放

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

<video src="../resource/video/小泽.mp4" controls autoplay></video>

<audio src="../resource/audio/2.mp3" controls autoplay></audio>
</body>
</html>

页面结构分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VTaOHEcM-1588763224764)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506080538.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>

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

内联框架iframe

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sNzSwJcB-1588763224765)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506082005.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--iframe内联框架
src：地址
w-h：宽度和高度
-->


<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<a href="1.我的第一个页面.html" target="hello">点击跳转</a>

<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->


</body>
</html>

表单语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ey5qMqP-1588763224766)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506181143.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ycMxeTnx-1588763224767)(C:\Users\Hpr\Desktop\求职之路\狂神学Java\pic\QQ截图20200506182313.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method ： post，get提交方式
    get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
    post方式提交:比较安全,传输大问价

-->
<form action="1.我的第一个页面.html" method="get">
    <!-- 文本输入款：input type ="text"
    value="狂神很厉害" 默认初始值
    maxlength="8"   最长能写几个字符
    size="30"   文本框的长度
    -->
    <p>名字： <input type="text" name="username" value="狂神很厉害" maxlength="8" size="30"></p>
    <!-- 密码框:input type="password" name="pwd"-->
    <p>名字： <input type="password" name="pwd"></p>

    <!--单选框标签
    input type="radio"
    value: 单选框的值
    name : 表示组
    -->
    <p>
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <!--
    多选框:
    input type="checkbox"
    -->
    <p>
        爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" 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="../resource/image/笑.jpg">

    </p>


    <!--    下拉框,列表框

    -->
    <p>
        下拉框:
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

    <!--文本域:

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

    <!--    文件域
    input type="file" name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </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="10" step="1">
    </p>

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

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

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


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

表单的应用

隐藏域 hidden

只读 readonly

禁用 disabled

label for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method ： post，get提交方式
    get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
    post方式提交:比较安全,传输大问价

-->
<form action="1.我的第一个页面.html" method="get">
    <!-- 文本输入款：input type ="text"
    value="狂神很厉害" 默认初始值
    maxlength="8"   最长能写几个字符
    size="30"   文本框的长度
    -->
    <p>名字： <input type="text" name="username" value="admin" maxlength="8" size="30" readonly></p>
    <!-- 密码框:input type="password" name="pwd"-->
    <p>密码： <input type="password" name="pwd" value="123456" hidden></p>

    <!--单选框标签
    input type="radio"
    value: 单选框的值
    name : 表示组
    -->
    <p>
        <input type="radio" value="boy" name="sex" disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <!--
    多选框:
    input type="checkbox"
    -->
    <p>
        爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" 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="../resource/image/笑.jpg">

    </p>


    <!--    下拉框,列表框

    -->
    <p>
        下拉框:
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

    <!--文本域:

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

    <!--    文件域
    input type="file" name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </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="10" step="1">
    </p>

    <!--    滑块
    input type="range"
    -->
    <p>
        音量:
        <input type="range" name="voice" min="0" max="100" step="5" value="10">
    </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>

表单初级验证

为啥要进行表单验证?

安全

减轻服务器压力

常用方式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method ： post，get提交方式
    get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
    post方式提交:比较安全,传输大问价

-->
<form action="1.我的第一个页面.html" method="get">
    <!-- 文本输入款：input type ="text"
    value="狂神很厉害" 默认初始值
    maxlength="8"   最长能写几个字符
    size="30"   文本框的长度
    -->
    <p>名字： <input type="text" name="username" placeholder="请输入用户名" required></p>
    <!-- 密码框:input type="password" name="pwd"-->
    <p>密码： <input type="password" name="pwd" value="123456" hidden></p>

    <!--单选框标签
    input type="radio"
    value: 单选框的值
    name : 表示组
    -->
    <p>
        <input type="radio" value="boy" name="sex" disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <!--
    多选框:
    input type="checkbox"
    -->
    <p>
        爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" 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="../resource/image/笑.jpg">

    </p>


    <!--    下拉框,列表框

    -->
    <p>
        下拉框:
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

    <!--文本域:

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

    <!--    文件域
    input type="file" name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </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="10" step="1">
    </p>

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

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

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

    <p>自定义邮箱:
        <input type="text" name="mymail" pattern=" ^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
    </p>


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


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

StartOn2020

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5

HTML5什么是HTMLHTMLHyper Text Markup Language(超文本标记语言)超文本包括:文字、图片、音频、视频、动画等HTML 5,提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。W3 C标准W3...
复制链接

扫一扫