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
3pre>
<p style="white-space: pre">1
    2
    3p>
<p>1
    2
    3p>
<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. &单词; 如<p>p>
<p>2. &#数字; 如<p>p>
<p>小于 -- less then <p>
<p>大于 -- great then >p>
<p>小于 -- non-breaking space  p>
<p>版权符号 ©p>
<p>&符号 &p>

strong

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

i

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

em

表示强调的内容

del

表示错误的内容

s

表示过期的内容

你可能感兴趣的:(html5,html,前端)