html学习之路3-CSDN博客

本文链接：https://blog.csdn.net/weixin_44855464/article/details/102921153

<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewreport" consent="width=device width,initial-scale=1.0">
     <meta http-equiv="X-UA_Compatible" consent="ie=edge">
     <base target="_blank">
     <title>个人主页</title>
 </head>
 <body background="./u=4030176794,255532479&fm=26&gp=0.jpg" style="background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed;">
 <h1 style="text-align: center;color:red;font-size: 50px;">欢迎来到wolf的个人网页</h1>
 <p  style="text-align: center;"></p>
<br />
<a href="https://838251031.github.io/img/homework9h2.png">
<img border="0" src="https://838251031.github.io/img/homework9h1.png"/>
</a>
<a href="https://838251031.github.io/img/homework9h3.png">
    <img border="0" src="https://838251031.github.io/img/homework9h2.png"/>
</a>
 </body>
</html>

在这里插入图片描述

<base target="_blank">

<base>:定义页面中所有链接的默认地址或默认目标,必须位于head内部
target属性：制定在何处打开链接
—blank：表示在新窗口打开链接

<body background="./u=4030176794,255532479&fm=26&gp=0.jpg" style="background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed;">

background：设置网页背景；./表示图片在html文件同一个文件夹内
style的background这些属性：为了把图片设置为全屏；如果不设置，图片的分别率会与电脑屏幕分别率不同，会几张进行重叠，比如我这张是500300，电脑分别率是1500900，会出现三张照片一起从这至右排列。

<a href="https://838251031.github.io/img/homework9h2.png">
<img border="0" src="https://838251031.github.io/img/homework9h1.png"/>
</a>

<a></a>: 标签定义超链接，用于从一张页面链接到另一张页面。
href: <a>标签定义超链接，用于从一张页面链接到另一张页面。

<img>:标签链接图像
border：处理图像边框。border=0表示去掉图像边框。
src：指明图像链接

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charest="UTF-8">
    <mete name="viewreport" content="width=device-width,initial-scale=1.0">
    <mete http-equiv="X-UA_Compatible" content="ie=edge">
    <title>个人主页</title>
  </head>
<body>
  <a href="#个人简历">个人简历</a>
  <a href="#基本信息">基本信息</a>
  <a href="#早年经历">早年经历</a>
  <a href="#个人生活">个人生活</a>
<h1 id="个人简历">个人简历</h1>
<h2 id="基本信息">基本信息</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quasi quam fugiat. Ea quae excepturi nihil blanditiis temporibus, distinctio omnis, nostrum quibusdam, laborum dignissimos provident rerum! Error laboriosam suscipit nulla?
  </p>
<a name="早年经历" >早年经历</a>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis porro sunt, eaque ipsa qui nisi at, rem quas, repudiandae praesentium facilis esse culpa illum eveniet doloribus labore distinctio dolorum unde?</p>
<h4 id="个人生活">个人生活</h4>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis corporis natus, error molestiae harum quam voluptatibus magnam! Sit nemo quo eligendi esse aspernatur. Quia blanditiis ducimus repellat hic porro id.</p>
</body>
</html>

锚点的制造

<a name="早年经历" >早年经历</a>
<h2 id="基本信息">基本信息</h2>

id和name是制造锚点

 <a href="#个人生活">个人生活</a>

这里是利用<a>制造锚点链接，点击就会转向锚点的地方，这样的好处就是，一个页面如果有很多信息，要上下翻滚查找就很麻烦，锚点就解决了这样的问题，可以让用户不用上下翻滚寻找信息，点击锚点链接就可以去到锚点所在处。

注：本代码这里锚点指向的信息是很少的，所以实际上点击锚点链接是跳不到锚点所在处，锚点的制造是为了解决信息太多的问题，要有实际效果需要多添加锚点信息