HTML常用标签02

作者: tinjunge | 来源:发表于2020-03-02 16:57 被阅读0次

HTML重点标签介绍

`a`标签

1. 属性

· 1. `href`

取值：

a.网址

        https://google.com

        http://google.com

        //google.com

b.路径

     /a/b/c以及a/b/c

     index.html以及./index.html

c.伪协议

       i. javascript:代码;

       ii. mailto:邮箱

       iii.tel:手机号

       iiii.id

2. 作用：

a. 跳转外部页面

<a href="//google.com">点击跳转Google</a>

b. 跳转内部锚点

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width, initial-scale=1.0">
        <title>超链接</title>
    </head>

    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p id="xxx">17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>21</p>
        <p>22</p>
        <p>23</p>
        <p>24</p>
        <p>25</p>
        <p>26</p>
        <p>27</p>
        <p>28</p>
        <p>29</p>
        <p>30</p>
        <a href="#xxx">点此跳转至17</a>
    </body>

</html>

c.跳转到邮箱或电话等

1.什么都不执行的伪代码：

<a href="javascript:;">点击，页面不进行任何操作</a>

2.跳转到邮箱：

<a href="mailto:txgzlove@gmail.com">点击进入发邮件操作</a>

3.跳转到电话：

<a href="tel:18012345678">点击进入电话操作</a>

· 手机页面点击，跳转至拨号界面，直接可拨打电话

========================================================

· 2. `target`

取值：

a.内置名字

i. _blank --> 在新页面打开网址

<a href="//baidu.com" target="_blank">新页面打开网站</a>

ii. _top --> 在最顶级页面打开网址
<a href="//baidu.com" target="_top">新页面打开网站</a>

iii. _parent--> 在所在页面（上一层级）直系父级页面打开网址

<a href="//baidu.com" target="_parent">新页面打开网站</a>

iiii. _self --> 在所在页面打开网址

<a href="//baidu.com" target="_self">新页面打开网站</a>

· 注："_top","_parent"一般出现在页面含有iframe框架的网页中

b.程序员命名

1.window的name

举例：

·效果：点击打开Google，页面将在名称为xxx的页面打开，若没有名称为xxx的页面，浏览器将自主创建名称为xxx的网页，这时点击打开Baidu，页面将在名称为xxx的页面打开。

1.<a href="//google.com" target="xxx">打开Google</a>

2.<a href="//baidu.com" target="xxx">打开Baidu</a>

html页面代码：

<a href="//google.com" target="xxx">打开Google</a>

<a href="//baidu.com" target="xxx">打开Baidu</a>

2.iframe的name

<a href="//google.com" target="xxx">打开Google</a>

<a href="//baidu.com" target="yyy">打开Baidu</a>
<hr>
<iframe style="border: none; width:100%; height: 800px;" src="" name="xxx"></iframe>

`table`标签

i.相关标签

<table>
<thead>
<tbody>
<tfoot>
<tr>
<td>
<th>

ii.相关样式

<style>
{
   table-layout:auto;         //表格布局
   border-collapse:collapse;  //边界去除
   border-spacing: 0;         //边界间隙
}
</style>

示例：

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>table测试</title>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>语文</td>
        <td>数学</td>
        <td>美术</td>
        <td>英语</td>
        <td>英语</td>
      </tr>
      <tr>
        <th>2</th>
        <td>体育</td>
        <td>数学</td>
        <td>美术</td>
        <td>英语</td>
        <td>体育</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td>空</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

`iframe` 标签

i.嵌套页面(目前很少用，几年前经常使用)

<iframe src="http://qq.com" frameborder="0"> </iframe>

