今日打卡任务

务必下载!!

今日的代码和讲义 以及思维导图:【点击此链接下载 Day02.zip】

一. HTML结构

完整的HTML结构

1.1. 文档(类型)声明

  • HTML最上方的一段文本我们称之为 文档类型声明,用于声明文档类型

  • <!DOCTYPE html>

    • HTML文档声明 ,告诉浏览器当前页面是 HTML5 页面;
    • 让浏览器用 HTML5 的标准去解析识别内容;
    • 必须放在 HTML 文档的最前面,不能省略,省略了会出现兼容性问题;
  • HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多(了解即可)

1.2. html元素

  • <html> 元素 表示一个 HTML 文档的根(顶级元素),所以它也被称为根元素。
    • 所有其他元素必须是此元素的后代。

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

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

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

  • 比如常用的规则:

    • lang=“en” 表示这个HTML文档的语言是英文;
    • lang=“zh-CN” 表示这个HTML文档的语言是中文;

1.3. head

  • 元数据(配置信息)
    • meta -> charset -> utf-8
    • title -> 标题

  • HTML head元素 规定文档相关的 配置信息(也称之为元数据),包括文档的标题,引用的文档样式和脚本等。
    • 什么是元数据(meta data),是描述数据的数据;
    • 这里我们可以理解成 对整个页面的配置:

  • 常见的设置有哪些呢?一般会至少包含如下2个设置。

    • 网页的标题: title 元素

    • 网页的编码:meta 元素

      • 可以用于设置网页的字符编码,让浏览器更精准地显示每一个文字,不设置或者设置错误会导致乱码;
      • 一般都使用 utf-8 编码,涵盖了世界上几乎所有的文字;

二. body元素

  • body 元素里面的内容将是你在浏览器窗口中看到的东西,也就是网页的具体内容和结构
  • 之后学习的大部分HTML元素都是在 body 中编写呈现的;

  • HTML元素本身很多,但是常用的元素就是那么几个

  • 常用的元素(暂时掌握下面几个就够了,90%时间都在写这几个):

    • p 元素、 h 元素;
    • img 元素、 a 元素、 iframe 元素;
    • div 元素、span 元素;
  • 下阶段学习的元素:

    • ulolli 元素;
    • button 元素、 input 元素;
    • tabletheadtbodytheadthtrtd ;
  • HTML5新增元素(后续学习)

2.1. h1~h6

  • 在一个页面中通常会有一些比较重要的文字作为标题,这个时候我们可以使用h元素。

  • <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题

    • Heading是头部的意思,通常会用来做标题
    • <h1> 级别最高,而 <h6> 级别最低。
  • 注意:h 元素通常和 SEO 优化有关系(什么是SEO,后续再介绍)

2.2. p元素

  • 如果我们想表示一个段落,这个时候可以使用 p 元素。

  • HTML <p>元素(或者说 HTML 段落元素)表示文本的一个段落

    • p 元素是 paragraph 单词的缩写,是段落、分段的意思;
    • p 元素多个段落之间会有一定的间距;

2.3. 案例练习

2.4. img元素

  • 我们应该如何告诉浏览器来显示一张图片呢?使用img元素。

  • HTML <img> 元素将一份图像嵌入文档。

    • img 是 image 单词的缩写,是图像、图像的意思;
    • 事实上 img 是一个可替换元素(replaced element);
  • img 有两个常见的属性:

    • src 属性 :source 单词的缩写,表示源
      • ✓ 是必须的,它包含了你想嵌入的图片的文件路径。
    • alt 属性:不是强制性的,有两个作用
      • ✓ 作用一:当图片加载不成功(错误的地址或者图片资源不存在),那么会显示这段文本;
      • ✓ 作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义;
  • 某些其他属性目前已经不再使用

    • 比如 widthheightborder

img元素- 图片的路径

  • 设置 imgsrc 时,需要给图片设置路径:
    • 网络图片:一个URL地址(后续会专门讲URL);
      • ✓ 网络图片的设置非常简单,给一个地址即可;
    • 本地图片:本地电脑上的图片,后续会和html一起部署到服务

img元素 - 图片的格式

2.5. a元素(anchor)

常见元素 – a元素

  • 在网页中我们经常需要跳转到另外一个链接,这个时候我们使用a元素;

  • HTML <a> 元素(或称锚(anchor)元素):

    • 定义 超链接,用于打开新的URL;
  • a元素有两个常见的属性:

    • href:Hypertext Reference的简称

      • ✓ 指定要打开的URL地址;

      • ✓ 也可以是一个本地地址;

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

      • _self:默认值,在当前窗口打开URL;
      • _blank:在一个新的窗口中打开URL;
      • ✓ 其他不常用, 后面iframe可以讲一下;

