HTML学习笔记03

11、 图片标签

<img src="图片地址" alt="描述">(alt：搜索识别内容)

下面介绍一下网页中使用的图片四种形式
jpg（jpeg）:支持颜色丰富，不支持透明，不支持动态图
gif:支持颜色较少，支持简单透明，支持动态图
png:支持颜色丰富，支持复杂透明，不支持动态图
webp:新推出（谷歌），具有所有的优点，文件小，但是兼容性不好。

注：还有一种base64编码的图片；将图片进行base64编码，在网页加载时一起引入网页

12、内联框架

<iframe src="https://www.baidu.com" width="500" height="500" frameborder="0" ></iframe>

属性：
src:外部引入的链接
width:引入后的框宽度
height:引入后的框高度
frameborder:引入后的边框大小,0无边框

13、音视频播放

注：两者都是默认不允许用户控制

音频

<audio src="音频地址" controls autoplay loop></audio>

属性：（都是布尔类型）
controls：是否可以控制，如果不写将不会显示
autoplay： 是否自动播放，大部分不会自动播放
loop：是否循环

兼容性问题：IE8及以下

<audio controls autoplay loop>
	<source src="音频地址.mp3">
	<source src="音频地址.ogg">
	<embed src="音频地址.mp3" type="audio/mp3" width="100" height="100">
	(embed必须指定宽高)

</audio>

视频
同以上音频类似,全兼容方式

<video controls autoplay loop>
	<source src="音频地址.webm">
	<source src="音频地址.mp4">
	<embed src="音频地址.mp4" type="vedio/mp4">
</video>

14、表格

普通表格

<table border="1">
  <tr>
    <th>Month</th><!--列-->
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td><!--行-->
    <td>$100</td>
  </tr>
</table>

合并列：<td colspan="2">abc</td>
合并行：<td rowspan="2">abc</td>

长表格
增加了三个标签<thead></thead>，<tbody></tbody>，<tfoot></tfoot>

<table border="1" width="50%" align="center">
        <thead>
            <tr>
                <td>日期</td>（标题可以为<th></th>默认加粗）
                <td>收入</td>
                <td>支出</td>
                <td>合计</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.2</td>
                <td>600</td>
                <td>200</td>
                <td>400</td>
            </tr>
            <tr>
                <td>2000.1.3</td>
                <td>700</td>
                <td>200</td>
                <td>500</td>
            </tr>
            <tr>
                <td>2000.1.4</td>
                <td>400</td>
                <td>100</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>1500</td>
            </tr>
        </tfoot>
    </table>

15、表单

表单

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

form属性：
action:提交的地址
method:get、post
input项

<input type="text" name="keyword" value="input">
<input type="submit" name="keyword" value="input">(就是一个按钮)
<input type="password" name="keyword" value="input">
<input type="email" name="keyword" value="input">

单选按钮
单选按钮name值必须一致

<input type="radio" name="keyword" value="a">
<input type="radio" name="keyword" value="b">

多选按钮
多选按钮name值必须一致

<input type="checkbox" name="keyword" value="a">
<input type="checkbox" name="keyword" value="b">

下拉列表

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

按钮

<button typoe="submit">提交</button>
<button typoe="reset">提交</button>
<button typoe="button">提交</button>

注：input可以表示代替<button>,只要设置type的类型即可

input属性：
type:text,button,email,password等等
name:input的标识
value:输入框值
placeholder:默认显示value值
reset：重置
autocompllete:"on/off"自动补全
readonly:只读
disabled:禁用
autofocus:自动获取焦点
。。。。。