HTML基础

看月亮的方源
87 阅读5分钟

HTML基础

一. HTML结构

1.1. 文档声明

HTML文档声明，告诉浏览器当前页面是HTML5页面；

让浏览器用HTML5的标准去解析识别内容；

必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；

<!DOCTYPE html>  document文档   type类型

1.2. html元素

元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。 所有其他元素必须是此元素的后代。
  • lang

W3C标准建议为html元素增加一个lang属性，作用是

帮助语音合成工具确定要使用的发音;

帮助翻译工具确定要使用的翻译规则;

◼ 比如常用的规则：

lang=“en”表示这个HTML文档的语言是英文；

lang=“zh-CN”表示这个HTML文档的语言是中文；

1.3. head

◼ HTML head 元素 规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。

什么是元数据（meta data），是描述数据的数据；

这里我们可以理解成对整个页面的配置

  • 元数据(配置信息)

  • 网页的编码：meta元素

    1. 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；

    2. 一般都使用utf-8编码，涵盖了世界上几乎所有的文字；

    <meta charset="UTF-8">

    charset设置字符的编码"UTF-8"

    • meta -> charset -> utf-8 网页的编码

      网页的标题：title元素

    • title -> 标题 网页的标题

二. body元素

2.1. h1~h6

  • 演练
  • 区别

微信截图_20230215142553.png

浏览器通过css的样式来区分h1-h6

2.2. p元素

◼ HTML

元素（或者说 HTML 段落元素）表示文本的一个段落。

p元素是paragraph单词的缩写，是段落、分段的意思；

p元素多个段落之间会有一定的间距；

  • 演练
  • 区分

2.3. img元素

  1. img有两个常见的属性：

  2. src属性：source单词的缩写，

表示源 ✓ 是必须的，它包含了你想嵌入的图片的文件路径。

  1. alt属性：不是强制性的，有两个作用

  • 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；

  • 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

  • 两个属性

    • src
    • alt: 占位

  • 地址

    • 网络地址

    • 本地地址

      • 绝对路径
      • 相对路径

2.4. a元素(anchor)

  1. a元素有两个常见的属性：
  • href：Hypertext Reference的简称

指定要打开的URL地址；

也可以是一个本地地址；

  • target：该属性指定在何处显示链接的资源。

_self：默认值，在当前窗口打开URL；

_blank：在一个新的窗口中打开URL；

其他不常用,；

  • 两个属性:

    • href

    • target

      • _self
      • _blank
      • _parent ：在父窗口中打开URL
      • _top：在顶层窗口中打开URL

  • 本页面的锚点链接

  • a元素和img元素

<!-- 指向连接：zip压缩包 -->
    <a href="https://github.com/HYMiniMall/archive/master.zip">下载压缩包</a>
    <!-- 指向协议地址 -->
    <a href="mailto:12345@qq.com">发送邮件到12345</a>

2.6. iframe元素

  1. 利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档

  2. frameborder属性

  3. 用于规定是否显示边框 ✓ 1：显示 ✓ 0：不显示

  • 嵌套网页
  • 某些网页禁止嵌套(原理)
  • 和a元素结合(target另外两个值)

2.5. div/span

  • 历史
  • 案例

2.6. 不常用元素

  • strong
  • i
  • code
  • br
  • ...

2.8. 全局属性

  • id
  • class
  • style
  • title
  1. 我们发现某些属性只能设置在特定的元素中：
  • 比如img元素的src、a元素的href；

  1. 也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为 “全局属性（Global Attributes）”  全局属性有很多：developer.mozilla.org/zh-CN/docs/…

  2. 常见的全局属性如下：

  • id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样 式（使用 CSS）时标识元素。

  • class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选 择和访问特定的元素；

  • style：给元素添加内联样式；

  • title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的

三. 额外知识

3.1. 字符实体

  • 为什么需要字符实体;
  • 三个:
&nbsp;
&lt;
&gt;

常见的字符实体

image-20230224171822598.png

3.2. URL

URL 代表着是统一资源定位符（Uniform Resource Locator）

  1. 通俗点说：URL 无非就是一个给定的独特资源在 Web 上的地址。

  • 理论上说，每个有效的 URL 都指向一个唯一的资源；

  • 这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等；

image-20230224172539768.png

  • URL的格式:

    • 协议://主机:端口/路径/文件名?查询#片段id
  1. 和URI的区别:

  • URI = Uniform Resource Identifier 统一资源标志符，用于标识 Web 技术使用的逻辑或物理资源。

  • URL = Uniform Resource Locator 统一资源定位符，俗称网络地址，相当于网络中的门牌号；

  1. URI在某一个规则下能把一个资源独一无二的识别出来。

  • URL作为一个网络Web资源的地址，可以唯一将一个资源识别出来，所以URL是一个URI；

  • 所以URL是URI的一个子集；

  • 但是URI并不一定是URL;

3.3 语义化的好处

标签语义化的好处：

  • 方便代码维护；
  • 减少让开发者之间的沟通成本；
  • 能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
  • 有利于SEO；

3.4 什么是SEO

  1. 搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站 在有关搜索引擎内排名的方式。

image.png

avatar
文章
阅读
粉丝