51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Html基础标签

html基础标签

1.文本标签

我们可以使用"文本标签"来对文字进行修饰,例如粗体,斜体,上标,下标等

1.1粗体标签

使用"strong标签"或"b标签"来对文本进行加粗 语法:<strong>加粗内容</strong> <b>加粗内容</b>

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8" /&gt;
		&lt;title&gt;粗体标签&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;p&gt;这是普通文本&lt;/p&gt;
		&lt;strong&gt;这是粗体文本&lt;/strong&gt;
		&lt;b&gt;这是粗体文本&lt;/b&gt;
	&lt;/body&gt;
&lt;/html&gt;
1.2倾斜标签

使用"em标签"或"i标签"来对文本进行倾斜设置 语法:<em>倾斜内容</em> <i>倾斜内容></i>

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8" /&gt;
		&lt;title&gt;倾斜标签&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;p&gt;这是普通文本&lt;/p&gt;
		&lt;em&gt;这是倾斜文本&lt;/em&gt;
		&lt;i&gt;这是倾斜文本&lt;/i&gt;
	&lt;/body&gt;
&lt;/html&gt;
1.3下划线

使用"u标签"来实现文本的下划效果 语法:<u>下划线内容</u>

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8" /&gt;
		&lt;title&gt;下划线标签&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;p&gt;这是普通文本&lt;/p&gt;
		&lt;u&gt;这是下划线内容&lt;/u&gt;
	&lt;/body&gt;
&lt;/html&gt;
1.4删除线

我们可以使用"s标签"和"del标签"来实现文本的删除线效果 语法:<s>删除线内容</s> <del>删除线内容</del>

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8" /&gt;
		&lt;title&gt;删除线标签&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;p&gt;这是普通文本&lt;/p&gt;
		&lt;s&gt;删除线内容&lt;/s&gt;
		&lt;del&gt;删除线内容&lt;/del&gt;
	&lt;/body&gt;
&lt;/html&gt;
1.5上标和下标标签

使用"sup标签"来实现文本的上标效果,sup,是superscripted的缩写 使用"sub标签"来实现文本的下标效果。sub,是subscripted的缩写 语法:<sup>上标内容</sup> <sub>下标内容</sub>

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8" /&gt;
		&lt;title&gt;上标和下标标签&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		勾股定理:a&lt;sup&gt;2&lt;/sup&gt;+b&lt;sup&lt;/sup&gt;=c&lt;sup&gt;2&lt;/sup&gt;
		水的化学方程式:H&lt;sub&gt;2&lt;/sub&gt;O
	&lt;/body&gt;
&lt;/html&gt;
1.6 span标签

最普通的文本<span>标签,没有任何语义化,<span> 标签是为了将文本的一部分或者文档的一部分独立出来。 如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。 语法:<span>span内容</span>

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;    
  		&lt;meta charset="UTF-8"&gt;
  		&lt;title&gt;span标签&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		普通文本内容&lt;br/&gt;
 		&lt;span&gt;span文本内容&lt;/span&gt;
	&lt;/body&gt;
&lt;/html&gt;
1.7 font标签

<font> 标签规定文本的字体、字体尺寸、字体颜色。说明:该标签已经废弃,后期使用css代替 语法:<font color='颜色' fase='字体' size='大小'>修饰的文字</font>

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		&lt;title&gt;font标签&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		普通文字
		&lt;font color="red"&gt;红色的文字&lt;/font&gt;
		&lt;font face="楷体"&gt;楷体的文字&lt;/font&gt;
		&lt;font size="7"&gt;大小为7的文字&lt;/font&gt;
	&lt;/body&gt;
&lt;/html&gt;
1.8 pre预格式化标签

pre标签可定义预格式化的文本,被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体 语法:<pre>pre文本内容</pre>

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;    
     &lt;meta charset="UTF-8"&gt;
       &lt;title&gt;pre标签&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
		&lt;pre&gt;同学们好     欢迎来到华瑞

		  你即将成为&lt;h1&gt;一名技术&lt;/h1&gt;大神。
		 &lt;/pre&gt;
 	&lt;/body&gt;
&lt;/html&gt;
2.图像标签

使用img标签来显示一张图片。对于img标签,我们只需要掌握它的5个属性:src、alt、title、width和height 语法:

&lt;img src="" alt="" title="" width="" height=""/&gt;

src属性:src用于指定这个图片所在的路径,这个路径可以是相对路径,也可以是绝对路径。

alt属性和title属性 alt图像的替代文字,当图片无法显示后,此时可以看到浏览器会显示alt的提示文字 title鼠标悬停提示文字,当鼠标悬停到图片上,此时可以看到浏览器会显示title的提示文字 语法:

&lt;img src="hr.png"  alt="华瑞it" title="华瑞"/&gt;

3.特殊符号

空格 == 空格	代码:&nbsp;
" == 双引号	代码:"
' == 左单引号	代码:&amp;lsquo
' == 右单引号	代码:&amp;rsquo
&gt;  ==  大于号	代码:&gt;
&lt; == 小于号	代码:&lt;
&amp; == "与"符号	代码:&amp;
© == 版权符	代码:©
® == 注册商标	代码:®
赞(6)
未经允许不得转载:工具盒子 » Html基础标签