一、 语义化概述
- 什么是语义化:
a) HTML种不同的元素代表不同的含义。
b) 使用就有含义的元素来书写HTML文档,即语义化。
c) 书写HTML文档最重要的,即为不同的内容选择合适的元素
d) 语义化属于HTML范畴,与样式无关。
- 语义化作用:
a) 有利于浏览器理解HTML文档。
b) 有利于搜索引擎理解HTML文档。
- HTML5元素表:
二、 超链接
书写格式:<a target=”页面打开位置” href=”目标”>内容</a>
Herf属性:页面地址(路径);锚点;功能连接
Terget属性:_blank新窗口打开;_self默认值,当前窗口打开。
三、 相对路径和绝对路径
- 绝对路径:当网站部署到服务器后,网站中的所有资源都可以通过一个地址(路径)访问该地址(路径)的书写格式为:协议://域名/目录
http://meyerweb.com/eric/tools/css/reset/reset.css
协议:http域名:meyerweb.com目录:根目录/eric/tools/css/reset/reset.css
- 绝对路径的使用场景:访问站外资源时,只能使用绝对路径;访问站内资源时,若网站已部署到服务器,可以使用绝对路径,并可以省略协议和域名。
- 相对路径:相对路径是相对于当前资源的位置,只能用于访问站内资源;相对路径的书写格式为:./路径。
./表示当前资源所在的目录,必须作为相对路径的开始,可省略;
../表示返回上一级目录
四、 文本元素:
H1—h6:1级标题-6级标题 p:段落
Strong:重要的文本 em:强调的文本
B :突出显示的文本 I :应区别对待的文字
Blockquote:整段的引用 cite:对所写词的应用
Q :小段文本的应用 abbr:对缩写次的引用
五、 块级元素 行内元素与行内块级元素 分类等(相互之间可以转换)
块级元素
- 宽高可以自行设置,与内容 无绝对 关系
- 默认独占一行,与其他元素不能共存一行
- 对应的css属性是 display:block
- 常见的有 div、 p 、h1-h6 、hr、 ul 、 ol 、pre 各种h5 新增的语义化标签如header 、footer
行内元素
- 宽高不可以设置,设置无效,由内容决定宽高
- 默认能与其他元素共存一行
- 对应的css属性是display:inline
- 常见的行内元素有:a、 span 、 strong、 I、 b 、td
行内块级元素
- 宽高可以设置,与内容无绝对关系
- 默认不独占一行,可与其它元素共存一行
- 对应的CSS属性是:display:inline-block
- 常见的元素: img 、 td 、 table 、video 、audio 、 表单 、 。。。
六、 结构元素Div
Div元素:它是一个非常常见的元素;它没有任何的语义;它仅仅表示一个容器,用于包含其他元素;在网站布局时,它通常用于表示页面的区域。
七、 语义化结构元素语义化结构元素:在HTML5出现之前,一直使用div来划分页面区域;但div无法明确表示该区域的内容的含义HTML5中新增了一系列带有语义的结构元素;它们和div没有本质的区别,只不过它们有语义。<header>:用于表示页面或某个区域的头部。
<nav>:用于表示导航栏;
<aside>:用于表示跟周围主题相关的附加信息。
<article>:用于表示文章或其他独立页面存在的内容。
<section>:用于表示一个整体的一部分主题。
<footer>:用于表示页面或某个区域的脚注。
八、 实体字符
实体字符书写格式:&实体名称;或&#实体编号;
常见的实体字符:
显示结果 |
描述 |
实体名称 |
实体编号 |
|
空格 |
|
  |
< |
小于符号 |
< |
< |
> |
大于符号 |
> |
> |
& |
并且符号 |
& |
& |
c |
版权符号 |
© |
© |