HTML(3) 基础tag介绍

小码橘崽

于 2023-10-11 16:40:29 发布

阅读量202

点赞数

分类专栏： html 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_74181795/article/details/133370396

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、导航链接tag<nav>

1. 位置 Section：body

二、target

1. 跳转链接 target

确定超链接的窗口将如何打开。

1）现网址被覆盖，不产生新的窗口。

超链接后写 target="_self"

代码示例：

<a href="https://www.google.com" target="_self" >Google</a>

2）现网址保留，产生新的窗口打开新网址。

超链接后写 target="_blank"

代码示例：

<a href="https://www.google.com" target="_blank" >Google</a>

2. 装饰特定部分 :target

1. 位置 Section : head (within style)

2. 可适用于大部分<tag>。

用法：所需部分之后写入 :target {

代码示例：

div:target {
  display: block;
  background-color: yellow;
  color: red;
}

（此处以div部分为例。）

三、tag<div>

以<div>开头，以</div>结尾。

1. 特点：

1）块级元素，block-level element.

2）通常从新的一行开始

3）占据包含它的元素的全部宽度

4）div与div之间可以互相嵌套

Horizontal navigation bars

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="services.html">Services</a>
    <a href="contact.html">Contact</a>
  </nav>
</body>
</html>

Vertical navigation bars

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="vertical-navbar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</body>
</html>