标签的基本内容与使用

最新推荐文章于 2024-04-13 17:02:31 发布

加油，铁子！

最新推荐文章于 2024-04-13 17:02:31 发布

阅读量418

点赞数 1

分类专栏： web前端文章标签： css html5

本文链接：https://blog.csdn.net/weixin_51264427/article/details/119206560

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

块属性标签

特点:

1.独占一行

2.支持设置宽高,不设置宽高情况下,高度内容撑开,宽度撑满父容器

<body>
		<!-- 快属性标签 -->
		<!-- 无意义 最常用 常用来划分区域和布局-->
		<div>Hello World</div>
		
		<!-- 段落：放置文字 -->
		<p></p>
		
		<!-- 标题标签 -->
		<!-- h1~h6
		h1标签只能写一个 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		
		<!-- 列表标签  li标签不单独使用-->
		<!-- 无序列表 -->
		<ul>
			<li>水浒传</li>
			<li>三国演义</li>
			<li>西游记</li>
			<li>红楼梦</li>
		</ul>
		<!-- 有序列表-->
		<ol>
			<li>久旱逢甘露</li>
			<li>他乡遇故知</li>
			<li>洞房花烛夜</li>
			<li>金榜提名时</li>
		</ol>
	</body>

行属性标签

特点:

1.不支持设置宽高,宽高由内容撑开

2.排成一行(左右排列)

<body>
		<!-- 行属性标签 -->
		
		<!-- 放置文字 -->
		<span>武松</span>
		<span>打虎</span>
		<!-- 超链接标签-->
		<!-- href属性中写目标页面的地址
		 可以写服务器地址
		 也可以写本地文件的相对地址
		 ./返回上一级目录
		 href属性为空会刷新页面
		 ###无效果
		 #返回顶部
		 -->
		<a href="http://www.baidu.com">百度</a>
		<!--   ../返回上一级目录   -->
		<a href="../html/test.html">跳转页面</a>
		<!-- 刷新页面 -->
		<a href=""></a>
		<!-- 无效果-->
		<a href="###">刷新</a>
		<!-- 返回顶部 -->
		<a href="#">返回顶部</a>
	</body>

行快属性标签

特点:既可以设置宽高,又可以排在一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 设置图片格式 */
			img{  
				width: 100px;
				height: 100px;
			}
			input{
				height: 30px;
			}
		</style>
	</head>
	<body>
		<!-- 图片
		src属性是图片的路径 可以是服务器地址 也可以是相对路径
		-->
		<!-- alt属性：图片加载失败显示的内容 -->
		<!-- title属性：鼠标悬停后显示的内容 -->
		<img src="" alt="图片加载失败" title=""/>
		<img src="" alt="图片加载失败" title=""/>
		<!-- 输入框 -->
		<input type="text" name="" id="" value="" />
	</body>
</html>

行块属性转换

display

                /* 把标签转化为块属性 */
				display: block;
				/* 把标签转换为行块属性 */
				display: inline-block;
				/* 把标签转换为行属性 */
				display: inline;
                /* 隐藏 */
				display: none;

三种常用的选择器

1. 标签选择器

2.id选择器

3.class选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器 选择页面中所有此类标签
			权重为1
			*/
			div{
				
			}
			/* id选择器
			 权重为100
			 */
			/* id名是唯一的，一个标签只能有一个id ，不同标签id也不可以相同 */
			#two{
				
			}
			/* class选择器
			权重为10
			 不同标签可以使用相同的class名
			 一个标签可以有多个class名
			 */
			.three{
				
			}
			.four{
				
			}
		</style>
	</head>
	<body>
		<div>one</div>
		<div id="two">two</div>
		<div class="three">three</div>
		<div class="three four">four</div>
	</body>
</html>

加油，铁子！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
标签的基本内容与使用

目录块属性标签特点:行属性标签行快属性标签行块属性转换三种常用的选择器块属性标签特点:1.独占一行2.支持设置宽高,不设置宽高情况下,高度内容撑开,宽度撑满父容器<body>   <div>Hello World</div> <!-- 段落：放置文字 --&...
复制链接

扫一扫