一.块级元素(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.行内元素不能修改宽度和高度