阿小冷学计算机（14）-HTML5完整教学

最新推荐文章于 2024-11-01 15:19:31 发布
最新推荐文章于 2024-11-01 15:19:31 发布
阅读量139 收藏
点赞数
文章标签： html5 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47026948/article/details/123413048
版权

HTML5完整教学通俗易懂

初识HTML

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!-- 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>
Hello,World
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

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

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

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

<br/>
<!--特殊符号-->

空    格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>
大于
&gt;
<br/>
小于
&lt;
<br/>
版权符号
&copy;版权所有狂神

<!--
特殊符号记忆方式
&    ;
-->


</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src : 图片地址（必填）
        相对地址（推荐使用），绝对地址
  ../  --上一级目录
alt:图片文字（必填）
-->
<!--<img src = "D:\IDEAJava编程\HTML\resources\image\1.jpg" alt="">-->
<img src="../resources/image/1.jpg" alt="阿小冷图像" title="悬停文字" width="300" height="300">
</body>
</html>

在这里插入图片描述

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

<!--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="../resources/image/1.jpg" alt="阿小冷图像" title="悬停文字"  >
</a>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="阿小冷图像" title="悬停文字"  >
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="阿小冷图像" title="悬停文字"  >
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="阿小冷图像" title="悬停文字"  >
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="阿小冷图像" title="悬停文字"  >
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="阿小冷图像" title="悬停文字"  >
    </a>
</p>



<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>

<!--功能性链接

邮件链接: mailto
QQ链接：
-->
<a href="mailto:3595584132@qq.com">点击联系我</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>运维</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>
    <dd>岳阳</dd>

</dl>

</body>
</html>

在这里插入图片描述

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

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

<table border="1px">
    <tr>
        <!--colspan   跨列-->
        <td colspan="4" align="center">学生成绩</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>

<!--音频和视频
src : 资源路径
controls : 控制条
autoplay : 自动播放

-->

<video  src="../resources/video/" controls autoplay></video>

<audio src="../resources/audio/..." 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>

在这里插入图片描述

<!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="https://www.bilibili.com" frameborder="0" width="800px" height="800px"></iframe>-->
<!--<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>

在这里插入图片描述
在这里插入图片描述

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


<h1>注册</h1>


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


<form action="1.我的第一个网页.html" method="get">
        <!--文本输入框 : input type="text"
         value="狂神好帅"    默认初始值
         maxlength="110"    最长能写几个字符
         size="50"         文本框的长度
         -->
    <p>名字: <input type="text" name="username" value="狂神好帅" maxlength="110" size="50"></p>
        <!--密码框 ：input type="password" -->
    <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="../resources/image/1.jpg">
    </p>

    <!-- 下拉框  列表框 -->
    <p>
        <select>
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="uk">英国</option>
            <option value="india">印度</option>
        </select>
    </p>

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

    <!--文件域
    input type="file" name="files"
    -->
    <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" min="0" max="100" step="1">
    </p>

    <p>音量 :
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

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

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

</form>

</body>
</html>

在这里插入图片描述

<p>名字: <input type="text" name="username"  value="admin" readonly></p>
        <!--密码框 ：input type="password" -->
    <p>密码: <input type="password" name="pwd" hidden value="123456"></p>

    <!--单选框标签
     input type="radio"
     value : 单选框的值
     name : 表示组
     -->
    <p>性别
        <input type ="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
<p>
        <!--增强鼠标可用性-->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

在这里插入图片描述

<p>名字: <input type="text" name="username" placeholder="请输入用户名" required></p>
<!--邮件验证-->
    <p>邮件 :
        <input type="email" name="email" required>
    </p>
<p>自定义邮箱
        <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>
