HTML5入门

rookie驿站

已于 2022-05-29 17:41:22 修改

阅读量111

点赞数

分类专栏：前端知识文章标签： html5 html css

于 2022-05-29 17:40:35 首次发布

本文链接：https://blog.csdn.net/weixin_62438991/article/details/125033733

版权

前端知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML入门

什么是HTML？

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

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

发展史

在这里插入图片描述

HTML5的优势：

世界知名浏览器厂商对HTML5的支持
市场的需求
跨平台

W3C标准

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

W3C标准包括：

结构化标准语言（XHTML 、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript （相当于js））

HTML的基本结构

标签有两种：

以“< 标签名>”开始、“</标签名>”结束
自闭和标签<标签名/>

网页首部

网页主体

<!--告诉浏览器，我们要使用什么规范，浏览器默认规范html-->
<!DOCTYPE html>
<html lang="en">
<!--开放标签-->
<!--网页头部-->
<head>
<!--    自闭合标签-->
<!--    meta描述性标签，它用来描述网站的一些信息
一般用来做SEO（搜索引擎优化）
-->

    <meta charset="UTF-8">
<!--    搜索时关键词-->
    <meta name="keywords" content="内容，开源">
<!--    描述-->
    <meta name="description" content="来这里可以轻松学习java">
<!--    网页标题-->
    <title>第一个文件</title>
<!--闭合标签-->
</head>
<body>
<!--段落-->
<p>hello world</p>

</body>
</html>

网页的基本标签

标题标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>二级标签</h3>
<h4>二级标签</h4>

段落标签

<!--段落标签-->
你好
世界
<p>你好</p>
<p>世界</p>

换行标签

<!--换行标签-->
你好
<br/>
世界

水平线标签

<!--分割线标签-->
<hr/>

字体样式标签

<!--字体样式标签-->
粗体：<strong>你好</strong>
斜体：<em>世界</em>

注释和特殊符号

<!--注释标签-->

<!--特殊符号-->
空格：
你     好
你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好 <br>
大于号小于号：
&gt;
&it;<br>
版权符号：
&copy;

图像标签

<img src=“path” alt=“text” title=“text” width=“x” height=’y’ />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签练习</title>
</head>
<body>
<!--src表示图片地址，可以绝对地址，也可以相对地址
alt表示如果图片找不到将返回的字符
-->
<!--../表示上级目录-->
<!--title表示悬停文字-->

<!--width表示宽  height表示高-->
<img src="../resourse/images/1.png" alt="甜甜圈" title="甜甜圈" width="1920px" height="1080px">
<!--这个与下文的锚链接相关联
这个链接可以直接跳转到下面HTML文件的顶部。
-->
<a href="链接标签.html#top" target="_blank">跳转</a>
</body>
</html>

链接标签

<a herf=“url” target=“” ···>名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签的使用</title>
</head>
<body>
<!--使用name做标记-->
<a name="top">顶 部</a>
<!--  a标签
href：必填，表示要跳转的那个页面的urly
target：表示新的页面出现在哪里，_blank会出现新的页面，_self会在本页面出现
<a> 中间写链接的名称</a>
-->
<a href="https://www.baidu.com" target="_blank">点击我跳转到百度</a>
<img src="../resourse/images/1.png" alt="甜甜圈" title="甜甜圈" width="1920px" height="1080px">
<!--锚链接
也就是标签功能
-->
    <!--跳转到被标记为top的地方-->
<a href="#top">回到顶部</a>


<!--功能性链接-->
<!--邮箱链接-->
<a href="mailto:3100535850@qq.com">点击联系我</a>
<!--qq推广-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击领取小电影" title="点击领取小电影"/>
</a>
</body>
</html>

列表标签

列表有三种：

有序列表
无序列表
自定义列表

<!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>
    <li>c#</li>
</ol>
<hr>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
    <li>php</li>
    <li>c#</li>
</ul>
<hr>
<!--自定义列表-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>python</dd>
    <dd>c++</dd>
    <dd>php</dd>
    <dd>c#</dd>
</dl>

</body>
</html>

媒体标签

媒体这里介绍的有两种：

音频：audio
视频：video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体标签练习</title>
</head>
<body>

<!--src资源路径
controls：控制条
autoplay：自动播放
loop:循环播放
-->
<video src="../resourse/video/2.mp4" controls autoplay loop></video>

