html学习-2

HTML2

媒体元素

​

controls 控制 autoplay 自动播放

audio 同理

网页结构分析

头部 header

…

导航栏 nav

主体 article（独立文章） aside(侧边栏) section（独立区域）

脚部 footer

iframe

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8kQltL27-1613482170026)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210216195216814.png)]

内联框架

frameboard=“0” 边框 height width

表单

账号密码

注册

名字：

密码：

<!--表单from
action : 表单提交的位置,可以是网站也可以是请求处理
method ： post ，get 提交方式
get 方式提交 ：可以在url 中看到 不安全高效
psot 方式提交 ：安全 ，传输大文件
-->

<!--文本输入框： input type="text"
value="aa" 默认初始值
maxlength="8 最长能写几个字符
  size="30" 文本框长度
-->

<!--单选框标签
 input type=“radio”
 value 单选框的值
 name 表达组
 -->

 <!--单选框标签
     input type=“radio”
     value 单选框的值
     name 表达组
     -->
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
<input type="radio" value="girl" name="sex2"/>女2

<!--按钮
    input type="button"
    input type="image"
    input type="submit"
    input type="reset"
    -->
    <input type="button" name="btn1" value="点击">
    <input type="image" src="../resourses/image/1389088745.png" name="btn1" value="点击">
<p>
    <input type="submit" value="提交1">
    <input type="reset" value="清空1">

<!--下拉框
    selectd 默认的-->
    <p>下拉框：
    <select name="列表名称">
        <option value="选择的值">a</option>
        <option value="选择的值">b</option>
        <option value="选择的值">c</option>
        <option value="选择的值" selected>d</option>
    </select>
</p>
    <!--文本域
    textarea
    cols 列
    rows 行-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
    <!--文件域
    上传文件
    input type=“file” name=“file”-->
    <p>
        <input type="file" name="file">
        <input type="button" value="上传"name="updown">

    </p>
    <!--邮箱验证-->
    <p>邮箱
        <input type="email" name="email">
    </p>
    <!--url-->
    <p>url
        <input type="url" name="url">
    </p>
    <!--数字
    -->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>
    <!--滑块input type="range"-->
    <p>滑块
        <input type="range" name="range" min="0" max="100">
    </p>
    <!--搜索框-->
    <p>搜索
        <input type="search" name="search" >
    </p>
    <input type="submit">
   <input type="reset">

表单应用

只读 readoniy

禁用 disabled

隐藏 hidden

<p>搜索
    <input type="search" name="search"id="mark" >
</p>
<!--增强鼠标可用性-->

<p>
    <label for="mark">点击我试试</label>
    <input type="reset"  >
</p>

表单验证

placeholder 提示信息

require 必须填写

pattern 正则表达式 （查）