html文本元素

文章目录

• h
• p
• span
• pre
• code
• 实体字符
• strong
• i
• em
• del
• s

h

h -- head -- 标题

一共有六级标题

hKaTeX parse error: Expected '}', got 'EOF' at end of input: *6>{级标题} & tab

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

p

p -- paragraph -- 段落
(p>lorem)*3 & tab自动生成段落，内容如下：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at esse officia officiis veritatis. A dolor, ea eligendi laborum nihil quam qui. Accusantium eos quam quia, quisquam sit ut veritatis!</p>
<p>Accusantium amet asperiores aspernatur consequatur distinctio dolor, dolore dolorem doloremque ducimus illo ipsam labore, libero maiores nam non odio odit officiis omnis possimus quod rerum sunt veniam veritatis voluptate voluptates!</p>
<p>Aspernatur atque beatae ea mollitia totam. Autem eaque et hic magnam necessitatibus nobis omnis quia rem repudiandae sequi. Ad animi ea facilis in optio quidem rerum sapiente sed sequi voluptatem.</p>

span

span -- 无语义

有时需要一个元素，但是这个元素有没有一个语义，这里提到了语义，语义就是为了可以更好的让浏览器识别到浏览器需要的信息的含义，标签都是语义，乱用语义会造成浏览器识别异常问题，如：

<p>三元素包含：<span style="color: red">红</span>、<span style="color: green">绿</span>、<span style="color: blue">蓝</span></p>

上面的红绿蓝要显示为指定颜色，就要使用css，而css需要依托于html标签，因此span就有了意义

pre

预格式化文本元素

空白折叠：在源代码中的连续空白字符(空格、换行、制表符)，在页面显示时，会被折叠为一个空格，不论标签内外

在pre元素中的内容会按照源代码格式显示在浏览器，不会出现空白折叠，通常用于显示代码；pre的本质是有一套默认的css代码(white-space)

<pre>1
2
3</pre>
<p style="white-space: pre">1
    2
    3</p>
<p>1
    2
    3</p>
<hr>

code

显示为代码，会空白折叠，与p标签相比就是有个字体上的差异，要避免空白折叠需要配合pre标签使用，或者直接加white-space属性

<code>
<pre>
    int a = 0;
    printf("%d", a);
</pre>
</code>
<code style="white-space: pre">
    int a = 0;
    printf("%d", a);
</code>

实体字符

通常用于在页面中显示一些特殊符号，如拥有尖括号的标签，如果直接输入会被html认为是个标签，因此需要实体字符，编写如下：

<p>1. &单词; 如&lt;p&gt;</p>
<p>2. &#数字; 如&#60;p&#62;</p>
<p>小于 -- less then &lt;</p>
<p>大于 -- great then &gt;</p>
<p>小于 -- non-breaking space &nbsp;</p>
<p>版权符号 &copy;</p>
<p>&符号 &amp;</p>

strong

表示重要的，不能忽略的内容

i

表示含有特殊语义，阅读的时候会使用特殊的语调。

em

表示强调的内容

del

表示错误的内容

s

表示过期的内容