HTML基础
一、图像 <img />
标签的属性
<img src="图片路径URL"/ height="高度" width="宽度" alt="图片说明" title/>
图像可以是GIF，PNG，JPEG，JPG，webp格式的图像文件
jpg jpeg格式兼容性好
webp格式Google推出的 主流浏览器不兼容
src必要属性
最主要的部分是路径
绝对路径 如：<img src="http://www.a.com/img/a-next.jpg"/ >
相对路径 如：<img src="../img/a-next.jpg" />
根相对路径 如：<img src="/img/a-next.jpg" />
href 是指向网络资源所在的位置，建立和当前元素(锚点)或当前文档之间的链接 用于超链接
src 是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置
二、表格
在HTML语言中，表格至少由<TABLE>标签、<TR>标签和<TD>标签这3对标签组成
1、表格组成标签
table 表格
tr 表格行 table row
td 单元格 table data cell
caption 表格标题
th 标题单元格 table header
scope 属性定义将表格中表头单元与数据单元相关联的方法。
scope 属性标识某个单元是否是列、行、列组或行组的表头。
2、表格的结构
在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体 如下所示：
<thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。
<tfoot></ tfoot >：用于定义表格的页脚，位于<table></table>标记中<thead></thead>标记之后，一般包含网页底部的企业信息等。
<tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<tfoot></ tfoot >标记之后，一般包含网页中除头部和底部之外的其他内容。
3、属性：Border Cellspacing Cellpadding Width Height Align bgcolor
4、合并单元格
rowspan 单元所占行数 rowspan="2"两行转为一行(自上向下合并)
colspan 单元所占列数 colspan="2"两列转为一列（从左到右合并）
colspan="3" 合并列
rowspan="3" 合并行
合并方向是:
从左到右
自上而下
【注意】
右边和下面没有单元格时不进行合并操作
要删除被合并的单元格
合并单元格的方向
三、表单
1、语法：
<form name="form_name" action="url" method="get|post">…</form>
Name ：定义表单的名称
Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；
Action ：用来指定表单处理程序的位置(服务器端脚本处理程序）
2、input控件
type属性规定 input 元素的类型。
以下是type的常用属性值：
文本text placeholder="规定帮助用户填写输入字段的提示"
密码框 password
按钮button value属性
单选radio name属性（需要这个属性才可以进行单选）
复选checkbox
上传文件 file
重置reset
提交submit
图片 image
3、html5中的Input新type属性
email 邮件
number 数字
range 选择范围
date, month, week, time, datetime, datetime-local
日期 月 星期 时间 日期时间 当地的日期时间
color 颜色
4、label扩大选择区域
5、属性：name value readonly checked placeholder maxlength
textarea控件
如果需要输入大量的信息，就需要用到<textarea></textarea>标记。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
select控件
在HTML中，要想制作如下图所示的下拉菜单，就需要使用select控件
input
datalist 既可输入又可选择
6、<form name="form_name" action="url" method="get|post">…</form>
四、标签补充
1、<pre>...</pre>预格式文本，空格 tab缩进都可以显示（常见应用就是用来表示计算机的源代码）
转义字符
空格
> 大于号(>)
<小于号(<)
<blockquote>...</blockquote> 长文本引用，上下会换行，且两边都有缩进（有外边距）
<q>...</q> 短文本引用，两边有引号（我们编码时会用到“”要使得“”显示出来就可以用这个标签）
<base href="" target="_blank" /> 定义了页面链接标签的默认链接地址
2、<meta/>
<meta name="keywords" content="" /> 为搜素引擎定义关键字
<meta name="description" content="" /> 为网页定义描述内容
<meta name="author" content="" /> 定义网页作者
<meta http-equiv="refresh" content="30" /> 每30秒钟刷新当前页面
结构性区域标签补充
<figure>...</figure> 定义图像区域，两边有缩进(外边距)
<figcaption>...</figcaption> 定义图像区域的标题
狂拽炫酷吊炸天的HTML5新标签：
<audio>...</audio> controls如果出现该属性，则向用户显示控件，比如播放按钮。可以直接添加音频
<video>...</video> 尝试
<source/> 设置新的媒体源(兼容性做法)
html5中特殊的媒体元素标签
video:在HTML5中专门用来播放网络上的视频或者电影
audio:在HTML5中专门用来播放网络上的音频
用src属性
source元素指定多个播放格式与编码
<video controls="controls">
<source src="viedo.m4v" type="video/mp4" />
<source src="viedo.webm" type="video/webm" />
<source src="viedo.ogg" type="video/ogg" />
<source src="viedo.mp4" />
</video>
preload 这个属性指定是否对数据进行强加载，如果是的话浏览器会将视频数据或者音频数据进行缓冲这样做可以加快播放的进度。
none
metadata
auto
poster="图片"
