html基础标签
1.文本标签
我们可以使用"文本标签"来对文字进行修饰,例如粗体,斜体,上标,下标等
1.1粗体标签
使用"strong标签"或"b标签"来对文本进行加粗 语法:<strong>加粗内容</strong> <b>加粗内容</b>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>粗体标签</title>
</head>
<body>
<p>这是普通文本</p>
<strong>这是粗体文本</strong>
<b>这是粗体文本</b>
</body>
</html>
1.2倾斜标签
使用"em标签"或"i标签"来对文本进行倾斜设置 语法:<em>倾斜内容</em> <i>倾斜内容></i>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倾斜标签</title>
</head>
<body>
<p>这是普通文本</p>
<em>这是倾斜文本</em>
<i>这是倾斜文本</i>
</body>
</html>
1.3下划线
使用"u标签"来实现文本的下划效果 语法:<u>下划线内容</u>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下划线标签</title>
</head>
<body>
<p>这是普通文本</p>
<u>这是下划线内容</u>
</body>
</html>
1.4删除线
我们可以使用"s标签"和"del标签"来实现文本的删除线效果 语法:<s>删除线内容</s> <del>删除线内容</del>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>删除线标签</title>
</head>
<body>
<p>这是普通文本</p>
<s>删除线内容</s>
<del>删除线内容</del>
</body>
</html>
1.5上标和下标标签
使用"sup标签"来实现文本的上标效果,sup,是superscripted的缩写 使用"sub标签"来实现文本的下标效果。sub,是subscripted的缩写 语法:<sup>上标内容</sup> <sub>下标内容</sub>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上标和下标标签</title>
</head>
<body>
勾股定理:a<sup>2</sup>+b<sup</sup>=c<sup>2</sup>
水的化学方程式:H<sub>2</sub>O
</body>
</html>
1.6 span标签
最普通的文本<span>标签,没有任何语义化,<span> 标签是为了将文本的一部分或者文档的一部分独立出来。 如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。 语法:<span>span内容</span>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>span标签</title>
</head>
<body>
普通文本内容<br/>
<span>span文本内容</span>
</body>
</html>
1.7 font标签
<font> 标签规定文本的字体、字体尺寸、字体颜色。说明:该标签已经废弃,后期使用css代替 语法:<font color='颜色' fase='字体' size='大小'>修饰的文字</font>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font标签</title>
</head>
<body>
普通文字
<font color="red">红色的文字</font>
<font face="楷体">楷体的文字</font>
<font size="7">大小为7的文字</font>
</body>
</html>
1.8 pre预格式化标签
pre标签可定义预格式化的文本,被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体 语法:<pre>pre文本内容</pre>
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pre标签</title>
</head>
<body>
<pre>同学们好 欢迎来到华瑞
你即将成为<h1>一名技术</h1>大神。
</pre>
</body>
</html>
2.图像标签
使用img标签来显示一张图片。对于img标签,我们只需要掌握它的5个属性:src、alt、title、width和height 语法:
<img src="" alt="" title="" width="" height=""/>
src属性:src用于指定这个图片所在的路径,这个路径可以是相对路径,也可以是绝对路径。
alt属性和title属性 alt图像的替代文字,当图片无法显示后,此时可以看到浏览器会显示alt的提示文字 title鼠标悬停提示文字,当鼠标悬停到图片上,此时可以看到浏览器会显示title的提示文字 语法:
<img src="hr.png" alt="华瑞it" title="华瑞"/>
3.特殊符号
空格 == 空格 代码:
" == 双引号 代码:"
' == 左单引号 代码:&lsquo
' == 右单引号 代码:&rsquo
> == 大于号 代码:>
< == 小于号 代码:<
& == "与"符号 代码:&
© == 版权符 代码:©
® == 注册商标 代码:®