【前端】HTML5学习笔记
✨HTML
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
✨课程链接
【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili
✨学习笔记
第一个网页
<!--!DOCTYPE 告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head 网页头部-->
<head>
<!-- meta 描述性标签 描述网页信息-->
<!-- meta 一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="IU">
<meta name="description" content="Test">
<!-- title 网页标题-->
<title>Hello World</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>设计模式（Design Pattern）是前辈们对代码开发经验的总结，是解决特定问题的一系列套路。它不是语法规定，而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。</p>
<p>1995 年，GoF（Gang of Four，四人组/四人帮）合作出版了《设计模式：可复用面向对象软件的基础》一书，共收录了 23 种设计模式，从此树立了软件设计模式领域的里程碑，人称「GoF设计模式」。</p>
<!--换行标签-->
<p>设计模式（Design Pattern）是前辈们对代码开发经验的总结，是解决特定问题的一系列套路。它不是语法规定，而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。</p>
<br>
<p>1995 年，GoF（Gang of Four，四人组/四人帮）合作出版了《设计模式：可复用面向对象软件的基础》一书，共收录了 23 种设计模式，从此树立了软件设计模式领域的里程碑，人称「GoF设计模式」。</p>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
<h1>字体样式标签</h1>
<strong>粗体</strong>
<em>斜体</em>
<br>
<!--特殊符号-->
<!--空格-->
空 格
>
<
©
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--src图片地址（必填） alt图片名字（必填）-->
<img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">
<a href="4.%20链接标签.html#down"> 底部</a>
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<!--a标签-->
<!--href（必填）表示跳转到哪个页面-->
<!--target 表示窗口在哪里打开-->
<!-- _blank 新标签打开-->
<!-- _self 本页面打开-->
<!--块元素-->
<!--无论内容多少，该元素独占一行(p、h1-h6...)-->
<!--行内元素-->
<!--内容撑开宽度﹐左右都是行内元素的可以在排在一行( a . strong . em ... )-->
<body>
<a name="top">顶部</a>
<a href="1.%20我的第一个网页.html" target="_blank">点击跳转我的第一个网页</a>
<a href="https://www.baidu.com" target="_self">点击跳转百度</a>
<br>
<a href="1.%20我的第一个网页.html">点击跳转我的第一个网页
<img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">
</a>
<!--锚链接-->
<!--1. 需要一个锚标记-->
<!--2. 跳转到标记-->
<!--<a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!-- <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!-- <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!-- <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!-- <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!-- <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!-- <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a>-->
<!--功能性链接-->
<!--邮箱链接-->
<!--QQ推广链接-->
<a href="mailto:666@163.com">mailto</a>
<a href="#top">回到顶部</a>
<a name="down">底部</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>C++</li>
<li>PHP</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>Java</li>
<li>Python</li>
<li>C</li>
<li>C++</li>
<li>PHP</li>
</ul>
<hr/>
<!--自定义列表
dl：标签
dt：标题
dd：内容-->
<dl>
<dt>title1</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dt>title2</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</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>
<!-- 跨列-->
<td colspan="5">跨5列</td>
</tr>
<tr>
<!-- 跨行-->
<td rowspan="2">跨2行</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<!-- <td>5</td>-->
</tr>
</table>
<hr/>
<table border="1px">
<tr>
<td colspan="3">表格测试</td>
</tr>
<tr>
<td rowspan="2">跨2行</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>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--<video src="源" controls控制条 autoplay自动播放/></video>-->
<audio src="../resources/audio/IU,SUGA%20-%20에잇(Prod.&Feat.%20SUGA%20of%20BTS).flac" controls autoplay>
</audio>
</body>
</html>
页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<p>header 标题头部区域的内容(用于页面或页面中的一块区域)</p>
<p>footer 标记脚部区域的内容（用于整个页面或页面的一块区域)</p>
<p>section Web页面中的一块独立区域</p>
<p>article 独立的文章内容</p>
<p>aside 相关内容或应用(常用于侧边栏)</p>
<p>nav 导航类辅助内容<p/>
<header><h1>网页头部</h1></header>
<header>网页头部</header>
<hr>
<section><h1>网页主体</h1></section>
<section>网页主体</section>
<hr>
<footer><h1>网页脚部</h1></footer>
<footer>网页脚部</footer>
</body>
</html>
内联框架
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内联框架</title></head><body><!--ifram内联框架--><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><!--<iframe src="https://www.baidu.com" width="300px" height="300px"></iframe>--><iframe src="" name="baidu" width="1000px" height="800px"></iframe><a href="https://www.baidu.com" target="baidu">点击跳转</a></body></html>
表单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单</title></head><body><!--表单formaction 表单提交的位置 网站/请求处理地址method post get 提交方式 get方式提交 可以在url中看到提交的信息 不安全 高效 post方式提交 比较安全 传输大文件--><p>type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和button，默认为 text</p><p>name 指定表单元素的名称</p><p>value 元素的初始值。type为radio时必须指定一个值</p><p>size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位</p><p>maxlength type为text或 password时，输入的最大字符数</p><p>checked type为radio或checkbox时，指定按钮是否是被选中</p><p>readonly 只读</p>d<p>disable 禁用</p><p>hidden 隐藏 -> 传递默认值</p><h1>注册</h1><form action="1.%20我的第一个网页.html" method="get"><!-- 文本输入框--> <p>用户名 <input type="text" name="username" value="初始值" maxlength="8" size="30"></p> <p>用户名 <input type="text" name="username" value="readonly" readonly maxlength="8" size="30"></p><!-- 密码框--> <p>密 码 <input type="password" name="passwd"></p> <p>密 码 <input type="password" name="passwd" hidden></p><!-- 单选框--><!-- name相同为同一组--> <p>性 别 <input type="radio" value="boy" name="sex" checked/>男 <input type="radio" value="boy" name="sex" checked disabled/>男 <input type="radio" value="girl" name="sex"/>女 </p><!-- 多选框--> <p>爱好 <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby" checked>coding <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby">游戏 <input type="checkbox" value="girl" name="hobby">girl </p><!-- 按钮--> <p> <input type="button" name="btn1" value="按钮"><!-- <input type="image" src="../resources/image/IU_16x10.png">--> </p> <p> <input type="submit"> <input type="reset" value="清空表单"> </p><!-- 下拉框 列表框--> <p>下拉框 <select name="列表名称"> <option value="111">选项一</option> <option value="222">选项二</option> <option value="333" selected>选项三</option> <option value="444">选项四</option> <option value="555">选项五</option> </select> </p><!-- 文本域--> <p>textarea <textarea name="textarea" cols="50" 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="number" max="100" min="0" step="10"> </p><!-- 滑块--> <p>音量 <input type="range" name="voice" min="0" max="100" step="10"> </p><!-- 搜索--> <p>搜索 <input type="search" name="search"> </p><!-- 增强鼠标可用性--> <p> <label for="mark">点我聚焦位置</label> <input type="text" id="mark"> </p> <p> <input type="submit" disabled> </p></form></body></html>
表单验证
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单验证</title></head><body><!--表单formaction 表单提交的位置 网站/请求处理地址method post get 提交方式 get方式提交 可以在url中看到提交的信息 不安全 高效 post方式提交 比较安全 传输大文件--><p>placeholder 提示信息</p><p>required 非空判断</p><p>pattern 正则表达式</p><form action="1.%20我的第一个网页.html" method="get"><!-- 文本输入框--> <p>用户名 <input type="text" name="username" placeholder="请输入用户名" required></p><!-- 密码框--> <p>密 码 <input type="password" name="passwd" placeholder="请输入密码"required></p><!-- 正则表达式验证--> <p>正则表达式验证<input type="text" required name="test" pattern="[A-z]{3}" title="只能包含三个字母的文本字段（数字或特殊字符）"></p> <p> <input type="submit"> </p></form></body></html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14939352.html
版权所有，如需转载请注明出处。
