web@HTML重要标签详介绍.

1.table标签
<table border="1px " rules="groups" cellpadding="5px" cellspacing="5px" bgcolor="blue">
//边框规则,设置后会合并边框(cellspacing失效)rules: all groups cols;
 <caption align="top">表1</caption> 
//align:top,bottom有效
    <thead>
//一般不写thead,tbody,tfoot
        <tr bgcolor="white">
            <th></th>
            <th></th>
            <th></th>
//一般都是td
        </tr >
    </thead>
    <tbody>
        <tr bgcolor="white">
            <td rowspan="2"></td>
//垂直向下合并单元格
            <td></td>
            <td></td>
        </tr>
    </tbody>  
    <tfoot>
        <tr bgcolor="white">
   <td></td>
            <td colspan="2"></td>
//水平向右合并单元格
        </tr>
    </tfoot>
</table>
2.form块级标签>(input,select,label,textarea,filedset)行内标签
<form action="https://www.baidu.com" method="get" enctype="multipart/form-data">
//发送地址, 发送方式get post, enctype上传文件要加这个

    <input type="file" name="f">
 //按钮submit,reset,imge,button,value:框内默认值
    <input type="button" value="注册">
    <input type="image" src=".../1.jpg" alt="无法显示" >
    <input type="reset" value="重置">
  <input type="submit" value="登陆">
 //输入框 text,password name:提交的key  value:框内默认值(提交的值)
 <input type="text" name="username" placeholder="提示信息" value="王冬" disabled="disabled">
 <input type="password" name="password" placeholder="提示信息" value="王冬" >
 //选择框 radio,checkbox 注意name要相同,value不同-单选框互斥  checked默认选中
 <input type="radio" name="g" value="a" checked="checked">男
 <input type='checkbox' name="h" value="b" checked>篮球
    <input type='checkbox' name="h" value="f">足球
// label标签常用于与checkbox或radio关联,以实现点击文字也能选中/取消checkbox或radio。
 <input type='checkbox' name='basket' id='basketball'>  
 <label for="basketball">篮球</label>
 
 //选择框 select
 <select name="city" id="" size="2" multiple>
 //有了multiple为多选框 size 显示选择个数 selected默认选中 注意select内的name和选项的value 分开
  <optgroup label="一线">
 //也是选项 字体不一样 label 来写选项内容
        <option value="b">北京</option>
        <option value="s">上海</option>
        <option value="c" selected>重庆</option>
        <option value="g">广州</option>
    </select>
 
 
  <textarea name="comment" cosl="30" rows="10" id="" style="resize: none">好评!!</textarea>
  //resize:none 无缩放
 
  //了解 会把跟在后面的标签放进去
  <fieldset>
        <legend>
            注册页面
        </legend>
 
</form>
3.video行内标签
<!-- 控制面板  预加载 -->
 <video controls poster="poster.png">
  <source src="HTML5的前世今生.mp4" type="video/mp4"></source>
  <!--当前浏览器不支持video直接播放-->
 </video>
4.audio行内标签
<!--自动播放 控制面板 重复 预加载 -->
 <audio  src="juhua.mp3" autoplay controls loop preload="auto">当前浏览器不支持audio,该文本便会显示</audio>
 <audio  src="juhua.mp3" autoplay controls loop preload="auto">当前浏览器不支持audio,该文本便会显示</audio>
 <audio  src="juhua.mp3" autoplay controls loop preload="auto">当前浏览器不支持audio,该文本便会显示</audio>
 <audio  src="juhua.mp3" autoplay controls loop preload="auto">当前浏览器不支持audio,该文本便会显示</audio>
posted @ 2018-10-14 15:45  带飞  阅读(405)  评论(0编辑  收藏  举报