【遇见狂神说--HTML5学习笔记】

最新推荐文章于 2024-04-18 14:31:12 发布
最新推荐文章于 2024-04-18 14:31:12 发布
阅读量419 收藏 7
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46168476/article/details/123842319
版权

1.我的第一个网页

<!--注释，快捷方法：ctrl + /  -->


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

<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--mate描述性标签，它用来描述网站的一些信息-->
    <!--mate一般用来做seo,搜索引擎优化-->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说JAVA,西部开源.">
    <meta name="description" content="来这个地方学习JAVA.">

    <!--  title网页标题  -->

    <title>我的第一个网页</title>
</head>
<body>

Hello,World!

</body>
</html>

2.基本标签

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

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


<!--段落标签-->
<!-- p + tab 快捷键 输出成对标签 -->
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>


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

<!--粗体,斜体-->
<h1>字体样式标签</h1>

粗体:  <strong>I love you!</strong>
斜体:  <em>I love you!</em>

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

空              格
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>
<!--&gt;   >     -->
&gt;

<br/>
<!--&lt;   <     -->
&lt;

<br/>
<!--版权符号&copy -->
&copy;版权所有狂神

<!--
特殊符号记忆方式

$    ;

-->


</body>
</html>

3.图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src : 图地址
    相对地址,绝对地址
    ../   --表示上一级目录



-->
<img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">


</body>
</html>

4.链接标签

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

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




<!--a标签
快捷方式:    a + tab
href : 必填,表示套跳转到那个页面
target : 表示窗口在哪里打开
          参数: _blank 在新标签中打开
               _self 在自己的网页打开

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

<br/>
<a href="1.我的第一个网页.html"><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">图片转跳</a>

<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300"></p>

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

<!--邮件链接

邮件链接:mailto:
QQ链接

-->
<a href="mailto:2452467292@qq.com">点击联系我邮件</a>



</body>
</html>

5.列表

<!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>C++</li>
</ol>

<hr/>

<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C</li>
    <li>C++</li>
</ul>

<!--自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C</dd>
    <dd>C++</dd>

    <dt>位置</dt>
    <dd>重庆</dd>
    <dd>上海</dd>
    <dd>北京</dd>
    <dd>天津</dd>
</dl>


</body>
</html>

6.表格

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

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

<table border="1px">
    <tr>
<!--        colspan 跨列-->
        <td colspan="4">1-1</td>


        <td>1-4</td>
    </tr>

    <tr>
        <td rowspan="2">2-1</td>

        <td>2-4</td>
    </tr>
</table>

</body>
</html>

7.媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频和音频学习</title>
</head>
<body>

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

-->
<video src="../resource/1.mp4" controls autoplay></video>

<audio src="../resource/1.mp3" controls autoplay></audio>

</body>
</html>

8.页面结构

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

9.内联框架

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


<!--<iframe src="//player.bilibili.com/player.html?aid=68373450&bvid=BV12J41137hu&cid=118499718&page=1" -->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> -->
<!--</iframe>-->

<!--内联框架
src : 地址
width   height 设置宽度 高度

-->

<iframe src="https://www.4399.com" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<a href="https://www.7k7k.com" target="hello">点击跳转</a>

</body>
</html>

10.学习表单

<!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="8"    最长能输入几个字符
            size="30"   文本框的长度
            readonly 只读不能写

            value="请输入你的名字"  输入时候需要删除文字
            placeholder="请输入你的名字"  提示信息 直接点击输入，不用先删除文本
            required  非空判断 要求该文本必须提交，否则不能提交
    -->
    <p 名字><input type="text" name="username" value="请输入你的名字" readonly maxlength="8" size="30"></p>
    <p 名字><input type="text" name="username" placeholder="请输入你的名字"  required maxlength="8" size="30"></p>


    <!--密码框
    hidden 隐藏框框
    -->
    <p 密码><input type="password" name="pwd" hidden></p>



<!--单选框标签
    input type="radio"    输入文本标签
    value="boy"    单选框的值
    name="sex"     表示一个组
    disabled   禁用 男 这个标签
    checked 已经选择了
-->
    <p>性别:</p>
    <input type="radio" value="boy" name="sex" checked disabled>男
    <input type="radio" value="girl" name="sex">女

