html下拉复选框_HTML笔记
做为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 密码
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="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>
嵌⼊图⽚
html下拉菜单的制作方法<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。