1、复习

2、HTML 字符实体：

https://www.w3school.com.cn/html/html_entities.asp
image.png
在HTML当中有一些字符是系统预留的或打印不出来的，所以你让这些字符能够正常使用需要用到实体。
HTML 中的预留字符必须被替换为字符实体。
例如：不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
为了正确的显示，要使用字符实体。

3、HTML标签语义化(背)

含义：

  • 合理的标签做合理的事情

为什么要遵循标签语义化：

  • 利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）；
  • 在样式丢失的时候，还是可以比较好的呈现结构；
  • 更好的支持各种终端，例如无障碍阅读和有声小说等；
  • 利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在开发和维护的时候就可以提高效率；

日常工作中怎样遵循标签语义化：

  • 尽量减少使用无意义标签，例如span和div；
  • 尽量不使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式，那么使用css样式来进行添加；
  • 在需要强调的部分，使用strong、em，但是样式尽量使用css样式来描述；
  • 列表搭建时，使用<ul>无序列表</ul> <ol>有序列表</ol> <dl>定义列表 ；

4、补充的几个标签

div：

  • 整体页面布局当中最重要的 HTML 元素
  • 没有任何具体的含义，主要用于网页的布局，通过一个一个的div将页面划分为不同的部分，之后在针对部分进行开发

image.png

span：

  • 没有任何特殊的含义
  • 主要是为了增加额外的结构，方便我们控制样式或者是数据
  • 并且使用要求：在其他语义化标签不适用的情况下再使用 ```javascript <!DOCTYPE html>

    夏威夷三日游

    价格382元

  1. <a name="TzOba"></a>
  2. ### 格式化标签
  4.    - 加粗：b或者strong
  5.    - 斜体：i或者em
  6.    - 删除线：del和s
  7.    - 下划线：ins 和u
  8. <a name="ADGWs"></a>
  9. ### 预格式化标签pre：按照预定设置好的格式进行显示
  10. ```javascript
  11.  <pre>
  12.       00000000     000000000
  13.     000000000000  000000000000
  14.    0000000000000000000000000000
  15.    0000000000000000000000000000
  16.    0000000000000000000000000000
  17.      000000000000000000000000
  18.        00000000000000000000
  19.          0000000000000000
  20.            000000000000
  21.              00000000
  22.                0000 
  23.   </pre>

页面效果：
image.png

iframe元素

  • HTML内联框架元素 (