HTML5一周总结

最新推荐文章于 2023-07-15 16:05:52 发布

派大星zzZ

最新推荐文章于 2023-07-15 16:05:52 发布

阅读量230

点赞数

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

本文链接：https://blog.csdn.net/weixin_45018336/article/details/104699851

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、html5文档结构

<!-- h5文档头:告诉浏览器用什么方式编译代码 -->
<!DOCTYPE html>
<!-- 文档体 -->
<!-- 标签结构：<标签>内容</标签>或者<标签> -->
<html lang="en">
	<!-- 一般内容空格 -->
	<!-- head一般放置配置文件 -->
	<head>
		<!-- meta字符集：相当于字典。charset设置编码方式：UTF-8国际编码 -->
		<meta charset="UTF-8">
		<!-- 设置网站标题 -->
		<title>工具的使用</title>
		<!-- 可以引入ico图标 rel文件类型 href文件地址-->
		<link rel="shortcut icon" href="bitbug_favicon.ico" />
		<!-- 
			标题前小图标引入：
			第一步：ico图标在线制作：http://www.bitbug.net/
			第二步：按照说明书操作
		 -->
	</head>
	<!-- body放置自己书写的代码 -->
	<body>
		文字
	</body>
</html>
<!--html4文档结构 html:xt +tab-->

<!-- 注释：ctrl+/ -->
<!-- 
	创建文件的时候，
	1、新建文件
	2、保存文件。后缀 .html
	3、如果没有出现“文档结构”!+tab或者html5+tab
 -->

 <!-- 
	网站：一个一个的网页。
	网页：图片、文字、超链接。
	制作网页的技术：html/css/js。
	html:超文本标记语言。

二、常用标签

标签分类

第一种：单双标签
单标签：<标签名>img
双标签: <标签名></标签名>a p h1-h6 ul li ol
第二种：行内标签和块级标签。
行内标签：可以和其他标签并排排列。设置宽高无效。上下padding不占位,左右padding占位。上下外边距无效，左右外边距有效。a span b u i
块级标签：独占一行。ul li ol div p h1-h6
网页布局中的标准流：行内标签水平排列，块级标签垂直排列**

小知识

 一个标签可以有多个类名，用空格隔开
	<p class="one bottom">段落</p>

<!-- img+tab 在页面中引入图片。src图片地址。alt图片不能正常显示的时候提示文字 title鼠标移入提示文字-->
<img src="mv.jpg" alt="">
<!-- 超链接。href放置的是跳转的页面地址。默认在当前页面打开。target="_blank"在新页面打开 -->
<a href="#">京东</a>
<!-- div用于排版 -->
  <div></div>
 <!-- 用来引入小元素 -->
		<span></span>
  <!-- 
		ol>li
		ol:ordered list
		li:list item
		有序列表，实现结构类似的布局
		 -->
		 <ol>
			<li></li>
		</ol>
		 <!-- 
			ul>li*4+tab
			无序列表：实现结构类似的布局
			ul:unordered list
			li:list item
		 -->
		<ul>
			<li></li>
		</ul>

