关于前端:HTML标签汇总

39次阅读

共计 1867 个字符，预计需要花费 5 分钟才能阅读完成。

骨架标签

<html lang="en">
<head>
    <title> 对 SEO 影响较大 </title>
</head>
<body>
</body>

! + ⇥(Tab 键) 主动生成

题目标签

<h1> 一级题目（对 SEO 影响较大）</h1>
<h2> 二级题目 </h2>
<h3> 二级题目 </h3>
<h4> 二级题目 </h4>
<h5> 二级题目 </h5>
<h6> 二级题目 </h6>

特点：

  • 字体较大，从 h1 到 h6 逐步减小
  • 加粗
  • 独占一行

⚠️默认不居中

段落标签

<p> 段落 </p>

特点：

  • 段落之间存在间隙
  • 独占一行

换行标签

<br>

br 即 break row

横线标签

<hr>

hr 即 horizontal line

文本格式化标签

成果 有强调语义 无语义
加粗 strong b
下划线 ins u
歪斜 em i
删除线 del s

均为双标签，举荐应用带有语义的标签

图片标签

<img src=""alt=" 图片加载失败 "title=" 图片 ">

src=” 门路 ”

门路
  • 绝对路径
    以盘符、/（根目录）或 http 等协定结尾的门路

  • 相对路径

    • 下级目录：../example.jpg
    • 同级目录：./example.jpg 或 example.jpg
    • 上级目录：同级目录名称 /example.jpg

alt 在图片加载失败时显示，title 在鼠标悬停在图片上方时显示，alt 对 SEO 有影响，在低版本的 IE 浏览器中，alt 代替了 title 的性能

音频标签

<audio src="" controls autoplay loop>

controls —— 控件，没有该属性看不到音频元素
autoplay —— 自动播放，谷歌禁止自动播放
loop —— 循环播放

视频标签

<audio src="" controls autoplay muted loop>

muted —— 静音，谷歌禁止音频自动播放，能够给视频加上静音属性，让视频自动播放

超链接

<a href=""target=""></a>

href="#" —— 不跳转，但会刷新页面，回到页面顶部
href="门路" —— 跳转到门路指向的页面
href="id" —— 跳转到 id 指向的元素

target="_self" —— 默认值，在以后窗口中跳转
target="_blank" —— 在新窗口中跳转

列表标签

无序列表
<ul>
    <li></li>
</ul>
有序列表
<ol>
    <li></li>
</ol>
自定义列表
<dl>
    <dt></dt>
    <dd></dd>
</dl>

dd 默认缩进

表格标签

<table>
    <caption><h3> 默认文字款式没有变动，倡议配合题目标签应用 </h3></caption>
    <thead>
    <tr>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
    </tr>
    </tbody>
</table>

合并单元格属性：加给 td 或 th，遵循左上准则，给左上方的单元格，被合并的单元格须要删除

  • 高低合并（跨行合并）—— rowspan="合并数量（蕴含本身）"
  • 左右合并（跨列合并）—— colspan="合并数量（蕴含本身）"

表单标签

<form action="">
    <input type="text" placeholder="占位符(提示信息)">
    <br>
    <input type="password"> 
    <!-- 特点：密文输出 -->
    <br>
    <input type="radio" name="" checked> 文本
    <!-- 多个 radio 类型的 input 标签的 name 值雷同，即可实现在这几个标签中只能选中一个 -->
    <!-- checked —— 默认选中 -->
    <br>
    <input type="checkbox" checked> 文本
    <br>
    <input type="file" multiple>
    <!-- multiple —— 能够抉择多个文件 -->
    <br>
    <input type="submit">
    <!-- 默认文本为提交，能够通过 value 扭转文本 -->
    <br>
    <input type="reset">
    <!-- 默认文本为重置，能够通过 value 扭转文本 -->
    <br>
    <input type="button" value="">
    <!-- 无文本，须要通过 value 扭转文本 -->
    <br>
    <select>
        <option value="" selected></option>
    <!-- selected —— 默认选中 -->
    </select>
    <br>
    <textarea name=""id="" cols="30" rows="10"></textarea>
    <input type="submit" value="收费注册">
    <button type="reset"> 重置 </button>
</form>

正文完
前端
发表至： 前端
2023-03-27
 0
关于前端:聊聊代码质量-学得会抄得走的提升前端代码质量方法前言
关于前端:Angular-应用里-NullInjectorError-No-provider-for-XX-错误的一个场景和分析过程
关于前端:前端-JavaScript-之『节流』的简单代码实现
锵哥带你读好书系列之深入浅出React和Redux第六章React高级组件