做为WEB前端必须知道的是HTML,更多的相关HTML知识可以看W3school
<> 里面内容为标签 <> 下面的为该标签的相关属性 标签或属性后面的文字为注释内容
文件简述
<!doctype html>
<html lang="zh"> 语言
<head> 头部
<meta charset="utf-8"> 编码
<title>标题</title> 标题
</head>
<body> 主体
…………
</body>
</html>
基本元素
<h1></h1> 一级标题
<h2></h2> 二级标题
...
<p></p> 段落
<b></b> 粗体
<em></em> 斜体
<u></u> 下划线
<s></s> 删除线
<br> 换行
<hr/> 分割线
<a></a> 超链接
href="" 链接地址
target="_self" 当前窗口 默认
target="_blank" 新窗口
表格元素
<table></table>
普通表格
<table>
<tr> 第一行
<td>00</td>
<td>01</td>
</tr>
<tr> 第二行
<td>10</td>
<td>11</td>
</tr>
</table>
带表头的表格
<table>
<tr> 第一行
<th>标1</th> 表头
<th>标2</th> 表头
</tr>
<tr> 第二行
<td>1</td>
<td>2</td>
</tr>
</table>
合并单元格
<table>
<tr> 第一行
<td rowspan="2">00</td> 竖向合并
<td>01</td>
<td>02</td>
</tr>
<tr> 第二行
<td>11</td>
<td>12</td>
</tr>
<tr> 第三行
<td colspan="2">20</td> 横向合并
<td>22</td>
</tr>
</table>
列表元素
<ol></ol>
<ul></ul>
有序列表
<ol type="" reversend>
<li></li> 列表中的项
</ol>
type="" 样式
reversed 降序
无序列表
<ul>
<li></li> 列表中的项
</ul>
表单元素
<form></form>
表单类型
<form>
<input type="">
password 密码
email 邮箱
tel 电话
url 网址
date 日期
color 颜色
search 搜索
hidden 隐藏的数据项
image 图像按钮(点击图像时url后面显示点击坐标)
</form>
单行文本
<form>
<input type="text">
value="a" 填写好了a
placeholder="a" 提示内容a
maxlength="5" 最大字符5
size="5" 输入框可见大小为5
readonly 只读
</form>
多行文本框
<form>
<textarea>
rows="5" 可见宽度
cols="5" 可见高度
</textarea>
</form>
输入数字
<form>
<input type="number">
min="0" max="100" 最小值0 最大值100
value="50" 起始值为50
</form>
数字滑动条
<form>
<input type="range">
min="0" max="100" 最小值0 最大值100
step="10" 一次滑动10个值
value="50" 起始值为50 默认中间
</form>
选择框
<form>
<input type="checkbox"> 复选框(勾选后可取消)
<input type="radio"> 选择框(选择后不可取消)
name="a" 选项
checked 进入网页默认选中
</form>
下拉选择列表
<form>
<select>
<option>a</option> 选项
<option>b</option> 选项
<option>c</option> 选项
</select>
</form>
文本数据列表框
<form>
<input type="text" list="data">
<datalist id="data"> 需要配合文本一起
<option>a</option> 选项
<option>b</option> 选项
<option>c</option> 选项
</datalist>
</form>
按钮
<form>
<input type="button" value="按钮"> 普通按钮
<input type="submit" value="按钮"> 提交表单 与form的method和action属性关联
<button onclick="">按钮</button> js绑定事件
</form>
上传文件
<form>
<input type="file" > form属性加入enctype="multipart/form-data"
multiple 上传多个文件
required 上传单个文件
</form>
嵌入图片
<img>
嵌入图片
<img>
src="" 图片地址
width="" 宽度
height="" 高度
alt="" 图片备用内容
创建响应分区
<img src="" usemap="#mi">
<map name="mi"> 创建分区
<area href="" shape="" cords=""> 点击分区块1
<area href="" shape="" cords=""> 点击分区块2
<area href="" shape="" cords=""> 点击分区块3
</map>
shape
:
cords
rect
:矩形区域 a,b,c,d(a-d:依次为上到左顺时针)
circle
:圆形区域 x,y,r;x,y:圆形坐标;r:圆形半径
poly
:多边形(至少6个数组);每个数字代表多边形的一个顶点
default
:默认值(整个图像)
嵌入视频
<video></video>
嵌入视频
<video></video>
src="" 视频地址
width="" 宽度
height="" 高度
poster="" 封面图
href 链接地址
target="_self" 当前窗口 默认
target="_blank" 新窗口
loop 循环播放
autoplay 自动播放
controls 播放控件
muted 视频静音
preload="" 当页面加载后载入视频
auto 载入整个视频 默认
metadata 只载入第一帧
none 不载入
设置视频格式
<video>
<source src="xx.ogg" type="video/ogg"/>
<source src="xx.mp4" type="video/mpeg"/>
无法播放ogg格式视频时则跳转到该mp4视频
</video>
嵌入音频
<audio></audio>
嵌入音频
<audio></audio>
src="" 音频地址
loop 循环播放
autoplay 自动播放
controls 播放控件
preload="" 当页面加载后载入音频
auto载入整个音频 默认
meta只载入元数据
none不载入音频
设置音频格式
<audio>
<source src="xx.ogg" type="audio/ogg" />
<source src="xx.mp3" type="audio/mpeg" />
无法播放ogg格式音频时则跳转到该mp3音频
</audio>