论常用的块级HTML标签

目录

学习目标

语义元素

块级标签

标题语法

 语义

 默认样式

应用场景

 注意

段落

语法格式

div

 无序列表

 语法

 语义

默认样式

样式属性

有序列表

语法

语义

默认样式

type属性

注意： 

 自定义列表

格式

语义 

---

学习目标

• - 掌握标签的语义与属性
• - 熟悉标签的典型应用场景
• - 掌握路径的写法
• - 能够应用课堂知识完成综合案例
• - 能够说出什么是HTML语义化、语义化的好处
• - 掌握HTML实体5个以上（空格、小于、大于、版权、商标等）

语义元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容. 

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

注意：Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。 

块级标签

HTML 标题(Heading)元素呈现了六个不同的级别的标题，H1 级别最高，而 H6 级别最低。

标题语法

<h1>标题内容</h1>  

 语义

表示标题，HTML 包括六个级别的标题， <h1>–<h6>

依据重要性递减，用于指定内容的标题和子标题

 默认样式

• 文字加粗

• 字号依次变小

• 默认间距

• 独占一行

应用场景

• logo

• 文章页标题、内容章节标题

• 产品标题

• 模块标题等

 注意

• 不要使用标题元素来加大、加粗字体，

• 使用标题保持页面结构清晰【对于无障碍访问 和 搜索引擎优化 等问题非常有意义】

• 避免跳过某级标题：始终要从 h1开始，接下来依次使用。

• 【避免在同一个页面上重复使用 h1】——【logo、文章页、产品详情页的大标题】

• 通常标题标签包含文字、图片和其它行内元素

段落

定义：表示文本的一个段落.该元素通常表现为一整块与相邻文本分离的文本

语法格式

<p>内容</P>

• 提示：通常用来包含文字、图片、不可以包含它自己

div

• 语法：<div></div>

• 语义:没有语义,用于将内容分区（盒子装东西）

• 代码演示，预览效果（简单总结默认样式）

• 网页中