html总结

1、标题标签：<h1>~<h6>

2、段落标签：<p></p>

3、换行：

strong加粗	b
em倾斜	i
del删除线	s
ins下划线	u

4、div span（盒子）

4.1 div独占一行，属于块级元素，无语义，用于布局，装内容

4.2 span一行可以写多个，属于行内元素，无语义

5、图片标签<img />

属性	属性值	说明
src	图片路径	必要的属性
alt	文本	当图片不能正常显示替换文本
title	文本	当鼠标放在图片上显示的文本

5.1 路径之相对路径和绝对路径

• a.相对路径

分类	符号	说明
同级		图像位于html页面同一级。如src="1.jpg"
上级	../	图像位于html页面上一级。如src="../images/1.jpg"
下级	/	图像位于html页面下一级。如src="images/1.jpg"

• b.绝对路径 ：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。 例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”

5.2、根目录： ./

6、链接标签<a><a/>

6.1、属性 ：

（1） href：用于指定链接目标的url地址。href="#"：空链接 ； href="javascript:;" 点击不会刷新页面

（2）target：用于指定链接页面的打开方式，_self 在当前页打开（默认值）， _blank 新窗口打开

6.2、链接分类：

（1）外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。

（2）内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可。例如 < a href="index.html"> 首页 </a >

（3）空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。

（4）下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

（5）网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

（6）锚点链接: 当我们点击链接,可以快速定位到页面中的某个位置。

<ahref="#head">首页</a>
<h1id="head">头部</h1>

7、特殊字符

特殊字符	描述	字符的代码
	空格	&nbsp
<	小于	&lt
>	大于	&gt

1. table标签

// table用于展示数据
<table>
    <thead>  //头部
        <tr>
            <th></th>  //表头，文字加粗居中显示
        </tr>
    </thead>
    <tbody>  //主体
        <tr>
            <td></td>  //数据
        </tr>
    </tbody>
</table>

属性	作用
cellspacing	单元格与单元格之间的距离
cellpadding	内容与单元格之间的距离
colspan	跨列合并
rowspan	跨行合并
align="center"	将表格居中显示

8.1、带有标题的表格

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

2. 列表标签

// 无序列表ul
<ul>
    <li></li>
</ul>
// 有序列表ol
<ol>
    <li></li>
</ol>
// 自定义列表dl
<dl>
    <dt>名词</dt>
    <dd>解释1</dd>
    <dd>解释2</dd>
</dl>

10、表单标签<form></form>

用于收集信息传递到服务器。

属性	属性值	作用
action	url地址	指定接收并处理表单数据的服务器程序的url地址
method	get/post	设置表单数据的提交方式
name	名称	指定表单名称，区分其他表单域

表单控件<input type="">

属性值	描述
button	点击按钮
checkbox	复选框
password	密码字段
radio	单选按钮
reset	重置按钮
submit	提交按钮
text	文本
file	上传文件
hidden	隐藏输入字段
image	以图像形式的提交按钮

<input>的其他属性

属性	属性值	描述
name	用户自定义	定义input的名称
value	用户自定义	规定input的值
checked	checked	首次加载被选中
playholder	用户自定义	点击文本消失

<lable>标签
<inputtype="radio"id="nan"name="sex">
<labelfor="nan">男</label>
<inputtype="radio"id="nv"name="sex">
<labelfor="nv">女</label>

下拉框<select>
<selectname="year"id="nian">
   <optionvalue="">请选择年份</option>
   <optionvalue="">2002</option>
   <optionvalue="">2003</option>
</select>  

文本域<textarea>
<textarea name="" id="">个人简介</textarea>

HTML5新特性

1、语义标签

标签	描述
header	头部
nav	导航栏
article	内容
footer	底部
section	区域
aside	侧边栏

• （一般在移动端使用）

2、多媒体标签

兼容性写法

<video  controls="controls"  width="300">
    <sourcesrc="move.ogg"type="video/ogg">
    <sourcesrc="move.mp4"type="video/mp4">
    您的浏览器暂不支持 <video> 标签播放视频
</video>

2.1视频标签<video>

属性	属性值	描述
autoplay	autoplay	视频就绪自动播放（谷歌须加 muted 解决自动播放）
muted	muted	静音播放
loop	loop	循环播放
poster	url	加载等待的画面图片
preload	auto（预先加载）/none	是否预加载视频（有autoplay忽略该属性）
controls	controls	显示播放控件
width	像素	设置播放器宽度
heigth	像素	设置播放器高度
src	url	视频url地址

2.2音频标签<audio>

属性	值	描述
autoplay	autoplay	音频就绪后马上播放
controls	controls	显示播放控件
loop	loop	当音频结束时重新开始播放
src	url	播放音频的地址

3、表单元素<input>

3.1 type属性

属性值	说明
email	限制用户输入必须为email类型
url	限制用户输入必须为url类型
date	限制用户输入必须为日期类型
time	限制用户输入必须为时间类型
month	限制用户输入必须为月类型
week	限制用户输入必须为周类型
number	限制用户输入必须为数字类型
tel	手机号码
search	搜索框
color	生成一个颜色选择表单

3.2 表单属性

属性	属性值	描述
required	required	内容不能为空
placeholder	提示文本	提示信息
autofocus	autofocus	自动聚焦
autocomplete	off/on	输入记录打开on，关闭off
multiple	multiple	可以多选文件提交