Html 的系统讲解

76433橘子
138 阅读14分钟

Html 详解

Html 结构分析

  • 一个Html 超文本标记语言含有那些部分耶?

    • 1.文档说明 ：html最上方的一段文本我们就称之为 文档类型声明，用于实现的是我们声明文档类型

      • html文件中的体现形式: <!DOCTYPE html> : document type html

      • html文档声明的作用:

        • 就是实现的是我们的告诉浏览器当前的页面是HTML5页面
        • 让我们的浏览器使用HTML5 的标准去解析识别我们的html内容
        • 同时还可以实现解决的是我们的浏览器的兼容性问题

    • 2.html 元素 : html元素表示的是我们的HTML文档的根(顶级元素),所以说是我们的根元素

      • 所有的其他的元素都是这个根元素的后代

      • html元素本身的话，是具有一个属性的，就是 lang 属性，这个就是用来声明我们的语言类型的

        • 一般使用的就是我们的: lang='en' lang='zh-CN'
        • 作用就是: 帮助语言合成工具确定要使用的语言
        • 帮助翻译工具确定要使用的翻译规则
        • 网页中的具体体现形式: <html lang="zh-cn"><html/>

  • 3.head 元素 : HTML 中的head元素就是用来规定文档的一些相关的配置信息的 (也是元数据)，含有文档标题， 引用的文档样式和脚本等。

    • 什么是元数据 (meta data) : 就是用描述数据的数据

    • 这个就是我们对当前的页面的配置信息

    • 具体包含那些:

      • <title>Document</title> 网页标题的设置

      • mate元数据的设置:

        • <meta charset="UTF-8"> 这个就是字符编码的配置
        • <meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于解决移动端适配问题
        • <meta http-equiv="X-UA-Compatiable" content="IE=edge"> 兼容我们的 ie浏览器 的配置信息
        • <meta> 我们的元数据的处理的时候，我们的配置还有很多很多

    • 4.body 元素: 一个网页中的 body 元素中的就是呈现在浏览器窗口中的内容，也就是网页中的 内容 和 结构

      • 以后在body 元素中实现书写的就是我们的用来实现网页具体内容的布局的元素内容
      • 当你含有 vue 和 react 的开发经验的时候，都是含有一个 index.html 的入口文件的，然后渲染的位置就在这里面
      • 里面可以书写的元素含有很多，但是一般的话，我们的常使用的元素就那几个

  • 所以说: 一个html网页的话，我们含有的部分就有: 1.文档说明 2.html元素 3.head元素 4.meta元素配置 5.body网页的主要内容

  • html:5 的默认代码：

    •     <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatiable" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      
    </body>
    </html>

