HTML其他常用标签

最新推荐文章于 2023-03-20 10:02:10 发布

「已注销」

最新推荐文章于 2023-03-20 10:02:10 发布

阅读量175

点赞数 1

分类专栏：笔记本文章标签： HTML 常用标签及其属性

本文链接：https://blog.csdn.net/sanshiliuxiao/article/details/99765059

版权

笔记本专栏收录该内容

10 篇文章 0 订阅

订阅专栏

阮一峰老师的 HTML 教程
本文属于笔记性质，内容大部分出于上述教程，但会对内容进行组织，精简。
范围：八、九、十二、十三章。

图像标签

图片让网页变得丰富多彩，图片类的标签有很多，但最核心的当属 img 标签，因此本文只介绍 img 标签的常用属性和用法，更详细的的介绍请看：HTML 教程-图像标签。

`img` 标签

img 标签是一个自闭合、内联、替换标签（元素）。它会发送一个 GET 请求，获取成功后，将展示一张图片。

<!--
 
  自闭合： 它没有 <img></img> 而是 <img> 或者 <img />。一般使用 <img /> 其他自闭合标签类似。
  内联：它不会自动换行，后面如果有文字的话，会继续跟在后面
  替换: 获取到图片后，img 标签内容被替换成图片，并且标签的宽高，默认就是图片本身的宽高。
-->
<!--  img 一般需要 src 和 alt 属性 -->
<img src="dog.png" alt="狗子">狗子就在我旁边

常用属性：
scr：用于指定图片的地址，可以是一个网页链接，也可以是一个路径（相对或绝对）。
alt：用于图片加载失败后的提示性，或者文本阅读器的读取。
width、 height：宽高，一般不使用。现在都采用 CSS 设置宽高，而不是直接在 html 中设置。
事件：
- onload：加载成功，执行回调函数。
- onerror: 加载失败，执行回调函数。
简单的响应式：
在 CSS 进行 img 的样式设置 max-width 属性。
注意：
如果 img 标签只显式声明了宽或高，那么图片会自动适应自身比例，记住永远不要让图片发生变形，比如同时设置宽高，导致图片比例不对。

<head>
  <style>
    img {
      max-width: 100%;

      /* 如果 CSS 和 HTML 都出现 width 或 height，那么 CSS 的样式优先级更高*/
      /* 最好不要同时写 width height */
      width: 400px;
      /* height: 100px; */
    }
  </style>

</head>
<body>
  <img id="dog" src="dog.png" alt="狗子" width="200" />

  <script>
    let dogNode = document.getElementById(dog);
    dogNode.onload = function() {
      console.log('图片加载成功');

      // 其他操作
    }
    dogNode.onerror = function() {
      console.log('图片加载失败');
      // 其他操作
      // 可以做一下补救措施，比如设置一个 预设图片
      dogNode.src = '404.png';
    }
  </script>
</body>

链接标签

互联网的核心在于链接（hyperlink），这样资源就能够链接到一起。所有互联网上的资源都能通过链接访问。

链接标签有 a、link、script 标签，但本文只介绍 a 标签的常用属性和用法，更详细的的介绍请看：HTML 教程-链接标签。

a 标签

a 标签的基本属性：

href: 链接引用（hyperlink reference），有四类属性值:

锚点：能够定位到该页面上面的元素。

<a href="#para">点击定位</p>
<!-- 省略很多行内容 ->
<p id="para"></p>

网址：一个 URL 链接。

<!-- https 协议的链接 -->
<a href="https://baidu.com"> 跳转到百度页面 </a>
<!-- http 协议的链接 -->
<a href="http://baidu.com"> 跳转到百度页面 </a>
<!-- 无协议的链接， 推荐，浏览器会自动进行配置 -->
<a href="//baidu.com"> 跳转到百度页面 </a>

路径：可以是绝对路径，或者相对路径。

<!-- 假如当前网页是 sanshi.com/x/y/index.html -->
<!-- 绝对路径 -->
<a href="sanshi.com/a/b/c.html"></a>
<!-- 相对路径 -->
<a href="../index.html"></a>

伪协议: 可以执行一些额外的操作，常用的有三种：

JavaScript 伪协议。

<!-- JavaScript 伪协议 -->
<a href="javascript:alert(1);">JavaScript 伪协议</a>
<!-- 点击之后没有动作的伪协议 即不会跳转页面 -->
<a href="javascript:void(0);">没有动作的JavaScript伪协议</a>

