HtmlCss学习笔记-04元素周期表之⽂本元素
⽂本元素
h标题元素
包括h1和h6，写法技巧：
⼤括号表⽰元素内容。h1*6表⽰连写6个
h1*6>{1级标题}
再次改进：
⽤占位符$替换数字，它会⾃动增加
h$*6>{$级标题}
p段落元素
即⽂本的正⽂。
因为⽂本元素的内容是可以后期利⽤其他技术，如js，php，c#等语⾔进⾏替换的，从这个⾓度来说，我们只需要写⼀个“范⽂结构”，实际的内容完全不重要。
根据能不能改变元素内容，分为静态页⾯和动态页⾯。
我们如果要开发动态页⾯，因为实际内容不重要，所以可以“乱写”，但是这⾥有⼀个⼩问题。
乱写的东西长度不同，可能会测试不出来结构。
推荐使⽤乱数假⽂。
乱数假⽂：最开始由印刷界使⽤，并没有实际含义的⽂字，⽤来进⾏排版测试。
使⽤乱数假⽂，不要加⼤括号{}
lorem1意味着只⽣成1个单词：
span元素【⽆语义】
该元素仅仅⽤于设置css样式，因为css样式必须挂载在元素上，但此时⼜没有⼀个元素语义来说明这个场景。官⽅HTML5官⽅针对这种情况，提供了⼀个⽆语义的元素span来做这个⼯作。
扩展知识： ⾏级元素与块级元素，⾏级元素如span，它的内容不会换⾏； 块级元素如h和p，它的内容会换⾏。
但是，⾏级元素与块级元素这种说法在HTML5中已经被弃⽤了，根据语义化要求，换不换⾏是由css决定的，不能由元素决定。
pre 预格式化⽂本元素
扩展知识： 空⽩折叠，在源代码中连续空⽩字符（空格，制表，换⾏），在页⾯显⽰时，会被折叠为⼀个空格。
这是HTML5的总标准。
html span 居中
运⾏结果：
但是我们可能就想要“原始”的，不进⾏空⽩折叠，需要pre元素。
运⾏效果：
pre元素通常⽤于在技术型页⾯中显⽰代码，这样就能保持代码的结构，与code配合使⽤。
<code>
<pre>Lorem,
ipsum dolor.
</pre>
</code>
同样根据语义化，pre之所以能原封不动的展⽰，是有默认的CSS样式决定，完全可以通过这种⽅式让p元素，code元素也能实现相同效果。
<code >
Lorem,
ipsum dolor.
</code>
从这个⾓度来说，pre更接近⽆语义元素，它的功能完全和css显⽰相关。
扩展知识： 减少tab缩进快捷键，shift+tab

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。