<! frameborder(浮动框架的边缘），一般使用iframe,frameborder都给零，否则很难看。

和a标签一起使用：

示例：

    <iframe name=xxx src="#" name="xxx"></iframe>
    <a target=xxx href="http://www.qq.com">QQ</a>
    <a target=xxx href="http://www.baidu.com">写代码啦</a>"//target (面向...对象)

ii.和a标签一起使用：

示例：

<iframe name=xxx src="#" name="xxx"></iframe>
<a target=xxx href="http://www.qq.com">QQ</a>
<a target=xxx href="http://www.baidu.com">写代码啦</a>"
//target (面向...对象)

`img` 标签

a.作用: `发送GET请求，显示一张照片`

b.属性:

alt //当图片加载失败时，显示alt的内容

成功加载：

    <img src="http://webjike.com/images/logo.png" alt="一个风车">

加载失败：

    <img src="http://webjike.co/images/logo.png" alt="一个风车">

height-->img图片的高

<img height="400" src="http://webjike.co/images/logo.png" alt="一个风车">

width -->img图片的宽

<img width="400"src="http://webjike.co/images/logo.png" alt="一个风车">

`注：不能同时设置宽和高`

src //图片地址

<img src="http://webjike.co/images/logo.png" alt="一个风车">

c.事件:

onload
javascript代码：

<script>
    xxx.onload =function(){
        console.log("图片加载成功！");
    }
</script>

onerror
javascript代码：

<script>
    xxx.onerror =function(){
        console.log("图片加载失败！");
    }
</script>

图片响应式：max-width:100%;

`form` 标签

1. 作用：发get或post请求，然后刷新以页面

属性：

a。 action--> action=""中写入什么，form表单就会向谁发起请求

举例：

     <form action="/xxx.html">
         <input type="text"> // 输入框
         <input type="submit"> //提交按钮
     </form>

当点击提交按钮时，form表单向xxx.html发起请求

b。 autocomplete--> 控制form表单输入区是否自动填充

举例：

①：自动填充

<body>
    <form action="/xxx" method="POST" autocomplete="on">
        <input name="username" type="text">
        <input type="submit">
    </form>
</body>

②：非自动填充

<body>
    <form action="/xxx" method="POST" autocomplete="off">
        <input name="username" type="text">
        <input type="submit">
    </form>
</body>

c。method--> 控制form表单向xxx.html发起请求方式为get或post

举例：

form表单向xxx.html发起请求方式为post

 <body>
     <form action="/xxx" method="POST">
         <input type="text">
         <input type="submit">
     </form>

</body>



2. form表单向xxx.html发起请求方式为`get`
  ①：
   ```html
    <body>
        <form action="/xxx" method="get">
            <input type="text">
            <input type="submit">
        </form>
</body>

 ②：

```html
    <body>
        <form action="/xxx" >
            <input type="text">
            <input type="submit">
        </form>
</body>

d。target-->控制浏览器数据提交至哪个页面或对刷新哪个页面
①。浏览器数据提交至新开页面

<body>
   <form action="/xxx" method="POST" target="_blank">
       <input type="text">
       <input type="submit">
   </form>
</body>

②。浏览器数据提交x,刷新name名为iframe的开页面

<body>
   <form action="/x" method="POST" target="a">
       <input type="text">
       <input type="submit">
   </form>
   <iframe name="a" src="a-target-iframe.html" frameborder="0"></iframe>
</body>

1. form 标签里面一般会有输入框和按钮；
  
  form 标签一定要有type=“submit”，不然不能进行提交请求；
  
  form标签相关使事件
  1、onsubmit --> 在提交时触发此事件
  2、<input type="submit" >和<button type="submit" >的区别？
  input标签里面不能再加其他标签，而button标签可以加任何标签再进行修饰。

`input` 标签

1. 作用：让用户输入内容

2. 属性：

a. text-->文本输入框

<input type="text">

b. button-->按钮

 <input type="button" value="">

c. checkbox-->复选框

<input type="checkbox" name="hobby" id="">拉

<input type="checkbox" name="hobby" id="">吹

<input type="checkbox" name="hobby" id="">弹

<input type="checkbox" name="hobby" id="">唱

<input type="checkbox" name="hobby" id="">跳

· 注："input type="checkbox"使用时若需区分是否同为一组，则理应保持input 中name一致

d. file-->文件

i：单文件上传：

<input type="file" >

ii：多文件上传，添加multiple

<input type="file" multiple >

e. password-->密码框

<input type="password" name="" id="">

f. radio-->单选框

<input type="radio" name="gender" id="">男

<input type="radio" name="gender" id="">女

· 注："input type="radio"使用时须保持input 中name一致

······

3.事件：

onchange //当用户输入改变时触发事件

onfocus //当鼠标聚焦时触发

onblur //当鼠标从当前离开时触发事件

4.验证器：

HTML5新增功能，一些编辑器自带验证功能

举例：

如：required: input输入框

<input type="password" required name="" id="">

······

其他输入标签

①.select>option-->下拉选项

<body>
    <select>
        <option value="">- 请选择 -</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
        <option value="3">星期三</option>
    </select>
</body>

②.textarea-->多行文本框

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

· ！!!注意：

a。一般不监听input的click事件；

b。form里面的input要有name；

c。form里面要放一个type=submit才能触发submit事件。

网友评论

视觉艺术

本文标题：HTML常用标签02

本文链接：https://www.haomeiwen.com/subject/lthhkhtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

HTML常用标签02

HTML重点标签介绍

a标签

1. 属性

· 1. href

取值：

2. 作用：

a. 跳转外部页面

b. 跳转内部锚点

c.跳转到邮箱或电话等

· 2. target

取值：

举例：

1.<a href="//google.com" target="xxx">打开Google</a>

2.<a href="//baidu.com" target="xxx">打开Baidu</a>

table标签

示例：

iframe 标签

示例：

示例：

img 标签

a.作用: 发送GET请求，显示一张照片