块级元素和行内元素

一.块级元素(div,p,li,h1~h6,pre,blockquote,q等标签）

        1.div标签和p标签

                div标签:通常表示一个模块(块级元素的代表)

                p标签：普通段落标签

                           1.浏览器默认的文字样式

                           2.不保留源代码中的格式

<div>
        先帝开创的大业未完成一半却中途去世了。现在天下分为三国，蜀汉国力薄弱，处境艰难。这确实是国家危急存亡的时期啊。不过宫廷里侍从护卫的官员不懈怠。不过宫廷里侍从护卫的官员不懈怠，战场上忠诚有志的将士们奋不顾身，大概是他们追念先帝对他们的特别的知遇之恩（作战的原因），想要报答在陛下您身上。
</div>
    <p>莫文蔚华人,翁女回复,且恶女额我你.安策吧卡尼号和那我,案件念佛情况,哦年内我闹无脑啊才能我哦民事上诉我,安切夫那车爸妈群臣.却一定会成年人盘口方面呢.阿文是农村人不能.</p>

 运行之后：

 

 2.pre标签、blockquote标签和q标签

        pre标签 ：  1.保留源代码中的格式

                           2.文字比浏览器默认的文字更小更细

        blockquote标签：长文本引用

                           1.浏览器默认的文本样式

                           2.左右两侧有边距

        q标签：短文本引用

                           1.浏览器默认的文本样式

                           2.自动添加双引号

<pre>
        先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。
        然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。
        诚宜开张圣听，以光先帝遗德，恢弘志士之气，
        不宜妄自菲薄，引喻失义，以塞忠谏之路也。
        宫中府中，俱为一体，陟罚臧否，不宜异同。
        若有作奸犯科及为忠善者，宜付有司论其刑赏，
        以昭陛下平明之理，不宜偏私，使内外异法也。
</pre>
<blockquote>
        亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。
</blockquote>
<q>红豆生南国，春来发几枝。</q>
<q>愿君多采撷，此物最相思。</q>

 运行结果： 二，行内元素(strong，em,ins,mark,small,sub,sup,span等标签)

        1.strong标签，em标签，ins标签和mark标签

                strong标签：文字的加粗

                em标签：文字的倾斜

                ins标签：下划线标签

                mark标签：高亮标签

<strong>strong标签：文字的加粗</strong>
<em>em标签：文字的倾斜</em>
<ins>ins标签：下划线标签</ins>
<mark>mark标签：高亮标签</mark>

运行结果：

2，small标签，sub标签，sup标签和span标签

        small标签：小字体标签

        sub标签：下标文本

        sup标签：上标文本

        span标签：浏览器默认文字样式，不自动换行

<small>small标签：小字体标签</small>
<div>
    CO<sub>2</sub>
</div>
<div>
    2<sup>5</sup>
</div>
<span>span标签：行内元素的代表</span>

运行结果：

 最后说说块级元素和行内元素各自的特点：

        块级元素：

            1.会自动换行，每个标签包含的内容独占一行

            2.块级元素中可以包含任何元素（包括行内元素和块级元素）

            3.块级元素可以修改宽度和高度

       行内元素（内联元素）：

            1.不会自动换行，所有用行元素包含的内容展示在一行

            2行内元素中只能包含行内元素，不能含块级元素

            3.行内元素不能修改宽度和高度