【HTML】块级元素&行内元素&乱七八糟的元素_html 识别乱七八糟的标签-CSDN博客

本文链接：https://blog.csdn.net/weixin_45532220/article/details/117879559

#块级元素
包含行内元素或块级元素
在这里插入图片描述

#行内元素
只能包含数据和其他行内元素在这里插入图片描述
span类似于p的作用

<head>
	<style>
	span{color:red}
	</style>
</head>
<!--span内的内容设置为红色-->

<br></br>
<!--换行符，多个空格，网页也会识别为一个空格-->

#预格式化
html字符实体：<>;";&用实体编号代替显示
html预留字符

<body>
<pre>
<code>
显示代码专用语义化标签
</code>
</pre>
<p>
上面定义了一个变量<var>user_input</var>,用于接收用户的输入
</p>
<p>如果用户输入是<kbd>hello</kbd>,那么程序将打印<samp>hi</samp></p>
</body>

#引用

<body>
	<p><q>balabalabala</q></p>
	<!--会自动加引号-->
	<blockquote>
	<p></p>
	</blockquote>
	<!--会自动加缩进-->
</body>

<p><cite></cite></p>
<!--标题-->
<p><abbr title="郭大发的英文名">ivy</abbr></p>
<!--显示为...hover展示title注释-->

<dfn>HTML</dfn><!--专业术语-->
<address>
邮箱：
微信：
</address><!--作者联系地址，显示为斜体-->

<ruby>魑<rp>(</rp><rt>chī</rt>)</rp></ruby>
<ruby>魅<rp>(</rp><rt>mèi</rt>)</rp></ruby>
<!--可以加拼音，不支持ruby用rp-->

<bdo dir="rtl"></bdo>
<!--ltr从左往右书写，rtl从右往左书写-->

<strong>富含强调语义</strong>
<b>单纯加粗</b>
<em>富含强调语义</em>
<i>单纯倾斜</i>

<!--可以使用css代替b/i-->
<head>
	<style type="text/css">
	.bold{font-weight:bolder;}
	.italic{font-style:italic;}
	</style>
</head>
<body>
	<p class="bold"> balabala </p>
	<p class="italic">  balabbala</p>

</body>

<p><del>删除线</del></p>
<s>不含语义</s>
<ins>下划线</ins>
<u>显示为下划线，拼写错误的单词或者汉语中专有名词</u>
<mark>默认显示为黄色标记</mark>
<sup>上角标</sup>
<sub>下角标</sub>
<small>指定文字变小</small>