HTML常用标签详解

1、iframe 标签(目前很少用，几年前经常使用)

嵌套页面
eg： 
a、<iframe src = "htttp://www.qq.com" frameborder = "0"></iframe>  
//frameborder(浮动框架的边缘），一般使用iframe,frameborder都给零，否则很难看。
b、和"<a>"标签一起使用：
<iframe name = xxx src = "#" name = "xxx"></iframe>
<a targrt = xxx href = "http://www.qq.com">QQ</a>
<a targrt = xxx href = "http://www.baidu.com">写代码啦</a>"//target (面向...对象)

2、<a>标签

跳转页面(HTTP GET 请求)
<a href = "http://www.qq.com" target = "_blank">QQ</a>
//  blank(空)--表示空页面打开链接
<a href = "http://www.qq.com" target = "_slef">QQ</a>
// self(自己)表示当前页面打开链接
<a href = "http://www.qq.com" target = "_parent">QQ</a>
//parent(父母)表示在上一级页面打开链接
<a href = "http://www.qq.com" target = "_top">QQ</a> 
//  top(上)表示在最顶级页面打开连接
<a href = "http://www.qq.com" download>下载</a> 
//  表示下载
<a href = "javascript: ;">QQ</a> 
//"javascript:"为伪协议相当于"http:"→可以完成点击“QQ”标签页面不动的需求。

//  当 href=" #xxx" 时，表示“href” 等于锚点时是不发送的“get”请求的。
//  href = " " 的用法 ： "//qq.com"表示使用当前页面的协议
                         //"#xxx"       ?name=pppp     ./xxx.html
                         //javascript:alert(1);        javascript:;

3、<form>标签

跳转页面(HTTP POST 请求)
<form action = "users" method = "post">
    <input type = "text" name = "username">
    <input type = "text" name = "password">
    <input type = "checkbox" id = "xxx"> <label for = "xxx">爱你</label>
    //laber中的for和type中的id一起使用。

    或者用laber把input包起来
    eg：[<label>爱你 <input type = "checkbox" id = "xxx"></label>效果一样,
        选项和描述关联起来]
    <input type = "submit" value = "提交">
</form>

//如果form表单里面没有提交按钮，那么就无法提交form。
//form标签主要发起POST请求，
//form中的name最终会被带到请求第四部分中的KEY.
//关于<a>标签target四种用法，同样适用于<form>标签
//[如果一个form里面没写"type"只用button会自动升级为按钮。
  如果写了type，就要用完整语法" input type = "submit" value = "提交" "]

4、<input>/<button>标签

是否为空标签
input常用方法：input type = "  "
<form action = "users" method = "post">
  <label>用户名<input type = "text" name = "username"></label>
  <label>密码<input type = "text" name = "password"></label>
  喜欢的水果
  <label><input type = "checkbox" name = "fruit" value= "orange">橘子 </label>
  <label><input type = "checkbox" name = "fruit" value= "banana">香蕉 </label>
  爱我
  <label><input name="love me"type="radio" name="fruit" value="yes">Yes</label>
  <label><input name="love me" type="radio" name ="fruit" value="no">No</label>
  <select name="group" multiple>  
  //下拉选项,不添加multiple(多选)只能单选，添加后可多选

        <option value=" ">-</option>
        <option value="1 ">第一组</option>
        <option value="2 ">第二组</option>
        <option value="3 " disabled>第三组</option> 
        //disabled（失去能力）意为不能选

        <option value="4 " selected>第四组</option> 
        //selected（挑选出来）意为默认选项
    </select>
    <input type = "submit" value = "提交">
</form>
//checkbox是多选框；radio是单选框，name赋值时要一样，

textarea：实现用户选择多行内容
eg:
<textarea style="resize:none; width:100px; height:100px;"name="爱好"></textarea>

5、<table>标签

用于展示数据<tr>//table row; <td>//table data;  //"th"表示表头；"td"表示数据。
<style>
    table{border-collapse;collapse;   //可以合并表格间的缝隙
            }
</style>
<table>
    <colgroup border=1>  
    //<colgroup>和 <col>一起用;col里面还可以用bgcolor了解一下。

        <col width=100>
        <col width=100>
        <col width=100>
        <col width=100>
    </colgroup>
    <thead>
        <tr>//table row
            <th>姓名</th><th>班级</th><th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>平均分</th><td>1</td><td>2</td><td>3</td>
        </tr>
    </tbody>
    <tfoot>        
        <tr>
            <th>总分</th><td>1</td><td>2</td><td>3</td>
        </tr>
    </tfoot>
</table>

文章内容引用自 “饥人谷” ，转载务必注明来源。

最后编辑于：2019.08.17 12:14:55