HTML结构分析

  • 文档声明.
    • 用于声明文档类型
      • HTML文档声明，告诉浏览器当前页面是HTML5页面
      • 让浏览器用HTML5的标准去解析识别内容
  • html元素
    • head元素
    • body元素

  • html元素 lang属性

    • 帮助语音合成工具确定要使用的发音
    • 帮助翻译工具使用确认翻译规则

  • head元素

    • 规定网页相关配置信息（元数据）

  • body元素

    • 大部分HTML元素都是在body中编写

      h1~h6、p元素

  • Heading是头部的意思，通常用来做标题

  • 一般展示重要的文字作为标题

  • p元素(paragraph)表示段落、分段的意思

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

本质上就是添加了一系列的CSS样式

img、a、iframe元素

img元素

  • img(image)显示一张图片
  • 事实上是一个可替换的元素

两个属性：

  • src属性：是必须的，它包含文件的路径（source的缩写）表示源
  • alt：不是强制性的，当图片加载失败可以显示这段文本、屏幕阅读器会描述这段文本给屏幕阅读器的使用者听。

src路径： 网络图片，本地图片。
相对路径（常用） 和 绝对路径（几乎不用）
img支持的图片格式非常多mdn

a元素

  • 如果需要跳转到另外一个链接，这个时候使用a元素

HTML(锚(anchor)元素)

  • 定义超链接，用于打开新的URL

两个属性

  • href：（Hypertext Reference的简称）指定要打开的URL地址，也可以是一个本地地址
  • target：指定何处显示链接资源.
    • _self：默认值，当前窗口打开
    • _blank：新建一个窗口打开
    • 一些不常用的结合iframe

iframe元素

  • 在一个HTML文档中嵌入其他的HTML文档
  • frameborder属性 1显示 0 不显示

div、span元素

在HTML中有两个特殊的元素div元素、span元素：

  • div元素：division，分开、分配的意思
  • span元素：跨域、涵盖的意思

作用：无所用、无所不用。

产生的历史：

  • 网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
  • 后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可；
  • 比如h1元素可以是一段普通的文本+CSS修饰样式；
  • 这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理；

理论来说：

  • 页面可以全是 div、span
  • 也可以没有 div、span

div和span的区别

div和span元素都是“纯粹的”容器，相当于是一个盒子。都是用来包裹内容的。

  • div：多个div包裹的内容会在不同行显示
  • span：多个span包裹的内容会在同一行显示

不常用元素

strong元素：内容加粗、强调
i元素：内容倾斜
code元素：用于显示代码
br元素：换行元素

MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

HTML全局属性

常见的全局属性如下：

  • id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样 式（使用 CSS）时标识元素
  • class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选 择和访问特定的元素
  • style：给元素添加内联样式
  • title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的