第二篇 HTML基本标签

赵晟鼎
192 阅读6分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

标题标签<h1>到<h6>

语法与作用

在HTML的标签中，h1、h2、h3、h4、h5、h6标签都是用来表示文档的标题的。这些标签都是结构性的语义化标签，可在开闭标签的内部包含内容。

h后面的数字代表着该标签包裹内容在整个网站的标题中的权重，当然，不同权重的标题所展现出来的样式也不同。

效果展示

    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    普通字体
    <h5>标题5</h5>
    <h6>标题6</h6>

image.png

各标题的特征与注意事项

  • h5、h6标题的字体大小小于普通文本的字体大小。剩余的标签的字体大小小于等于普通文本的字体大小.
  • 每个网页应该有且只有一个h1标签【SEO标准】。但是不规范的写的话，该标签本身是可以在一个网页中含有多个的。
  • h1标签在网页中的权重很大，应该出现在网站的首页或副页的logo上，它会影响整个网站在搜索引擎搜索出结果的排名【搜索排名】。而搜索引擎给所有的h1标签的权重是一定的，而且搜索引擎只会收录一个h1标签，网页排名会被这个被收录的h1的权重所影响。若是网页中有多个h1，那么就会将原本给1个h1的权重被分配给多个h1标签。这样就导致搜索引擎所收录的h1的权重低，网站的搜索排名就靠后。
  • h2标签为网页的分块标题。即，网页可以使用h2将整个网页划分为多个功能块。一般一个网页就2~5个h2就可以了。
  • h3标签是给被h2标签分块的功能块 做一个更详细的分块。标签的个数就可以根据需求来。
  • h1是网站的首页和副页上的logo中应该出现的，而h2~h3则是网站首页以及非首页内容中出现的，h4应该在非首页上出现。

文本标签

换行标签br

该标签是一个功能性单标签，主要用于在网页中换行。 注意：该功能标签会在任何文本中生效，不管是h1标签内的内容中间还是p标签内的内容中间。

示例：内容<br>内容

但是在开发过程中并不推荐使用br标签

段落标签p

该标签是结构性的语义化标签。用来表示该标签的内容为一个段落。他包裹的内容在网页中显示为一个简单的段落样式。

<h2>标题</h2>外部内容————左<p>段落</p>外部内容————右

上述代码效果如下

image.png

分割线hr

该标签也是一个功能性单标签。使用该标签后，会单独出现一行分割线。

<h2>标题</h2>外部内容————左<p>段<hr>落</p>外部内容————右

上述代码效果如下图所示

image.png

超链接a

作用

用于进行页面跳转的标签。该标签为结构性标签，标签包裹的内容为超链接所展现在页面上的内容。

href属性指定跳转地址

要跳转到的地址可以使用href属性进行指定。

该属性的属性值为要跳转到的链接的绝对地址或相对地址、当前页面的锚点或是js代码。 当值的类型不同会展现出不同效果：

  • 值为要跳转到的链接的绝对地址或相对地址【相对地址中./表示当前目录，../表示上一级目录】，那么点击该超链接，页面会进行跳转到指定的地址。
  • 值为锚点【#后面跟标签的id的属性值】，那么点击超链接后，页面不会被刷新，且当前url的hash值会变为href指定锚点，且页面的位置会滚动到锚点处。
  • 值为js代码时，点击超链接会运行指定的js代码，常见的应用如下：
    1. a href="javascript:js_method();" 这种写法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句
    2. a href="javascript:void(0);" οnclick="js_method()" 这种写法是很多网站最常用的方法，也是最周全的方法，onclick事件负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
    3. a href="javascript:;" οnclick="js_method()"
      这种写法跟跟第二种类似，区别只是执行了一条空的js代码
    4. a href="#" οnclick="js_method()"
      这种写法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
    5. a href="#" οnclick="js_method();return false;"
      这种写法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。

target属性指定打开方式

该属性的值可以为_blank、_self、_parent、_top或者是一个表示框架名称或是窗口名称的字符串。

  • _blank表示会从新的页面打开href指定链接。
  • _self表示会从当前页面打开href指定链接。
  • _parent是用在多个框架【<iframe>】嵌套的情况下的，点击超链接，会从当前框架的父框架中打开指定链接。若是当前框架为顶层框架，那么会从当前页面打开指定链接。
  • _top是用在多个框架【<iframe>】嵌套的情况下的，点击超链接，会从顶层框架页面打开指定链接。
  • 若他的属性值为随意的一个字符串，那他会先看浏览器中有没有以该名称为标记的窗口或框架，若是没有则新建窗口并指定该名称为窗口的标记，链接在该窗口中打开，若是有，则直接在这个窗口或框架中打开。

download属性指定下载名称

一旦设定该属性后，a标签的作用便成为了下载指定地址的内容，该属性的值表明下载文件后，文件的名称。

<a href="https://juejin.cn/">掘金首页</a>

avatar
文章
阅读
粉丝