标签居中

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			/* 清除样式 */
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			div{
				width: 100px;
				height: 100px;
				background: lime;
				margin:0px auto;
				text-align: center;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div>文字</div>
	</body>
</html>

<!--
	块级标签居中：水平居中：左右外边距同时auto
	文本类元素水平居中：text-align:center
	文字垂直居中：设置行高等于容器的高度
	真正行高的概念：从文字中心基线开始向上取留白的一半，向下取留白的一半，中间的距离就是行高。

 -->

标签嵌套

一般情况下。
	块级标签是可以任意嵌套的。
	行内标签一般只嵌套行内
	a一般可以嵌套任何标签。
	p内部只能放置文本类元素a  span b  u  i img 自身不能放置
	h1-h6一般只能放置文本类元素。不能放置自身
	ul/ol的子级只能是li li的父级只能是ul/ol

display

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			div{
				width: 100px;
				height: 100px;
				background: lime;
				/* 转变为行内元素 */
				display: inline;
			}
			span{
				width: 100px;
				height: 100px;
				background: red;
				/* 转变为块级元素 */
				display: block;
			}
			ul{
				background: pink;
				height: 100px;
			}
			li{
				width: 100px;
				height: 100px;
				
				background: lime;
				/* 转变为行内块。浏览器有空白折叠现象，不论有多少留白，都只能识别一个 。*/
				/* display: inline-block垂直对象方式改变了,以重心对齐。通过vertical-align */
				/* 浮动以后的标签相互贴靠 */
				display: inline-block;
				/* float: left; */
				/* 垂直对齐方式，顶部对齐 */
				vertical-align: top;
				/* display: none; */

			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
		<span></span>
		<span></span>
		<ul>
			<li>文字文字</li>
			<li>字文字字文字字文字字文字</li>
			<li>字文字字文字字文字字文字字文字</li>
		</ul>
	</body>
</html>
<!-- 
	网页布局标准流：行内标签水平，块级标签垂直。不浮动，不定位，不转换

	display:只是为了工作方便，转变以后语义不变。任何标签都可以使用
	display:inline
	display:inline-block;
	display:block
	display:none标签隐藏
	div:大区域、大面积的块状排版。
	span、b、u、i引入小元素
 -->

常用样式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			input{
				width: 200px;
				height: 30px;
				/* 去除蓝色框 */
				outline: none;
				border: 1px solid #000;
				/* input去某一边边框的时候，一般先重写边框。要不内置的样式会出问题 */
				border-right: none;
				/* float: left; 可以通过浮动去除留白*/
			}
			span{
				width: 200px;
				height: 200px;
				line-height: 40px;
				text-align: center;
				background: skyblue;
				display: inline-block;
				/* 鼠标移入增加小手  wait  */
				cursor: pointer;
				/* 增加圆角 值越大圆角越明显。50%为圆形或者椭圆形*/
				border-radius: 4px;
			}
			/* 
				鼠标移入标签修改样式：
				选择标签:hover{
					鼠标移入的时候生效
					书写样式
				};
				
			 */
			 span:hover{
			 	background: lime;
			 	color: red;
			 }
			 p{
			 	background: lime;
			 	/* 文本类元素水平居中a img span b u i */
			 	text-align: center;
			 }
		</style>
	</head>
	<body>
		<p><img src="images/camera_new_5606e8f.png" alt=""></p>
		<span>搜索</span>
		<!-- 搜索框 -->
		<input type="text">
		<input type="text">
		
	</body>
</html>

z-index

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				width: 100px;
				height: 100px;
				background: lime;
				position: relative;
			}
			p{
				background: red;
				position: absolute;
				top: 0px;
				left: 0px;
				
			}
			a{
				background: blue;
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: -1;
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是一段话</p>
			<a href="#">百度</a>
		</div>
	</body>
</html>

<!-- 
	定位的标签，后写的在上面
	z-index只有定位的标签使用，调整图层顺序。默认值0，值越大越靠上,可以是负值(不建议)。
 -->

路径问题

		<!-- 文件命名一把是英文或者_。最好不要有别的字符 -->
		<!-- 
			相对路径：相对当前文件寻找。
			向下寻找images/  向下两级iamges/my/
			向上寻找：一级../ 二级../../

			绝对路径：类似于C:\ F:\
		 -->
		<img src="images/moon.jpg" alt="">
		<img src="C:\Users\me\Desktop\前端课程\html5&&css3\第一天\images\mv.jpg" alt="">

锚点

锚点：用户做的一个小标记。
第一步：找到所有点击的内容。用a包裹。 href="#锚点的name值"
第二步：找到所要跳转的内容。取锚点的name值

三、CSS相关

html:超文本标记语言,只负责页面结构。样式和html一点关系都没有
css:层叠性样式表，负责页面样式
h1作用加粗加黑，这句话是错的。因为标签只是负责结构

 h2{
			 	/* 文字颜色 */
				color:red ;
				/* 文字大小 网页布局基本单位 */
				font-size: 19px;
				/* 字体 */
				font-family: "楷体";
				/* 文字倾斜 */
				font-style: italic;

			 }
			 p{
			 	color: blue;
			 	/* 文字缩进 em相对单位，相对的是当前文字大小*/
			 	text-indent: 2em;
			 	font-size: 20px;
			 	/* 文字行高：从一行文字，到下一行文字。中间的距离 */
			 	line-height: 40px;
			 	/* 文字加粗 */
			 	font-weight: bold;
			 	/* 增加下划线 */
			 	text-decoration: underline;
			 }
				
			b{
				/* 文字不加粗 */
				font-weight: normal;
			}
			i{
				/* 文字不倾斜 */
				font-style: normal;
			}
			u{
				/* 去除下划线 */
				text-decoration: none;
			}
			a{
				text-decoration: none;
				/* 颜色可以是英文，也可以是十六进制表示 */
				color: #df5301;
			}

四、盒子模型

/* 盒子模型：指的标签的占位。content(width/height) border margin padding */
			div{
				/* 宽高指得是内容的宽高不包含padding margin border */
				/* 宽度 */
				width: 100px;
				/* 高度 */
				height: 100px;
				/* 边框：三个值,值与值之间使用空格隔开。
					第一个值: 线的粗细;
					第二个值：线的类型solid实线 dashed虚线 dotted点线(各别浏览器识别的是虚线)
					第三个值：线的颜色 英文表示或者十六进制(可以简写三位表示，三个色值都有重叠的时候) #222222简写#222
				 */
				/* border: 10px dashed #4d1e4a; */

				/* 可以单独只设置一个方向 top right left right*/
				border-top: 4px solid red;
				border-right: 10px dotted yellowgreen;

				/* 外边距 */
				/* margin:30px; */

				/* margin可以单独只设置一个方向top right left right */
				/* margin-top: 20px; */
				/* margin的值可以书写不同情况,值与值之间用空格隔开
					一个值：四个方向
					两个值：第一个值上下，第二个值左右
					三个值：第一个值上,第二个值左右,第三个值下
					四个值：上右下左顺时针
				 */
				 margin: 100px 20px 40px 200px;
				/* 内边距：内容和边框的留白 */
				/* padding和margin同理 */
				padding: 20px;
			}
			p{
				width: 100px;
				height: 100px;
				border: 1px solid #000;
			}

五、背景

background img

p{
				height: 500px;
				border: 1px solid #000;
				/* css样式如果重复，值取决于后写的 */

				/*背景颜色 */
				/* background: #ff4600; */
				/* 背景：
				   第一个值: 地址;
				   第二个值：平铺方式。默认平铺 no-repeat repeat-x repeat-y
				   第三个值：水平坐标 left center right 可以书写具体的值，也可以使用特殊值
				   第四个值：垂直坐标 top center bottom 可以书写具体的值，也可以使用特殊值
				   第五个值：色值
			     */
				background: url('#') no-repeat left top ;
				/* background: red; */
				/* 背景尺寸 要放在背景样式的后面 
					一个值：宽度为该值，高度自适应
					两个值：auto 自定义   宽度自适应，高度为该值
					也可以两个值都固定

					尺寸可以设置百分比：参照物是盒子的大小
				*/
				background-size:auto 20%;
			}
			/* background与image的区别
				background不占位，一般引入装饰性图片。
				img占位的，引入重要的图片。	
			 */

精灵图片

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			span{
				display: inline-block;
				/* 标签转化为行内块。行内块在一行排列，设置宽高有效。 */
				/*行内标签没有宽高所以转成行内块*/
				width: 19px;
				height: 19px;
				background: url('images/icons_5859e57.png') no-repeat -68px -187px;
			}
		</style>
	</head>
	<body>
		<p>这是一段文字<span></span></p>
	</body>
</html>
<!-- 
	精灵sprite图片：把很多小图片整合到一张大图片上的技术。
	好处：减少服务器请求次数
	正常情况下，精灵图片一般使用background引入。
 -->

六、浮动

注意

浮动实现的效果：水平排列
浮动以后脱离标准流，变成行内块
行内块：在一行排列，设置宽高有效。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			/* 清除自带样式 */
			ul{
				margin: 0px;
				padding: 0px;
				/* 清除列表样式 */
				list-style: none;
				background: wheat;
				/* overflow: hidden; */
				height: 400px
			}
			li{
				margin: 0px;
				padding: 0px;
			}
			li{
				width: 300px;
				height: 200px;
				background: lime;
				float: left;
			}
		</style>
		<!-- 
			浮动塌陷：子级浮动，父级检测不到子级的高度。如果没有高度，结构不稳定
			第一种方式：给父级加overflow:hidden
			第二种方式：直接给父级加高度
			标签父子关系，一层嵌套就是一层父子关系。
			一般一个标签浮动,同级必须浮动。同级(同一个父级就是同级)
		 -->
	</head>
	<body>
		<div>
			<p>
				<!-- span的父级是p  span的父级的父级是div-->
				<span></span>
			</p>
		</div>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<p>jslfslf</p>
	</body>
</html>
/* 浮动实现的效果：水平排列。水平靠左或者水平靠右 浮动从上到下的
 <!-- 取类名 class="名字" 名字一般是英文表示 -->
<!-- 选择类名：.+类名 -->

七、选择器分类及权重

选择器：如何选择标签。

选择器分类：

	基本选择器：
		*(通配符选择器)
		标签选择器：直接选择标签名。div  p  a  span
		类名选择器：通过类名选择标签。 .+类名  .one
		id选择器：通过id名选择标签。  #+id名字  #one

复合选择器(权重可以叠加)：
		交集选择器：div.one  p.one .one.bottom  标签名为div类名为one
		并集选择器：a,b既选择a又选择了b
		后代选择器：div a选择div的后代a  用空格隔开  只要被某个标签包裹，都是该标签后代
		子代选择器：div>a选择div的子代a   第一级嵌套，子代

选择器权重：

	权重一样的情况，后写的生效。
	权重不一样，取决于权重高的。
	id名和行内样式和!important前期不推荐使用，不利于后期维护
	*<标签名选择器1g<类名选择器1kg<id名选择器1吨<行内样式<!important

定位

固定定位

不会随着窗口的滚动而滚动，不占位。脱离标准流,变成行内块
参照物是当前窗口。top right bottom left

相对定位

相对定位：
用来做微调(后期项目上线的时候或者维护的时候)
占位,占的是原来的位置。对其余标签影响最小
参照物是自身 top left right bottom
半脱离标准流:一方面行内标签块级标签的性质没有改变，一方面是有了四个坐标

绝对定位

绝对定位：
不占位，脱离标准流，变成行内块。
一般情况下实现的是放置在别的标签上的效果。
一般子级绝对定位，父级相对定位。可以让子级固定在父级的某个位置。参照物就是父级
（子绝父相）

派大星zzZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5一周总结

一、html5文档结构<!DOCTYPE html><html lang="en">  <!-- ...
复制链接

扫一扫