第二节 语义化

什么是语义化

  1. 每一个HTML元素都有具体的含义
  2. 所有元素与展示效果无关,元素展示到页面的效果应该与css有关;因为浏览器自带默认的css样式,所以每个元素都有默认的样式。

重要:选择什么元素,取决于内容的含义,而不是显示出来的效果。

为什么需要语义化

  1. 为了搜索引擎的优化(SEO) 每隔一段时间搜索引擎就会从互联网中抓取页面源代码
  2. 为了浏览器理解网页

文本元素

HTML中支持的元素:html元素周期表

h元素

标题:head

h1~h6:表示一级标签到六级标题

1
2
h$*6>[$级标题]  
$ 表示占位符

p元素

段落:paragraph

span

没有语义,仅用于设置样式,充当容器

某些元素会独占一行,某些元素不会。在以前独占一行的叫 “块级元素”,不会独占一行的叫 “行级元素”。现在在HTML5中已经废除这种说法。

pre

预格式化文本元素,通常用于在网页中显示一些代码。

空白折叠:在源代码中连续的空白字符(空格,换行,制表),在页面显示时会被折叠为一个空格。

在pre元素内部出现的内容,会按源代码的格式显示到页面上,不会再出现空白折叠。

pre元素在显示代码的时候通常会在外面套一个code元素。code元素表示代码区域。

pre元素功能的本质是:它有一个默认的css样式。所以按逻辑来讲它也是一个无语义元素。

HTML实体

实体字符:HTML Entity

实体字符通常用于在页面中显示一些特殊符号

通常的写法有: &单词;&# 数字; 俩种写法。

(分号要用英文,写法一般用第一种,数字难记。)

HTML 原代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其它特殊字符
&quot; 引号
&reg; ® 已注册
&copy; © 版权
&trade; 商标
&yun; ¥
&bull;
&ensp; 半个空白位
&emsp; 一个空白位
&nbsp; 不断行的空白( (non- breaking space 非断裂空间))

small

橘子泡酒
Built with Hugo
主题 StackJimmy 设计