博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
9.1.3 前端 - HTML body标签 - 文本样式
阅读量:5046 次
发布时间:2019-06-12

本文共 2177 字,大约阅读时间需要 7 分钟。

body标签

想要在网页上展示出来的内容一定要放在body标签中。 把我们之前海燕那一段HTML代码贴过来,保存到一个HTML格式的文件中。

            
前端学习

关雎

关关雎鸠,在河之洲。窈窕淑女,君子好逑。

参差荇菜,左右流之。窈窕淑女,寤寐求之。

求之不得,寤寐思服。悠哉悠哉,辗转反侧。

参差荇菜,左右采之。窈窕淑女,琴瑟友之。

参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。

使用浏览器打开,看一下效果

文本样式标签

文本样式标签主要用来对HTML页面中的文本进行修饰,比如加粗、斜体、线条样式等...

:加粗:斜体:下划线:删除线:上标:下标

直接上代码

    
文本格式标签
前端html
前端html - 加粗- 正常字体
前端html - 斜体- 正常字体
前端html - 下划线- 正常字体
前端html - 删除线- 正常字体
前端html - 上标- 正常字体
前端html - 下标- 正常字体

将上面的代码保存成html文件,然后用浏览器打开看一下实际的显示效果:浏览器运行结果

表示强调的标签

我们已经学习了展示段落的p标签和展示标题的h1~h6标签,现在如果想在一段文字中特别强调某几个字,这时候就可以用到<em><strong>标签。

这两个标签都是表示强调,但是两者在强调的语气上有区别:<em>表示强调,<strong>表示更强烈的强调。 在浏览器中<em>默认会用斜体表示,<strong>会用粗体来表示。两个标签相比,我们通常会推荐大家使用<strong>表示强调。

例如:电商网站的折扣数字,通常都使用<strong>标签来表示强烈的强调。

            
淘宝

淘宝

强调 更强烈的强调

也就是加粗了字体。

表示引用的标签

<blockquote>通常用来展示大段的文本引用。

            
路飞学城

关关雎鸠,在河之洲。窈窕淑女,君子好逑。参差荇菜,左右流之。窈窕淑女,寤寐求之。求之不得,寤寐思服。悠哉悠哉,辗转反侧。参差荇菜,左右采之。窈窕淑女,琴瑟友之。参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。。

关关雎鸠,在河之洲。窈窕淑女,君子好逑。参差荇菜,左右流之。窈窕淑女,寤寐求之。求之不得,寤寐思服。悠哉悠哉,辗转反侧。参差荇菜,左右采之。窈窕淑女,琴瑟友之。参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。。

运行结果,从结果来看引用标签会有首尾缩进、

从上图中可以看出和普通的<p>标签相比,<blockquote>标签中的内容会有首尾缩进的效果。

 

表示代码的标签

表示简短的单行代码可以使用<code>标签,如果是带有缩进的大段代码就要使用<pre>标签了。<pre>标签会保留源文档中的格式(回车、空格)。

            
JD商城

单行代码:

print("Hello world! from xxx")

代码块(多行代码):

            while True:            age = input("猜猜看啊:").strip()            try:                age = int(age)                if age > 10 or age < 10:                    print("傻逼了吧,错了!")                else:                    print("厉害了我的哥!")                    break            except ValueError:                print("你TM的输错了!")        

运行结果

表示地址的标签

在网页上经常会有公司的联系地址信息,这个时候就需要用到<address>标签了。

            
前端架构

前端架构:

南京市鼓楼区,紫峰大厦24楼

运行

 

转载于:https://www.cnblogs.com/caimengzhi/p/8603353.html

你可能感兴趣的文章
python 打印对象的所有属性值的方法
查看>>
HDU 1160 FatMouse&#39;s Speed (最长有序的上升子序列)
查看>>
[数字图像处理]常见噪声的分类与Matlab实现
查看>>
开发指南专题六:JEECG微云高速开发平台代码生成
查看>>
node-gyp rebuild 卡住?
查看>>
maven filter不起作用
查看>>
redis从入门到放弃 -> 管理实战&数据类型
查看>>
C# Async与Await的使用
查看>>
Mysql性能调优
查看>>
iOS基础-UIKit框架-多控制器管理-实例:qq界面框架
查看>>
javascript学习---BOM
查看>>
IOS-每个程序员的编程之路上都应该看这11本书
查看>>
自定义tabbar(纯代码)
查看>>
extjs fieldset 和 radio
查看>>
小程序底部导航栏
查看>>
Codeforces Gym101505G:Orchard Division(扫描线+线段树第k大)
查看>>
VA插件突然不能使用,彈出“the security key for....”
查看>>
电商常用的正则表达式,字符串,地址操作
查看>>
Tomcat安装配置
查看>>
java获取url中的参数
查看>>