HTML常用标签

　　　　前端汇总
　　　　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="width: 300px;">
<legend>登录程序</legend>
<label for="username">用户名：</label>
<input id="username" name="user"/>
<br />
<label for="password">密码：&nbsp;&nbsp;&nbsp;</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>
提交表单

 

posted @ 2018-05-31 16:50  糕事情  阅读(230)  评论(0)  编辑  收藏  举报