html

最新推荐文章于 2024-09-05 22:58:10 发布

qq_47951664

最新推荐文章于 2024-09-05 22:58:10 发布

阅读量236

点赞数

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/qq_47951664/article/details/113528932

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html

一、文档类型声明标签

<!DOCTYPE>

文档类型声明，声明页面为HTML页面

<!DOCTYPE html>

这句代码的意思时：当前页面采取的时HTML5版本来显示网页

注意：

1.<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html>
    标签之前
2.<!DOCTYPE>不是一个HTML标签，它就是文档声明标签

二、lang语言种类

用来定义当前文档显示的语言。

1.en定义语言为英语

2.zh-CN定义语言为中文

就是en为英文网页，zh-CN就是中文网页

三、HTML常用标签

1、1 div 和span

和标签 ** ：没有语义，它们是一个盒子，用来装内容的

div：独占一行

span：跨距跨度

1.2 img图像

<img src="../img/14.jpg" alt="加载失败" title="图片" width="300px" border="1px"/>

image的缩写

width：设置宽度像素

height：设置高度像素

border：设置边框像素

1.3 a 超链接

<a href="../d" target="_blank"></a>

href：链接目标的url地址

target：-self 当前页面打开 _blank 新窗口打开

空链接：

1 锚点定位

<a href="#live">
 <h1 id="live"></h1>

1.4 表格标签

<table> </table>定义表格的标签
<tr></tr> 定义行
<td></td>定义列

1.5 自定义列表

<dl>
    <dt>主题</dt>
    <dd>解释</dd>
    <dd>解释</dd>
</dl>

1.6 label标签

label标签为input元素定义标注

label标签用于绑定一个表单元素，当点击《label》标签内的文本时

css

一.css选择器

放在style样式里边

1.1 标签选择器

以标签名为选择器

p{
	color:red;
	font-size:20px;
}

1.2 类选择器

以class的名字为选择器以点开头

.persion{
	color:red;
	font-size:20px;
}
<div class="persion"></div>

多类名

.cat{
	color:red;
	font-size:20px;
}
.dog{
	border:10px solid red;
}
< div class="cat dog pink">
    
</div>

1.3 id选择器

以id名字为选择器以#号开头

#name{
	color:red;
	font-size:20px;
}
<div id="name">
    
</div>

1.4 通配符选择器

*{
	所有的标签都生效
}

二、CSS字体属性

定义字体

1.1 font-family

h1{
	font-family:"微软雅黑";
}

多个字体以逗号隔开

h1{
	font-family:"微软雅黑",Arial,helvetica;
}

1.2 font-size

定义字体大小px(像素)

谷歌浏览器默认的文字大小为16px

h1{
	font-size:16px;
}

1.3 font-weight

定义字体粗细

bold:加粗 font-weight:700 等同于bold加粗不需要单位推荐数字

normal:不加粗 font-weight:400 等同于normal不加粗推荐数字

.bold{
	font-weight:bold; 
}

1.4 文字样式 font-style

em{
	font-style:normal;   normal  默认值，浏览器会显示标准的字体样式
}
p{
	font-style:italic; 浏览器会显示斜体的字体样式
}

1.5 font 字体复合属性

顺序不能颠倒各个属性以空格隔开

其它属性可以省略 font-size font-family不能省略否则不起效果

body{
	font: font-style font-weight font-size/line-height font-family;
}

1.6 color颜色RGB

rgb(255,0,0)或rgb(100%,0%,0%)

开发中常用16进制

rgba() 最后一位值设置透明度最大为1 以小数为值

rgba(34,56,39,0.4);

1.7 对齐文本

text-align 属性用于设置元素文本内容的水平对齐方式。

div{
	text-align:center;
}

left  左对齐 （默认值）
right  右对齐
center  居中对齐

1.8 装饰文本

text-decoration 属性规定添加到文本的装饰，可以给文本添加下划线、删除线、上划线等。

none 默认，没有装饰线（最常用）

underline 下划线，链接 a 自带下划线（常用）

overline 上划线

line-through 删除线

a{
	text-decoration:none;
   取消a链接的下划线
}

1.9 文本缩进

text-indent ：文本第一行进行缩进值可以是负数

1em=16px ：表示一个文字大小

p{
	text-indent:16px;

}

p{
	text-indext:2em;表示两个文字大小的距离
}

2.0 行间距

line-height属性用于设置行间的距离（行高）控制文字行与行之间的距离

行间距：上间距文本高度下间距设置的是上间距跟下间距

p{
	line-height:26px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GeuCgyCP-1612182733321)(image/image-20210102103106782.png)]

