阅读 102

《HTML常用标签》

HTML常用标签

a标签

a标签的属性

href

意思为超级引用(链接),包含超链接指向的URL。

a-href的取值范围是多少?

通常来说有四种取值,依次是以下:

  1. 网址——链接到外部地址。

例如baidu.combaidu.com 、//baidu.com //baidu.com是最高级的,在访问时会自动适配到www.baidu.com. 那么使用a标签-//baidu.com链接到百度的页面的过程中,浏览器如何自动适配到完全的网址的:

//baidu.com ——> baidu.com ——> www.baidu.com ——> www.baidu.com

通过上面示例,我们发现a-href的网址取值中使用//baidu.com 为最高级,无须写全网址。

  1. 路径
  • 绝对路径:/a/b/c——是指文件在硬盘中真实存在的路径
  • 相对路径:a/b/c——是指相对于自己的目标文件的位置的路径
  • index.html或者./index.html;文件路径或者图片路径都可以。
  1. 伪协议
  • javascript:alert(1);

如果需要实现访问一个a标签,但是又什么都不做,那么使用伪协议是最好的也是唯一的方法:

<a href+"javascript:;">查看</a>

  • mailto:邮箱

<a href="123442312@163.com">发邮件给×××</a>

a-href-mailto.jpg

  • tel:手机号

<a href="tel:13487563735">打电话给我</a>

a-href-tel.jpg 4. id <a href="id=xxx">查看xxx</a>

在目标标签中设置id,再通过a标签跳转到指定的id位置。

target

表示为在哪个窗口打开超链接。其取值范围为:

内置名字:

  1. _blank:在空白页面打开超链接

  2. _self:在当前页面打开超链接

  3. _top: 在最顶层页面打开链接。一般我们先使用一个iframe标签将嵌入页面的上层,这样才能实现在最顶层打开页面的功能,如果没有做iframe标签或者没有parent标签,那么其功能等同于_self

  4. _parent:在当前页面的上一级页面打开超链接。一般我们也是先使用iframe标签嵌入三个页面,在里面的页面中做_parent设置,那么就会在其上级打开超链接

程序员命名:

  1. Windows的name
  2. iframe的name

download

此属性作用为下载网页的URL,但是现在很多浏览器都不支持这个属性了。

rel=noopener

a标签的作用

如上图所示

  1. 跳转到外部的页面
  2. 跳转到内部的锚点(文件、图片、同一页面的其他位置)
  3. 跳转到邮箱地址或者电话

img标签

img标签的作用就是发送一个get请求,再展示一张图片。

img标签的属性

  1. alt属性

定义了图片的备用文本描述,如果图片加载失败,那么alt属性里面的内容就是替换的内容。

img-alt.png

  1. height/width 属性

设置图片的宽高。

只写height,width自适应:

img-alt-height.jpg

只写width,height自适应:

img-alt-width.jpg

同时写height和width,则会导致图片变形:

img-alt-变形.jpg

作为一名前端工程师,千万不能让图片变形,这是底线。

  1. src 属性

图像的URL,这个属性对弈img标签来说是最重要,如果没有src属性,那img标签将无法正常使用。

img标签的事件

onload/onerror:表示监听图片是否加载成功 可以使用这个事件对用户体验做一个优化

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

        xxx.onerror = function() {
            console.log("图片加载失败");
            xxx.src="404.jpg";
        }
    </script>
复制代码

img-记载失败.jpg

加载失败是控制台显示信息.jpg

响应式

只要加一个最大宽度为100%就可以适应手机页面 max-width:100%

可替换元素

table标签

只能有thead、tbody、tfoot,这三个标签。

    <table>
        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>
复制代码

tr 表示一行(table row)

td 表示table data

th 表示表头

1.单个表头的表格示例如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table>
      <thead>
          <th>英语</th>
          <th>翻译</th>
      </thead>
      <tbody>
          <tr>
              <td>hyper</td>
              <td>超级</td>
          </tr>
          <tr>
              <td>target</td>
              <td>目标</td>
          </tr>
          <tr>
              <td>reference</td>
              <td>引用</td>
          </tr>
      </tbody>
      <tfoot></tfoot>
  </table>
</body>
</html>
复制代码

单表头的表格.jpg

  1. 多个表头的表格示例如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>小红</th>
                <th>小兰</th>
                <th>小强</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>79</td>
                <td>82</td>
                <td>92</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>100</td>
                <td>97</td>
                <td>87</td>
            </tr>
        </tbody>
        <tfoot>
            <th>总分</th>
            <td>240</td>
            <td>270</td>
            <td>264</td>
        </tfoot>
    </table>
</body>
</html>
复制代码

多表头的表格.jpg

相关的样式

  1. table-layout:auto:自动计算行列的宽高(实现个性化调整)

自动计算宽高.png

table-layout:fixed:平均分配宽高

平均分配宽高.jpg

2.border-collapse:collapse:边框空隙合并

合并边框间隙.jpg

3.boder-spacing:o; 设置边框空隙。

form标签

  • 作用

发出get或者post请求,然后刷新页面

  • 属性

1.action:get或post哪个页面

2.method:控制使用get或post请求

3.autocomplete:on/off:是否自动填充,弹出填写意见。

4.target:选择刷新页面。提交到哪个页面。

-事件

1.on submit:提交选项,一个form表单必须要有一个submit,才能提交。如果不写submit,系统自动默认submit。

注: <input type="submit" vablue="搞起"><button type="submit">搞起</button>的区别

答:button里面可以加任意东西,input里面不能有东西(纯文本)。

input标签

  • 属性
  1. txet 文本
  2. color 颜色
  3. password 密码
  4. radio 单选——使用同一name,就可以二选一
  5. checkbox 多选——使用同一个name,就是分在一个组里面
  6. file 上传——多选文件:multiple
  7. hidden隐藏——给机器填写东西
  8. textarea 多行文本框:若不允许拖动,可以将设置:resize:none;
  9. selet :选择框
 <select name="" id="">
        <option value="">请选择</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
    </select>
复制代码
  • 事件
  1. onchange
  2. onfocus
  3. onblur
  • 注意事项:
  1. 一般不监听input的click事件,。
  2. form里面的input要有name。
  3. form里面要放一个type=submit,才能触发submit事件。

感想

在学习HTML标签的过程中,发现有些标签看着很简单,其实要完全理解其用法还是需要慢慢理解的。比如a标签,基本的用法,很好运用<a href=""></a>,在href里面填写网址,就能进行啊超链接了,但是a标签还有许多其他的用法,href取值就不止网址一种。在我们学习HTML标签的时候,最好是先学一下这个标签的基本用法,再在项目过程中逐步理解其其他更加深入的用法。

文章分类
前端
文章标签