HTML——02:常见的元素

block 元素在被浏览器识别时,会自动换行。简而言之,block 元素就好像被一个看不见的矩阵框起来一样。

另外 HTML 的所有元素,都是语义导向的。也就是说,假如 <h1> xxx </h1> 导致 xxx 的格式不合你意,但是 xxx 的确是第一标题,而你却讨厌他的 format,并因此选择用 <h2> xxx </h2>,这是不对的。该用什么,应该凭借语义来判断,标题一就是标题一,而不是用标题二,然后其他的用标题三,反正差一级,不是吗?这样想是不对的!总之一句话,元素应该是语义导线。假如你真的讨厌某个元素的外观,你可以修改 CSS 来修改外观呀。

常见的 block 元素

常见的元素有段落、标题、列举、媒体、长引用、原始格式;下面将一一介绍

标题

标题即 <hx>,x 数子,一共可以有 6 个等级的标题可以来设置。

段落

段落就是<p>,段落主要是来用来设置那些不自包含、相互联系、共同讨论一个主题的文字。其实就是我们写作文的段落了。

列举

列举可以有无序列举、有序列举和描述列举:

无序列举
主要格式是:
<ul> <li> 列举内容1 </li^gt
<li> 列举内容2 </li>
<li> 列举内容3 </li^gt </ul>
效果:
  • 列表内容1
  • 列表内容2
  • 列表内容3
有序列举
主要格式是:
<ol> <li> 列举内容1 </li^gt
<li> 列举内容2 </li>
<li> 列举内容3 </li^gt </ol>
效果:
  1. 列表内容1
  2. 列表内容2
  3. 列表内容3

描述列举
主要格式是:
<dl> <dt> 标签1 </dt> <dd> 描述内容1 </dd>
<dt> 标签2 </dt> <dd> 描述内容2 </dd>
<dt> 标签3 </dt> <dd> 描述内容3 </dd> </dl>
效果展示:
标签1
描述内容1
标签2
描述内容2
标签3
描述内容3

媒体

媒体的基本用法是 <figure> 插入媒体内容的 html 元素(如 img) <figcaption> 题注</figcaption></figure>。
figure 的意思虽然是图片,但是在里面可以内嵌一些其他媒体嵌入元素,可以嵌入除了 img 元素外,还可以嵌入视频、代码、表格之类的内容。
用法实例:
<figure>
<img src='/' alt='xxxx' >
<figcaption> 图片题注</figcaption>
</figure>

引用

引用一般是用于引用某些需要强调的外部引用文字,或者需要全体缩进的引用文字。
用法是<blockquote> 引用内容</blockquote>
实例如下:

我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用,我是引用。

原始文字

一般为了避免过于频繁的转义,需要用到原始文字元素。标签为<pre> 内容 </pre>。如果需要转义的内容太多,则可以考虑用 pre 来避免转义。并且,html 默认将多个空格识别成一个,而且回车键、制表符都会被浏览器所忽略,此时亦可以采用 pre 元素,来实现回车换行,展示制表符和一些无效的符号等。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页