三、css引入样式

1.1行内样式表（行内式）

写到HTML页面内部，单独放到一个

可以放在HTML文档的任何地方，但一般放在文档的标签中

<style>
    div{
        color:red;
        font-size:12px;
    }
</style>

1.2内部样式表（嵌入式）

直接写在标签内部

<div style="color:red;font-size:12px;">
    
</div>

1.3外部样式表（链接式）

单独写在css文件中，之后把css文件引入到HTML页面中使用。

使用标签引入

<link rel="stylesheet" href="style.css">

1.4 快速生成HTML结构语法

1.生成多个相同标签 div*3 快速生成3个div 输入完按tab键

div*3

2.父子级关系的标签 ul>li 输入完按tab键

ul>li

3.兄弟关系的标签 div+p 输入完按tab键

div+p

4.生成带类名或者id名字的标签 p.demo 或者p#demo 输入完按tab键

p.demo

直接.demo或者#demo 默认生成带类名或者id名的div 输入完按tab键
div自增长的类名 .demo$*5 表示类名从demo1生成到demo5 $ 代表自增输入完按tab键
直接.demo*5 代表生成五个类名是demo的div
生成标签的同时生成内容 div{生成五个}*5 输入完按tab键
```
div{生成五个}*5
```

四、复合选择器

常用复合器：后代选择器、子选择器、并集选择器、伪类选择器

1.1 后代选择器

元素2是元素1的子代中间以空格隔开元素2可以是孙子重孙子只要是后代就行

元素1 元素2{

}

1.2 子选择器

子元素选择器只能选择第一级子元素，就是亲儿子用大于号隔开

元素1>元素2{

}

1.3 并集选择器

多组标签定义相同的样式时用逗号隔开

元素1，元素2，元素3{

}

1.4 链接伪类选择器

a:link 选择所有未被访问的链接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:active 选择活动链接（鼠标按下未弹起的链接）

a 标签要单独指定样式

a:link{
	color:#ffffff;
	text-decoration:none;
}

：focus伪类选择器用于选取获得焦点

焦点就是光标，一般情况类表单元素才能获取

input:focus{
	background-color:yellow;
}

五、元素的显示模式

1.1 块元素：

独占一行

块级元素的特点：

高度，宽带，外边距以及内边距都可以控制
宽度默认是父级容器的100%
是一个容器及盒子，里面可以放行内或者块级元素。

<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>，<div>等标签都是块级元素

1.2 行内元素：

一行可以放多个元素也称内联元素

无法设置宽高是无效的
默认宽度就是它本身内容的宽带
行内元素只能容纳文本或其它行内元素

<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等行内元素

注意：

文字类元素内不能使用块级元素

标签主要用于存放文字，不能放块级元素，特别不能放

