010_HTML5

初识HTML

什么是HTML

Hyper Text Markup Language
超文本标记语言
超文本包括：文字、图片、音频、视频、动画等

HTML发展史

HTML5的优势

W3C标准

常见IDE

IDEA开发HTML

IDEA创建HTML文件，并用浏览器打开

配置浏览器

HTML基础

HTML基本结构

HTML注释

<!-- HTML注释 -->

网页基本信息

DOCTYPE声明
标签 </li> <li> <meta>标签 </li> </ol> <pre><code class=”language-html”><!– DOCTYPE：告诉浏览器，要使用什么规范 –> <!DOCTYPE html> <html lang=”en”> <!– head标签代表网页头部 –> <head> <!– meta描述性标签，用来描述网站的一些信息 –> <!– meta一般用来做SEO（搜索引擎优化） –> <meta charset=”UTF-8″> <meta name=”keywords” content=”网站关键词描述”> <meta name=”description” content=”网站描述”> <!– title网页标题 –> <title>我的第一个页面</title> </head> <!– body标签代表网页主体 –> <body> Hello World! </body> </html> </code></pre> <a name=”hPOMI”></a> <h2 id=”网页基本标签”>网页基本标签</h2> <ol> <li>标题标签</li> <li>段落标签</li> <li>换行标签</li> <li>水平线标签</li> <li>字体样式标签</li> <li>注释和特殊符号</li> </ol> <pre><code class=”language-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> <!– 段落标签 –> <h1>沁园春·雪</h1> 北国风光，千里冰封，万里雪飘。 望长城内外，惟余莽莽；大河上下，顿失滔滔。 山舞银蛇，原驰蜡象，欲与天公试比高。 须晴日，看红装素裹，分外妖娆。 江山如此多娇，引无数英雄竞折腰。 惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。 一代天骄，成吉思汗，只识弯弓射大雕。 俱往矣，数风流人物，还看今朝。 <!– 水平线标签 –> <hr/> <!– 换行标签 –> <h1>沁园春·长沙</h1> 独立寒秋，湘江北去，橘子洲头。 看万山红遍，层林尽染；漫江碧透，百舸争流。 鹰击长空，鱼翔浅底，万类霜天竞自由。 怅寥廓，问苍茫大地，谁主沉浮？ 携来百侣曾游。忆往昔峥嵘岁月稠。 恰同学少年，风华正茂；书生意气，挥斥方遒。 指点江山，激扬文字，粪土当年万户侯。 曾记否，到中流击水，浪遏飞舟？ <!– 字体样式标签 –> 粗体 样本 hello 斜体 样本 hello <!– 特殊符号 –> 空格 空      格 大于 > 小于 < 版权符号 ©版权所有 </body> </html> </code></pre> <a name=”7uLBq”></a> <h2 id=”图像标签”>图像标签</h2> <img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1610725493669-1718ef30-35bc-41b8-b095-6d964a88ad08.png#align=left&display=inline&height=396&margin=%5Bobject%20Object%5D&name=image.png&originHeight=396&originWidth=1097&size=181399&status=done&style=none&width=1097″ alt=”image.png” loading=”lazy”> <pre><code class=”language-html”><!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>图像标签</title> </head> <body> <!– src：图像地址（必填） 相对地址（推荐使用），绝对地址 ../ 上一级目录 alt：图像名称（必填） –> <img src=”../resources/image/1.jpg” alt=”图片名称” title=”悬停文字” width=”1024″ height=”577″> <img src=”../resources/image/2.jpg” alt=”图片名称” title=”悬停文字” width=”1024″ height=”577″> </body> </html> </code></pre> <a name=”cpNNK”></a> <h2 id=”链接标签”>链接标签</h2> <img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1610726675846-f89199d5-3729-49ed-94cc-de2b976853a2.png#align=left&display=inline&height=157&margin=%5Bobject%20Object%5D&name=image.png&originHeight=157&originWidth=871&size=102853&status=done&style=none&width=871″ alt=”image.png” loading=”lazy”> <ol> <li>文本超链接</li> <li>图像超链接</li> <li>页面间链接：从一个页面链接到另一个页面</li> <li>锚链接</li> <li>页面间链接+锚链接：从一个页面链接到另一个页面的锚点</li> <li>功能性链接 <ol> <li>邮件链接</li> <li>QQ链接：使用QQ推广网站的推广工具</li> </ol> </li> </ol> <img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1610809069911-a5526e42-a633-49b5-be08-bd4b2f1b7634.png#align=left&display=inline&height=864&margin=%5Bobject%20Object%5D&name=image.png&originHeight=864&originWidth=847&size=102103&status=done&style=none&width=847″ alt=”image.png” loading=”lazy”> <pre><code class=”language-html”><!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>链接标签</title> </head> <body> <a name=”top” href=”#bottom”>直达底部</a> <!– a标签 href：必填，表示要跳转到哪个页面 target：表示窗口在哪里打开 _blank 在新标签打开 _self 默认，在本页打开 –> <a href=”1.我的第一个网页.html” target=””>默认跳转</a> <a href=”1.我的第一个网页.html” target=”_self”>本页跳转</a> <a href=”https://www.baidu.com” target=”_blank”>新标签跳转</a> <a href=”1.我的第一个网页.html”> <img src=”../resources/image/1.jpg” alt=”图片名称” title=”悬停文字” width=”1024″ height=”577″> </a> <a> <img src=”../resources/image/1.jpg” alt=”图片名称” title=”悬停文字” width=”1024″ height=”577″> </a> <a> <img src=”../resources/image/1.jpg” alt=”图片名称” title=”悬停文字” width=”1024″ height=”577″> </a> <a> <img src=”../resources/image/1.jpg” alt=”图片名称” title=”悬停文字” width=”1024″ height=”577″> </a> <!– 锚链接： 1.需要一个锚标记，使用name 2.跳转到标记 –> <a name=”bottom” href=”#top”>回到顶部</a> <!– 页面间链接+锚链接：从一个页面链接到另一个页面的锚点 –> <a href=”2.基本标签.html/#bottom” target=”_blank”>跳转到基本标签页面底部</a> <!– 功能性链接： 邮件链接：mailto QQ链接 –> <a href=”mailto:wl3pb@163.com”>点击给我发邮件</a> <a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=962307062&site=qq&menu=yes”><img border=”0″ src=”http://wpa.qq.com/pa?p=2:962307062:53″ alt=”在线咨询” title=”在线咨询”/></a> </body> </html> </code></pre> <a name=”V7PFi”></a> <h2 id=”块元素和行内元素”>块元素和行内元素</h2> <img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1610809208419-aa2a63e7-2133-4798-b3af-0dc9dadcd7d9.png#align=left&display=inline&height=489&margin=%5Bobject%20Object%5D&name=image.png&originHeight=489&originWidth=1163&size=116043&status=done&style=none&width=1163″ alt=”image.png” loading=”lazy”> <a name=”cp4Eh”></a> <h2 id=”列表标签”>列表标签</h2> <img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1610809416138-a9e03834-100b-4d46-95cc-c29f0f73ca31.png#align=left&display=inline&height=337&margin=%5Bobject%20Object%5D&name=image.png&originHeight=337&originWidth=977&size=201109&status=done&style=none&width=977″ alt=”image.png” loading=”lazy”> <pre><code class=”language-html”><!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>列表标签</title> </head> <body> <!–有序列表–> <ol> <li>java</li> <li>python</li> <li>javascript</li> </ol> <hr/> <!–无序列表–> <ul> <li>java</li> <li>python</li> <li>javascript</li> </ul> <hr/> <!–自定义列表 dl:标签 dt:列表名称 dd:列表内容 –> <dl> <dt>编程语言</dt> <dd>java</dd> <dd>python</dd> <dd>javascript</dd> <dt>武功秘籍</dt> <dd>九阳神功</dd> <dd>九阴真经</dd> <dd>降龙十八掌</dd> </dl> </body> </html> </code></pre> <a name=”On93g”></a> <h2 id=”表格标签”>表格标签</h2> <img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1610810166567-24db16b4-861f-45cd-8905-74f4ee07e81d.png#align=left&display=inline&height=528&margin=%5Bobject%20Object%5D&name=image.png&originHeight=528&originWidth=1106&size=152761&status=done&style=none&width=1106″ alt=”image.png” loading=”lazy”> <pre><code class=”language-html”><!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>表格标签</title> </head> <body> <!–表格标签table 行 tr 列 td –> <table border=”1px”> <tr> <!–colspan 跨列–> <td colspan=”4″>1-1</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> </tr> </table> </body> </html> </code></pre> <a name=”TtZ8j”></a> <h2 id=”媒体元素：音频和视频”>媒体元素：音频和视频</h2> <img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1610810876173-1b9f100f-ea68-4c00-a2ac-aa6f3201eb1a.png#align=left&display=inline&height=214&margin=%5Bobject%20Object%5D&name=image.png&originHeight=214&originWidth=360&size=43328&status=done&style=none&width=360″ alt=”image.png” loading=”lazy”> <pre><code class=”language-html”><!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>媒体元素</title> </head> <body> <!–视频和音频 src 资源路径 controls 控制条 autoplay 自动播放 –> <video src=”../resources/video/1.mp4″ controls autoplay></video> <audio src=”../resources/audio/1.mp3″ controls autoplay></audio> </body> </html> </code></pre> <a name=”ITxcA”></a> <h1 id=”页面结构分析”>页面结构分析</h1> <img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1610893578889-3b1b85df-9fea-48f5-9d87-26a5ac56aa4b.png#align=left&display=inline&height=565&margin=%5Bobject%20Object%5D&name=image.png&originHeight=565&originWidth=1262&size=269098&status=done&style=none&width=1262″ alt=”image.png” loading=”lazy”> <pre><code class=”language-html”><!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>页面结构</title> </head> <body> <header> <h1>页面头部</h1> </header> <section> <h1>页面主体</h1> </section> <footer> <h1>页面脚部</h1> </footer> </body> </html> </code></pre> <a name=”2Y7Wr”></a> <h1 id=”iframe内联框架”>iframe内联框架</h1> <s><img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1610894147163-d7d34118-c2da-4944-93b2-852d17e31840.png#align=left&display=inline&height=250&margin=%5Bobject%20Object%5D&name=image.png&originHeight=250&originWidth=776&size=73012&status=done&style=none&width=776″ alt=”image.png” loading=”lazy”></s> <pre><code class=”language-html”><!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>iframe内联框架</title> </head> <body> <!–iframe内联框架 src 地址 w-h 宽度高度 name 标识名 –> <iframe src=”https://www.baidu.com” frameborder=”1″ width=”800px” height=”500px”></iframe> <!–点击显示跳转页面嵌入到标识名iframe–> <iframe src=”” name=”hello” frameborder=”1″ width=”800px” height=”500px”></iframe> <a href=”3.图像标签.html” target=”hello”>点击显示跳转页面嵌入到标识名iframe</a> </body> </html> </code></pre> <a name=”KVMKF”></a> <h1 id=”表单”>表单</h1> <img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1610895462724-08ba034c-c0d2-42fd-94e3-4fc04d6925c2.png#align=left&display=inline&height=578&margin=%5Bobject%20Object%5D&name=image.png&originHeight=578&originWidth=1151&size=291928&status=done&style=none&width=1151″ alt=”image.png” loading=”lazy”> <pre><code class=”language-html”><!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>表单</title> </head> <body> <h1>注册</h1> <!–表单form action 表单提交的位置，可以是网站，也可以是一个请求处理地址 method post，get提交方式 get方式提交：可以在url中看到我们提交的信息，不安全，高效 post方式提交：可以传输大文件，比较安全，但可以在Network查看，可以处理为不能查看 –> <form action=”1.我的第一个网页.html” method=”post”> <input type=”text” name=”username”> <input type=”password” name=”pwd”> <input type=”submit”></input> <input type=”reset”> </form> </body> </html> </code></pre> <a name=”G4hiQ”></a> <h2 id=”表单元素”>表单元素</h2> <img src=”https://cdn.nlark.com/yuque/0/2021/png/2707044/1611066187817-29b1c261-670d-47fa-a247-5b475b29fd95.png#align=left&display=inline&height=523&margin=%5Bobject%20Object%5D&name=image.png&originHeight=523&originWidth=1084&size=408230&status=done&style=none&width=1084″ alt=”image.png” loading=”lazy”> <ol> <li>checked 单选框和多选框选中</li> <li>selected 下拉框选中</li> <li>readonly 只读</li> <li>disabled 禁用</li> <li>hidden 隐藏</li> </ol> <pre><code class=”language-html”><!–单选框 radio value 值 name 表示组 –> <input type=”radio” value=”boy” name=”sex”/>男 <input type=”radio” value=”girl” name=”sex”/>女 <!–多选框 checkbox value 值 name 表示组 –> <input type=”checkbox” value=”1″ name=”number”/>一 <input type=”checkbox” value=”2″ name=”number”/>二 <input type=”checkbox” value=”3″ name=”number”/>三 <!–文本域 textarea cols 列 rows 行 –> 反馈 <textarea name=”fankui” cols=”20″ rows=”10″>文本内容</textarea> <!–文本域 textarea cols 列 rows 行 –> 文件域 <input type=”file” name=”files”/> 数字 <input type=”number” name=”num” max=”100″ min=”10″ step=”5″/> 滑块 <input type=”range” name=”voice” max=”100″ min=”0″ step=”2″/> 搜索框，有叉号，可以删除 <input type=”search” name=”search”/> <!–label标签，增强鼠标可用性，点击文件，文本框获取焦点–> <label for=”mark”>你点我试试</label> <input type=”search” name=”search” id=”mark”/> </code></pre> <a name=”rveye”></a> <h2 id=”表单的初级验证”>表单的初级验证</h2> <ol> <li>placeholder 提示信息</li> <li>required 非空</li> <li>pattern 正则表达式 <a name=”uZzB7″></a></li> </ol> <h1 id=”总结”>总结</h1> <img src=”https://cdn.nlark.com/yuque/0/2021/jpeg/2707044/1611070587524-8527c207-f34c-4a65-82e9-a03b045a3860.jpeg” alt=”” loading=”lazy”>

本文链接：https://www.cnblogs.com/wl3pb/p/14427857.html

010_HTML5

初识HTML

什么是HTML

HTML发展史

HTML5的优势

W3C标准

常见IDE

IDEA开发HTML

IDEA创建HTML文件，并用浏览器打开

配置浏览器

HTML基础

HTML基本结构

HTML注释

网页基本信息

010_HTML5的更多相关文章

随机推荐

热门专题

目录导航