文本元素
HTML5中支持的元素:HTML5元素周期表
可以网上查阅
h
标题
h1~h6 表示一级标题~六级标题
vscode ctrl+回车 --自动换到下一行
emmit插件: hKaTeX parse error: Expected '}', got 'EOF' at end of input: *6>{级别标题}
<h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>展示的效果 h1最大依次减小
是不是越大就越重要?
不是的 含义是含义,样式是样式,我们完全可以调整标题的大小
p
段落:
补充使用lorem 可以补充测试数据
lorem:乱数假文
p*6>lorem4<p>Lorem ipsum dolor sit.</p><p>Quaerat magnam necessitatibus corporis.</p><p>Ipsum impedit fugiat dignissimos.</p><p>Minus assumenda quasi ullam.</p><p>Numquam inventore eius consectetur.</p><p>Earum suscipit voluptatum soluta.</p>spanp[无语义]
没有任何含义.仅用于设置样式
<p>三原色:红 绿 蓝<!-- 需求是让 红显示红色 绿显示绿色 蓝显示蓝色(不换行) --><spanstyle="color:red;">红</span><spanstyle="color:green;">绿</span><spanstyle="color:blue;">蓝</span></p>拓展
以前:某些元素显示时候会独占一行(块元素).某些元素显示时不会(行内元素)
HTML5 现在已经弃用
为什么? 因为HTML5 标签语义化和样式无关 样式有CSS管控 做到分离
pre
预格式化文本元素
空白折叠:在源代码中连续的空白折叠(空格.回车.tab),在页面显示会显示为1个
例外:在pre元素中内容不会出现空白折叠
在pre元素中出现的内容,会按照源代码的格式展示在网页中
该元素通常用于网页中展示一些代码
pre元素的本质:是一个CSS的属性 white-space:pre;
给其他元素添加也会有pre效果
<pstyle="white-space:pre;">我有湖南国 分开了 var a=11 if(a){ console.log(a) }</p><pre>我有湖南国 分开了 var a=11 if(a){ console.log(a) }</pre>通常在开发中活用code标签包裹,表示此处放源代码
<code><pre>var a=11 if(a){ console.log(a) }</pre></code>