『HTML&CSS』文本标签

本篇博客介绍一些常用的HTML文本标签。

em和strong

  • em表示一段内容中的着重点,表示语气上的强调;em在浏览器中默认是斜体
  • strong表示一段内容的重要性,表示语义上的强调;strong在浏览器中默认是粗体
  • 两个标签都表示一个强调的内容

代码演示


<html>
	<head>
		
		<title>em和strongtitle>
	head>
	<body>
		<p>
			<em>试问岭南应不好?em> <br />
			<strong>却道,此心安处是吾乡。strong> <br />
		p>
	body>
html>

『HTML&CSS』文本标签_第1张图片


i和b

  • i标签表示斜体,b标签表示加粗
  • HTML5中规定,对于不需要着重的内容而只是单纯需要斜体或粗体,就可以使用i和b标签

代码演示


<html>
	<head>
		
		<title>i和btitle>
	head>
	<body>
		<p>
			<i>试问岭南应不好?i> <br />
			<b>却道,此心安处是吾乡。b> <br />
		p>
	body>
html>

『HTML&CSS』文本标签_第2张图片


small标签

  • small标签中的内容会比它的父元素中的文字要小一些
  • 在HTML5中会使用small标签来表示一些细则一类的内容;如:合同中的小字;网站的版权声明都可以放到small中。

代码演示


<html>
	<head>
		
		<title>small标签title>
	head>
	<body>
		<p>
			试问岭南应不好? <br />
			却道,此<small>心安small>处是吾乡。 <br />
		p>
	body>
html>

『HTML&CSS』文本标签_第3张图片


cite标签

  • 网页中所有加书名的内容都可以使用cite标签,表示参考的内容。如:书名;歌名;话剧名;电影名。

代码演示


<html>
	<head>
		
		<title>cite标签title>
	head>
	<body>
		<p>
			<cite>《定风波·南海归赠王定国侍人寓娘》cite> <br />
			苏轼 <br />
			常羡人间琢玉郎。天应乞与点酥娘。尽道清歌传皓齿。风起。雪飞炎海变清凉。 <br />
			万里归来颜愈少。微笑。笑时犹带岭梅香。试问岭南应不好。却道。此心安处是吾乡。 <br />
		p>
	body>
html>

『HTML&CSS』文本标签_第4张图片

  • 注意:我们看到cite标签的显示是斜体,我们对于HTML中的标签,并不关心它们的表现,只关心其语义。表现都是通过CSS来修改的

q和blockquote

  • q标签表示一个短的引用(行内引用),q标签引用的内容,浏览器会默认加上引号。
  • blockquote标签表示一个长引用(块级引用),不能放在p标签中。

代码演示


<html>
	<head>
		
		<title>q和blockquotetitle>
	head>
	<body>
		<p>
			《周易》曰:<q>天行健,君子以自强不息;地势坤,君子以厚德载物。q>
		p>
		<blockquote>
			《周易》曰:天行健,君子以自强不息;地势坤,君子以厚德载物。
		blockquote>
	body>
html>

『HTML&CSS』文本标签_第5张图片


sup和sub

  • 使用sup标签可以设置一个上标
  • 使用sub标签可以设置一个下标

代码演示


<html>
	<head>
		
		<title>sup和subtitle>
	head>
	<body>
		<p>
			苏轼<sup><a href="#">[1]a>sup> <br />
			H<sub>2sub>O <br />
		p>
	body>
html>

『HTML&CSS』文本标签_第6张图片


ins和del

  • ins表示一个插入的内容,ins中的内容会自动添加下划线。
  • del表示一个删除的内容,del中的内容会自动添加删除线。


<html>
	<head>
		
		<title>ins和deltitle>
	head>
	<body>
		<p>
			<q>上善若水,水善利万物而不争,处众人之所恶,故几于道。q>这句话是<ins>老子ins>说的。 <br />
			<del>这句话需要被删除。del>
		p>
	body>
html>

『HTML&CSS』文本标签_第7张图片


code和pre

  • code是语义标签,专门用来表示代码,并不会保留格式
  • pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格
  • 一般这两个标签会结合使用来表示一段代码

代码演示


<html>
	<head>
		
		<title>code和pretitle>
	head>
	<body>
		<code>
			#include <iostream>

			int main() {
				std::cout << "hello, world!" << std::endl;

				return 0;
			}	
		code>
		<pre>
			#include <iostream>

			int main() {
				std::cout << "hello, world!" << std::endl;

				return 0;
			}	
		pre>
		<code>
			<pre>
				#include <iostream>

					int main() {
					std::cout << "hello, world!" << std::endl;

					return 0;
				}	
			pre>
		code>
	body>
html>

『HTML&CSS』文本标签_第8张图片


列表

在HTML中可以创建列表,网页中一共有三种列表

  1. 无序列表
  2. 有序列表
  3. 定义列表

无序列表

  • 使用ul标签创建一个无序列表
  • 使用li在ul中创建列表项
  • 通过type属性可以修改无序列表的项目符号。不过一般不推荐使用项目符号,因为不同的项目符号在不同的浏览器中显示效果不同。所以一般都是通过CSS去掉项目符号,如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置。

代码演示


<html>
	<head>
		
		<title>无序列表title>
		<style type="text/css">
			.c1 {
				list-style: none;
			}
		style>
	head>
	<body>
		<ul type="disc">
			<li>李白li>
			<li>杜甫li>
		ul>

		<ul type="square">
			<li>李白li>
			<li>杜甫li>
		ul>

		<ul type="circle">
			<li>李白li>
			<li>杜甫li>
		ul>

		
		<ul class="c1">
			<li>李白li>
			<li>杜甫li>
		ul>
	body>
html>

『HTML&CSS』文本标签_第9张图片


有序列表

  • 有序列表和无序列表类似,使用ol替换ul即可
  • 有序列表使用有序的项目符号作为项目符号

代码演示


<html>
	<head>
		
		<title>有序列表title>
		<style type="text/css">
			.c1 {
				list-style: none;
			}
		style>
	head>
	<body>
		<ol type="1">
			<li>李白li>
			<li>杜甫li>
		ol>

		<ol type="a">
			<li>李白li>
			<li>杜甫li>
		ol>

		<ol type="A">
			<li>李白li>
			<li>杜甫li>
		ol>

		<ol type="i">
			<li>李白li>
			<li>杜甫li>
		ol>
		
		<ol type="I">
			<li>李白li>
			<li>杜甫li>
		ol>

		
		<ol class="c1">
			<li>李白li>
			<li>杜甫li>
		ol>
	body>
html>

『HTML&CSS』文本标签_第10张图片


定义列表

  • 定义列表用来对一些词汇或内容进行定义
  • 使用dl标签创建一个定义列表。dl中有两个子标签,分别是dt和dd,dt表示被定义的内容,dd表示对定义内容的描述

代码演示


<html>
	<head>
		
		<title>定义列表title>
	head>
	<body>
		<dl>
			<dt>李白dt>
			<dd>唐代伟大的浪漫主义诗人dd>
			<dt>杜甫dt>
			<dd>唐代伟大的现实主义文学作家dd>
		dl>
	body>
html>

『HTML&CSS』文本标签_第11张图片

你可能感兴趣的:(『HTML&CSS』)