mailto 伪协议。

<!-- 邮箱 -->
<a href="mailto:sanshiliu@foxmail.com">mailto 伪协议</a>

tel 伪协议。

  <!-- 手机号， 常用在手机唤起电话  -->
  <a href="tel:13856728791;">tel 伪协议</a>

target: 指定如何展示打开的链接，属性值分为两类，一类是内置的属性值，一类是自定义的属性值（一个名字）:
- 内置属性值：
  - _self：默认当前页面打开。
  - _blank：新页面打开。
  - _parent: 父级窗口打开，如果没有，等同于 _self。一般在嵌套的 iframe 标签下的 a 标签中用到。
  - _top: 顶层窗口，如果没有，等同于 _self，一般在嵌套的 iframe 标签下的 a 标签中用到。
- 自定义属性值：
  - window 的 name 名字。
  - iframe 的 name 名字。
rel: 说明链接与当前页面的关系。常用的一些属性值：
- noreferrer: 浏览器打开链接时，不要将当前网址作为 HTTP 头信息的 Referer 字段发送出去，这样可以隐藏点击的来源。
- noopener：打开链接时，不让链接窗口通过 JavaScript 的 window.opener 属性引用原始窗口，这样就提高了安全性。
  通常和 noreferrer 连用，参考文章：聊聊 rel=noopener。

在这里插入图片描述

表格标签

表格（table）以行（row）和列（column）的形式展示数据。表格类的标签和属性有很多，这里也只介绍常用的表格的用法，更详细的介绍请看：HTML 教程-表格标签。

一个标准常用的表格样式：

<!--
  caption 表格的标题
  thead 表格的表头
  tbody 表格主体
  tfoot 表格的尾部
  tr 表示表格的一行（table row）
  th 表示表头单元格（table header）
  td 表示数据单元格（table data）
-->
<table>
  <caption></caption>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
    </tr>
  </tfoot>
</table>

表格的几个关键的 CSS 属性：

<style>
  table {
    /* table 的 布局算法 */
    table-layout: auto;

    /* 是否合并表格边框 */
    border-collapse: collapse;

    /* border 与 border 之间的距离 */

    border-spacing: 0;

  }
  td, th {
    border: 1px solid blue;
  }
</style>

在这里插入图片描述
注意事项：

<caption>、<thead>、<tfoot> 都是可选的，但 tbody 必须要有（如果没有，浏览器会自动补上）。
表头不仅仅只能具有一行，也可以有多行，写法需要注意一下（下图）。
大型表格内部可以使用多个 tbody，表示连续的多个部分。

在这里插入图片描述

表单标签

表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。同样，更相信的介绍请看：HTML 教程-表单标签。

form 标签

form 标签用来定义一个表单，所有表单里面的内容都放在这个容器里面。该标签的常用属性：

action：服务器接收数据的 URL，一般由后端提供 URL。
method：提交数据的方法，一般有 GET 和 POST。
autocomplete：自动补全提示，属性值为 on 或者 off，需要控件具有 name 属性才有可能补全。
target：和 a 标签的 target 属性类似，表示在哪个窗口展示服务器返回的数据。
enctype：当 method 为 POST 时，指定提交给服务器的 MIME 类型，默认为 application/x-www-form-urlencoded。
name：表单的名称，网页中一个表单只有唯一一个名称。

form 标签还有一个事件onsubmit，提交表单时会触发该事件。

注意，一个表单里面必须要有一个属性值为 type="submit"（input 标签或者 button）的提交按钮。

<!-- form 常用的四种属性 其中 action 和 method 是必须的 -->
<form action="https://example.com/api"
      enctype="multipart/form-data"
      name="fileForm"
      method="post">
  用户名：<input type="textname="submit-name"><br>
  文件：<input type="file" name="files"><br>
  <input type="submit" value="上传"> <br>
  <input type="reset" value="清除">
</form>

input 标签

input 标签用于接收用户的输入，是一个自闭合、内联标签。

input 标签的常用属性：

