【狂神说Java】HTML5笔记完整教学通俗易懂

于 2023-01-18 09:12:32 发布
阅读量360 收藏 2
点赞数 2
分类专栏： 狂神说JAVA系列笔记 文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53517370/article/details/128722942
版权

文章目录

基本标签

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

<body>

<h1>一级标签</h1>
<h2>二级标签</h2>
<h6>六级标签</h6>

<!--段落标签 p+tab自动生成，间隔大-->
<p>段落间距大</p>
<p>1</p>
<p>2</p>

<!--水平线<hr/>也行，代表自闭合-->
<hr>

<!--换行，间隔小-->
换号间距小 <br>
3<br>
4<br>

<hr>

<!--粗体，斜体-->
<strong>粗体！</strong><br>
<em>斜体！</em><br>

<!--特殊符号-->
空 格 <br>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <br>

大于号：&gt; <br>
小于号：&lt; <br>

版权符号 &copy; <br>
</body>
</html>

在这里插入图片描述

图像标签

在这里插入图片描述

<img src="../resource/image/ctfshow.png" alt="alt测试" title="悬停文字title">

链接标签

  • 页面间的连接 <a href="1.html"></a>
  • 测试锚链接 <a href="#top"></a>
  • 功能性连接 <a href="mailto:2311415873@qq.com"></a>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!--a标签
href 必须
target 此窗口在哪里打开
  _blank 新标签页打开
  _self  默认此页面跳转
  也可以用iframe框架的name

-->
<h1>测试页面间的连接</h1>
<a href="./1.我的第一个网页.html" target="_blank">_blank 新标签页打开</a>

<br>

<a href="./1.我的第一个网页.html" target="_self">
  <img src="../resource/image/ctfshow.png" alt="null">
  _self  默认此页面跳转(点击图片跳转)
</a>

<h1>测试锚链接</h1>
<!--
1. 需要一个锚标记  name = top
2. 需要一个跳转 #top
-->
<a name="top"></a>
<a href="#down">去底部</a>
<p><img src="../resource/image/ctfshow.png" alt="null"></p>
<p><img src="../resource/image/ctfshow.png" alt="null"></p>
<p><img src="../resource/image/ctfshow.png" alt="null"></p>
<p><img src="../resource/image/ctfshow.png" alt="null"></p>
<p><img src="../resource/image/ctfshow.png" alt="null"></p>
<p><img src="../resource/image/ctfshow.png" alt="null"></p>
<p><img src="../resource/image/ctfshow.png" alt="null"></p>
<p><img src="../resource/image/ctfshow.png" alt="null"></p>
<p><img src="../resource/image/ctfshow.png" alt="null"></p>
<p><img src="../resource/image/ctfshow.png" alt="null"></p>
<a name="down"></a>
<a href="">回去</a>

<h1>测试功能性连接</h1>
<a href="mailto:2311415873@qq.com">点击联系我</a>


</body>
</html>

在这里插入图片描述

块元素和行内元素

  • 块元素：一行： p,h1-h6，自动换行？
  • 行内元素：都挤在一行，a,strong,em

列表标签

  • 有序列表 <ol><li>
  • 无序列表 <ul><li>
  • 自定义列表 <dl><dt><dd>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--有序列表  order list-->
<ol>
  <li>有序1</li>
  <li>有序2</li>
  <li>有序3</li>
</ol>

<hr>

<!--无序列表  unOrder list-->
<ul>
    <li>无序1</li>
    <li>无序2</li>
    <li>无序3</li>
</ul>

<hr>


<!--自定义列表
dl：标签
dt：列表名称
dd：列表选项
-->
<dl>
    <dt>列表名称</dt>
    <dd>列表选项1</dd>
    <dd>列表选项2</dd>
    <dd>列表选项3</dd>
</dl>

</body>
</html>

在这里插入图片描述

表格标签

<table>
<tr> 行 row
<td></td> 列 data
</tr>
</table>

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

<!--
table
    tr 行 row
    td 列 data
-->
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>

<br>

<table border="1px">
    <tr>
        <!-- 跨列-->
        <td colspan="3">跨列</td>
    </tr>
    <tr>
        <!-- 跨行-->
        <td rowspan="2">跨行</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

<!--五行三列-->
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">学生1</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">学生2</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

</body>
</html>

在这里插入图片描述

视频和音频

video + audio
controls 控制条
autoplay 自动播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>

