body标签
想要在网页上展示出来的内容一定要放在body
标签中。 把我们之前海燕那一段HTML代码贴过来,保存到一个HTML格式的文件中。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>前端学习</title> </head> <body> <h1>关雎</h1> <p>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</p> <p>参差荇菜,左右流之。窈窕淑女,寤寐求之。</p> <p>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</p> <p>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</p> <p>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</p> </body> </html>
使用浏览器打开,看一下效果
文本样式标签
文本样式标签主要用来对HTML页面中的文本进行修饰,比如加粗、斜体、线条样式等...
<b></b>:加粗 <i></i>:斜体 <u></u>:下划线 <s></s>:删除线 <sup></sup>:上标 <sub></sub>:下标
直接上代码
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文本格式标签</title> </head> <body> <div>前端html</div> <div><b>前端html - 加粗</b>- 正常字体</div> <div><i>前端html - 斜体</i>- 正常字体</div> <div><u>前端html - 下划线</u>- 正常字体</div> <div><s>前端html - 删除线</s>- 正常字体</div> <div><sup>前端html - 上标</sup>- 正常字体</div> <div><sub>前端html - 下标</sub>- 正常字体</div> </body> </html>
将上面的代码保存成html文件,然后用浏览器打开看一下实际的显示效果:浏览器运行结果
表示强调的标签
我们已经学习了展示段落的p标签和展示标题的h1~h6标签,现在如果想在一段文字中特别强调某几个字,这时候就可以用到<em>
或<strong>
标签。
这两个标签都是表示强调,但是两者在强调的语气上有区别:<em>
表示强调,<strong>
表示更强烈的强调。 在浏览器中<em>
默认会用斜体表示,<strong>
会用粗体来表示。两个标签相比,我们通常会推荐大家使用<strong>
表示强调。
例如:电商网站的折扣数字,通常都使用<strong>
标签来表示强烈的强调。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>淘宝</title> </head> <body> <p>淘宝</p> <em>强调</em> <strong>更强烈的强调</strong> </body> </html>
也就是加粗了字体。
表示引用的标签
<blockquote>
通常用来展示大段的文本引用。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>路飞学城</title> </head> <body> <p>关关雎鸠,在河之洲。窈窕淑女,君子好逑。参差荇菜,左右流之。窈窕淑女,寤寐求之。求之不得,寤寐思服。悠哉悠哉,辗转反侧。参差荇菜,左右采之。窈窕淑女,琴瑟友之。参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。。</p> <blockquote> 关关雎鸠,在河之洲。窈窕淑女,君子好逑。参差荇菜,左右流之。窈窕淑女,寤寐求之。求之不得,寤寐思服。悠哉悠哉,辗转反侧。参差荇菜,左右采之。窈窕淑女,琴瑟友之。参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。。 </blockquote> </body> </html>
运行结果,从结果来看引用标签会有首尾缩进、
从上图中可以看出和普通的<p>
标签相比,<blockquote>
标签中的内容会有首尾缩进的效果。
表示代码的标签
表示简短的单行代码可以使用<code>
标签,如果是带有缩进的大段代码就要使用<pre>
标签了。<pre>
标签会保留源文档中的格式(回车、空格)。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JD商城</title> </head> <body> <p>单行代码:</p> <code> print("Hello world! from xxx") </code> <p>代码块(多行代码):</p> <pre> while True: age = input("猜猜看啊:").strip() try: age = int(age) if age > 10 or age < 10: print("傻逼了吧,错了!") else: print("厉害了我的哥!") break except ValueError: print("你TM的输错了!") </pre> </body> </html>
运行结果
表示地址的标签
在网页上经常会有公司的联系地址信息,这个时候就需要用到<address>
标签了。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>前端架构</title> </head> <body> <p>前端架构:</p> <address> 南京市鼓楼区,紫峰大厦24楼 </address> </body> </html>
运行