二.语义化与文本元素

语义化

什么是语义化？

1.每一个HTML元素都有具体的含义。

a元素：超链接
p元素：段落
h1元素：一级标题

2.所有元素与展示效果无关，展示效果由CSS决定(浏览器带有默认的CSS样式)。

选择什么元素，取决于内容的含义

为什么需要语义化？

1.为了优化搜索引擎(Google,百度)

每隔一段时间，搜索引擎会从整个互联网中搜取页面源代码。、

2.为了让浏览器理解网页

阅读模式，语音模式

文本元素

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

1.h(head)

h1——h6 表示1级标题到6级标题

    h$*6>{$级标题}
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

2.p(paragraphs)

表示段落(lorem,乱数假文，没有任何实际含义的文字)

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat dolores placeat enim iusto veritatis animi, consequuntur inventore quo nemo natus! Possimus facilis dignissimos tempora delectus corrupti dolores ab voluptates at.</p>
    <p>Vitae porro dolorum mollitia dicta illo deserunt non dolores nulla nostrum? Obcaecati aut, repellendus ratione eius quo magnam aspernatur maxime nisi animi qui, neque blanditiis beatae dolorem eos dolore! Eligendi.</p>
    <p>Illum quo iure, soluta, tempore repellendus dicta tempora odio recusandae numquam nihil eveniet. Itaque, doloribus atque! Quas esse modi rem! Accusamus ea ex ullam error est a quis maxime veniam!</p>
    <p>Laborum laudantium optio sint voluptas voluptatem, qui illum ipsum dolor ipsam blanditiis quo excepturi temporibus odio quibusdam sit commodi maxime unde ipsa cupiditate illo consequuntur? Beatae tempore nesciunt est minima!</p>
    <p>Adipisci in sint quibusdam laborum beatae sit vero veniam maiores ratione nobis asperiores quaerat nihil corrupti rem fugiat necessitatibus eaque excepturi, cumque unde, cupiditate quod eos explicabo? Odio, soluta aliquam?</p>
    <p>Nisi fugiat exercitationem inventore veritatis deleniti rerum iste magni eveniet sit, nobis fuga id tenetur, ratione consequatur sed saepe vitae explicabo aliquid amet magnam iusto quidem illo praesentium molestiae! Corrupti.</p>

3.span(无语义)

无语义，仅用于设置样式，某些元素在显示时会独占一行(块级元素)，而某些元素不会(行级元素)，到了HTML5，已经弃用这种说法。

  三原色：<span style = "color:red">红</span><span style = "color:green">绿</span><span style="color:blue">蓝</span>组成。

4.pre(无语义)

预格式化文本元素

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

注意：在pre元素的内容中不会出现空白折叠。(在pre元素内部出现的内容，会按照源代码格式显示到页面上)

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

pre元素功能的本质：它有一个默认的CSS属性

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat officiis, culpa quisquam neque nesciunt architecto sit repellendus, aut incidunt quo debitis
    
    
    
   
    ipsa quibusdam, non enim necessitatibus tenetur eius esse praesentium.

    <pre>
             (((((        )))))  I am a           student.
    ((((((((((((((        ))))))))))))))
       (((((((((((        )))))))))))
    </pre>

显示代码时，通常外边套code元素，code表示代码区域。