a元素 - 锚点链接

  • 锚点链接可以实现:跳转到网页中的具体位置

  • 锚点链接有两个重要步骤:

    • 在要跳到的元素上定义一个 id 属性;
    • 定义 a 元素,并且 a 元素的 href 指向对应的 id ;

a元素 - 图片链接

  • 在很多网站我们会发现图片也是可以点击进行跳转的
    • img 元素跟 a 元素一起使用,可以实现图片链接;

  • 实现思路:
    • a 元素中不存放文字,而是存放一个 img 元素;
    • 也就是 img 元素是 a 元素的内容;

a元素 – 其他URL地址

  • a元素一定是用来跳转到新网页的么?

    • https://github.com/coderwhy/HYMiniMall/archive/master.zip

    • mailto:12345@qq.com

2.6. iframe元素

  • 嵌套网页
  • 某些网页禁止嵌套(原理)
  • 和a元素结合(target另外两个值)
  • 利用 iframe 元素可以实现:在一个 HTML 文档中嵌入其他HTML文档

  • frameborder 属性

    • 用于规定是否显示边框
      • 1 :显示
      • 0 :不显示
  • a 元素 target 的其他值:

    • _parent: 在父窗口中打开URL
    • _top: 在顶层窗口中打开URL

2.6. div/span

  • 历史
  • 案例

div元素、span元素的历史

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

    • div 元素:division,分开、分配的意思;
    • span 元素:跨域、涵盖的意思;
  • 这两个元素有什么作用呢? 无所用、无所不用。

  • 产生的历史:

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

    • 我们的页面可以没有 divspan ;
    • 我们的页面也可以全部都是 divspan ;

div元素、span元素的区别

  • 这个时候有一个问题:我出现一个不就可以了吗?

  • div 元素和 span 元素都是“纯粹的” 容器,也可以把他们理解成“盒子”,它们都是用来包裹内容的;

    • div 元素:多个 div 元素包裹的内容会在不同的行显示;

      • ✓ 一般作为其他元素的父容器,把其他元素包住,代表一个整体

      • ✓ 用于把网页分割为多个独立的部分

    • span 元素: 多个 span 元素包裹的内容会在同一行显示;

      • ✓ 默认情况下,跟普通文本几乎没差别
      • ✓ 用于区分特殊文本和普通文本,比如用来显示一些关键字

2.7. 不常用元素

  • strong 元素 : 内容加粗、强调;

    • 通常加粗会使用css样式来完成;
    • 开发中很偶尔会使用一下;
  • i 元素 : 内容倾斜;

    • 通常斜体会使用css样式来完成;
    • 开发中偶尔会用它来做字体图标(因为看起来像是icon的缩写);
  • code 元素 : 用于显示代码

    • 偶尔会使用用来显示等宽字体;
  • br 元素 : 换行元素

    • 开发中已经不使用;
  • 更多元素详解,查看MDN文档:

2.8. 全局属性

  • 我们发现某些属性只能设置在特定的元素中:

    • 比如 img 元素的 src、a元素的 href;
  • 也有一些属性是所有HTML都可以设置和拥有的,这样的属性我们称之为 “全局属性(Global Attributes)”

  • 常见的全局属性如下:

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

    • class : 一个以空格分隔的元素的类名(classes )列表,它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选 择和访问特定的元素;

    • style : 给元素添加内联样式;

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

三. 额外知识

3.1. 字符实体

  • 思考: 我们编写的 HTML代码 会被浏览器解析

  • 如下代码是如何被解析的呢?

    • 如果你使用小于号(<),浏览器会将其后的文本解析为一个tag。
    • 但是某些情况下,我们确实需要编写一个小于号(<);
    • 这个时候我们就可以使用字符实体;

  • HTML 实体是一段以连字号( & )开头、以分号(;)结尾的文本(字符串):
    • 实体常常用于显示保留字符(这些字符会被解析为 HTML 代码)和不可见的字符(如“不换行空格”);
    • 你也可以用实体来代替其他难以用标准键盘键入的字符;

常见的字符实体

课题总结

  • 必须掌握的知识:

    • 字符实体的作用和常见的三个字符实体;
    • 掌握URL的概念以及URL的常见规则(开发是离不开的);
  • 理解的知识:

    • 元素语义化的含义;
    • SEO优化的基本原理;
    • 字符编码的含义;