010_HTML5

  • A+
所属分类：Web前端
便宜好用的国外VPS推荐

初识HTML

什么是HTML

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

HTML发展史

010_HTML5

HTML5的优势

010_HTML5

W3C标准

010_HTML5

常见IDE

010_HTML5

IDEA开发HTML

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

010_HTML5

配置浏览器

010_HTML5

HTML基础

HTML基本结构

010_HTML5

HTML注释

<!-- HTML注释 -->

网页基本信息

  1. DOCTYPE声明
  2. title标签
  3. meta标签
<!-- 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>

网页基本标签

  1. 标题标签
  2. 段落标签
  3. 换行标签
  4. 水平线标签
  5. 字体样式标签
  6. 注释和特殊符号
<!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/>     空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>     大于<br/>     &gt;<br/>     小于<br/>     &lt;<br/>     版权符号<br/>     &copy;版权所有<br/> </body> </html>

图像标签

010_HTML5

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>图像标签</title> </head> <body>     <!--     src：图像地址（必填）         相对地址（推荐使用），绝对地址         ../ 上一级目录     alt：图像名称（必填）     -->     <img src="../resources/image/1.jpg" alt="010_HTML5" alt="图片名称" title="悬停文字" width="1024" height="577">     <img src="../resources/image/2.jpg" alt="010_HTML5" alt="图片名称" title="悬停文字" width="1024" height="577"> </body> </html>

链接标签

010_HTML5

  1. 文本超链接
  2. 图像超链接
  3. 页面间链接：从一个页面链接到另一个页面
  4. 锚链接
  5. 页面间链接+锚链接：从一个页面链接到另一个页面的锚点
  6. 功能性链接
    1. 邮件链接
    2. QQ链接：使用QQ推广网站的推广工具

010_HTML5

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>链接标签</title> </head> <body>     <p><a name="top" href="#bottom">直达底部</a></p>      <!--     a标签     href：必填，表示要跳转到哪个页面     target：表示窗口在哪里打开         _blank 在新标签打开         _self 默认，在本页打开     -->     <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="010_HTML5" alt="图片名称" title="悬停文字" width="1024" height="577">     </a>     <p><a>         <img src="../resources/image/1.jpg" alt="010_HTML5" alt="图片名称" title="悬停文字" width="1024" height="577">     </a></p>     <p><a>         <img src="../resources/image/1.jpg" alt="010_HTML5" alt="图片名称" title="悬停文字" width="1024" height="577">     </a></p>     <p><a>         <img src="../resources/image/1.jpg" alt="010_HTML5" alt="图片名称" title="悬停文字" width="1024" height="577">     </a></p>      <!--     锚链接：     1.需要一个锚标记，使用name     2.跳转到标记     -->     <p><a name="bottom" href="#top">回到顶部</a></p>     <!-- 页面间链接+锚链接：从一个页面链接到另一个页面的锚点 -->     <p><a href="2.基本标签.html/#bottom" target="_blank">跳转到基本标签页面底部</a></p>      <!--     功能性链接：     邮件链接：mailto     QQ链接     -->     <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>

块元素和行内元素

010_HTML5

列表标签

010_HTML5

<!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>

表格标签

010_HTML5

<!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>

媒体元素：音频和视频

010_HTML5

<!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>

页面结构分析

010_HTML5

<!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>

iframe内联框架

010_HTML5

<!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>

表单

010_HTML5

<!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">     <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>

表单元素

010_HTML5

  1. checked 单选框和多选框选中
  2. selected 下拉框选中
  3. readonly 只读
  4. disabled 禁用
  5. hidden 隐藏
<!--单选框 radio     value 值     name 表示组 --> <p>     <input type="radio" value="boy" name="sex"/>男     <input type="radio" value="girl" name="sex"/>女 </p> <!--多选框 checkbox     value 值     name 表示组 --> <p>     <input type="checkbox" value="1" name="number"/>一     <input type="checkbox" value="2" name="number"/>二     <input type="checkbox" value="3" name="number"/>三 </p> <!--文本域 textarea     cols 列     rows 行 --> <p>反馈     <textarea name="fankui" cols="20" rows="10">文本内容</textarea> </p> <!--文本域 textarea     cols 列     rows 行 --> <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> <!--label标签，增强鼠标可用性，点击文件，文本框获取焦点--> <p>   <label for="mark">你点我试试</label>     <input type="search" name="search" id="mark"/> </p>

表单的初级验证

  1. placeholder 提示信息
  2. required 非空
  3. pattern 正则表达式

总结

010_HTML5

便宜好用的国外VPS推荐