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
:自动获取焦点
。。。。。