7. 文本元素 {ignore}

[toc]

1. html元素周期表

HTML5中支持的元素：HTML5元素周期表

中文版

英文版

2. h

标题：head

h1-h6：表示1级标题 - 6级标题

• 使用emmet语法，快速生成以下内容：

<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>

h${title$}*6

3. p

段落，paragraphs

• 使用emmet语法，快速生成以下内容：

补充：lorem，乱数假文，没有任何实际含义的随机文字。

<p>Lorem ipsum dolor sit amet.</p>
<p>Corporis soluta minus eius minima?</p>
<p>Quasi voluptatum deleniti deserunt facere.</p>
<p>Veniam, earum. Ratione, repudiandae sed!</p>
<p>Amet error nostrum distinctio repudiandae?</p>
<p>Consequuntur ab sit maiores omnis?</p>

p*6>lorem5

注意：此时的内容，不需要用 {} 来包裹。

• 如何生成中文的乱数假文？

在线版：http://www.cancms.com/content/dummytext

vscode插件版：在 vscode 中安装插件 Chinese Lorem，输入 jw 即可。语法和 lorem 一模一样，但还是存在一点差异的，请看下面的示例：

<!-- lorem3 -->
Lorem, ipsum dolor.
<!-- jw3 -->
训一判

<!-- p*2>lorem3 -->
<p>Lorem, ipsum dolor.</p>
<p>Accusantium, eos qui.</p>
<!-- p*2>jw3 -->
<p>
    <jw3></jw3>
</p>
<p>
    <jw3></jw3>
</p>

4. span【无语义】

没有语义，仅用于设置样式。

某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）。

注意：块级元素和行级元素都是以前的叫法，现在不这么叫了。但是，到了HTML5，已经弃用这种说法。

参考：块级元素与行内元素 mdn

5. pre

预格式化文本元素

空白折叠： 在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格。

在pre元素内部出现的内容，会按照源代码格式显示到页面上。

该元素通常用于在网页中显示一些代码。

pre元素功能的本质：它有一个默认的css属性：white-space: pre;。

<code>

<pre>
        var i = 2;
        if(i){
            console.log(i);
        }
    </pre>
</code>

<code style="white-space:pre">
    var i = 2;
    if(i){
        console.log(i);
    }
</code>

显示代码时，通常外面套code元素，code表示代码区域。（语义化更好）

vscode缩进操作技巧：

• 加缩进 —— tap；
• 减缩进 —— shift + tap；

小结

• HTML元素周期表：http://www.html5star.com/manual/html5label-meaning/
• 掌握一些基本的 emmet 语法

• 知道什么是 空白折叠，以及如何防止 空白折叠。

  • 空白折叠就是多个不可见字符会被识别为一个；
  • 给元素设置样式：white-space: pre; 即可防止空白折叠；