1，页面结构分析

元素名 描述
header* 标题头部区域的内容（用于页面或页面中的一块区域）
footer* 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或者应用（常用于侧边栏）
nav* 导航类辅助内容 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面结构</title>
  6. </head>
  7. <body>
  8. <header>
  9.     <h3>网页头部</h3>
  10. </header>
  11. <section>
  12.     <h3>网页主体</h3>
  13. </section>
  14. <footer>
  15.     <h3>网页底部</h3>
  16. </footer>
  18. </body>
  19. </html>

2，内联框架iframe

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>内联框架</title>
  6. </head>
  7. <body>
  9. <!-- 示例：-->
  10. <!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
  11.         scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
  12. </iframe>-->
  13. <!-- iframe 内联框架
  14. src：地址
  15. w-h：宽度，高度
  16. -->
  17. <!-- 使用方式：
  18. 1，iframe src 直接打开
  19. 2，a 标签点击打开
  20. -->
  21. <iframe src="" name="baidu" frameborder="0" width="1000px" height="800px"></iframe>
  23. <!--<a href="1,我的第一个网页.html" target="baidu">点我跳转</a>-->
  24. <a href="https://www.baidu.com" target="baidu">点我跳转</a>
  26. </body>
  27. </html>

3，表单的Get 与 Post 请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录注册</title>
  6. </head>
  7. <body>
  8. <h1>注册</h1>
  9. <!-- 表单 form
  10.  action：表单提交的位置，可以是网站，也可以是一个请求地址
  11.  method：post,get 提交方式
  12.   get：提交信息会在链接上看到，不安全，但高效，不能传输数据量大的信息或者文件
  13.   post：比较安全，能传输大文件
  14.  -->
  15. <form action="xxx.html" method="post">
  16.     <!-- 文本输入框，input type='text' -->
  17.     <p>名字：<input type="text" name="username"></p>
  18.     <!-- 密码输入框，input type='password' -->
  19.     <p>密码：<input type="password" name="pwd"></p>
  20.     <p>
  21.         <input type="submit" name="subBtn" value="提交" />
  22.         <input type="reset" name="resBtn" value="重填">
  23.     </p>
  25. </form>
  26. </body>
  27. </html>

4，表单元素格式

属性 说明
type 指定元素的类型。text，password，checkbox，radio，submit，reset，file，hidden，image和button，默认为text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为 text 或 password 时，输入的最大字符数
checked type为 radio 或 checkbox 时，指定按钮是否是被选中

5，单选框，多选框，按钮，下拉框，文本域，文件域

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录注册</title>
  6. </head>
  7. <body>
  8. <h1>注册</h1>
  9. <!-- 表单 form
  10.  action：表单提交的位置，可以是网站，也可以是一个请求地址
  11.  method：post,get 提交方式
  12.   get：提交信息会在链接上看到，不安全，但高效，不能传输数据量大的信息或者文件
  13.   post：比较安全，能传输大文件
  15.  -->
  16. <form action="xxx.html" method="get">
  17.    <!-- 表单元素格式 -->
  18.     <!-- 文本输入框，input type='text'
  19.      value="小派参见" 默认初始值
  20.      maxlength="8" 最长能写几个字符
  21.      size="30" 文本框的长度
  22.     -->
  23.     <p>名字：<input type="text" name="username"></p>
  25.     <!-- 密码输入框，input type='password' -->
  26.     <p>密码：<input type="password" name="pwd"></p>
  28.     <!-- 单选框标签
  29.     input type='radio'
  30.     value：单选框的值
  31.     name：表示组
  32.     -->
  33.     <p>性别：
  34.         <input type="radio" value="boy" name="sex" checked />男
  35.         <input type="radio" value="girl" name="sex" />女
  36.     </p>
  38.     <!-- 多选框
  39.     input type="checkbox"
  40.     -->
  41.     <p>爱好：
  42.         <input type="checkbox" value="sleep" name="hobby" />睡觉
  43.         <input type="checkbox" value="code" name="hobby" />敲代码
  44.         <input type="checkbox" value="chat" name="hobby" />聊天
  45.         <input type="checkbox" value="game" name="hobby" />游戏
  46.     </p>
  48.     <!-- 按钮
  49.      input type="button" 普通按钮
  50.      input type="image"  图像按钮，可提交表单
  51.      input type="button" 提交按钮
  52.      input type="button" 重置
  53.      -->
  54.     <p>按钮：
  55.         <input type="button" name="btn1" value="点击变长" />
  56.         <!--<input type="image" name="img1" src="../image/1.png" width="100" height="100" />-->
  57.     </p>
  59.     <!-- 下拉框，列表框 -->
  60.     <p>国家：
  61.         <select name="country" id="country">
  62.             <option value="china">中国</option>
  63.             <option value="us">美国</option>
  64.             <option value="usa">英国</option>
  65.             <option value="intant" selected>印度</option>
  66.         </select>
  67.     </p>
  69.     <!-- 文本域
  70.     clos：50 列[宽]
  71.     rows：10 行[高]
  72.     -->
  73.     <p>反馈：
  74.         <textarea name="suggestions" cols="50" rows="10">文本内容</textarea>
  75.     </p>
  77.     <!-- 文件域
  78.      input type="file" name="files"
  79.      -->
  80.     <p>文件域：
  81.         <input type="file" name="files">
  82.         <input type="button" name="upload" value="上传">
  83.     </p>
  85.     <p>
  86.         <input type="submit" name="subBtn" value="提交"/>
  87.         <input type="reset" name="resBtn" value="重填">
  88.     </p>
  90. </form>
  91. </body>
  92. </html>

6，https://www.bilibili.com/video/BV1x4411V75C?p=16