认识HTML页面

页就是一个HTML文件。

1、HTML结构

<!doctype html>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

说明：

文档类型<!DOCTYPE>

<!DOCTYPE html>

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范.

HTML标签
标识HTML文档，是所有HTML中标签的一个根节点。
head标签
标识头部区域，用于存放：title,meta,base,style,script,link
title标题
在head标签中我们必须要设置的标签，让页面拥有一个属于自己的标题。
body标签
标识页面的主体部分，用于存放所有的HTML标签，如p,h,a,b,u,i,s,em,del,ins,strong,img

2、HTML标签和属性

写HTML文档时，必须遵循HTML语法规范。HTML文档实际上就是一个文本文件，它由标签和信息组合而成，当然标签和信息也不是随便组合的，需要遵循一定规则，否则无法正常显示。

标签分类
在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <html>、<head>、<body>都是HTML标签。根据出现个数不同，分为双标签和单标签
双标签
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
<标签名属性名1="属性值" 属性名2="属性值" 属性名3="属性值" ……> 内容 </标签名>
单标签
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
<标签名属性名1="属性值" 属性名2="属性值" 属性名3="属性值" …… />

标签关系
嵌套关系
<head> <title> </title> </head>
并列关系
<head></head> <body></body>
标签语义化
所谓标签语义化，就是指标签的含义
作用：

方便代码阅读和维护
具有更好地搜索引擎优化
更容易让浏览器或是网络爬虫解析，从而更好地分析网页的内容

遵循原则：
合适的地方放一个最为合理的标签。当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性

有一起学习的吗？请点赞收藏+关注哦！

言

有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。

一、纯 html 实现

1. 利用 id 为标记的锚点

这里作为锚点的标签可以是任意元素。

  <a href="#aa">跳转到 id 为 aa 标记的锚点</a>
  <p>-------------分隔线-------------</p>
  <div id="aa">a</div>

2. 利用 a 标签的 name 属性作为锚点

这里作为锚点的标签只能是 a 标签。

  <a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
  <p>-------------分隔线-------------</p>
  <a name="bb">name 为 bb 的 a 标签的锚点</a>
  <div id="abb">bbb</div>

注意：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现（即以 name 为锚点和以 id 为锚点名字相同时），会将后者作为锚点。

二、 js 实现

1. 利用 scrollTo()

window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 scrollTo() 可以看看 MDN 中的介绍。

话不多说，看下面代码

「html 部分」:

  <a id="linkc">平滑滚动到 c</a>
  <p>-------------分隔线-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 为指定跳转到该位置的DOM节点
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 计算该 DOM 节点到 body 顶部距离
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滚动到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。

下面也直接上代码

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

下面为了方便看效果，把上面的代码整理在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳转到以 id 为 aa 标记的锚点 a</a>
  <p>-------------分隔线-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
  <p>-------------分隔线-------------</p>
  <a name="bb">name 为 bb 的 a 标签的锚点</a>
  <p>-------------分隔线-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滚动到 c</a>
  <p>-------------分隔线-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔线-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele为指定跳转到该位置的DOM节点
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果图：

超链接除了可以链接特定的文件和网站之外，还可以链接到网页内的特定内容。这可以使用<a>标签name或id属性，创建一个文档内部的书签。也就是说，可以创建指向文档片段的链接。

例如，使用以下命名可以将网页中的文本，“你好”定义为一个内部书签，书签名称为“name1”。

在网页中的其它位置可以插入超链接引用该书签，引用命名如下：

<a href="#name">使用内部书签</a>

一般网页内容比较多的网站会采用这种方法，如一个电子书网页。

下面就使用锚链接制造一个电子书网页。

（1）编写代码如下图所示：

（2）在浏览器中打开文件，预览效果图如下所示，由于内容较少，还看不出效果。

（3）为每一个诗词添加内容，完善后的代码如下：

（4）在浏览器中打开文件，预览整体效果图如下所示：

（5）单击《书愤二首》，页面会自动跳转《书愤二首》对应的内容，如下所示：

更多精彩等你来学习哦！

在线咨询

上一篇：又到积分/权益盘点时！
下一篇：HTML表单3（下拉列表、多行文字输入）-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商