<audio src="../resourse/aideo/3.mp3" controls autoplay></audio>

</body>
</html>

页面结构

在这里插入图片描述

让页面代码看起来更加清晰，便于维护。

<!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标签

举例：可以直接分享哔哩哔哩的视频，使用嵌套代码。

<iframe src="//player.bilibili.com/player.html?aid=896748177&bvid=BV1MP4y1F7s4&cid=724944965&page=1" 
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

点击就可以直接看视频，无延迟。

<!--src:路径
width:宽度
height：长度
-->
<iframe src="https://www.4399.com" frameborder="0" width="1900" height="1000"></iframe>
<!--还可以跳转到标签网页-->
<iframe src="" name="hello" frameborder="0"></iframe>

<a href="第一个html文件.html" target="hello">点击跳转</a>

表单

注册表，登陆表。
表单语法：
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
</head>
<body>
<!--表单form
action：表示表单提交的方向
method：表示提交的方法，get和post
-->

<!--get方法：不安全，可以在url中看到提交的信息，但是高效
post方法：比较安全，在审查元素中也能看到传输的信息，可以传输大文件。
-->
<h2>注册</h2>
<form action="第一个html文件.html" method="get">
<!--    文本输入框 input type=“text”-->
    <p>名字：<input type="text"></p>
<!--    密码框：input type="password"-->
    <p>密码：<input type="password"></p>
    <p>
<!--        提交和重置-->
        <input type="submit">
        <input type="reset">
    </p>
</form>

文本框

<p>名字：
    <input type="text" maxlength="8" size="20" value="小红">
</p>

密码框

<p>密码：
    <input type="password" maxlength="8" size="20">
</p>

密码框显示的都是*******************；

单选框

<!--    name：表示提交时的属性，也就是在url上显示的属性-->
<!--    value：表示在表单上的值-->

<!--radio：表示单选框    
name相同，表示将这两个属于一个组，只能同时选中一个
value：表示单选框的值
标签外写别名
-->
    <p>
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

多选框

<!--    多选框 checkbox -->
    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">代码
        <input type="checkbox" value="chat" name="hobby">交流
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

按钮

<!--    按钮     -->
    <input type="button" name="button" value="点击">
    
<!--    图片按钮自带submit功能-->
    <input type="image" src="../resourse/images/1.png" width="100" height="100">
<!--提交-->
<input type="submit">

<!--重置-->
<input type="reset">

下拉框

<!--下拉框    -->

    <p>国家：
        <select name="列表">
<!--            selected 表示默认选择-->
            <option value="china" selected>中国</option>
            <option value="us">美国</option>
            <option value="switzerland">瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

文本域

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

文件域

<!--    文件域-->

    <p>
        <input type="file" name="file">
        <input type="button" value="上传" name="upload">
    </p>

邮箱和URL验证

<!--    邮件验证
自带初级验证
-->
    <p>邮箱:
    <input type="email" name="email">
    </p>
<!--url验证-->
    <p>URL:
        <input type="url" name="url">
    </p>

数字框

<!--step表示步长，在点击增加按钮时可以增加的长度-->
<p>数字：
    <input type="number" name="number" max="100" min="10" step="10">
</p>

滑块（用于音量）

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

搜索框

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

文本框的一些形式

只读

readonly

<p>名字：
    <input type="text" maxlength="8" size="20" value="小红" readonly>
</p>

禁用

disabled

可用来表示默认，而对于用户是透明的。

<p>名字：
    <input type="text" maxlength="8" size="20" value="小红" disabled>
</p>

隐藏

hidden

<p>名字：
    <input type="text" maxlength="8" size="20" value="小红" hidden>
</p>

锁定框

增强鼠标可用性，当鼠标点击网页上的文字时，自动锁定相应的文本框。

使用的是id属性来进行标记。

<p>
     <label for="hi">输入：</label>
     <input type="text" id="hi">
</p>

表单的初级验证

提示

placeholder

在文本框中的提示词，但一输入其他内容就会消失

<p>名字：
    <input type="text" maxlength="8" size="20" placeholder="请输入用户名">
</p>

非空

required

<p>名字：
    <input type="text" maxlength="8" size="20" required>
</p>

模板（正则表达式）

patten

通过下面的网址可以查询一些常用的正则表达式。

常用的正则表达式_正则表达式大全_脚本之家 (jb51.net)

<p>邮箱:
    <input type="email" name="email" patten="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>