HTML5

alpha0360 · Jun 23, 2021 · 8d795c8 · 8d795c8
1 parent a3bdc7a
commit 8d795c8
Show file tree

Hide file tree

Showing 29 changed files with 1,405 additions and 0 deletions.
diff --git a/文档/02-Java Web/HTML5入门.md b/文档/02-Java Web/HTML5入门.md
diff --git a/文档/02-Java Web/HTML5总结.xmind b/文档/02-Java Web/HTML5总结.xmind
diff --git a/文档/02-Java Web/img/html/1624355136893.png b/文档/02-Java Web/img/html/1624355136893.png
diff --git a/文档/02-Java Web/img/html/1624359055312.png b/文档/02-Java Web/img/html/1624359055312.png
diff --git a/文档/02-Java Web/img/html/1624359183287.png b/文档/02-Java Web/img/html/1624359183287.png
diff --git a/文档/02-Java Web/img/html/1624360539022.png b/文档/02-Java Web/img/html/1624360539022.png
diff --git a/文档/02-Java Web/img/html/1624414470219.png b/文档/02-Java Web/img/html/1624414470219.png
diff --git a/文档/02-Java Web/img/html/1624415372884.png b/文档/02-Java Web/img/html/1624415372884.png
diff --git a/文档/02-Java Web/img/html/1624416124867.png b/文档/02-Java Web/img/html/1624416124867.png
diff --git a/文档/02-Java Web/img/html/1624416727907.png b/文档/02-Java Web/img/html/1624416727907.png
diff --git a/文档/02-Java Web/img/html/1624417388145.png b/文档/02-Java Web/img/html/1624417388145.png
diff --git a/文档/02-Java Web/img/html/1624417663541.png b/文档/02-Java Web/img/html/1624417663541.png
diff --git a/文档/02-Java Web/img/html/1624417927824.png b/文档/02-Java Web/img/html/1624417927824.png
diff --git a/文档/02-Java Web/img/html/1624419779586.png b/文档/02-Java Web/img/html/1624419779586.png
diff --git a/文档/02-Java Web/img/html/1624419800971.png b/文档/02-Java Web/img/html/1624419800971.png
diff --git a/文档/02-Java Web/img/html/1624420531562.png b/文档/02-Java Web/img/html/1624420531562.png
diff --git a/文档/02-Java Web/img/html/1624421362129.png b/文档/02-Java Web/img/html/1624421362129.png
diff --git a/文档/02-Java Web/img/html/1624422238259.png b/文档/02-Java Web/img/html/1624422238259.png
diff --git a/文档/02-Java Web/img/html/1624423298961.png b/文档/02-Java Web/img/html/1624423298961.png
diff --git a/文档/02-Java Web/img/html/1624424387533.png b/文档/02-Java Web/img/html/1624424387533.png
diff --git a/文档/02-Java Web/img/html/HTML5总结.png b/文档/02-Java Web/img/html/HTML5总结.png
diff --git a/源码/02-Java Web/HTML5/html/10.表单.html b/源码/02-Java Web/HTML5/html/10.表单.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>登陆注册</title>
+</head>
+<body>
+<h1>注册</h1>
+
+<!--
+    form表单
+    action:表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
+    method:post / get 请求方式
+        get方式提交：我们可以在ur1中看到我们提交的信息，不安全，高效
+        post：比较安全，可以传输大文件
+-->
+<form action="DemoHtml01.html" method="post">
+    <!--
+        文本输入框:input type="text"
+        value="前端" 默认初始值
+        maxlength="8" 最长能写几个字符
+        size="30" 文本框的长度
+    -->
+    <p>名字:<input type="text" name="username" placeholder="请输入用户名"> </p>
+    <!--
+        密码框:input type="pwd"
+    -->
+    <p>密码:<input type="password" hidden name="password"> </p>
+
+    <!--
+        单选框标签:input type="radio"
+        value:单选框的值
+        name:表示组
+        checked:默认选中
+    -->
+    <p>性别:
+        <input type="radio" value="man" name="sex" checked>男
+        <input type="radio" value="woman" 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="btn" value="点击变长">
+        <input type="image" src="../resources/image/02.jpg" width="200px" height="200px">
+    </p>
+
+    <!--
+        下拉框,列表框
+    -->
+    <p>国家:
+        <select name="列表名称">
+            <option value="China">中国</option>
+            <option value="USA">美国</option>
+            <option value="Russia">俄罗斯</option>
+            <option value="UK">英国</option>
+            <option value="France">法国</option>
+        </select>
+    </p>
+
+    <!--
+        文本域
+        textarea name="textarea"
+        cols="40" rows="10"
+    -->
+    <p>反馈:
+        <textarea name="textarea" cols="40" rows="10">文本内容</textarea>
+    </p>
+
+    <!--
+        文件域
+        input type="file" name="files"
+    -->
+    <p>
+        <input type="file" name="files">
+        <input type="button" name="upload" value="上传">
+    </p>
+
+    <!--
+        邮件: 会简单验证是否是邮箱地址
+		url: 会简单验证是否是网络地址
+        number: 数字验证
+    -->
+    <p>
+        邮箱：<input type="email" name="email">
+        url：<input type="url">
+    </p>
+
+    <!--
+        数字验证
+        max: 最大数量
+        min: 最小数量
+        step: 每次点击增加或减少的数量
+    -->
+    <p>
+        商品数量:<input type="number" name="数量" max="100" min="1" step="1" required>
+    </p>
+
+    <!--滑块-->
+    <p>
+        音量:<input type="range" min="0" max="100" name="voice" step="2">
+    </p>
+
+    <!--搜索框-->
+    <p>
+        搜索:<input type="search">
+    </p>
+
+    <!--增强鼠标可用性-->
+    <p>
+        <label for="mark">你点我试试!</label>
+        <input type="text" id="mark">
+    </p>
+
+    <!--正则表达式-->
+    <p>自定义邮箱:
+        <input type="text" name="myEmail" 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>
diff --git a/源码/02-Java Web/HTML5/html/3.图像，超链接，网页布局.html b/源码/02-Java Web/HTML5/html/3.图像，超链接，网页布局.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<!--img学习
+    src:资源地址
+    相对地址(推荐使用，绝对地址
+    ../     --上级地址
+    alt：在图片加载失败的时候，就会用文字代替
+    title:鼠标悬停在图片上时，所显示的名字
+    width height 图片的高和宽-->
+<img src="path" alt="text" title="text" width="x" height="y">
+<img src="../resources/image/02.jpg" alt="个人头像" title="subeiLY" width="200" height="200">
+
+<br/>
+<!--href：跳转页面的地址
+    a标签内文字：即显示的文字
+    可以把图片放在a标签内，点击图片跳转网页
+    target:表示在哪打开新网页_self:当前标签打开 _blank:新的页面中打开-->
+<a href="https://www.baidu.com" target="_blank" title="123">请咨询百度</a>
+<br/>
+
+<!--锚链接
+    1.需要一个标记锚
+    2.跳转到标记
+    #页面内跳转-->
+<a name="top"></a>
+<a href="#top">回到顶部</a>
+<br/>
+
+<!--可以在网址后添加#号跳到对应网站的对应位置-->
+<a href="https://www.baidu.com#down">百度底部</a> <br/>
+
+<!--功能性链接
+    邮箱链接：mailto
+    qq链接
+-->
+<a href="mailto:29*******4qq.com">点击联系我</a>
+<a target="_blank"
+   href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes"/>
+
+
+<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2943357594&site=qq&menu=yes">
+    <img border="0" src="http://wpa.qq.com/pa?p=2:2943357594:52" alt="有事您Q我" title="有事您Q我"/>
+</a>
+
+</body>
+</html>
diff --git a/源码/02-Java Web/HTML5/html/4.列表.html b/源码/02-Java Web/HTML5/html/4.列表.html
@@ -0,0 +1,56 @@
+<!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>
+    <li>Android</li>
+</ol>
+
+<hr/>
+
+<!--
+    无序列表
+    应用范围:导航,侧边栏……
+-->
+<ul>
+    <li>Java</li>
+    <li>Python</li>
+    <li>前端</li>
+    <li>运维</li>
+    <li>C/C++</li>
+    <li>Android</li>
+</ul>
+
+<hr/>
+
+<!--
+    自定义列表
+    dl:标签
+    dt:列表名称
+    dd:列表内容
+-->
+<dl>
+    <dt>dt</dt>
+
+    <dd>dd1</dd>
+    <dd>dd2</dd>
+    <dd>dd3</dd>
+    <dd>dd4</dd>
+    <dd>dd5</dd>
+</dl>
+
+
+</body>
+</html>
diff --git a/源码/02-Java Web/HTML5/html/5.表格.html b/源码/02-Java Web/HTML5/html/5.表格.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>表格学习</title>
+</head>
+<body>
+<!--
+    表格table
+    行:tr
+    列:td
+-->
+
+<table border="1px">
+    <tr><!--colspan 跨列-->
+        <td colspan="5">1-1</td>
+        <td>1-2</td>
+        <td>1-3</td>
+        <td>1-4</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>
+        <td>3-4</td>
+    </tr>
+</table>
+
+</body>
+</html>
diff --git a/源码/02-Java Web/HTML5/html/6.媒体元素.html b/源码/02-Java Web/HTML5/html/6.媒体元素.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>媒体元素的学习</title>
+</head>
+<body>
+<!--
+    视频
+    src:资源路径
+    controls:控制面板
+    autoplay:自动播放
+-->
+<video src="xxx/xxx/xxx" controls autoplay></video>
+
+<!--音频-->
+<audio src="xxx/xxx/xxx" controls autoplay></audio>
+
+
+<!---->
+
+
+
+
+</body>
+</html>
diff --git a/源码/02-Java Web/HTML5/html/7.页面结构.html b/源码/02-Java Web/HTML5/html/7.页面结构.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>页面结构</title>
+</head>
+<body>
+<!--页面结构-->
+<head>
+    <h2>页面头部</h2>
+</head>
+
+<section>
+    <h2>页面主体</h2>
+</section>
+
+<footer>
+    <h2>页面脚部</h2>
+</footer>
+</body>
+</html>
diff --git a/源码/02-Java Web/HTML5/html/8.iframe.html b/源码/02-Java Web/HTML5/html/8.iframe.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>iframe内联框架</title>
+</head>
+<body>
+
+<iframe src="path" name="mainFrame"></iframe>
+
+<hr/>
+
+<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>
diff --git a/源码/02-Java Web/HTML5/resources/image/02.jpg b/源码/02-Java Web/HTML5/resources/image/02.jpg