html5概述

html5概述

• 学习备注
  • 谷歌搜索 mdn html5即可看到所有html5的信息
• 章节标签：表示文章/书的层级
  • 标题h1~h6
  • 章节section
  • 文章article
  • 段落 p
  • 头部header
  • 脚部footer
  • 主要内容main
  • 旁支内容 aside
  • 划分 div
• a标签：
  • href:代表一个超链接（注意写出的连接在测试时不能直接双击打开，要借用插件得到一个本地地址在浏览器中去打开）
    • a标签herf的取值
      • 网址
        • https://google.com
        • http://google
        • //google.com(最高级，兼容上面两种)
        • 路径
          • /a/b/c以及a/b/c/
            • (这里的/不同于文件系统中的根目录/，它是当前开启该网址的项目的根目录)
            • 而不以/开头就是当前目录
            • index.html以及./index.html
          • 伪协议
            • javascript:代码; 现在多用于实现一个什么的不做的标签
              • 用法如：<a href="javascript:;">点击查看</a>
            • mailto:邮箱；用于实现点击后去调用所选择的邮件客户端，并将该邮箱自动写到发信箱的位置
              • 用法如：<a href="maillto:12345689@126.com">发邮箱给某某</a>
            • el:手机号
              • 用法如：<a href="tel:12345688">打电话给我</a>
  • target：指定在一个新窗口打开链接
    • a的target 的取值
      • 内置名字
        • _blank :指点击链接后在新的空白窗口打开
        • _top:指点击链接后在顶级页面打开
        • -parent:指在当前链接所在的上级窗口中打开
        • _self:在自己的这个位置打开，一般默认为_self
        • 程序员命名
          • window:以指定窗口的名字打开，若没有则创建一个，有就一直用它
          • iframe
  • download:一般不常用
    • 不是打开页面，而是下载页面，手机浏览器可能不支持
  • rel=noopener:用来解决bug
• iframe标签
  • 内嵌窗口，现在只有一些老系统在用
• table标签
  • 语法
    • 里面只有三个常用的标签
    • 用法如下：
      <table> a table<tr>​ tr表示table里的一行<.thead>​这里写表头​<tr>​ tr表示table里的一行<th>英语</th>​<th>语文</th>​</tr>​​​</thead>​​<.tbody><tr><td>表中数据 ​</td>​</tr>​​​​</tbody><.tfoot></tfoot>​​</table>
  • 相关的样式
    • table-layout
    • border-collapse
    • border-spacing
• img标签
  图片
  • 语法
    • <img src="图片地址" alt="如果图片加载失败就显示这里的文字"/>
  • 作用
    • 发出get请求，展示一张图片
  • 属性
    • alt/height/weigth/src
  • 事件
    • onload/onerror
      • 用来监听图片是否加载成功，加载成功就调用onload，加载失败就调用onerror,可以根据加载结果放一张备用图来提示用户
  • 响应式
    • max-width:100%
      • 常用于使图片能随着手机屏幕大小而自适应占满，不会发生尺寸错误
  • 可替换元素（考试可能考）
• form标签
  表单
  • 作用
    • 发get或post请求，然后刷新页面
  • 属性
    • action:用来控制请求或是发送哪个页面，此处填入一个页面地址
    • autocomplete:用来在输入框在输入后是否出现一些提示输入
    • method：用来控制是用get还是post
    • target：用来控制提交到哪个页面
  • 事件
    • onsubmit
• input标签
  • 作用
    • 让用户输入内容
  • 属性
  • 事件
    • onchange：当用户提交改变时触发
    • onfocus:当用户将鼠标击中到某部分时触发
    • onblur：当用户将鼠标从某部分出来时触发
  • 验证器
    • html5新增功能
• 注意事项
  • 一般不监听input的click事件
  • form里面的input要有name
  • from里要放一个type=submit才能触发submit