HTML文本标签&列表

日期:2020-10-02

作者:19届WY

标签:html文本标签&列表标签

一、em和strong

  • 这两个标签都表示一个强调的内容,
    em主要表示语气上的强调,em在浏览器中默认使用斜体显示
    strong表示强调的内容,比em更强烈,默认使用粗体显示
  • 这两个标签可以单独使用,也可以一起使用
<p>今天天气<em>针不戳</em></p>
<p>
	<strong>
		如果你不认真上课,你就gg了
	</strong>
</p>

二、i和b标签

  • i标签中的内容会以斜体显示
    b标签中的那内容会以加粗显示
  • h5规范中规定,对于不需要着重的内容,而是单纯的加粗或者斜体,就可以使用b和i标签
<p>
	<i>
		我是i标签中的内容
	</i>
<br /><br />
	<b>
		我是b标签中的内容
	</b>
</p>

三、small标签

  • small标签中的内容会比它的父元素中的文字要小一些
  • 在h5中使用small标签来表示一些细则一类的内容
    比如:合同中小字,网站的版权声明都可以放到small
<p>
	我是p标签的内容<samll>我是small标签中的内容</samll>
</p>

四、cite标签

  • 网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容
    比如:书名 歌名 话剧名 电影名
<p>
	<cite>《论语》</cite>是最喜欢的一本书
</p>

五、q和blockquote标签

  • q标签表示一个短的引用(行内引用)
    q标签引用的内容,浏览器默认加上引号

  • blockquote标签表示一个长引用(块级引用)(块元素不能放在p里面,可以放div里面)

<p>
	子曰:<q>学而时习之</q>
</p>
<div>
	子曰:
		<blockquote>
			不亦乐乎
		</blockquote>
</div>

六、sup和sub标签

  • 使用sup标签来设置上标
  • sub标签表示一个下标
<p>2<sup>2</sup></sub></p> 
<p>赵薇<sup><a href="#">【1】</a></sup></p>

<p>H<sub>2</sub>O</p>

七、del和ins标签

  • 使用del标签来表示一个删除的内容
    del标签中的内容,会自动添加删除线

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

<p>
	<del>17.75</del><br />
	15.54<br />	
</p>

<p><ins>haoa</ins>
</p>

八、pre和code标签

需要在页面中编写一些代码:

  • pre是一个预格式标签,(有多少空格都保留)会将代码中的格式保存,不会忽略多个空格

  • code专门用来表示代码

  • 我们一般结合使用pre和code来表示一段代码

<pre>
	<code>
window.onload = function(){
	alert("hello");
};			
	</code>
</pre>

文本标签的结果:

文本标签的结果

九、无序列表

  • 无序列表:

  • 使用ul标签来创建一个无序列表

  • 使用li在ul中创建一个一个的列表项
    一个li就是一个列表项

  • 通过type属性可以修改无序列表的项目符号

  • 可选值:
    disc,默认值,实心的远点
    square,实心的方块
    circle,空心的圆

  • 注意,默认的项目符号我们一般都不使用

  • 如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置

  • ul和li都是块元素

<ul type="disc">
		<li>大雾</li>
		<li>计组</li>
		<li>汇编</li>
		<li>离散</li>
</ul>

可以用CSS去掉项目符号:

<style type="text/css">
/*
去掉项目符号
*/
	ul{
    
    
		list-style:none;
	}
</style>

列表就相当于去超市购物的清单,
在HTML也可以创建列表,在网页中一共有三种列表:
1.无序列表
2.有序列表
3.定义列表

十、有序列表

  • 有序列表和无序列表类似,只不过它用ol代替ul

  • 有序列表使用有序的序号作为项目符号

  • type属性,可以指定序号的类型

  • 可选值:

     1,默认值,使用阿拉伯数字
     a/A 采用小写或大写字母作为序号
     i/I 采用小写或大写的罗马数字作为序号
    
  • ol也是块元素

<ol type="1">
		<li>大雾</li>
		<li>计组</li>
		<li>汇编</li>
		<li>离散</li>
</ol>

列表之间都是可以互相嵌套,可以在无序列表中放个有序列表,也可以在有序列表中放一个无序列表

<p>菜谱</p>
		<ul>
			<li>
				鱼香肉丝
				<ol>
					<li></li>
					<li></li>
					<li>肉丝</li>
				</ol>
			</li>
			<li>宫爆鸡丁</li>
			<ul>
				<li>宫保</li>
				<li>鸡丁</li>
			</ul>
			<li>青椒肉丝</li>
		</ul>

十一、定义列表

  • 定义列表用来对一些词汇或内容进行定义

  • 使用dl来创建一个定义列表

  • dl中有两个子标签

     dt:被定义的内容
     dd:对定义内容的描述
    
<dl>
	<dt>武松</dt>
	<dd>景阳冈打虎英雄,战斗力99</dd>
	<dd>后打死西门庆,投奔梁山</dd>
	<dt>武大</dt>
	<dd>著名餐饮企业家,战斗力0</dd>
</dl>

列表的结果:

列表的结果

猜你喜欢

转载自blog.csdn.net/cyl_csdn_1/article/details/108903503