首先要知道，HTML文档并不喜欢我们打的那些符号和字母。比如说，你拼命在HTML文件中插入空格或者回车，可惜浏览器根本不吃这一套。不管是空格还是回车，浏览器统统不看。因此，要想网页像你写的那样漂亮，还得多费脑筋。
p元素的使用
你要是想了解什么是段落，直接看下p元素就懂了。简单地说，p就是paragraph的缩写，用来分隔句子讲同一个事儿的部分。这个p元素其实没什么其他意思，只是把文章分成几段的方式而已。如果你想让某段文字看起来与众不同，比如说引用别人的话，或者这句话很重要，那就给它加个class或id属性。
Antoni Gaudí
Many tourists are drawn to Barcelona
to see Antoni Gaudí's incredible
architecture.
Barcelona celebrated the 150th
anniversary of Gaudí's birth in
2002.
pre元素的作用
然而有时候，咱们还是要保持原来的样子，这时候pre元素就有用武之地。pre元素可以保存预先排版过的文字，这样浏览器就不会给你把空白什么的给自动合并了。所以，你在网页上看啥样，文档里面就是啥样！这个对于编程的小伙伴们特别好用，因为代码里的空格和换行可是很关键滴，千万别乱动。但是，能用别的方法咱就尽量别用它，毕竟它会让我们失去其它控制页面展示效果的办法（比如元素或者样式）。
blockquote元素的引用
有时候要引用别人的话，用blockquote就对了。这个元素跟q像，但是q用来引用短句子，blockquote拿来引用长篇大论。为了证明你是从哪儿引的，可以加个cite属性，让人觉得你很专业！不过别忘了，浏览器会帮你处理blockquote里的文字排版，让它们”躲进角落”，这样文章看起来既简单明了又有条理。
q元素的短引用
要说Q元素，主要是引用小句子哒。不过有些浏览器可能会自动给Q里的字加个引号，这倒是挺方便的。但要注意，每个浏览器处理的方法可能不同，如果你对引号的外观有特别要求，还是需要我们自己动手，用CSS搞定咯~
Add this to your style sheet if you want to display a dotted border underneath the
abbrelement whenever it has atitleattribute.abbr[title] { border-bottom: 1px dotted #000; }hr元素的分隔
说到Web前端开发，HTML5里的hr元素千万别漏了。就一条细线而已，但对区分网页内容区域作用可不小！
ol和ul元素的列表
来，今天咱们讲讲HTML里的三种列表，它们分别叫做有序列表（ol）、无序列表（ul）和描述性列表（dl）。比如ul就像个大大的包裹，里面每样东西都要用li标签给标清楚。而且ul还有个list-style-type属性，你想怎么变队行就怎么变，方便极了！而ol就有点儿意思了，像是有秩序的队伍，每个成员都有自己的号码，通过li的value属性就能给定下来。
dl、dt和dd元素的描述列表
其实也不太常用，但是说说清楚总是好的。简单说来，就是dl(堆叠样式表)、dt(数据类型)和dd(文档描述)这三兄弟在一块儿干活。dl是老大，管着整个列表；dt是标签哥，专门摆出主题词；最后的dd就是详细解说员，给大家解释一下这个词到底啥意思。这样一配合，东西就整整齐齐的了。
figure和figcaption元素的插图
She tried again, this time in French:
Avez-vous lu le livre High Tide in Tucson de Kingsolver? C'est inspirational.说起插图，可能有些人不太熟悉。简单说，就是把图片或表格放到文档里头去。用figure元素就能实现这个功能！而且，里边还能添加各种各样的图片和图形。至于figcaption吗？那可是figure元素的小标题哟~虽然并不是非得加上不可，但是有了它，你的插图看上去就会更加专业！
HTML里那些元素看着有些复杂？别担心，用好这些元素就可以让网页变得美观又有序了。下次你再编辑HTML文档时，可别忘了多多关注格式问题，让你的页面从乱糟糟变成井然有序！
HTML中的空白字符处理
主题1
主题2
......在HTML里头，空白字符有些时候挺让人头疼。比如，你打了一串空格，实际上浏览器只当它们是一个来看待；再说说回车键，你按它下去也没啥反应。这么一搞，网页排版和你在编辑器里看到的就大相径庭了，看得头晕目眩，既不好看又难以理解。
p元素与段落结构
就为了把文章排得更顺溜儿点儿，HTML搞出个p标签来。这个小玩意儿，就是帮咱们把段落分清楚。你看，一篇文章里头，总有那么几句话是有关联的，可能都是在说同一件事儿。虽然p标签本身没啥特殊含义，但是给它加个“重要段落”啊、“来源”之类的标签，就能让整篇文章看着更舒服，也方便大家阅读！
pre元素与格式保留
想在网页上原原本本地展示文本？那就试试pre元素！它可以阻止浏览器删除文字中的空白字符，比如回车号啊、空格什么的，让你看到的就是源文件里的样子。特别是在编写代码或需要注意排版时，这个元素真的很实用。但要记住，用太多的话可能会影响页面的灵活性，所以还是适量使用比较好。
I like apples and oranges. I also like:You can see other fruits I like here
- bananas
- mangoes
- cherries
- plums
- peaches
- grapes
blockquote与长引用
用引号或者bq（blockquote）来搞大块头引用！这个可和q引用不太一样，q主要是引用小段话的。在用bq引用时，还能用cite告诉大家你在哪儿找到这些文字的，这样看起来多有说服力！虽然有时浏览器会自动把blockquote里的字缩小点，但是用css调调格式，就能让它们更贴近你的设计！
q元素与短引用
I like apples and oranges. I also like:
- bananas
- mangoes
- cherries
- plums
- peaches
- grapes
说到短引用，用那个q元素挺棒的。它会帮你在浏览器中自动加上引号，但是你要记住，不同的浏览器添加的引号样式可能有点儿差别。如果想弄个特别点儿的引号样式，那就自己动手，用CSS搞定！
hr元素与主题转换
HTML5让hr元素不再是单纯的一条线！现在它还能把两段文链接起来，地位瞬间上升，帮我们把页面设计得井井有条。
ol与ul元素的列表结构
家里有个表格真是太棒了，什么都不用怕。HTML里的ol（有序列表）和ul（无序列表）两兄弟，ol就是按顺序排列的好手，ul就随心所欲点，顺序无所谓。再加上li这个小家伙，列表立马变得清清楚楚！
I like apples and oranges.
I also like:
- bananas
- mangoes
- cherries
- plums
- peaches
- grapes
You can see other fruits I like here
来看看DL列表，这是个超级实用的工具，可以帮忙把词语(DT)和解释(DD)整理得井井有条的，尤其善于制作词汇表或者术语解析。虽然它本身没有什么个性特色，但是使用起来超简单，信息表达也非常直观明了。
figure与figcaption元素的插图
如果你想在网页上放图片，那figure元素就是你的好帮手了。它能轻松容纳各种图片，像图表、照片和图标什么的通通没问题。再补充一点，用figcaption元素为图片添个简单的注解，这样用户就能更好地理解并喜欢你的网站！只要运用得当，你的图片会更加吸引人眼球，与周围的文字搭配起来也会更和谐。
I like apples and oranges.
I also like:
- Apple
- The apple is the pomaceous fruit of the apple tree
- Malus domestica
- Banana
- The banana is the parthenocarpic fruit of the banana tree
- Musa acuminata
- Cherry
- The cherry is the stone fruit of the genus Prunus
你看，HTML里可有好多元素帮你搞定页面布局。学好了，还能建出既好看又好用的网站！那怎么用这些元素才能玩转最酷？今天咱们就来聊聊这个话题~在动手前，猜猜看，你们平时都是咋用HTML元素来搞页面布局的呀？快来评论区分享一下你们的独门秘籍！别忘了给这篇文章点赞，让大家都知道HTML布局的小技巧。
评论0