<!--多选框标签
    input type="checkbox"
-->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hoby">睡觉
        <input type="checkbox" value="code" name="hoby" checked>敲代码
        <input type="checkbox" value="chat" name="hoby">聊天
        <input type="checkbox" value="game" name="hoby">游戏
    </p>

<!--按钮
    input type="button"  普通按钮
    input type="image"     图片按钮
    input type="submit"     提交按钮
    input type="reset"      重置按钮
-->
 <p>按钮
     <input type="button" neme="btn1" value="点击变长">
     <input type="image" src="../resource/image/1.png" height="100px" width="100px">
 </p>





<!--下拉框:


-->
    <p>下拉框:
        <select name="列表名称" id="">
            <option value="选项的值">中国</option>
            <option value="选项的值" selected>美国</option>
            <option value="选项的值">瑞士</option>
            <option value="选项的值">印度</option>

        </select>
   </p>


<!--    文本域
cols="30"  列
 rows="10" 行
-->
    <p>反馈:
        <textarea name="textarea" id="12" cols="30" rows="10">文本内容</textarea>

    </p>


<!--    选择文件类型上传
<input type="file">
value="上传
name="upload"
-->
    <p>
        <input type="file">
        <input type="button" value="上传" name="upload">


    </p>

<!--邮件验证
-->
    <p>邮件:
        <input type="email" name="emails">

    </p>



    <P>URL:
        <input type="url" name="url
">
    </P>


<!--    数字
-->
    <p>商品数量:
        <input type="number" name="num" max="10" min="0" step="2">

    </p>

<!--    滑块
input type="range"
-->

    <p>滑块:
        <input type="range" name="vioce" min="2" max="10" step="2">

    </p>

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

    <p>搜索:
        <input type="search" name="search" >

    </p>

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


    <!--
        表单应用：
            隐藏域 ：hidden
            只读 ：readonly
            禁用  ：disabled
    -->

    <!--正则表达式 自定义邮件
    parrern="正则表达式"
    -->

    <p>自定义邮件
        <input type="text" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">

    </p>

    <!--登录-->
    <input type="submit">

    <!--重置-->
    <input type="reset" value="清空表单">
</form>


</body>
</html>

总结树状图 :

https://www.processon.com/view/link/6243cea6e0b34d0730e65e66

源自：

https://www.bilibili.com/video/BV1x4411V75C

