01 基本结构和文本标签

  1. <!--
  2.     基本结构
  3. -->
  5. <!DOCTYPE html>
  6. <!--文档类型-->
  8. <html lang="zh">
  9. <!--语言-->
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <!--编码-->
  15.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  21.     <title>Document</title>
  22.     <!--标题-->
  23. </head>
  24. <body>
  25.         <p>段落</p>
  27.         <br>换行<br>
  29.         <h1>标题1</h1>
  30.         <h2>标题2</h2>
  31.         <h3>标题3</h3>
  32.         <h4>标题4</h4>
  33.         <h5>标题5</h5>
  34.         <h6>标题6</h6> 
  36.         <hr>水平线<hr>
  38.         <!--文本格式化标签-->
  39.         <strong>加粗</strong>   &nbsp;&nbsp;&nbsp;<!--空格-->
  40.         <em>斜体</em>           &nbsp;&nbsp;&nbsp;
  41.         <del>删除线</del>       &nbsp;&nbsp;&nbsp;
  43.         <span>与CSS结合</span>
  44. </body>
  45. </html>

02 图片,超链接,图片映射

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <img id ="h" src="#" alt="图片载入出错时显示的文字" title="图片获得焦点时显示的文字"/>
  11.     <br>
  12.     图片格式:
  13.         jpg     有损压缩,不支持透明
  14.         png     无损压缩,支持透明
  15.         gif     动图
  17.     <hr>
  18.     <a href="#h">显示文本
  19.         <img src="ss#" alt = "超链接里可以嵌套图片"/>
  20.     </a>
  21.     <!--
  22.         #h                      跳转地址
  23.         target = "_blank"       跳转方式
  24.     -->
  26.     <hr>
  27.     <!--图片映射-->
  29.     <img src="#" alt="" usemap="#haha"/>
  30.     <map name="haha">
  31.         <area shape="circle" coords="233,456,50" href="#">
  32.         <!--
  33.             area    划分区域
  34.             shape   形状    
  35.                 圆形    circle
  36.                 矩形    rect
  37.                 多边形  poly
  38.         -->
  39.     </map>
  40. </body>
  41. </html>

03 列表,表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <!-------------------------------列表----------------------------------------->
  11.     无序列表
  12.     <ul>
  13.         <li>aaa</li>
  14.         <li>bbb</li>
  15.     </ul>
  16.     有序列表
  17.     <ol>
  18.         <li>111</li>
  19.         <li>222</li>
  20.     </ol>
  21.     自定义列表
  22.     <dl>
  23.         <dt>标题</dt>
  24.         <dd>一</dd>
  25.         <dd>二</dd>
  26.     </dl>
  27.     <!--------------------------------表格----------------------------------------->
  28.     <table border="1px solid #fff">
  29.         <th>title</th>
  30.         <tr>
  31.             <td colspan="2">111</td><!--合并行-->
  32.             <td rowspan="2">222</td><!--合并列-->
  34.         </tr>
  35.         <tr>
  36.             <td>aaa</td>
  37.             <td>bbb</td>
  39.         </tr>
  40.     </table>
  41. </body>
  42. </html>

04 表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <form action="#" method="GET">
  11.         用户名:<input type="text"/>
  12.         密码:<input type="password"/><br>
  14.         <!--单选框-->
  15.         性别:
  16.         <input type="radio" name="sex">男
  17.         <input type="radio" name="sex">女<br>
  18.         <!--复选框-->
  19.         兴趣:
  20.         <input type="checkbox" name="ckb" value="fan">吃饭饭
  21.         <input type="checkbox" name="ckb" value="jiao">睡觉觉
  22.         <input type="checkbox" name="ckb" value="dou">打豆豆<br>
  23.         <!--下拉框-->
  24.         城市:
  25.         <select name = "city">
  26.             <option value="shanghai">上海</option>
  27.             <option value="beijing">北京</option>
  28.         </select>
  29.         <input type="submit" value = "提交">
  30.     </form>
  31. </body>
  32. </html>

05 布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <!--DIV布局-->
  11.     <div style="background-color:aqua">哈哈</div>
  12.     <div style="background-color:blue">呵呵</div>
  13.     <div style="background-color:crimson">嗯嗯</div>
  14.     <!--iframe-->
  15.     <iframe src="./04 表单.html"></iframe>
  16.     <iframe src="./05 布局.html"></iframe>
  17. </body>
  18. </html>