一.图像标签
1.图像格式:
(1).jpg:体积大,不利于网络传输(256种真彩色)。
(2).png:体积小,支持透明。利于网络传输。
(3).gif:小动画,支持透明、体积小。利于网络传输。
(4).webp:是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。
2.标签
<img src="" alt=""/>
src:表示图像的全路径
alt:当图像加载异常时,给出的提示信息
width: 图像的宽度
height: 图像的高度
3.路径
绝对路径:从根目录开始的路径
相对路径:从当前目录开始的路径
. :代表当前目录
.. : 代表当前目录的上一级目录
例子:
<img src="../images/1.png" alt="加载中..." width="120" height="80">
二.列表标签
1.无序列表
<ul type="项目符号的类型"> -->disc、circle、square
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
2.有序列表
<ol type="项目符号的类型" start="项目符号的起始值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
3.项目列表
<dl>
<dt></dt>
</dl>
三.超链接
<a href="URL">文本/图像/多媒体</a>
其他:
1.标签的属性:放在起始标签中,以”键=值”方式出现
2.颜色的使用:
(1)使用颜色名:red、green、blue
(2)十六进制颜色: #rrggbb(#rgb),每位上的取值最大是F
(3)颜色函数:rgb(r,g,b)、rgba(r,g,b,a)
3.设置页面的背景色或背景图像
(1)背景图像:
<body background="图像的全路径名">
(2)背景色:
<body bgcolor="颜色值">
四.音频标签
<audio src="音频的路径" controls autoplay width="宽度" height="高度">
<source/>
</audio>
五.视频标签
<video src="视频的路径" controls autoplay width="宽度" height="高度"></video>
六.表格
<table>
<tr>
<th></th> -- 表格的列标题
</tr>
<tr> -->表示行
<td></td> --表示单元格
</tr>
</table>
1.<table>的属性
(1)border:边框线,默认为0
(2)width: 宽度
(3)height: 高度
(4)align:表格在网页中的对齐方式
(5)bgcolor:表格的背景色
(6)background:背景图像
(7)cellspacing:单元格之间的距离
(8)cellpadding:单元格边线与单元格内容之间的距离(内补白)
2.tr标签的属性
(1)height: 表示行高
(2)align:水平对齐方式(left、center、right)
(3)valign:垂直对齐方式(top、center、bottom)
(4)bgcolor:表格的背景色
(5)background:背景图像
3.td标签的属性
(1)width:单元格的宽度
(2)align:水平对齐方式(left、center、right)
(3)valign:垂直对齐方式(top、center、bottom)
(4)bgcolor:表格的背景色
(5)background:背景图像
(6)height:单元格的高度
(7)合并单元格的属性
A、跨列: colspan=”跨的列数”
B、跨行:rowspan=”跨的行数”
4、<caption>表格标题</caption>
5.语义标签:表示某种含义,没有具体的显示效果
(1)<thead></thead>:表示表格头部
(2)<tbody></tbody>:表示表格的主体
(3)<tfoot></tfoot>:表示表格的页脚
七.表单
1.什么是表单
(1)收集用户的信息(登录、调查问卷、注册等)
(2)将信息发送给后台服务器
2.表单的组成
<form name="表单的名称" action="远程服务器的URL" method="提交信息的方式">
表单控件
</form>
3.表单控件
<label></label>:显示提示信息
1.input控件
name:是控件的名称,可以通过名称来获得控件中的值
id:控件的唯一标识,不能重复
value:控件中的值
placeholder:提示信息,当用户输入时会自动消失
size:标识文本框的宽度
readonly:只读属性
disabled:控件是否可用
maxlength:可用输入的最多字符数
checked:用于单选、复选按钮,表示按钮被选中
———————————————————————————————————————————
(1)单行文本框
<input type="text" />
<input type="text" name="username" id="username" value="控件的值"/>
(2)密码框
<input type=”password”/>
(3)单选按钮
<input type=”radio/>
(4)数字框
<input type=”number” />
(5)日期
<input type=”date”/>
(6)日期时间
<input type=”datetime-local”/>
(7)复选框
<input type=”checkbox” />
(8)颜色框
<input type=”color” />
(9)文件选择框
<input type=”file” />
(10)隐藏文本框
<input type=”hidden”/> 可以向服务器传递数据,但是该数据在页面中不显示
(11)电子邮箱
<input type=”email”/>
(12)提交按钮:将表单控件的值提交给’action’属性给定的远程服务器
<input type=”submit” value=”按钮上的文字”/>或
<button type=”submit”>按钮上的文字</button>
(13)重置按钮:将表单控件的值恢复到初始状态
<input type=”reset” value=”按钮上的文字”/>或
<button type=”reset”>按钮上的文字</button>
(14)普通按钮
<input type=”button” value=”按钮上的文字”/>或
<button type=”button”>按钮上的文字</button>
2.textarea控件:文本区,可以编辑多行、多列数据
<textarea cols=”列数” rows=”行数”></textarea>
3.select控件:下拉列表框
<select multiple>
<option value="值">列表项</option>
<option value="值">列表项</option>
<option value="值">列表项</option>
<option value="值">列表项</option>
</select>
//multiple属性:可以多选