qq_47026948
关注
Python从0到100（四十）：Web开发简介-从前端到后端（文末免费送书）
Hello大家好，我是Dream，如果帮得到你，那我深感荣幸！交流学习、商务合作：https://bbs.csdn.net/topics/614347534
07-15 7万+
AI短视频生成与剪辑实战108招 ： ChatGPT 剪映》通过12个专题内容、108个实用技巧、170多分钟的教学视频，讲解了AI短视频的生成与剪辑全流程，并随书附赠了108集同步教学视频、210多个素材效果、70多个书中案例关键词、5200多个绘画关键词等。具体内容按以下两条线展开。一是技能线：详细讲解了ChatGPT、文心一格、Midjourney的使用方法，以及3种AI短视频生成方法—文本生视频、图片生视频和视频生视频。
2016.05.14初识HTML5-03
红石丶的博客
05-21 112
啊~要疯了，别人还要两天时间，而我却要在今天完成三天的任务，现在我正在做网页，一个是QQ邮箱的登录页面，还有一个是211-sun的首页。趁这会休息的功夫写一点日记。看来晚上要熬夜了... 今天所学的知识主要是样式表、选择器和超链接。无非是极其关键的。 1.CSS样式表：能实现内容和样式的分离。格式如下:     选择器(即修饰对象){            /*所谓选择器就是之类的*
初识HTML5
weixin_45723551的博客
09-03 176
一，HTML5语法： 1，标签不区分大小写。 2，允许属性值不使用引号。 3，允许部分属性的属性值省略。 二，HTML5标记/标签/元素：带有"<>"的元素 单标记：<标记名/> 双标记：有开始和结尾 <标记名>内容</标记名> 三，注释：，注释语句不显示 四，标记属性：在标签里面，颜色，字体，位置，字号，用空格隔开 <标记名 属性1=“属性值” 属性2=“属性值”>内容</标记名> 属性的键值对 width：200px 五，
HTML5第十四课时汇总
甲戌天火的博客
07-25 308
html> lang="en"> charset="UTF-8"> getelement系列方法 name="jerei">张三 class="JEREH">李四 id="wangWu">王五 class="JEREH">孙六 name="jerei">田七 id="changeBtn">变！！ var btn
初识HTML5（通俗易懂）
知足上进，不负野心。
09-18 3484
文章目录一、HTML5文档基本格式二、HTML5语法三、HTML标记1.单标记2.双标记3.注释标记4.案例分析四、标记的属性五、HTML文档头部相关标记1.标题标记2.元信息标记3.外部文件标记4.内嵌样式标记5.案例六、使用步骤1.引入库1.引入库1.引入库 一、HTML5文档基本格式 1.<!doctype>标记 <!doctype html> <!doctype>标记位于文档最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。 2.<html>
【跟我学RISC-V】（一）认识RISC-V指令集并搭建实验环境
April_Zhao的博客
04-29 8471
跟我一起学RISC-V指令集吧
视频教程-HTML 5全掌控-HTML5/CSS
weixin_28873135的博客
05-28 130
HTML 5全掌控 Adobe认证讲师 Adobe教育讲师委员会委员（省级）...
学成在线--媒资管理模块
qq_33888850的博客
03-25 909
媒资管理系统是每个在线教育平台所必须具备的，百度百科对其定义如下媒体资源管理(Media Asset Management，MAM)系统是建立在多媒体、网络、数据库和数字存储等先进技术基础上的一个对各种媒体及内容(如视/音频资料、文本文件、图表等)进行数字化存储、管理以及应用的总体解决方案，包括数字媒体的采集、编目、管理、传输和编码转换等所有环节。
视频教程-HTML + CSS零基础经典教程系列-HTML5/CSS
weixin_33488910的博客
05-28 561
HTML + CSS零基础经典教程系列 全栈开发工程师，现职于北京一家学院的...
django网上花店系统系统-计算机毕业设计源码23623
vx1_Biye_Design的博客
08-13 798
网站公告管理：管理员可以对网上花店系统中的公告信息进行发布和维护。 （2）系统管理：管理员可以对网上花店系统中的轮播图信息进行发布和维护。 （3）系统用户：管理员可以对前台上注册过的用户信息进行管控，同时可以对管理员的信息进行管理。 （4）客户信息管理：管理员可以对网上花店系统中客户信息进行添加、查询或删除等操作。 （5）资源管理：管理员可以对网上花店系统的鲜花资讯、资讯分类信息进行发布和维护。 （4）分类管理：管理员可以对所售卖的商品分类信息进行增删改查。 （5）鲜花商城：管理员可以对所售卖.......
21ic下载_solkane_9.0_制冷专业软件下载.zip
08-22
安装过程中可能需要管理员权限，确保计算机满足软件的系统需求。 2. `使用说明更多帮助.html`: 这是一个HTML文件，通常包含了软件的使用指南和常见问题解答。用户可以通过打开这个文件来获取关于如何操作Solkane、...
计算机专业英语词汇
11-24
### 计算机专业英语词汇解析 #### 一、计算机硬件与外设 **1. Active Matrix 主动矩阵** 主动矩阵技术通常应用于LCD（液晶显示器）屏幕中，它通过使用薄膜晶体管（Thin Film Transistor，TFT）来控制每个像素点的...
基于JAVA计算机类在线学习管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
m0_72595603的博客
08-07 374
基于JAVA计算机类在线学习管理系统计算机毕业设计源码+数据库+文档+系统+部署。前端技术：Layui、HTML、CSS、JS、JQuery等技术。最新计算机专业原创开发毕业设计源码+数据库是近期作品。数 据 库：MySQL5.7/8.0。开发软件：idea eclipse。运行环境：Win10、JDK1.8。开发语言：Java语言。项目架构：B/S架构。.........
HTML5 Canvas 入门教程与精彩案例全解析
weimengen的博客
11-01 181
本文聚焦 HTML5 的canvas元素，涵盖其创建、获取上下文、绘制基本图形、设置样式和绘制图像等用法。并通过动态烟花秀、旋转图形之舞、波浪动画之美三个精彩案例，展示canvas强大的绘图与动画能力，助力读者深入掌握其用法。
HTML 元数据标签 ＜meta＞ 全面解析：如何利用字符集、描述、关键字和视口提升网站质量
最新发布
Allen-
11-01 71
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 1862
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 818
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
Html编写发射粒子爱心
m0_58419490的博客
10-31 566
【代码】Html编写发射粒子爱心。
HTML入门教程22：HTML文件路径
软考鸭
10-30 485
相对路径是相对于当前HTML文件所在位置的路径。它不会包含协议、域名或完整的文件路径，而是根据当前文件与目标文件之间的相对位置来确定路径。
OpenGL计算机图形学实验完整代码包
资源摘要信息:"计算机图形学实验完整代码opengl.rar" 计算机图形学是一门研究如何用计算机技术来生成、处理、存储和显示图形信息的学科。它的应用范围非常广泛，包括游戏开发、虚拟现实、模拟训练、影视特效、数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值