表格表单视频音频

页面的组成部分

列表

<ul>
    <li></li>  无序列表
</ul>

<ol>
    <li></li>  有序列表
</ol>
ol标签的属性有 start  type='a/A/i/I/1' reversed反向

<dl>
    <dt></dt>  t:title的首字母
    <dd></dd>  d:describe的首字母
</dl>

列表的css属性

llist-style-type(列表符号项):circle/square/none/disc
list-style-position:outside默认,框外/inside
list-style-image:url()
list-style(复合属性,一般只填none):circle outside url()


表格标签

<table>
    <caption><h2>表格名<h2></caption>
    <thead> 表头
        <tr> 行,table row的缩写
            <th>序号<th>
            <th>姓名<th>
        </tr>
    </thead>
    <tbody>
        <tr> 
            <td>1<td>
            <td>egon<td>
        </tr>
        <tr> 
            <td>2<td>
            <td>lxxn<td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan='2'></td>
        </tr>
    </tfoot>
</table>

th,td的标签属性:colspan横向合并表格
                 rowspan纵向合并表格
常用css通用属性:
    td,th:padding,border
    table:width height一般只用width
常用表格专有css属性:
    table-layout:fixed;固定每列等宽
    border-collapse:collapse;合并单元格边框
    border-spacing:5px;单元格间隙,前提:没有合并单元格
    caption-side:top/bottom;标题在顶部或底部

表单

<form action='提交的地址url' method='提交方式 get/post' enctype='multipart/form-data'>
    用户名:<input type='text' name='username'(用于传输给后端时使用key:value形式存储)
    placeholder='请输入用户名'(框内的提示,输入内容就消失) maxlenght='10'(最大输入字符个数)>
    
    密码:<input type='password' name='password'> (输入的为密文)
    
    多选一:<input type='radio' name='sex' value='male'(传输的值) checked(选中)><input type='radio' name='sex'
    value='female'(传输的值)>多选多(与选一相同):<input type='checkbox' name='xxx'>
    
    文件选择框:<input type='file' name='file' multiple(多个,默认为一个)>
    
    邮箱:type='email'
    网址:type='url'
    数字:type='number' (可指定max min step默认为1)
    搜索:type='search'
    电话:type='tel' (在手机端能弹出数字框)
    范围选择:type='range' (可指定max min step默认为1)
    颜色选择:type='color'
    时间日期:日期   type='date'
              月份   type='mouth'
              第几周   type='week'
              时间   type='time'
           年月日时分秒   type='datetime-local'
           
    下拉框:<select name=''>
                <option value=''>xxx</opton>
                ...
            </select>
    
    多行文本:
    <textarea name='' rows='行高,非最大行数' cols='框宽'></textarea>
</form>

按钮
提交:<input type='submit' value=''>
      <button>提交</button>
重置: <input type='reset' value=''> 
      <button type='reset'></button>
普通:<input type='button' value=''> 
      <button type='button'></button>
      
提交信息到指定地址:如直接提交信息进行百度
<form action='http://www.baidu.com'>
    <input type='text' name='wd' list='mylist'>
    <datalist id='mylist'>
        <option value=''></option>
        ...
    <datalist>
    <button>搜索</button>
</form>

表单空间通用属性

  • disabled 元素禁用
  • enabled 可用
  • readable 只读用于可输入框
  • autofocus 自动获取焦点 光标直接过去
  • autocomplete='off'/'on' 自动保存,下次输入会有提示
  • pattern 正则
  • required 必填

视频音频

视频格式:mp4 ogg webm
<video src='视频地址' controls autoplay></video>
其余属性:loop:循环  poster='播放视频前显示的图片地址'
preload 预加载
音频格式:MP3 wav ogg
<audio src='' controls autoplay></video>

分类选择
<video>
    <source src='' type='video/mp4'>
    <source src='' type='video/ogg'>
    <source src='' type='video/webm'>
</video>
原文地址:https://www.cnblogs.com/luck-L/p/9392871.html