要么改变世界,要么适应世界

html语法二

2020-03-07 16:23:00
106
目录

表单

HTML5中,表单是HTML获得用户输入的手段。

  • 输入类型表单

    <form>
            <input type="text" value="请输入噢"><!-- text是单行文本框value是占位符 -->
            <br>
            <input type="text" placeholder="请输入噢"><!--placeholder是提示内容-->
            <br>
            <input type="text" placeholder="请输入噢" maxlength="10"><!--maxlength指明输入最大长度-->
            <br>
            <input type="text" placeholder="请输入噢" size="50"><!--size指明输入框的长度-->
            <br>
            <input type="text" value="请输入噢" readonly><!--readonly指明只读,不可编辑-->
            <br>
            <input type="password" placeholder="请输入密码噢">
            <br>
            <br>
            <textarea rows="10" cols="10"> <!-- 指定行数列数 -->
                这是内容
                gh
                h
                j
            </textarea>
        </form>
    
  • 按钮类型表单

     <form><!-- value是提交表单时上传到服务器的内容 -->
           <input type="button" value="type='button'按钮">
           <button>按钮</button>
           <input type="submit" value="type='submit'按钮">
           <input type="checkbox"><!-- 复选框 -->
            这是一个复选框
         <input type="radio" name="choose">单选1<!-- 三选一按钮集合 -->
           <input type="radio" name="choose" checked>单选2 <!-- 默认选中 -->
           <input type="radio" name="choose">单选3
     </form>
    
    • 以上三种形式都可以实现按钮的功能,但是三者有着本质的区别,button比type="button"的功能多,button可以当任何按钮来使用,适用范围更广泛。
    • type="submit"用于提交表单,使用范围比type="button"小一些
    • type="button"一般用于配合js(JavaScript)使用
    • type="submit"用于提交表单的时候,必须声明form里面的method属性,最好加上action属性
  • 其他类型表单

    <form enctype="multipart/form-data">
        <input type="range" min="-100" max="100" value="50"><!-- 可滑动 -->
        <br>
        请选一个来进行选择
        <select>
            <option>选择1</option>
            <option>选择2</option>
            <option>选择3</option>
            <option>选择4</option>
        </select>
        <br>
        <!-- 与上面不同的是可以不选择提供的选项,而输入自己的选项 -->
        <input type="text" list="testList" placeholder="请输入你的选择">
        <datalist id="testList"><!-- 必须配合type="text"来使用,否则不会单独显示 -->
            <option>选择1</option>
            <option>选择2</option>
            <option>选择3</option>
            <option>选择4</option> 
        </datalist>
    
        <input type="date"><!-- 日期类型 不支持IE,火狐浏览器 -->
        <input type="search">
        <!-- 用户虽然看不到,但是提交表单的时候会把value值一起提交 -->
        <input type="hidden" value="隐藏的内容">
        <input type="image" src="password.png" width="20px">
        <!-- 如果要上传文件的话,必须设置属性 form enctype="multipart/form-data" -->
        <input type="file" multiple><!-- multiple是指支持多个文件上传 -->
        <br>
        <input type="file" required><!-- required是指必须上传文件 -->
    </form>
    

创建分区响应图

分区响应图是指:将一张图片进行划分,用户点击不同的区域的时候,触发不同的点击事件。

该图需要设置usemap属性,属性值是一个map的ID名,map由area组成,即area是触发点击的区域,而area的shape属性说明由下表给出:

<table border="1px">                                   shape的值              coords属性解释                                            Rect             这个值代表矩形区域,用四个逗号分割的整数描述,即 图像左边缘 图像上边缘 图像右边缘 图像下边缘                                   Circle             这个值代表圆形区域,用三个逗号分割的整数描述,即 图像左边缘到圆心的距离 图像上边缘到圆心的距离 圆的半径                                   Poly             这个值代表多边形区域,用至少六个逗号分割的整数描述,每一个数字表示多边形的一个顶点                                   Default             这个值代表默认区域,不需要设置coords的值,即默认覆盖整张图片         

    <img src="OIP.png" usemap="#test_map">
    
    <map name="test_map">
        <area href="4.html" shape="rect" coords="4,10,63,66" target="_blank">
        <area href="9.html" shape="rect" coords="64,10,120,66" target="_blank">
    </map>

载入视频

<video src="test_video.mp4" controls poster="cut.png"></video>
属性 属性介绍
src 视频地址
width 视频宽度
height 视频高度
autoplay 网页完成后自动播放
preload 是否在页面加载后载入视频。
auto - 当页面加载后载入整个视频
metadata- 当页面加载后只载入第一帧
none - 当页面加载后不载入视频
controls 向用户显示控件,比如播放按钮
loop 当媒介文件完成播放后再次开始播放。
poster 视频封面

由于不同的浏览器支持的视频格式不一样,同一款浏览器版本不同,支持的视频格式也不同,但是MP4格式和ogg格式的视频几乎覆盖了大多数浏览器的大多数版本,因此一般在载入视频的地方准备好两种素材就可以了

    <video src="test_video.mp4" controls poster="cut.png">
        <source src="test_video.mp4" type="video/mp4"> <!-- 默认使用这个资源播放,播放失败则播放下面的 -->
        <source src="test_video.ogg" type="video/ogg">
    </video>
历史评论
开始评论