```

<h1>~<h6>等都是文字类块级标签，里面也不能放其它块级元素

1.3 行内块元素

行内块元素有几个特殊的标签它们具有块元素和行内元素的特点。

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
默认宽带就是它本身内容的宽度（行内元素的特点）
高度，行高，外边距以及内边距都可以控制（块级元素特点）。

1.4 元素显示模式转换

a 标签通过转换后可以放块级元素

转换为块元素：display：block；
转换为行内元素：display：inline；
行内块元素：display：inline-block；

1.5 小米侧边栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>练习</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		
		#app{
			width:200px;
			height: 204px;
			
		}
		a{
			text-decoration: none;
			display: block;
			font-size: 14px;
			background-color: #55585a;
			color: #fff;
			line-height: 34px;
			padding-left: 30px;
		}
		a:hover{
			background-color: #FF6700;
		}
	</style>
	<body>
		

		<div id="app" class="stu">
				<a href="#">手机 电话卡</a>
				<a href="#">电视 盒子</a>
				<a href="#">电脑 笔记本</a>
				<a href="#">智能 路由器</a>
				<a href="#">耳机 音响</a>
				<a href="#">儿童 手表</a>

		</div>
		<!-- 引入vue文件 -->
		<script src="../vue/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app", //可以使用id选择器
				data: {
					message: "空手道",
					list: ["中国功夫"],
					list1:["中国功夫"]
				},
				methods: {
					add: function() {
						
						if (this.message != ""&&this.message.length<7){
							this.list.push(this.message);
						}else{
							this.list.push(this.message.substring(0,7)+"...");
						}
						this.list1.push(this.message);
						this.message = "";
					},
					dele: function(index) {
						this.list.splice(index, 1);
						this.list1.splice(index, 1);
					},
					cler: function() {
						this.list = [];
						this.list1 = [];
					}
				}

			});
		</script>

	</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfMcBR0l-1612182733325)(image/image-20210103104444429.png)]

1.6 单行文字垂直居中的原理

让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

六、CSS背景

1.1 背景颜色

一般情况下元素背景颜色默认值是transparent（透明）

background-color：#6652fa；

1.2 背景图片

background-image：元素的背景图像，实际开发中常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

background-image：url(imgag/1.jpg)；

1.3 背景平铺

background-repeat：repeat | no-repeat | repeat-x | repeat-y

1.4 背景图片位置

1 方位

background-position：x y;

background-position：center top; 顺序没有关系

background-position：right center; 顺序没有关系

如果只写一个值第二个值默认居中对齐

2 精确定位

background-position：50px 20px; 距离左侧50px 距离顶部20px

如果只指定一个值，那该数值一定是x坐标，另一个默认垂直居中

3 混合单位

background-position：20px center;

1.5 背景固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment：scroll |  fixed

scroll：背景图像随着对象内容滚动

fixed：背景图像固定

1.6 背景复合写法

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

background:black url(image/bg.jpg) no-repeat fixed center top;

1.7 背景颜色半透明

background：rgba(22,33,234,0.3)

最后一个数值0~1之间盒子内的内容不受影响

七、css三大特性

1.1 层叠性

样式覆盖就近原则

1.2 继承性

子标签会继承父标签的某些样式文本颜色和字号

1.3 权重

元素选择器：1

类选择器，伪类选择器：10

id选择器：100

行内样式：1000

！important：无穷大

.test{
	color:red;
}
div{
	color:green!mportant;  后面加这个标签代表权重最高
}

八、盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qACsDtea-1612182733328)(image/image-20210103204241663.png)]

1.1 边框border

边框的组成三部分：边框宽度（粗细），样式，颜色；

border-width：5px；

border-style：solid-实线 dashed- 虚线 dotted -点线

border-color：red；

border:1px  solid  red;

边框会影响盒子的实际大小

盒子=30px 边框=2px 那么盒子实际大小等于34px

1.2 padding

padding-left:20px; 左

padding-top:20px 上

padding-right:20px 右

padding-bottom:20px; 下

复合写法：

padding：5px; 上下左右

padding: 5px 10px; 上下是5px 左右是 10px;

padding:5px 10px 20px; 上是5px 左右时10px 下是20px

padding :5px 19px 20px 13px; 上5 右19 下20 左13

如果不指定宽度就不会撑大盒子

1.3 高度塌陷问题

给子元素添加margin 父元素会跟着一起下来

可以给父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow：hidden。

盒子有浮动固定绝对定位不会有塌陷问题

1.4 盒子边框

border-radius：length

length数值越大弧度越大

如果想把高度、宽度为200px的矩形设置为圆形只要把：

length设置为它的一半 100px就可以了

设置为50% 等价于高度跟宽度一半

1.5 盒子阴影

box-shadow

水平值

上下值

模糊距离

影子尺寸

颜色

box-shadow：3px 4px 4px 2px blak;

内阴影 inset

前两个值必须写后面可以省略

1.6 文字阴影

text-shadow

九、浮动

float

1.1 浮动特性

脱离标准普通流的控制移动到指定位置
浮动的盒子不再保留原先的位置

1.2 为什么需要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子

清除浮动后父级高度随子元素高度变化

1.3 清除浮动方法

1.父级添加overflow属性
2.父级添加after元素
3.父级添加双伪元素
4.额外标签法也称隔墙法，是W3C推荐的做法

1.4 额外标签法

在浮动元素末尾添加一个空的标签，列如

<style>
    .cler{
        clear：both;
    }
</style>

<div class='cler'>
    
</div>

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

这个新增的盒子要求必须是块级元素不能是行内元素

1.5 父级添加overflow

.box{
	overflow:hidden;
}
清除浮动

优点：代码简洁

缺点：无法显示溢出的部分

1.6 清除浮动——：after伪元素

在父盒子添加一个类名.clearfix

.clearfix:after{
	conten:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}


.clearfix{ IE6、7专有
	*zoom:1;
}

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器；

原理：在后面生成一个隐藏盒子

1.7 双伪元素清除浮动

也是给父元素添加

.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;
}

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米，腾讯等

1.8 清除浮动总结

为什么清除浮动

父级没高度

子盒子浮动了

影响下面布局了，我们就应该清除浮动

r元素

3.父级添加双伪元素
4.额外标签法也称隔墙法，是W3C推荐的做法