010_HTML5

顺晟科技

2022-09-15 19:22:35

246

初识HTML
- 什么是HTML
- HTML发展史
- HTML5的优势
- W3C标准
- 常见IDE
IDEA开发HTML
- IDEA创建HTML文件，并用浏览器打开
- 配置浏览器
HTML基础
- HTML基本结构
- HTML注释
- 网页基本信息
- 网页基本标签
- 图像标签
- 链接标签
- 块元素和行内元素
- 列表标签
- 表格标签
- 媒体元素：音频和视频
页面结构分析
iframe内联框架
表单
- 表单元素
- 表单的初级验证
总结

初识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 html> <html lang="en">  <head>   <meta charset="UTF-8"> <meta name="keywords" content="网站关键词描述"> <meta name="description" content="网站描述">  <title>我的第一个页面</title> </head>  <body> Hello World! </body> </html> </code></pre> <p><a name="hPOMI"></a></p> <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> <p>北国风光，千里冰封，万里雪飘。</p> <p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p> <p>山舞银蛇，原驰蜡象，欲与天公试比高。</p> <p>须晴日，看红装素裹，分外妖娆。</p> <p>江山如此多娇，引无数英雄竞折腰。</p> <p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p> <p>一代天骄，成吉思汗，只识弯弓射大雕。</p> <p>俱往矣，数风流人物，还看今朝。</p>  <hr/>  <h1>沁园春·长沙</h1> 独立寒秋，湘江北去，橘子洲头。<br/> 看万山红遍，层林尽染；漫江碧透，百舸争流。<br/> 鹰击长空，鱼翔浅底，万类霜天竞自由。<br/> 怅寥廓，问苍茫大地，谁主沉浮？<br/> 携来百侣曾游。忆往昔峥嵘岁月稠。<br/> 恰同学少年，风华正茂；书生意气，挥斥方遒。<br/> 指点江山，激扬文字，粪土当年万户侯。<br/> 曾记否，到中流击水，浪遏飞舟？<br/>  <p>粗体 <strong>样本 hello</strong></p> <p>斜体 <em>样本 hello</em></p>  空格<br/> 空      格<br/> 大于<br/> ><br/> 小于<br/> <<br/> 版权符号<br/> ©版权所有<br/> </body> </html> </code></pre> <p><a name="7uLBq"></a></p> <h2 id="图像标签">图像标签</h2> <p><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"></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body>  <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> <p><a name="cpNNK"></a></p> <h2 id="链接标签">链接标签</h2> <p><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"></p> <ol> <li>文本超链接</li> <li>图像超链接</li> <li>页面间链接：从一个页面链接到另一个页面</li> <li>锚链接</li> <li>页面间链接+锚链接：从一个页面链接到另一个页面的锚点</li> <li>功能性链接 <ol> <li>邮件链接</li> <li>QQ链接：使用QQ推广网站的推广工具</li> </ol> </li> </ol> <p><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"></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body> <p><a name="top" href="#bottom">直达底部</a></p>  <a href="1.我的第一个网页.html" target="">默认跳转</a><br> <a href="1.我的第一个网页.html" target="_self">本页跳转</a><br> <a href="https://www.baidu.com" target="_blank">新标签跳转</a><br> <a href="1.我的第一个网页.html"> <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577"> </a> <p><a> <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577"> </a></p> <p><a> <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577"> </a></p> <p><a> <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577"> </a></p>  <p><a name="bottom" href="#top">回到顶部</a></p>  <p><a href="2.基本标签.html/#bottom" target="_blank">跳转到基本标签页面底部</a></p>  <p><a href="mailto:wl3pb@163.com">点击给我发邮件</a></p> <p> <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> </p> </body> </html> </code></pre> <p><a name="V7PFi"></a></p> <h2 id="块元素和行内元素">块元素和行内元素</h2> <p><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"><br> <a name="cp4Eh"></a></p> <h2 id="列表标签">列表标签</h2> <p><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"></p> <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>编程语言</dt> <dd>java</dd> <dd>python</dd> <dd>javascript</dd> <dt>武功秘籍</dt> <dd>九阳神功</dd> <dd>九阴真经</dd> <dd>降龙十八掌</dd> </dl> </body> </html> </code></pre> <p><a name="On93g"></a></p> <h2 id="表格标签">表格标签</h2> <p><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"></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body>  <table border="1px"> <tr>  <td colspan="4">1-1</td> </tr> <tr>  <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> <p><a name="TtZ8j"></a></p> <h2 id="媒体元素：音频和视频">媒体元素：音频和视频</h2> <p><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"></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素</title> </head> <body>  <video src="../resources/video/1.mp4" controls autoplay></video> <audio src="../resources/audio/1.mp3" controls autoplay></audio> </body> </html> </code></pre> <p><a name="ITxcA"></a></p> <h1 id="页面结构分析">页面结构分析</h1> <p><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"></p> <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> <p><a name="2Y7Wr"></a></p> <h1 id="iframe内联框架">iframe内联框架</h1> <p><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></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe内联框架</title> </head> <body>  <iframe src="https://www.baidu.com" frameborder="1" width="800px" height="500px"></iframe>  <iframe src="" name="hello" frameborder="1" width="800px" height="500px"></iframe> <a href="3.图像标签.html" target="hello">点击显示跳转页面嵌入到标识名iframe</a> </body> </html> </code></pre> <p><a name="KVMKF"></a></p> <h1 id="表单">表单</h1> <p><strong><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"></strong></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h1>注册</h1>  <form action="1.我的第一个网页.html" method="post"> <p><input type="text" name="username"></p> <p><input type="password" name="pwd"></p> <p> <input type="submit"></input> <input type="reset"> </p> </form> </body> </html> </code></pre> <p><a name="G4hiQ"></a></p> <h2 id="表单元素">表单元素</h2> <p><strong><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"></strong></p> <ol> <li>checked 单选框和多选框选中</li> <li>selected 下拉框选中</li> <li>readonly 只读</li> <li>disabled 禁用</li> <li>hidden 隐藏</li> </ol> <pre><code class="language-html"> <p> <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p>  <p> <input type="checkbox" value="1" name="number"/>一 <input type="checkbox" value="2" name="number"/>二 <input type="checkbox" value="3" name="number"/>三 </p>  <p>反馈 <textarea name="fankui" cols="20" rows="10">文本内容</textarea> </p>  <p>文件域 <input type="file" name="files"/> </p> <p>数字 <input type="number" name="num" max="100" min="10" step="5"/> </p> <p>滑块 <input type="range" name="voice" max="100" min="0" step="2"/> </p> <p>搜索框，有叉号，可以删除 <input type="search" name="search"/> </p>  <p> <label for="mark">你点我试试</label> <input type="search" name="search" id="mark"/> </p> </code></pre> <p><a name="rveye"></a></p> <h2 id="表单的初级验证">表单的初级验证</h2> <ol> <li>placeholder 提示信息</li> <li>required 非空</li> <li>pattern 正则表达式<br> <a name="uZzB7"></a></li> </ol> <h1 id="总结">总结</h1> <p><img src="https://cdn.nlark.com/yuque/0/2021/jpeg/2707044/1611070587524-8527c207-f34c-4a65-82e9-a03b045a3860.jpeg" alt="" loading="lazy"></p>

上一篇：HTML5基础一天学会下一篇：HTML教程(看完这个就够了)

网站建设

Html

010_HTML5

初识HTML

什么是HTML

HTML发展史

HTML5的优势

W3C标准

常见IDE

IDEA开发HTML

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

配置浏览器

HTML基础

HTML基本结构

HTML注释

网页基本信息