HTML常用标签02

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.属性:

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

成功加载：

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

加载失败：

    <img src="http://webjike.co/images/logo.png" alt="一个风车">
  1. height-->img图片的高
<img height="400" src="http://webjike.co/images/logo.png" alt="一个风车">
  1. width -->img图片的宽
<img width="400"src="http://webjike.co/images/logo.png" alt="一个风车">

注：不能同时设置宽和高

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

c.事件:

  1. onload
    javascript代码：
<script>
    xxx.onload =function(){
        console.log("图片加载成功！");
    }
</script>
  1. onerror
    javascript代码：
<script>
    xxx.onerror =function(){
        console.log("图片加载失败！");
    }
</script>
  • 图片响应式：max-width:100%;

form 标签

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

    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

举例：

  1. 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事件。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,053评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,527评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,779评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,685评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,699评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,609评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,989评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,654评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,890评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,394评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,976评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2赞 342