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编辑  收藏  举报