HTML a标签

Posted 2023-05-09 NZVN

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML a标签相关的知识，希望对你有一定的参考价值。

7.1 属性

- href：链接地址

- target：控制链接的打开方式。
- _self(默认)-在当前页面打开；
- _blank-新标签页打开。

7.2 <base />标签

- 作用：改变链接的默认行为
- 位置：在head标签中
- 属性：href——改变默认链接；target——改变默认目标。

7.3 可作为锚点

- 作用：跳转到本页指定id的标签位置
- 使用：
- 1）# id：a标签 href="#id"，锚点 id="";
- 2）# name：a标签 href="#name"，锚点 a标签 name="";

7.4 练习

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a
      display: inline-block;
      text-decoration: none;
      color: #eee;
      background-color: rgb(28, 28, 30);
      text-align: center;
      height: 20px;
      line-height: 20px;
      width: 50px;
      border-radius: 10px;
    
    a:hover
      color: #eee;
      background-color: rgb(50, 50, 50);
    
    .stuff
      border: 1px solid rgb(28, 28, 30);
      /* 达不到效果可增加高度 */
      height: 1000px;
    
  </style>
  <!-- 改变所有a标签默认行为 -->
  <base href="" target="_blank">
</head>
<body>
  <!-- 在新的标签页打开vue官网 -->
  <a href="https://cn.vuejs.org" target="_blank">Vue</a>
  <!-- 跳转到bottom锚点位置 -->
  <a id="top" href="#bottom" target="_self">底部</a>
  <!-- 填充 -->
  <div class="stuff"></div>
  <!-- 跳转到top锚点位置 -->
  <a name="bottom" href="#top">顶部</a>
</body>

7.5 效果预览

HTML常用标签元素

一、基本概念

1、标签：HTML用于描述功能的符号称为“标签”，它是用来表现组成HTML文档的最基本的部件--HTML元素的。起始标签和终止标签之间的内容称为元素内容。

2、属性：在元素的起始标签中，可以设置1个或多个属性来控制标签的显示效果，格式为<标签名称属性名 = “属性值”>

二、基本结构元素

HTML的基本结构元素主要有3个，它们是<html>、<head>和<body>元素，每个网页页面一般都包含这3个元素，而且它们只能出现一次。

1、<html>元素：Html标签：是包裹整个页面元素的根元素，它告诉浏览器整个文件是HTML格式，通常情况下document.documentElement(页面根元素)获取的就是html标签。

2、<head>元素：头部标签，用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等，主要包含meta标签、title标签、link标签（引入CSS）、script标签（引入CSS）等。

3、body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本（<text>）、段落（<p>）、标题（<h1>）、换行（<br>）、分隔线(<hr>)、超链接（<link>）、图像（<img>）、表格（<table>）和列表（<ul>）等等。）

4、其它标签：

　　4.1、<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

　　4.2、<meat>标签：提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，<meta> 标签的属性定义了与文档相关联的名称/值对。比如<meta charset="utf-8" />，定义了文档以utf-8编码。

　　4.3、<title>标签：页面的标题，设置之后将在浏览器选项卡看到。

5、一个简单的小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我喜欢的唐诗</title>
</head>
<body>
    <h1>我喜欢的唐诗</h1>
    <div>
        <h2>早发白帝城</h2>
        <p>
            朝辞白帝彩云间，<br>
            千里江陵一日还。<br>
            两岸猿声啼不住，<br>
            轻舟已过万重山。
        </p>
    </div>
    <hr>
    <div>
        <h2>静夜思</h2>
        <p>
            床前明月光，<br>
            疑是地上霜。<br>
            举头望明月，<br>
            低头思故乡。
        </p>
    </div>
</body>
</html>

三、常用标签

1、下边列出部分常见的html4标签

常见标签列表
标签名	含义	属性值	h5中的新属性	备注（说明）
link	-	href（CSS地址）	属性：size 值：heightxwidth、any 描述：规定被链接资源的尺寸。仅适用于 rel="icon"	1.link 元素是空元素，它仅包含属性 2.此元素只能存在于 head 部分，不过它可出现任何次数
script	-	src（JS地址）	属性：async 值：async 描述：规定异步执行脚本（仅适用于外部脚本）	1.假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行 2.此元素的代码最好写在dom节点之后，否则可能会阻碍节点的渲染加载
div	分割	-	-	<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符
table	表格	-	-	-
span	范围	-	-	-
a	锚	href(跳转地址)	属性：download 值：filename 描述：规定被下载的超链接目标。属性：media 值：media_query 描述：规定被链接文档是为何种媒介/设备优化的属性：type 值：MIME type 描述：规定被链接文档的的 MIME 类型	1.如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性 2.被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性） 3.需用 CSS 来设置链接的样式
p	段落	-	-	-
form	表单	action（表单提交地址）	属性：autocomplete 值：on/off 描述：规定是否启用表单的自动完成功能属性：novalidate 值：novalidate 描述：如果使用该属性，则提交表单时不进行验证	form 元素是块级元素，其前后会产生折行
h1~h6	标题	-	-	-
ul	无序列表	-	-	用 CSS 来定义列表的类型
li	列表项	-	-	用 CSS 来定义列表和列表项目的类型
img	图片	src(显示的图片的地址)	-	1.从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间 2.有两个必需的属性：src属性和 alt属性（alt="文本"如果无法显示图像，浏览器将显示替代文本）
input	用于搜集用户信息	type(类型)
iframe	内联框架	Src（显示的文档的地址)	属性：sandbox 值：“”/allow-forms/allow-same-origin/allow-scripts/allow-top-navigation 描述：启用一系列对 <iframe> 中内容的额外限制属性：seamless 值：seamless 描述：规定 <iframe> 看上去像是包含文档的一部分属性：srcdoc 值：HTML_code 描述：规定在 <iframe> 中显示的页面的 HTML 内容	可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器

备注：“-”表示没有改解释。h5中的新属性了解即可，应用还不是很频繁

2、常用的块状元素

块状元素，占行，如div，p，h1~h6，每一个块状标签都独占一行

3、常见的行内元素

行内元素（内联元素），不占行，如input，span，a，将在同一行共同显示

4、常见的列表元素

　　4.1、概念

　　<ul>（unordered）:无序列表，故元素所包含的列表项将以粗点的方式显示

　　<ol>（ordered）：有序列表，故元素所包含的列表项将以顺序数字的方式显示

　　<li>(list item):列表项，<li>元素被包含在<ul>或<ol>元素中

　　4.2、demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
        <h2>一个无序列表</h2>
        <ul>
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
        </ul>
    <hr>
        <h2>一个有序列表</h2>
        <ol>
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
        </ol>
</body>
</html>

5、常用的表格元素

　　5.1、概念

　　　　表格由<table>标签来定义。每个表格均有若干行（由<tr>标签来定义），每行被分割为若干单元格（由<td>标签定义）

　　5.2、demo　　

<table border="1">
           <tr>
               <th>海绵宝宝</th>
               <th>柯南</th>
           </tr>
           <tr>
               <td>good boy</td>
               <td>clever boy</td>
           </tr>
 </table>

以上是关于HTML a标签的主要内容，如果未能解决你的问题，请参考以下文章