autofocus：布尔属性，页面加载时自动获取焦点，注意只能设置一个控件的焦点。
disabled：布尔属性，表示是否禁用该控件。
required：布尔属性，控件是否为必填。
name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。
注意，只有设置了 name 属性的控件，才会向服务器提交，不设置就不会提交。
type: 控件的类型， input 控件有很多的类型，如 text、submit、radio等。
value：控件的值。

      <!-- 文本输入 -->
      <input type="text" name="username" />
      <hr />
      <!-- password 类型 输入字符之后，会变成小圆点 -->
      <input type="password" name="password" />
      <hr />
      <!-- 搜索框 -->
      <input type="search">
      <hr />
      <!-- 颜色选择 -->
      <input type="color" name="color" />
      <hr />
      <!-- 文件上传 -->
      <input type="file" name="oneFile" />
      <hr />
      <hr />
      <!-- 单选， 需要设置 同一个 name -->
      <input type="radio" name="gender" value="man" /> 男
      <input type="radio" name="gender" value="woman" /> 女
      <hr />
      <!-- 多选， 需要设置同一个 name 表示一组 -->
      <input type="checkbox" name="hobby" value="sing" /> 唱
      <input type="checkbox" name="hobby" value="jump" /> 跳
      <input type="checkbox" name="hobby" value="rap" /> Rap
      <input type="checkbox" name="hobby" value="play basketball" /> 打篮球
      <hr />
      <!-- 提交按钮 -->
      <input type="submit" value="点我提交" />

label 标签

label 标签主要为控件提供文字说明，帮助用户理解控件的目的。主要有两个属性：

for：关联控件的id属性。
form：关联表单的id属性。设置了该属性后，label标签可以放置在页面的任何位置，否则只能放在form 标签内部。

<!-- label 使用 for 属性 和 input 使用 id 属性 表明它们是一起的 -->
<label for="user">用户名：</label>
<input type="text" name="user" id="user">

<!-- 如果直接包裹，则可以不需要 for 和 id 属性 -->
<label>用户名：
  <input type="text" name="user">
  这里也可以有内容
</label>

<!-- 一个 控件 还可以有多个关联的 label -->
<label for="username">用户名：</label>
<input type="text" name="username">
<label for="username">神奇吧！！！</label>

textarea

textarea 标签用来生成多行文本框。该标签有以下常用的属性：

autofocus：是否自动获取到该控件的焦点。
disabled: 布尔属性，是否禁用。
required：布尔属性，控件是否为必填。
name：控件的名称。
cols: 文本框的宽度，单位是字符，默认值 20。
rows：文本框高度，单位为行。
maxlength：允许输入的最大字符数，如果未指定，则可以输入无限个字符。
minlength：允许输入的最小字符数。

<textarea id="story" name="story"
          rows="5" cols="33" maxlength="120">
          可以有一些已经写好的内容。
</textarea>

select、option

select 标签用于生成一个下拉选择框，常和 option 标签连用。

select 标签常用属性：

autofocus：布尔属性，页面加载时是否自动获得焦点。
disabled：布尔属性，是否禁用当前控件。
required：布尔属性，是否为必填控件。
multiple：布尔属性，是否可以选择多个菜单项。默认情况下，只能选择一项。一旦设置，多数浏览器会显示一个滚动列表框。用户可能需要按住Shift或其他功能键，选中多项。
name：控件名。
size：设置了multiple属性时，页面显示时一次可见的行数，其他行需要滚动查看。

option 标签常用属性：

disabled：布尔属性，是否禁用该项。
selected：布尔属性，是否为默认值。显然，一组菜单中，只能有一个菜单项设置该属性。
value：该项提交到服务器的值。如果省略，则等于该项的文本内容。


<select name="choice">
  <!-- 一般都会设置一个 value="" 的 选项 -->
  <option value="">- 请选择 -</option>
  <option value="first"> 第一个 </option>'
  <!-- 有 selected 属性， 表示 默认选中该选项 -->
  <option value="second" selected>第二个</option>
  <option value="third">第三个</option>
</select>

「已注销」

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML其他常用标签

阮一峰老师的 HTML 教程本文属于笔记性质，内容大部分出于上述教程，但会对内容进行组织，精简。范围：八、九、十二、十三章。文章始发于个人博客：椎咲良田的个人博客图像标签图片让网页变得丰富多彩，图片类的标签有很多，但最核心的当属 img 标签，因此本文只介绍 img 标签的常用属性和用法，更详细的的介绍请看：HTML 教程-图像标签。img 标签img 标签是一个自闭合、内联、...
复制链接

扫一扫