前端汇总
HTML CSS JavaScript
结构 样式 行为
裸体 着装 动作
1、标签分类
1.1 块级标签：一个标签占一行
1.2 行内标签：内容多少，占用空间就多少，默认无法设定宽度高度等属性
2、head标签内
2.1 meta标签
功能：编码，跳转，刷新，关键字，描述，IE兼容等
举例： <meta charset="UTF-8"> <meta http-equiv="refresh" content="3;https://www.baidu.com" /> <meta http-equiv="refresh" content="2"> <meta name="Keywords" content="html,css,javascript"> <meta name="description" content="大河向东流啊，天上的星星朝北走..."> <meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8;">
2.2 link标签
功能：引入css文件，添加页面图标
<link href="test/css.css" rel="stylesheet"> <link rel="icon" href="i1.png" >
2.3 script标签
功能：编辑JavaScript或引入JavaScript文件
<script src="JavaScript/test.js"></script>
3、body标签内
3.1 p标签
p标签，段落，一般分文字段落时使用，上下有间距
3.2 br标签
br标签，换行，相当于页面中插入一行空行
3.3 h1~6标签
h1~6标签，标题，一般内置有加粗加大等属性
3.4 div标签
div标签，白板，相当于一个盒子，页面架构时很常用
3.5 span标签
span标签，行内标签，白板，div是块级标签
3.6 form标签
form标签，一般搭配input提交表单使用
enctype="multipart/form-data" #上传文件时需要用到
method="get" #调用方法
action="https://www.baidu.com" #submit提交表单时跳转
3.7 input标签
type属性 <input type="text" value="明文显示" /> <input type="password" value="****显示" /> <input type="button" value="按钮" /> <input type="submit" value="提交" /> <input type="reset" value="重置" /> <input type="radio" value="单选" /> <input type="checkbox" value="多选" /> <input type="file" value="上传" />
3.8 textarea标签
textarea标签，文本区域，可以输入多行文本内容 <textarea name="area">dlkfjldkfj</textarea>
3.9 select标签
select标签，下拉菜单
size="8" #默认显示多少行
multiple="multiple" #允许多选
optgroup标签，下拉菜单分组
option标签，下拉菜单的选项
3.10 a标签
a标签，行内标签，
1.跳转，跳转到另一个web页面
2.作为锚，跳转到页面的某个位置
用法：href='#tag_id'
3.11 img标签
img标签，图片标签，插入图片时使用
src属性，指定要插入的图片路径
alt属性，当找不到图片时显示alt内设置的信息
title属性，当鼠标放在图片上时显示信息
3.12 列表标签
ul(li)圆点列表
ol(li)有序列表
dl(dt、dd)分级列表
3.13 table标签
table标签，表格标签，建表时使用
thead标签，表头标签，第一行表内容
tr行
td列
tbody标签，表内容标签
tr行
td列
colspan="2"属性，列合并
rowspan='2'属性，行合并
3.14 label标签
label标签，用于点击文字，可获取光标 <label for="username">用户名：</label> <input id="username" name="user"/>
3.15 fieldset标签
fieldset标签，登录框标签 legend 示例： <fieldset style=" 300px;"> <legend>登录程序</legend> <label for="username">用户名：</label> <input id="username" name="user"/> <br /> <label for="password">密码： </label> <input id="password" name="pwd"/> </fieldset>
4、input小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" enctype="multipart/form-data" method="get"> <div> <select name="city" size="1" multiple="multiple"> <optgroup label="中国"> <option value="1">深圳</option> <option value="2" selected="selected">广州</option> <option value="3">北京</option> <option value="4">上海</option> </optgroup> <optgroup label="美国"> <option value="1">华盛顿</option> <option value="2">硅谷</option> </optgroup> </select> <p>请选择性别</p> 男：<input type="radio" name="gender" value="1" checked="checked"/> 女：<input type="radio" name="gender" value="2"/> hongfa：<input type="radio" name="gender" value="3"/> <p>爱好</p> 篮球：<input type="checkbox" name="favorite" value="1"/> 足球：<input type="checkbox" name="favorite" value="2"/> 皮球：<input type="checkbox" name="favorite" value="3"/> 网球：<input type="checkbox" name="favorite" value="4"/> 跑步：<input type="checkbox" name="favorite" value="5"/> <p>技能</p> 英语：<input type="checkbox" name="skill" value="1"/> CCNP：<input type="checkbox" name="skill" value="2"/> Python：<input type="checkbox" name="skill" value="3"/> <input type="file" value="上传文件" /> </div> <textarea name="area">dlkfjldkfj</textarea> <input type="button" value="按钮" /> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form> </body> </html>