html的元素&标签

1.标签和元素通常意思相同，但是严格来讲，一个元素通常又是由两个标签组成
      HTML标签：一般成对出现，大小写不敏感，但是H4推荐使用小写。

      HTML标签部分可以嵌套使用。

2. 开始标签    内容标签     结束标签
        <div>     div的内容     </div>

3.元素分为四种元素：

  （1）块级元素
          独占一行空间，用来布局段落、列表、导航菜单等，不要把块级元素嵌套在行内元素里。

              div 无意义的块级元素
               p   段落 块级元素 浏览器会自动在p标签前后添加空行
                    可以结合br使用
  （2）行内元素
          与其他元素共享第一行空间
          一般作为段落的一部分
  （3） 空元素（单标签）
          没有内容的元素,空元素是在开始标签中结束的
           <hr/>   
          <br/>（可以没有/，但建议写上）
          <img src="" />
  （4） 替代元素
          把文件引入文档，并且用自身的位置来替换。
          img：

          比如图片的导入：
                <img src="" alt="" style：width=300px,height=400px>
                src：图片的地址（必填项）
                alt：图片地址出错时 会显示alt的内容
                width（图片宽）
                height（图片高）
          video

                eg:<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:是否自动播放

4.HTML属性
        元素的属性一般在开始标签里
        属性由键值对组成
        <div id="myDiv" class="myDivClass"></div>
        核心属性有四个：
              id：唯一标识
              class：表示当前元素是某一类的元素
              style：规定元素的行内样式
              title：描述元素的信息（光标悬浮时会显示）

5.列表：

（1）自定义列表

<!--自定义列表-->
        <h2 id="myDl">自定义列表</h2>
        <dl>
            <dt>标题</dt>
            <dd>1</dd>
            <dd>2</dd>
            <dd>3</dd>
        </dl>

（2）无序列表

<!--无序列表-->
        <h2 id="myUl">无序列表</h2>
        <ul>
            <li>第一条</li>
            <li>第二条</li>
            <li>第三条</li>
            <li>第四条</li>
            <li>第五条</li>
            <li>第六条</li>
        </ul>

（3）有序列表

                 <ol start="3"></ol>：序号默认从1开始 可用通过 start属性改变起始值
                reversed (单值属性) 规定列表顺序为降序
                type="1"  默认 1 还有 A  a  I  i 四种值

<!--有序列表-->
        <h2 id="myOl">有序列表</h2>
        <ol type="A">
            <li>第一条</li>
            <li>第二条</li>
            <li>第三条</li>
            <li>第三条</li>
            <li>第三条</li>
        </ol>
        <ol start="4" >
            <li>第四条</li>
            <li>第五条</li>
            <li>第六条</li>
        </ol>
        <ol type="A" start="G" reversed>
            <li>第四条</li>
            <li>第五条</li>
            <li>第六条</li>
        </ol>

 6.超链接

<!--超链接-->

    <a href="#chaolianjie">超链接</a>

    <a href="#myHello">hello</a>

    <a href="https://baidu.com" target="_blank">百度一下</a>

 7.h1-h6 一级标题-六级标题 浏览器会自动在标题标签前后添加空行 （ 一般结合hr使用）

<!--字体标题-->

        <h2>字体标题</h2>

        <h1>1级标题</h1>

        <h2>2级标题</h2>

        <h3>3级标题</h3>

        <h4>4级标题</h4>

        <h5>5级标题</h5>

        <h6>6级标题</h6>

8.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>
    (9) <figure>
             <img src="../../Axure/day04/er-code.png" alt="图片丢失了">
             <img src="../../Axure/day04/er-code.png" alt="图片丢失了">
             <figcaption>扫码了解产品详情</figcaption>（子标签，只能有一个）
          </figure>

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

9.表格
    标签
      table
        thead
          tr>th（tr>th*3...）
        tbody
          tr>td
        tfoot

     (1)caption
            作为table的子元素，表示表格的标题信息
     (2)colgroup
            列分组，定义一个表中的一组列，作为table的子元素，同时放在caption的后面，其它元素的前面
      (3)col：经常作为colgroup的子元素，又span属性，规定几列为同一列
    属性
      (4)对齐：align： left center right
      (5)  边框：border： 整数  px
      (6)cellpadding：内容与单元格之间的距离
      (7)cellspacing：单元格与单元格之间的距离（一般设置为0）
      (8)width：设定表格宽度
      (9)bgcolor：设定表格背景色

        colspan 跨列合并
        rowspan 跨行合并

10.表单form
    主要用于用户与web服务器进行交互
    action：URL 用来处理表单信息的服务器地址
    method：浏览器提交表单的http方式,常用的get/post

        当method为post时，表单内容提交给服务器时的内容类型 enctype
            默认为：application/x-www-form-urlencoded
        当表单中有文件内容时：格式为：multipart/form-data
    get:通过这种方式提交的表单数据会被附加在链接上，通过"?"分割 发送敏感内容不建议使用这种方式。
     post:表单数据会存放在请求体，传递给服务器
     name：设置表单的名称
     target：_balnk _self
    表单元素
            input: 用于接收来自用户的数据
            name:用于设定控件名和提交数据的属性名
            value：用于控件初始化 默认值等功能（可选）
            checked：单选框或复选框 默认选中
            disabled:禁用组件，禁用后组件的值不可提交
            hidden:隐藏组件，隐藏后的组件值会被提交【用户直接将写的东西提交给我们】
            size:控件的初始宽度，单位是像素px，但是text和password除外，他俩是指字符的数目。
            maxlength:可以输入字符数量的最大值
            min: 用于number框
            max: number
            select: 用于表示列表或者下拉列表
            multiple: 指定空间类型（列表或下拉列表）
            size :    如果multiple生效，size表示同时展开的行数
            name:     指定主键的名字
            option :  用于表示选项 包含在select或optgroup中
            disabled: 表示禁用组件的值不能被提交
            value:    定义控件的初始值,提交表单时，初始值会被提交【它的内容是提交给后台的  必须要写  一般写英文】
            selected : 默认被选中的项
                    <option  disabled selected value="">请选择</option>
            optgroup :分组 包含option后形成选项组
            label :指选项组的名称
            textarea:  没有value属性
            rows:    文本框的初始行数
            cols:    文本框的初始列数
            disabled :禁用，不能被提交
            readonly:只读，但是值可以提交
            name
            fieldset 在一个表单中对多个控件或标签进行分组【算是样式】
            <legend> 是分组的标题
            属性 disabled 直接禁用整个分组中的控件
            手机号：1.手机号实名+验证码【会限制注册量】
                   
     progress 进度条
            value 0-1之间的小数
            max   默认值是1
            output 表示用户动作产生的结果
            <form οninput="result.value=num.value*num.value">
                <input type="number" name="num" >的平方=
                <output name="result"></output>
            </form>
            mater
            <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。
            4.带有搜索功能。
    H5中对input的扩展
            autofocus ：自动聚焦  光标不用放文本框内就可以输入。
            placeholder="请输入用户名"【提示文字】
            required：必填项【为了避免提交空表单  最好表单的每一项写为必填项】
            pattern="1/d{10}" :校验 输入11位【一般用于手机号】
            maxlength="11"
            date:一般用于出生日期。
            time:一般用于用户注册时间和商品下单时间。【但一般不是让用户写】
                用一下两点用：
                hidden:new Date()【隐藏的，后台可以看到】
                数据库：new Date