Html 常见元素

  • h元素 ： 这个就是用来标注一些网页中比较重要的部分作为标题，也就是标题元素（Heading 元素）

    • 从 h1 到 h6 ,在网页中呈现的标题的样子也是不尽相同的，就是说明网页中含有的标题样式一共含有 六种
    • 浏览器识别我们的标签名的时候，只是通过的我们的 想不同的标签添加 CSS 样式来实现的区分，这个就体现了我们的标签的语义化的意思，都是可以实现通过我们的CSS 样式来实现我们的调整标签的展示形式的
    • 需要注意的是: h元素 和 我们后续的 SEO优化 有关
    • 代码展示: <h1>标题名</h1>

  • p元素：当我们需要实现表示一个段落的时候，这个时候就可以直接使用我们的 p元素，段落标签 (paragraph元素)

    • p元素之间也是含有一定的间距的
    • 代码体现: <p>段落名</p>

  • img元素: 这个标签就是用来实现我们的在网页中显示我们的图片的标签,图片标签 (image 标签)

    • img元素是一个可替换元素 (replaced element)

    • img 元素中的重要属性:

      • src 这个就是用于指定我们的浏览器显示的图片路径，一般的话，这个是从我们的服务器中实现的下载的我们的图片资源

        • 在我们的这一步中，就有可能涉及到跨域问题，可能导致我们的图片资源无法获取，CORS跨域问题，后面会有讲解
        • 这些静态资源都是会在我们的上线项目的时候，实现我们的部署静态资源到我们的服务器上面的
        • 静态资源的话，一般的话，我们都是存放在我们的 static 目录中的，里面是包含了我们的
        • js代码 css代码 html代码 images代码等等

      • alt 属性，这个属性的作用就是:

        • 当我们的图片加载不成功(或者说图片地址或者图片资源不存在的时候)，显示的图片形式，同时显示阅读的文本
        • 屏幕阅读器的实现阅读网页，便利于我们的盲人的阅读

    • img 元素的图片路径: 就是通过的我们的 src 来实现设置的

      • 为什么什么资源都是在我们的服务器中的，因为在服务器中实现存储我们的静态资源，可以减少对本地资源的浪费

      • 这个时候，我们的文件资源路径的话，是可以实现使用我们的绝对路径或者我们的相对路径来实现获取的

      • 绝对路径: absolute 路径: 这个路径就是实现的是从我们的盘符开始实现寻找的我们的文件路径的

      • 相对路径: relative 路径： 这个路径就是从我们的当前的路径开始层层跨级来实现寻找的文件资源的

        • 对于我们的相对路径而言，我们的实现跨级的查询我们的文件资源的时候，
        • ./ 这个就是我们的当前目录文件
        • ../ 就是实现的是我们的上一级的文件目录中去实现寻找我们的文件资源

      • 一般的话，我们开发的时候实现使用的就是我们的相对路径，但是偶尔我们还是需要使用到我们的绝对路径的

      • 不同的图片我们实现使用的路径可以根据不同的情况来实现选择我们需要使用的文件

    • 一般的图片的基本的后缀名格式:

      • .png 图片 .jpg图片 .svg图片 等等

    • 代码表现形式: <img src="图片链接或者图片地址" alt="图片路径出错或者图片资源未找到">

  • a元素 （anchor元素）

    • 在我们的网页中，经常习惯使用超链接实现我们的网页的路由跳转，这个时候，我们就可以直接使用a链接标签

    • a链接实现的跳转本质上实现的就是使用前端路由来实现的

    • 实现使用我们的a链接，这个就可以实现 定义超链接，用来实现打开新链接 url (这个就是我们的统一资源定位符)

    • a链接具有的重要属性:

      • href （Hypertext Reference）： 可以实现的是打开指定的url地址

        • 然后我们的href 实现的时候，我们可以设置的就是我们的远程的url地址，还可以是本地的url地址
        • 在我们实现请求新的 url 的时候，实际上请求下载的是我们的 index.html 文件的内容
        • 这些东西和浏览器的解析过程是有关系的，后面具体讲解

      • target 这个属性就是用来实现设置我们的a链接的打开模式的： 打开模式分为两种，

        • 一种就是在当前网页中实现打开

        • 另外一种就是在新开辟一个网页来实现打开我们的网页的

        • target 可以实现设置的属性值有:

          • _self 就是默认值
          • _blank 就是实现的是在我们的新的页面实现打开
          • _parent 这两个就会涉及到我们的 iframe
          • _top
          • 注意的是，我们实际开发中，我们是会在我们的： head元素中配置链接的打开模式的

    • a链接的href 可以实现添加的玩意:

      • 一个就是我们的访问地址，这个就可以实现我们的到指定的网页中去
      • 一个就是本地的图片地址，这个就可以实现我们的点击后打开我们想要展现的图片

    • a链接的具体使用场景

      • 图片链接

        • 实现的思路就是: 创建一个a链接，但是a链接中的内容的话就是我们的 图片标签，这样就可以实现 图片链接了
        • 在内容区域添加图片来实现跳转，就是 <a href=""><img src="图片地址" alt="图片无法加载时的描述信息"></a>

      • 描点链接： 这个就可以实现我们的跳转到网页中的具体的位置

        • 描点链接的实现步骤

          • 在我们需要跳转元素的上面添加一个自定义的 id属性值
          • 定义一个a链接元素，并且实现使用我们的 href 来实现指向我们的指定的 #id属性值，就可以实现我们的跳转

    • 代码实现格式: <a href="链接地址" target="属性值">页面呈现内容</a>

  • iframe元素

    • 利用这个iframe元素 我们就可以实现的就是我们的： 在一个HTML文档中嵌入其他的HTML文档

    • 我们使用这个iframe 元素，我们的主要目的其中之一就是来解决 微前端 的，但是还有其他的解决方案

    • 注意的是，我们的 这个的 iframe 有很多的网页已经禁止了这个 iframe 的使用

    • 如何实现我们的禁止 iframe ，就是后端返回信息（响应头）中发送一个: X-Frame-Options: sameorigin

    • iframe 具有的属性

      • src 这个就可以实现我们的链接我们的其他的 url 统一资源符

        • 同理，这个 iframe 可以实现我们的嵌套 远程网页和本地网页，实现我们的一直嵌套关系

      • frameborder 用来实现的是我们的设置iframe 的一个边框大小的，一般的话，就是实现设置为 0 或者 1

      • iframe 和 a链接的结合使用

        • _parent 就是实现的是 在 父窗口中实现打开链接
        • _top 就是实现的是在 顶级窗口中实现打开 链接
        • 上面两个用的不多，但是需要了解

    • 代码展示: <iframe src="https://www.baidu.com" frameborder="0">百度</iframe>

