H5~标签、选择器

最新推荐文章于 2024-09-04 20:25:56 发布

时光后-白痴痴

最新推荐文章于 2024-09-04 20:25:56 发布

阅读量3k

点赞数 2

分类专栏： H5学习文章标签： Html5 标签

本文链接：https://blog.csdn.net/baiccnymyh/article/details/77985866

版权

H5学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

*标签***********************************************

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
</head>
<body>
<!-- 块属性标签  支持设置宽高 上下排列 （独占一行）-->
<div>用来划分区域</div>
<!-- 段落 用来放置文字 -->
<p>啦啦啦，啦啦啦，我是卖报的小行家</p>

<!-- 标题 h1~h6  h1标签只能写一个-->
<h1>大牡丹婚庆网</h1>
<h2>大牡丹婚庆网</h2>
<h3>大牡丹婚庆网</h3>
<!-- 列表标签 -->
<!-- 无序列表 -->
<ul>
	<li>金陵十二钗</li>
	<li>插图版金瓶梅</li>
	<li>精装版金瓶梅</li>
	<li>水浒传</li>
</ul>
<!-- 有序列表 -->
<ol>
	<li>我的女神刘亦菲 </li>
	<li>歌声天籁人又靓</li>
	<li>小拳长锤我胸口</li>
	<li>吹完就把我带走</li>
</ol>
<!-- 行属性标签  不可以设置宽高 自动排成一行（左右排列）-->
<!-- 超链接  href中写要连接到的地址-->
<a href="http://www.baidu.com">
	未满十八周岁禁止点击
</a>

<!-- 放置文字 -->
<span style="100px;height: 100px;background-color: green;">宝强</span>
<span style="100px;height: 100px;background-color: green;">陈羽凡</span>	


<!-- 行块属性标签  既支持宽高 又可以排成一行-->

<!-- ../ 返回上一级目录 img标签中的scr中写图片的绝对路径或者图片的服务器路径（网络地址） -->
<img style="width: 450px;height: 600px;" src="img/timg.jpg">
<img style="width: 450px;height: 600px;" src="img/2.jpg" alt="图片飞走了">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1548448769,1982815204&fm=26&gp=0.jpg">	

</body>
</html>

************选择器****************************************************************************

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<style type="text/css">
		/*
		标签选择器
		语法：标签名{样式}
		*/
		div{
			width: 200px;
			height: 400px;
			background-color: yellow;
		}
		/*
		class选择器
		语法： "."+class名{样式}

		1.class选择器优先级比标签选择器高
		2.不同标签可以使用相同的class名、
		3.一个标签可以使用多个class名 ， 设置时用空格隔开
		*/
		.blue_div{
			background-color: blue;
		}
		.big_div{
			width: 500px;
			height: 500px;
		}
		.father{
			width: 200px;
			height: 200px;
			background-color: gray;
		}
		/*
		后代选择器
		语法：父选择器 子选择器{样式}

		class 选择器权重10
		标签选择器权重1
		后代选择器权重由父选择器和子选择器的权重相加
		*/
		.father div{
			background-color: yellow;
		}
		.father .son{
			width: 100px;
			height: 100px;
			background-color: black;
		}
		/*
		10个div 135是黄色，其他都是绿色，2 3 4宽高200px其他都是100px；
		*/
	</style>
</head>
<body><!-- 
<div>我是一个特别随便的div</div>
<div class="blue_div big_div">我是小二</div>
<div class="blue_div">我手机哦</div>
 -->
<div class="father"> 
	<div class="son"></div>
</div>

</body>
</html>

补充：

<!-- 声明下面所有代码的规范 使用的是HTML5 -->
<!DOCTYPE html>
<html>
<head>
	<!-- 设置编码格式 -->
	<meta charset="utf-8">
	<!-- 标题 -->
	<title>不可描述的网站</title>
</head>
<body>
	<!-- div 标签 最常用的标签 无语义 ，常用来划分区域 -->
    <div></div>


    <div style="width: 300px;height: 400px;">
    	<div style="width: 300px;height: 30px;background-color: yellow;">
    	我是导航条</div>
    	<div style="width: 300px;height: 370px;background-color: pink;">我是内容</div>
    </div>
</body>
</html>

标签补充：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>补充</title>
	<style type="text/css">
		p{
			/*字体颜色*/
			color: red;
			/*字体的大小 默认是16px*/
			font-size:20px; 
		}
		div{
			width: 500px;
			height: 700px;
			/*背景图片*/
			background-image: url(img/2.jpg);
			/*背景图片尺寸*/
			background-size: 100% 100%;
		}
		
	</style>
</head>
<body>
	<div>
	<p>英雄总是悲迟暮</p>
	<p>自古红颜多薄命</p>
	<p>那一抹风情</p>
	<p>时光后，撩拨人心</p>
</div>
<!-- br 标签：换行 -->
<p>
	久旱逢甘霖（一滴）
	<br>
	他乡遇故知（前女友）
	<br>
	同房花烛夜 （人妖）
	<br>
	金榜题名时（重名）
</p>
</body>
</html>

今天的分享到这，里面如有错误、等请大家积极留言，我会在第一时间与大家交流改错。