<!--
controls 控制条
autoplay 自动播放
-->
<video src="../resource/video/test.mp4" width="300px" height="300px" controls></video>

<audio src="../resource/audio/test.mp3" controls></audio>


</body>
</html>

在这里插入图片描述

页面结构分析

![image.png](https://img-blog.csdnimg.cn/img_convert/68a0b555b1f4978e8b38788534741c09.png#averageHue=#a9bddd&clientId=uc32df5d2-3770-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=538&id=ua37f3c31&margin=[object Object]&name=image.png&originHeight=673&originWidth=1490&originalType=binary&ratio=1&rotation=0&showTitle=false&size=471392&status=done&style=stroke&taskId=u7e8d5a23-c8fb-453d-a603-1aec4bb8b4a&title=&width=1192)

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

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

<section> <h2>网页主体</h2> </section>

<footer> <h2>网页脚部</h2> </footer>


</body>
</html>

iframe内联框架

在这里插入图片描述

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

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

    <a href="https://www.yuque.com/martin-share/grl4p3/ezgnky1n2g3re9gw/edit#ehKvD" target="testName">点我跳转到iframe内联框架</a>

  </body>
</html>

在这里插入图片描述

表单

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

<!--表单form
action: 提交到哪里
method: get post
-->
<form action="" method="get">

  <p>名字：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="password"></p>

  <p>
    <input type="submit">
    <input type="reset">
  </p>

</form>

</body>
</html>

在这里插入图片描述

表单元素格式

get/post传值基本都是 name=value
在这里插入图片描述

单选框和多选框
<form action="" method="get">
	<p>性别：
    <!-- radio 单选框，不加name="sex"这个组别的话，就是多选框了 -->
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
  </p>

  <p>爱好：
    <!-- checkbox 多选框 -->
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby" checked>代码
    <input type="checkbox" value="chat" name="hobby">聊天
  </p>
</form>

结果：sex=boy&hobby=sleep&hobby=code

在这里插入图片描述

按钮
  • submit 提交按钮
  • reset 重置按钮
  • button 普通按钮
  • image 图像按钮
  <p>按钮：
    <input type="button" name="btn1" value="btn1-value">
    <input type="image" src="../resource/image/ctfshow.png" width="100px" height="50px">
  </p>

  <p>
    <input type="submit" value="submit-value">
    <input type="reset" value="reset-value">
  </p>

在这里插入图片描述

下拉框
  <!-- 下拉框, 列表框-->
  <p>国家
    <select name="列表名称">
      <option value="China">中国</option>
      <option value="America" selected>美国</option>
      <option value="Japan">日本</option>
    </select>
  </p>

在这里插入图片描述

文本域
  <p>反馈：
    <textarea name="textarea" cols="30" rows="10">文本内容</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="any">
  </p>

  <!-- 滑块-->
  <p>滑块:
    <input type="range" name="range" min="10" max="90" step="2">
  </p>

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

  <p>
    <input type="submit" value="submit-value">
    <input type="reset" value="reset-value">
  </p>
  
  <!-- 点label标签的文字--选中文本框-->
  <p>
    <!-- for 指向一个id-->
    <label for="testLabel">点我选中文本框</label>
    <input type="text" id="testLabel">
  </p>

在这里插入图片描述

一些input标签的应用
# radonly 文本框只读
<input type="text" name="username" value="admin" readonly>

# disabled 单(多)选框、按钮、禁止选
<input type="checkbox" value="sleep" name="hobby" disabled>

# hidden 隐藏
表单初级验证

常用方式

  • placeholder 提示信息
  • required 必须写，空的不能提交
  • pattern 正则表达式
<p>名字：<input type="text" name="username" value="admin" placeholder="请输入用户名"></p>
<p>密码：<input type="password" name="password" required></p>

在这里插入图片描述

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

<!--表单form
action: 提交到哪里
method: get post
-->
<form action="10.学习表单.html" method="get">

  <!--
  value="initValue"  默认初始值
  maxlength="8"  输入最大长度（字符为单位）
  size="30" 表格的长度（字符为单位）
  -->
  <p>名字：<input type="text" name="username" value="admin" placeholder="请输入用户名"></p>
  <p>密码：<input type="password" name="password" required></p>

  <!-- radio 单选框-->
  <p>性别：
    <!-- radio 单选框，不加name="sex"这个组别的话，就是多选框了 -->
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
  </p>

  <!-- checkbox 多选框-->
  <p>爱好：
    <!-- checkbox 多选框，-->
    <input type="checkbox" value="sleep" name="hobby" disabled>睡觉
    <input type="checkbox" value="code" name="hobby" checked>代码
    <input type="checkbox" value="chat" name="hobby">聊天
  </p>

  <!-- 按钮-->
  <p>按钮：
    <input type="button" name="btn1" value="btn1-value">
    <input type="image" src="../resource/image/ctfshow.png" width="100px" height="50px">
  </p>

  <!-- 下拉框, 列表框-->
  <p>国家
    <select name="列表名称">
      <option value="China">中国</option>
      <option value="America" selected>美国</option>
      <option value="Japan">日本</option>
    </select>
  </p>

  <!-- 文本域-->
  <p>反馈：
    <textarea name="textarea" cols="30" rows="10">文本内容</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="any">
  </p>

  <!-- 滑块-->
  <p>滑块:
    <input type="range" name="range" min="10" max="90" step="2">
  </p>

  <!-- 搜索框，和文本框类似，只是多了一个删除功能-->
  <p>搜索框:
    <input type="search" name="search">
  </p>

  <!-- 点label标签的文字--选中文本框-->
  <p>
    <!-- for 指向一个id-->
    <label for="testLabel">点我选中文本框</label>
    <input type="text" id="testLabel">
  </p>


  <p>
    <input type="submit" value="submit-value">
    <input type="reset" value="reset-value">
  </p>

</form>

</body>
</html>
就你叫Martin？
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
【狂神】HTML笔记
QinLaoDeMaChu的博客
04-25 1314
目录1. 初识HTMl2. 网页基本元素3. 网页基本标签4. 图像标签5. 链接标签6. 行内元素和块元素7. 列表8. 表格9. 媒体元素10. 页面结构分析11. iframe内联框架12. 初识表单post和get提交13. 文本框和单选框14. 按钮和多选框15. 文本域和文件域16. 搜索框滑块和简单验证17. 表单的应用18. 表单初级验证 1. 初识HTMl 什么是HTML？ Hyper Text Markup Language : 超文本标记语言 超文本包括：文字、图片、音频、视频、动画
html笔记（狂神-完整版）
qq_49898212的博客
06-10 1463
html笔记（狂神-完整版） 生活总是让我们遍体鳞伤，但到后来，那些受伤的地方一定会变成我们最强壮的地方 背景颜色 bgcolor <body bgcolor="widte"> 靓仔 </body> 注释 <!-- 不添加注释 --> <body> 不添加注释： 靓仔 靓仔 </body> <br> <hr> <!-- 添加注释 --> <body>
狂神说html笔记
m0_63323097的博客
03-05 634
狂神说html5笔记 IDEA作为主要工具 vscode的html preview 插件功能： Toggle Preview - ctrl+shift+v or cmd+shift+v Open Preview to the Side - ctrl+k v or cmd+k v HTML标签 注释标签 注释开始< !-- 注释结束-- > 标题标签： <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签&lt
狂神Java学习笔记————HTML（二）
hyx的博客
06-08 807
列表 列表就是信息资源的一种展现形式，它可以使信息结构化条理化，并且以列表的样式显示出来，以便浏览者能更快捷地获取相应的信息 可以在列表中嵌套列表，内列表和外层列表缩进明显区分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!--有序列表--
狂神说——HTML完整教学通俗易懂
05-20
"狂神说——HTML完整教学通俗易懂"这个教程旨在为初学者提供一个全面且易于理解的HTML学习资源，帮助他们掌握网页设计的基础。 1. HTML基本结构：HTML文档通常由<!DOCTYPE>声明开始，定义了文档类型。接着是<html>...
【狂神】JAVA学习全套笔记（完整版）
03-12
内容包含： 1、JAVA SE 2、MySQL + JDBC ...5、SSM 6、大前端 7、Vue 8、SpringBoot 9、Spring Security 10、Shiro 11、Spring Cloud 12、JVM 13、JUC 14、Git 15、Linux 16、Redis 17、ElasticSearch 18、Docker
狂神说java全部的笔记
10-02
【狂神说Java全部笔记】是一份非常宝贵的资源，它涵盖了Java编程的多个核心知识点，旨在帮助学习者系统地理解和掌握这门强大的编程语言。笔记的作者“狂神”以其深入浅出的讲解方式，引领着众多编程爱好者一同进步，...
狂神说java系列笔记（java基础+javaweb+ssm+微服务）全套
04-26
【标题】：“狂神说java系列笔记”涵盖了Java的基础、Web开发、SSM框架以及微服务等关键领域，是一套全面深入的Java学习资源。它旨在帮助初学者和进阶者掌握Java编程语言的核心概念，以及在实际项目开发中的应用。 ...
狂神说笔记内容.zip
08-15
以上内容只是基础部分，完整的"狂神说Java入门笔记"可能还涉及更高级的主题，如网络编程、数据库连接、Swing或JavaFX图形界面开发、XML处理等。这份资料对Java初学者来说是一份宝贵的资源，能够系统地引导他们步入...
狂神HTML学习笔记，HTML笔记整理集合。
qq_42751769的博客
04-25 663
狂神HTML学习笔记 B站视频链接：https://www.bilibili.com/video/BV1x4411V75C 1、初识HTML 1.1 前端技术栈 HTML：超文本标记语言，网页里显示的图片、音频资源等都可以与html文本关联起来，浏览器通过渲染html文本给用户呈现网页； CSS：通过CSS可以美化网页； JavaScript：通过JS可以使我们的网页动起来，提升交互性； JQuery：直接写JS比较麻烦，JQuery封装了JS； Vue：前后端分离用的一个框架。 1.2 html概述
狂神系列之HTML学习笔记
潘芝的博客
03-29 266
HTML 超文本标记语言 — Hyper Text Markup Language W3C标准 W3C：World Wide Web Consortium W3C标准包括： 结构化标准语言(HTML,XML) 表现标准语言(CSS) 行为标准(DOM,ECMAScript) 1.网页基本信息 <!--告诉浏览器，使用什么规范--> <!DOCTYPE html> <html lang="en"> <!--head标签代表网
狂神说HTML+CSS学习笔记
weixin_45145726的博客
10-30 9356
HTML笔记 1、初识HTML HyperTextMarkupLanguage（超文本标记语言） < body >、< /body>等成对的标签，分别叫做开放标签和闭合标签， 单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素。 html注释：< !–注释内容–> <!--DOCTYPE：告诉浏览器使用什么规范（默认是html）--> <!DOCTYPE html> <!--语言 zh中文 en英
狂神B站之HTML笔记
lisa2017_的博客
02-17 503
文章目录HTML01 初始HTMl02 网页基本元素03 网页基本标签04 图像标签05 链接标签06 行内元素和块元素07 列表08 表格09 媒体元素10 页面结构分析11 iframe内联框架12 初识表单post和get提交13 文本框和单选框14 按钮和多选框15 文本域和文件域16 搜索框滑块和简单验证17 表单的应用18 表单初级验证19 HTML总结18 表单初级验证19 HTML总结 HTML 狂神B站视频：https://www.bilibili.com/video/BV1x4411V7
狂神HTML笔记
qq_39181839的博客
03-02 239
1.初识HTML： 2.元素=标签+属性+内容 （1）网页基本标签 标题标签 <h1>一级标签</h1> <h2>二级标签</h2> 段落标签 <p>跑得快 跑得快</p> 水平线标签 <hr/> 换行标签 跑得快 跑得快<br/> 粗体、斜体 <strong>i love u</strong> i love u 特殊符号 空格： 
前端HTML学狂神笔记
Green_hand001的博客
05-29 1418
HTML 什么是HTML Hyper Text Markup Language(超文本标记语言) 超文本包括：文字，图片，音频，视频，动画等 w3c标准 WOrld Wide Web Consortium(万维网联盟) 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 W3C标准包括 结构化标准语言（HTML、XML） 表现标准语言（CSS） 行为标准（DOM、ECMAScript） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8BX4
HTML笔记
YANKUOP的博客
08-12 409
HTML学习记录
狂神Java学习笔记——HTML（一）
hyx的博客
06-08 663
初识HTML HyperTextMarkupLanguage（超文本标记语言） < body >、< /body>等成对的标签，分别叫做开放标签和闭合标签，单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素。 html注释：< !–注释内容–> <!--DOCTYPE：告诉浏览器使用什么规范（默认是html）--> <!DOCTYPE html> <!--语言 zh中文 en英文--> <htm
狂神说java系列笔记
最新发布
05-09
狂神说Java系列笔记是一系列由狂神（Java资深讲师）所著的Java学习笔记，包括Java基础、JavaWeb、Spring、SpringBoot、MyBatis等方面的内容。这个系列笔记主要面向Java初学者和希望系统学习Java技术的人群，通过简洁...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

就你叫Martin？

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值