任何位置皆可用元素

  • div元素 (division)，就是分开分配的意思，就是前端常说的大盒子
  • span元素: 就是我们的跨域，涵盖的意思，就是我们常说的小盒子

  • 上面的两个元素的话，我们是可以全部都是我们的 div 或者 span两个元素的，或者说不使用这两个元素

  • 这两个元素的出现就直接体现了我们的 标签语义化的概念

  • 我们习惯的就是我们的实现通过我们的 CSS 来实现控制我们的元素的显示模式

  • div 和 span 我们可以实现的就是 盒子

  • div 和 span 元素的使用场景

    • div我们实现的时候的常使用场景: 就是实现作为我们的父容器来实现我们的显示，然后把网页中的每个不同的部分实现
    • 分割，成为网页的不同的部分来实现展示，每一个 div中实现书写的部分都是我们的一个整体，多个div 不同行显示
    • span 的话，里面实现包裹的内容就是我们的同一行的显示，和普通文本没啥细致的区别
    • div 就是块级元素的代表
    • span就是行内元素的代表

不常用元素

  • strong元素 这个就是用来实现的是我们的内容的加粗和强调的元素

    • 通常的话，我们的元素的语义化，所以说，我们的内容是可以直接通过我们的 CSS 来实现控制的
    • 绝对注意的就是我们的元素的语义化，这个概念是是十分重要的

  • i元素： 这个就是用来实现的是我们的内容实现斜体的效果 （icon的缩写）

    • 就是实现的是让我们的内容实现倾斜
  • code 元素: 这个就是用来实现我们的代码的文字的实现
  • br元素： 这个我们实现的效果就是我们的换行的效果

HTML 的全局属性

  • 全局属性就是来实现我们的用来: 实现我们的设置这个全局属性来实现我们的控制我们的元素的显示

  • 元素的特有属性

    • src href 这个就是设置到特定的属性上面的

  • 元素的全局属性:

    • id 就是实现的是定义唯一标识符，这个标识的话，在整个html文档中必须是唯一的
    • class 这个可以允许我们的CSS 或者 JavaScript 来实现我们的选择元素
    • style 这个就是可以实现的是设置我们的元素的样式，来实现我们的元素的样式的简单设置
    • title 这个就是用来实现的是相关元素的文本信息的描述，是为了提高用户体验的时候实现使用的

一些知识注意点

字符实体

  • 就是我们的html文档的实现模式就是需要我们的浏览器来实现我们的解析html文档

  • 浏览器的字符实体的话都是实现的是: 使用我们的 & 来开头，使用 ; 来实现的结尾

    • &lt; 这个就是我们的 < 符号
    • &gt; 这个就是我们的 > 符号
    • &nbsp; 这个就是我们的 空格 符号

URL 地址

  • 这个就是我们的统一资源定位符 Uniform Resource Locator

  • 就是用来实现我们的指向统一的资源的一个定位符

  • 完整的 url 格式为:

    • [协议类型]://[服务器地址]:[端口号]/[文件路径]？[查询]#[片段ID]
    • 协议类型: http 或者 https
    • 端口号默认的是我们的 80 端口
    • URI Uniform Resource Identifier 统一资源标志符，用来实现web技术的逻辑或者物理资源 image-20240925205856363.png
    • 相当于就是: 浏览器(客户端) 通过我们的 url 来实现定位到 我们的服务器中的 uri来实现寻找到我们的服务器中的资源

image-20240925210138773.png

元素语义化

  • 就是用正确的元素做正确的事情，这个就是我们的元素的语义化

  • 因为我们的元素在页面上的呈现模式是可以通过操作我们的 CSS 来实现在页面上面的显示效果的

  • 然后我们的一些具有效果的那标签实际上的话，就是给标签添加了CSS 样式的，这个是 默认的 (user agent styleheet)

  • 标签语义化的原因：

    • 方便代码的维护
    • 减少开发者之间的沟通
    • 可以让语音合成工具识别网页元素的用途，以便做出正确的判断
    • 利于我们的 SEO 优化

SEO优化-爬虫原理

  • SEO优化: search engine optimization

    • 是通过了解搜索引擎的运作规则来实现调整网页，以及提高网页在相关搜索引擎内的排名方式
    • 最大的目的就是通过搜索来实现我们的将内容实现尽量靠前，这个就是我们的 SEO 优化实现的效果
    • 然后这个搜索引擎就是通过算法来实现的
    • 浏览器最重要的就是通过我们的爬虫来实现获取各种各样的网页的
    • 在我们的每一个网页中，对于我们而言的话，最重要的就是我们的： h 标题标签
    • 同时我们还是可以扩展: SPA SSR image-20240926102235660.png

字符编码

  • 实现的时候，就是在我们的 head 里面实现设置我们的 meta 元数据的配置，然后就可以实现配置我们的 charset 来设置字符编码

  • 计算机本身的话是只可以存储和处理二进制数据，硬件的开关也是通过二进制数据来实现控制的

  • 字符编码 —— encode ; 字符解码 —— decode

    • 字符编码: 就是实现的是将我们的自然语言通过字符编码的规则来实现转换为计算机可以识别的语言
    • 字符解码: 就是实现的是将我们的计算机可以实现存储识别的语言通过字符编码的规则来实现转换为自然语言

image-20240926103723610.png

avatar
文章
阅读
粉丝