2021-08-04 HTML知识点

  一.video

<video src="./video/video.mp4" controls autoplay muted loop></video>
    controls:是否显示控制条
    loop:是否循环播放（播放结束后从头开始播放）
    muted:是否静音播放
    autoplay:是否自动播放

  二.audio

    <audio src="./video/audio.mp3" controls autoplay muted loop></audio>
    controls:是否显示控制条
    loop:是否循环播放（播放结束后从头开始播放）
    muted:是否静音播放
    autoplay:是否自动播放

三.其他标签

  <!-- 高亮 -->
  <mark>其它标签-mark</mark>
  <!-- 引用 -->
  <cite>其它标签-cite</cite>
  <!-- 强调 -->
  <em>其它标签-em</em>
  <!-- 斜体 -->
  <i>其它标签-i</i>
  <!-- 缩略词 -->
  <abbr title="2021年8月3日星期二">星期二</abbr>

  
  四.H5语义化标签

    1. header 
      具有引导和导航作用的一个元素，通常来放置标题（导航）logo 搜索栏
    2. nav
      可以用作页面导航的链接组，其中导航元素链接到其它页面，或者当前页面的其它部分
    3. article
      代表文档，页面中 独立 完整的 可被外部引用的内容，也可以嵌套使用
    4. aside
      用来表示当前页面或文章的附属信息部分，他可以包含侧边栏，广告，导航条，以及其它有别于主要内容的部分
    5. footer
      通常包含作者信息，相关链接，版权信息等
    6. address
      用来呈现文档的联系信息，作者的联系信息，地址，邮箱，电话等
    7. section
      类似div 作为html的独立功能
    8. <details>
      <summary>联系我：</summary>
      <p>邮箱：rendc@briup.com</p>
      <p>电话：12345677654</p>
      <p>地址：浦东软件园（昆山园）</p>
    </details>
    </address>
    9. <figure>
        <img src="../../Axure/day04/er-code.png" alt="图片丢失了">
        <img src="../../Axure/day04/er-code.png" alt="图片丢失了">
        <figcaption>扫码了解产品详情</figcaption>
      </figure>

      H5语义化标签 除了语义之外，与div完全相同
      对于搜索引擎比较友好
      语义化的代码可读性较高
      方便其它设备解析，比如盲人阅读器根据语义来解析这个页面

  五.表格

    标签

      table
        thead
          tr>th
        tbody
          tr>td
        tfoot
        caption
          作为table的子元素，表示表格的标题信息
        colgroup
          列分组，定义一个表中的一组列，作为table的子元素，同时放在caption的后面，其它元素的前面
            col：经常作为colgroup的子元素，又span属性，规定几列为同一列

    属性

      align： left center right
      border： 整数  px
      cellpadding：内容与单元格之间的距离
      cellspacing：单元格与单元格之间的距离
      width：设定表格宽度
      bgcolor：设定表格背景色
      colspan 跨列合并
      rowspan 跨行合并

  六.表单form

    主要用于用户于web服务器进行交互

    action: URL 用来处理表单信息的服务器地址
    method: 浏览器用来提交表单的http方式，常用的get/post
      get ： 通过这种方式提交的表单数据会被附加在链接上，通过"?"分割 发送敏感内容不建议使用这种方式
      post： 表单数据会存放在请求体，传递给服务器，
    name:   设置表单的名称
    target: _blank _self
    当method为post时，表单内容提交给服务器时的内容类型 enctype
    默认：application/x-www-form-urlencoded
    当表单中有文件内容时
    multipart/form-data

  七.表单元素

    input 用于接受来自用户的数据
      name：    用于设定控件名和提交数据的属性名
      value：   用于控件初始化 默认值等功能 （可选）
      checked： 单选框&复选框 默认选中属性
      disabled：禁用组件 禁用后组件的值也不可提交
      hidden：  隐藏组件 隐藏后的组件值会被提交
      size：    控件的初始宽度，单位是px，但是text和password除外，他俩是指字符的数目
      maxlength：可以输入字符数量的最大值
      min：      number
      max：      number
    select 用于表示列表 或者下拉列表
      multiple 指定控件类型（列表或者下拉列表）

      size      如果multiple生效，size表示同时展示的行数
      name

    optgroup 包含option后形成选项组
      label 指选项组的名称    

    option 用于表示选项 包含在select或optgroup中
      disabled  表示禁用组件，禁用组件的值不能被提交
      value     定义控件的初始值，提交表单时，初始值会被提交
      selected  默认被选中的项
      eg:<option disabled selected value="">请选择</option>
    
    textarea
      没有value属性
      rows      文本框的初始行数
      cols      文本框的初始列数
      disabled  禁用
      readonly  只读，但是值可以提交
      name
    fieldset 在一个表单中对多个控件或标签进行分组
      属性 disabled 直接禁用整个分组中的控件
      <legend> 是分组的标题

    progress 
      进度条
      max   默认值 1
      value 0-1之间 小数
      <progress value="70" max="100"></progress>70%
    output
      表示用户动作产生的结果
      <form οninput="result.value=num.value*num.value">
        <input type="number" name="num">的平方=
        <output name="result"></output>
      </form>
    meter
      <meter max="100" low="60" high="90" value="40"></meter>40 绿色
      <meter max="100" low="60" high="90" value="65"></meter>65 黄色
      <meter max="100" low="60" high="90" value="95"></meter>95 红色
    datalist
      表示其它控件可用的值
      与select做对比
      1. select选中后显示的是文本内容 datalist显示value
      2. 提交的时候都是提交value
      3. 在firefox上只显示内容，在chrome上显示内容和value
   

八.H5中对input的扩展

      ①autofocus ：自动聚焦
      ②placeholder="请输入用户名"：输入框提示
      ③required：必填项
      ④pattern="1\d{10}" ：校验（1开头加10位数字）
      ⑤maxlength="11"