跳到主要内容

常用的标签

h 标题标签​

提示
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>

这是h1标签

这是h2标签

这是h3标签

这是h4标签

这是h5标签
这是h6标签

p 标签表示一个段落​

提示
<p>这是第一段</p>
<p>这是第二段</p>

这是第一段

这是第二段

br 标签表示换行​

提示
<div>这是第一段文字，它没有达到最大宽度前不会换行</div>
<div>这是第一段使用br换行的文字，它可以<br/>随时换行，我再<br/>换一行</div>
这是第一段文字，它没有达到最大宽度前不会换行
这是第一段使用br换行的文字，它可以
随时换行，我再
换一行

hr 表示水平线​

提示
<div>我是一个div</div>
<hr/>
<div>我是也一个div，啥东西把我和我大哥隔开了</div>
我是一个div
我是也一个div，啥东西把我和我大哥隔开了

转义符​

由于HTML的标签是由大于符号和小于符合构成的，所以我们不能直接在网页中打出这两个符号，但是可以通过实体在网页中来表示一些特殊符号

语法：&实体的名字

提示
<div>&lt;&lt;&lt;&lt; --这是小于符号</div>
<div>&gt;&gt;&gt;&gt; --这是大于符号</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp; --这是空格符号</div>
<div>&copy;&copy;&copy;&copy; --这是版权符号</div>
<<<< --这是小于符号
>>>> --这是大于符号
     --这是空格符号
©©©© --这是版权符号

列表​

提示
<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>
<hr/>
<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>
<hr/>
<dl>
  <dt>定义1</dt>
  <dd>定义列表1</dd>
  <dt>定义2</dt>
  <dd>定义列表1</dd>
</dl>
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  • 无序列表1
  • 无序列表2
  • 无序列表3
定义1
定义列表1
定义2
定义列表1

语义化标签​

通过这些语义化标签，可以对网页中的不同内容进行描述，方便爬虫，但是大部分情况下我们不会大量使用

<main></main> <!--主要内容-->
<header></header> <!--头部内容-->
<footer></footer> <!--底部内容-->
<article></article> <!--表示一个独立的内容-->
<aside></aside> <!--侧边栏，和主体独立的内容-->
<nav></nav> <!--表示导航-->
<section></section> <!--独立的区块-->
<pre></pre> <!--预格式（保留文本自身的格式）-->

img 图片标签​

<img src="路径"></img>

a 超链接​

  • 属性：

    • href：指定要跳转到位置

    • target：指定页面打开的位置 _self ：默认值，在当前页面打开链接 _blank : 在新的标签页打开链接

      提示
      <a href="./1web-page-structure">第一章</a><br/>
      <a href="./1web-page-structure" target="_blank">新页面第一章</a>
      第一章
      新页面第一章

  • 内部跳转，通过修改href属性可以使超链接在页面内部进行跳转

    • #表示跳转页面的顶部

    • #id 表示跳转到页面的指定位置

iframe 内联框架​

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

提示
<iframe src="https://space.bilibili.com/85965726?spm_id_from=333.1007.0.0">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>