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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值