蛋蛋叫我来巡山
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
遇见狂神说笔记-全部内容,包含所有章节
06-12
狂神说笔记-全部内容,包含所有章节
遇见狂神说GIt 学习笔记
09-26
打开md文件，优先推荐使用typora
【Spring学习历程】---- 遇见狂神说课程笔记
qq_45127312的博客
05-11 754
Spring学习教程，偏向初级
Juc全网最全学习笔记【遇见狂神说】，华为面试题及答案java
2401_84411593的博客
04-18 336
Lock ，可重入锁，可以 判断锁，非公平（可以自己设置）；不管多少个对象，对于静态的锁都只有一把锁，谁先拿到这个锁谁先执行！多个线程调用的时候，list，读取的时候，固定的，写入（覆盖）；两个方法使用的是同一把锁，谁先拿到，谁先执行！来说只有一份，对于不同的对象使用的是同一份方法，相当于这个方法是属于这个类的，如果静态方法。| 移除 | remove() | poll() | take() | poll(,) || 添加 | add() | offer() | put() | offer(,) |
Juc全网最全学习笔记【遇见狂神说】
派大星的博客
04-04 2023
B 站学习视频遇见狂神说《JUC并发编程最新版通俗易懂》 1、什么是JUC 源码 + 官方文档 面试高频问！ java.util 工具包、包、分类 业务：普通的线程代码 Thread Runnable 没有返回值、效率相比入 Callable 相对较低！ 2、线程和进程 线程、进程 进程：一个程序，QQ.exe Music.exe 程序的集合；一个进程往往可以包含多个线程，至少包含一个！ Java默认有2个线程，main和gc垃圾回收 线程：开了一个进程 Typora.
遇见狂神说 Mybatis 学习笔记（完整笔记+代码）
记录一名在读研究生的学习笔记、感悟、开发产物
01-06 773
狂神课程 Mybatis 完整学习笔记（附详细代码和操作）
遇见狂神说HTML笔记1
qq_58803729的博客
02-07 34
遇见狂神说HTML（列表、表格、音频与视频）
狂神说-Redis完整版笔记
02-08
学习狂神说-Redis视频笔记，笔记完整并且加入了个人的理解和认知，笔记工整清晰，而且适合记忆学习。
狂神说Java-SpringMVC学习笔记
05-17
狂神说Java——SpringMVC学习笔记 内容概要： 1、了解什么是SpringMVC 2、RestFul和控制器 3、转发和重定向 4、数据处理 5、JSON 6、SSM项目整合 7、Ajax 8、拦截器+文件上传下载 能学到什么：详细了解SpringMVC基础...
狂神说Java-Spring学习笔记
最新发布
05-17
狂神说Java——Spring学习笔记 内容概要： 1、了解什么是Spring 2、IOC 3、Spring配置 4、依赖注入 5、Bean的自动装配 6、注解开发 7、代理模式 8、AOP 能学到什么：详细了解Spring基础以及使用 阅读建议： 建议配合...
Java学习笔记（笔记来源：B站UP主遇见狂神说的Java课程总结）
qq_63826709的博客
07-14 610
目录Java基础（12节）Java基础01:注释Java基础02：标识符和关键字Java基础03：数据类型Java基础04：数据类型扩展及面试题讲解Java基础05：类型转换Java基础06：变量，常量，作用域Java基础07：基本运算符Java基础08：自增自减运算符，初识Math类Java基础09：逻辑运算符，位运算符Java基础10：三元运算符与小结Java基础11：包机制Java基础12：JavaDoc生成文档 Java中的注释有三种单行注释//多行注释/* */JavaDoc：文档注释/** */
狂神docker笔记.zip
09-17
狂神Docker笔记，相对来说比较全面 狂神Docker笔记，相对来说比较全面 狂神Docker笔记，相对来说比较全面
【狂神说】Spring全面详细笔记.md
12-20
【狂神说】Spring全面详细笔记
狂神说springboot笔记.zip
02-18
狂神说springboot笔记.zip
狂神说最全笔记，含ssm及springboot MD格式笔记
03-28
B站：遇见狂神说涵盖大部分内容笔记，从javaee到web到前端到后端框架到微服务一应俱全
遇见狂神说课程笔记：Dos命令
shiwei2021的博客
05-03 225
DOS命令 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AkC692Ww-1619974653575)(https://i.loli.net/2021/05/03/TOAXwGHql69L8K1.png)] 课堂笔记： 打开CMD的方式： 开始+系统+命令提示符 Win+R+输入“CMD”　（推荐使用） 在任意文件夹下面按住shift键+鼠标右键点击，在此处打开命令行窗口 资源管理器的地址栏前面加上CMD路径 管理员方式运行：选择以管理员方式运行 常用的Dos命令：
遇见狂神说SpringMvc笔记
qq_41662584的博客
04-09 1021
SpringMvc框架 #狂神说SpringMVC01：什么是SpringMVC 狂神说SpringMVC02：第一个MVC程序 狂神说SpringMVC03：RestFul和控制器 狂神说SpringMVC04：数据处理及跳转 狂神说SpringMVC05：整合SSM框架 狂神说SpringMVC06：Json交互处理 狂神说SpringMVC07：Ajax研究 狂神说SpringMVC08：拦截器+文件上传下载 ...
html笔记（狂神-完整版）
qq_49898212的博客
06-10 1460
html笔记（狂神-完整版） 生活总是让我们遍体鳞伤，但到后来，那些受伤的地方一定会变成我们最强壮的地方 背景颜色 bgcolor <body bgcolor="widte"> 靓仔 </body> 注释 <!-- 不添加注释 --> <body> 不添加注释： 靓仔 靓仔 </body> <br> <hr> <!-- 添加注释 --> <body>
遇见狂神说redis笔记
07-27
对于Redis的笔记，我可以与您分享一些基本的信息。Redis是一个开源的高性能键值存储数据库，它支持多种数据结构，如字符串、哈希、列表、集合和有序集合。以下是一些关于Redis的重要概念和功能： 1. 内存存储：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值