HTML整理2

表单标签

一个表单整体范围 

action: 提交的网络地址

method: 请求方式get和post

默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输

<form action="" method="">
    所有的表单内容，都要写在form标签里面
</form>

input标签 

type: 输入方式

<input type="text"/>       文本              
<input type="password"/>   密码              
<input type="radio">       单选框            （默认多选， 互斥在多个radio标签中添加 相同的name属性）， checked默认显示 
<input type="checkbox">    多选框             同样添加相同的name属性,  checked默认显示
<input type="button">      按钮               作用可点击
<input type="reset" />     重置表单           重置form信息
<input type="hidden">      隐藏信息           隐藏提交到服务器的信息    
<input type="submit" />    提交表单按钮        把表单数据发送到action属性指定的地址

value: 添加默认值

maxlength: 输入字符最大长度

label标签

绑定表单标签，方便鼠标点击聚焦

绑定: 给label标签for属性添加一个表单元素一样的id值

 select标签

创建表单里的待选列表,  可选择某一个选项

<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山东</option>
    <option>山西</option>
    <option>湖北</option>
    <option selected="selected">贵州</option>        selected默认值
</select>    

<select>
    <optgroup label="北京市">           optgroup添加分组
        <option>海淀区</option>
        <option>昌平区</option>
        <option>朝阳区</option>
    </optgroup>
        <optgroup label="广州市">
        <option>天河区</option>
        <option>白云区</option>
    </optgroup>
    <option selected="selected">贵州</option>
</select>

多行文本框(文本域)

cols: 列

row：行

<textarea cols="30" rows="10">默认</textarea>

默认可以拉动

     <!--禁止手动拉伸-->
    <style type="text/css">
        textarea{
            resize: none;
        }
    </style>

H5新增标签

html只能处理文本和图片, h5在基础之上可以处理多媒体数据

多媒体标签

video标签  播放视频

src：播放路径

autoplay：自动播放

controls：控制条

poster：占位海报

loop：播放次数。默认-1循环，一般用于做广告视频

preload： 预加载视频。preload和autoplay相冲, 设置了autoplay属性 preload会失效

muted： 静音

width/height： 视频宽高

格式1:   

<video src="">
</video>

格式2：

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

格式2的意义在与：

5大厂商浏览器都有自己的格式，W3C为了解决浏览器适配问题推出第二种

注意点: 过去的一些浏览器是不支持HTML5标签，同样无法播放，以后通过一个JS的框架html5media来实现

audio标签  播放音频

和video标签的使用基本一样，height/width/poster属性不能用

格式:

<audio src="">
</audio>

<audio>
    <source src="" type="">
</audio>

summary标签       详情和概要标签

summary描述概要，details描述详情，默认折叠

格式：

<details>
    <summary>概要信息</summary>
    详情信息
</details>

marquee标签

作用: 跑马灯效果  （ 不是W3C推荐的标签, 在W3C文档无法查询这个标签, 但是各大浏览器支持非常好）

direction: 滚动方向up

scrollamount: 滚动速度, 值越大越快

loop: 次数, 默认是-1, 也就是无限滚动

behavior: 滚动类型。弹回

<marquee>内容</marquee>

HTML中被废弃的标签

有一部分不是添加语义的，只修改样式，所以这部分标签都被废弃了b、u、i、s

<b>将文本字体加粗</b>
<u>为文本添加下划线</u>
<i>显示斜体文本效果</i>
<s>为文本添加删除线</s>

新的替代标签

<strong>着重内容</strong>
<ins>新插入的文本</ins>
<em>强调内容</em>
<del>已删除的文本</del>

HTML实体

&lt  输出一个小于符号 <         英语less than 

&gt 输出一个大于符号 >        英语greater than

&nbsp 输出一个空格             英语non-breaking spacing

只需了解:

表格标签

table定义表格 ，tr定义行，td定义单元格

border: 设置边框。默认为0看不到

cellspacing: 设置外边距。 默认单元格之间有2个像素的间隙

cellpadding: 设置内边距。默认边缘距离内容有1个像素

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

数据列表

作用: 给输入框绑定待选项

请输入你的车型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>

• 属性:

  • direction: 设置滚动方向 left/right/up/down
  • scrollamount: 设置滚动速度, 值越大就越快
  • loop: 设置滚动次数, 默认是-1, 也就是无限滚动
  • behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回

本内容收集与网络，部分转载极客江南，并将内容提炼整理。