【HTML】HTML5学习笔记
程序员文章站
2022-06-10 13:33:49
✨HTML HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 ✨课程 https://ww ......
✨html
html的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体。html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等。
✨课程
https://www.bilibili.com/video/bv1x4411v75c
✨学习笔记
我的第一个网页
<!--!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>
<!--表单form
action 表单提交的位置 网站/请求处理地址
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>
<!--表单form
action 表单提交的位置 网站/请求处理地址
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
版权所有，如需转载请注明出处。