HTML+CSS--基础学习

---

前言

前端有三宝：html,css,javascript;
我对html+css的基础学习主要是学习常用html标签和常用css样式及一些样式规则；
标签大体构成了我们网页的主要元素；
样式对标签的属性调节让我们的网页看起来井井有条，看起来舒服；
如果说html是创造了一个网页上的物体,那么css标签可以说就是这个物体的一个形容词,来形容这个物体的形状、颜色、大小、位置种种特征；

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、html–初识标签

1.< img src=“” > （导入图片）

使用方式：src=“ok/two.jpg” /放入文件位置即可/

html文件位置和图片位置在同一级位置就直接输入文件名.文件类型

图片比html存放位置多一级就要加路径比如图片two.jpg放在与我的html文件同一级位置的ok文件夹里就应在""里输入ok/two.jpg.

少几级就用几个两点来倒退级数。

一般都会直接把要用的图片放在与你写的html位置相同处。

width （宽度） 与height （高度）用来调节图片大小。

DIV默认列向排版

2.input(type=“” value=“”) （输入标签） (按钮标签）

input我学的有四种type:

“text” 输出文本输入框

“password" 密码输入框 (输入文本不可见）

”button" 按钮

”image" 输入图片

“value"在里就是用来添加内容文本。

button:可以弄一个按钮。（可以注意到input也行）

	
	
	
		
		
		
	
	
		
	账号:

	密码:

	     
	    
	     
	      
	
	

3.a (插入链接）

< a href=“输入网址也可以输入另一个html文件位置” target=‘-blank’ > < /a >

不输入target='-blank’则不会打开新网页直接在原网页进行跳转。

4.＜ul＞与＜ol＞以及 < dl >

< ul > < /ul > 必须与< li > < /li >一起使用 （< ol > < /ol >也是一样)

直接上图看< ol> 与 < ul > 的区别

< ol>:

	
	
		
		
	
	
  

  	
csc
  	
  	
cdc
    
    
cqc
    
  
	
	

< ul>:

	
	
		
		
	
	
  

  	
csc
  	
  	
cdc
    
    
cqc
    
  
	
	

< dl >:带有项目和描述的描述列表 其实就是給你放在htm文件里的东西加个标签说明

< dl >
< dd >kunkun< /dd >
< dt > < img src=“坤.jpg”>< /dt >
< /dl >

< dd >里放项目描述
< dt >里放项目
< dl >相当于一个画框

结合所学可做一个用于跳转网页html文件

	
    
    	
    	
    
    
    	

    		网址导航
    	
    	

    		
   购物网站
            

            	
 
            		
            		
                    
            	
            	

            		
                    
            		
 
            	
            
 
    		
 
    		
 学习网站
    			  

            	
 
            		
            		
                    
            	
            	

            		
                    
            		
 
            	
            
 
    		
    	
 
    
 
 
	

二、CSS基础学习

1.基本选择器与引入方式＜style＞,＜link＞

基本选择器: style英语为风格,样式的意思，写在< style type=“text/css” > < /style> 内部的就是各种选择器。
选择器：全选符：（选中页面所有的内容，但是级别很低。）

{width: 100px;height: 100px;background: red;}

标签选择器：（选中所有标签为div的内容）

div{width: 200px;height: 200px;background: blue;}

class选择器： (选中所有标签类别为abc的内容）

.abc{width: 300px;height: 200px;background:yellow;}

id选择器： (选中所有标签id为lec的内容）

#lec{width: 300px;height: 200px;background: red;}

专业写法，一个id名只对应一个html标签。但是一个html标签可以有多个class,如果说两个class都被选择器用来进行调整属性那么优先级高的生效。
html,css和很多编程语言一样标签读取从上至下。（所以说优先级一般下一行比上一行高）
就权重而言id和class相较标签和全选符都要高；
.abc .表示类 #lec #表示id；

引入方式：給标签引入style；
级别最高的行间式：

< div style="width:500px; height: 500px;background:blue;">< /div>

写style就是有时候会不方便修改，特别是在代码巨多的时候。

较低级的内嵌式：内嵌式会让文件更便于阅读缺点就是影响html文件的大小。

< style type="text/css">
				div{width:100px;height:100px;background:yellow;}
 < /style>

外链式：（引入外部css文件来设计style)

< link rel="stylesheet" type="text/css" href="one.css">

link(链接）

one.css(文件名）

div {width:100px;height: 200px;background: black;} （文件内容）

2.盒子模型

盒子：就是我们平时在网页上看到的各种元素。（比如淘宝网上的商品图像，评论，淘宝logo…)
但在现实生活中我们所看到的盒子是一个3D图像，而在网页中我们所看到的图像都是2D的，那为啥要说我们在网页中所看到的各个元素都是一个个的盒子呢？因为其实我们平时在看到网页中的一个个元素相当于我们在现实生活中对摆放在地上的盒子进行俯视，看到的只是盒子的一个面而已，而且如果我们将网页中的一个个元素比作盒子，那么在对页面的布局时就相当于对盒子的摆放，对于页面元素的设计就相当于对盒子的样式内容进行设计，其实是很形象的。
盒子模型：简而言之，就是一个元素在页面中所占的大小。（值得注意的是一个盒子的大小会受到多种因素的影响).

3.常用元素样式

3.1.浮动样式 (float)

float:left 横向排版元素 从左至右

3.2.外边距样式（盒子的外边距-margin）

margin英语有边缘的意思，简而言之，就是給盒子加一个结界，在这个结界的范围内你只能看到这个盒子内你想要别人看到的东西。
margin-right:元素右边划出多少空间。(其他方向同理）
注意：1.一个盒子的margin-right 与 另一个盒子的margin-left会叠加；
2. 一个盒子的margin-top 与 另一个盒子的margin-bottom会取最大值；
3. margin可以取负数；

一个盒子的margin-top 与 另一个盒子的margin-bottom会取最大值

margin-bottom:50px; < margin-top:100px; 两张图片上下间隔100px;

3.3.内边距样式padding(给元素内部填充像素）

使用padding能将元素像吹气球一样将其吹大。
用法上和margin区别就是不支持负数，其他都一样；

使用padding前

使用padding扩大内边距后

3.4.边框样式(border)

边框样式即把元素像画一样给其加个画框，设计好画框的宽度，颜色，类型即可；
border: black 10px dashed;

3.5.css继承模式

类似继承遗产一样，因为包含关系，上一级的某些属性可以直接继承给下一级。比如color.

	
	
		
		
     
	
		
		

		 路飞	
        
鸣人
		
	
	

3.6.背景色样式(background-color)

获取图片上的颜色：用ps打开一张图，用拾色器获取颜色的rgb或16进制颜色编号。

3.7.透明度样式（opacity)

opacity:在老牌浏览器里透明度取值范围在0到100；在我们一般用的浏览器里取值范围在0到1；
1为完全不透明,0为透明。

3.8.背景图片样式

url:统一资源定位符我们也叫网址；
1.背景图片插入：background-image:url(); （）里放网址或者本地文件地址
如果插入的图片尺寸大于划定的元素区域大小图片会被裁剪 若小于图片则以平铺展示。

2.背景图片重复：如果插入的图片尺寸小于元素区域则以重复平铺展示，使用background-repeat可以设定背景图片是否重复平铺；默认为repeat,而且repeat属性默认不继承，要继承需要打开继承属性 background-repeat: inherit; repeat还可以规定图片只根据x轴重复或者y轴重复。

3.图片大小样式设计：background-size:100px 100px; 先宽后高；
background-size:100px; 等比例缩放 ；等价于100px auto;图片变为width:100px; 时缩小一倍那么高height也缩小一倍； background-size: auto 100px；同理；
background-size: cover; (自动计算好合适的比例来覆盖元素空白区）

4.背景图片位置样式
background-position:默认值为0% 0%,即图片横纵坐标占整个元素区域横纵坐标位置的比例；
也可以使用英文字符的位置样式 比如：center center ,center left…
还可以用像素值来调整图片的位置比如 ：100px 100px 表示图片左边际放在X轴上100px的位置，图片顶部边际在Y轴100px的位置；（px可以取负值）
background-position会影响background-repeat的呈现效果；

3.9.background 简写

      background-color:red;
 	  background-image:url('../图片素材/小川.jpg') ;
 	  background-position: right bottom; 
 	  background-repeat: no-repeat; 
 	  background-size: 100px 100px; 

  **这一坨是不是看起来就烦？觉得烦那就这样写**

.abc1{width: 400px;height: 400px; border: black dashed 10px;
background:red right bottom/100px 100px no-repeat url('../图片素材/小川.jpg') ; }

其中背景颜色，导入图片，重复方式是没有编写顺序要求的，只有position和size要注意要用/将两者隔开，前面写position后面写size;

3.10. 元素样式-display

3.10.1.元素消失样式-display:none

让元素在浏览器页面中消失，但仍保留在html结构中；
后辈元素会占据消失元素的位置；

3.10.2.元素变块样式-display:block

元素属性可有块状，行内块状就比如我们常见的div，支持宽高，内外边距，按列堆积；
行内就比如span， a ，不支持宽高，只支持部分边距，按行堆积；元素宽度可被元素内容撑大；
行内元素又有如img,input,属性是块状与行内特性的结合，既可以像行内一样按行排列，也可以支持宽高，内外边距的设置；
display:block：可以将非块状元素转为块状；块状元素默认宽度为浏览器窗口宽度大小；

	
		
	   
	   	
		
	   	
	   
	
		leo 
		leo1
        leo3 
		leo4
	
		

3.10.3.元素变行内样式-display:inline

块状元素要是通过display:inline变为了行内样式那么原本的块状属性就会失效；只支持部分边距，按行堆积；元素宽度可被元素内容撑大；

		
	   
	   	
		
	   	
	   
	
		
leo
		leo 
		leo
		

		leoiiiiiii
	
		

3.10.4.元素变行内块样式-display:inline-block

使用display:inline-block，使元素变为行内块的状态，按行内样式排列，支持内外边距，行高等样式，支持宽高(设定宽高后元素大小不会被内容在撑大），支持内容撑大元素大小；

	
		
	   
	   	
		
	   	
	   
	
		
123456
		
7891011121314
		
151617181920
	    kkluv
	    

	    
	    
	
		

3.11. 元素溢出隐藏样式-overflow:hidden

overflow:hidden控制元素内容超过宽高的部分，将其隐藏，不占位置；
overflow-x:hidden;隐藏横向元素溢出部分；（至少IE8浏览器以上才兼容）
overflow-y:hidden;隐藏纵向元素溢出部分；（至少IE8浏览器以上才兼容）
overflow:auto以滚动条的形式展示溢出部分内容；
overflow-x:auto或者overflow-y:auto(使用其中之一即可让另一个自动变成auto)以滚动条的形式展示溢出部分内容；

	
		
	   
	   	
		
	   	
	   
	
		
 
555555555555555555555555555555555555
	    
	    

		
 

		 

		 
 

         

		  
 

		  

		  
 

	
		

overflow:auto以滚动条的形式展示溢出部分内容；
overflow-x:auto或者overflow-y:auto(使用其中之一即可让另一个自动变成auto)以滚动条的形式展示溢出部分内容；

	
		
	   
	   	
		
	   	
	   
	
		  
 

		  
 
河南新郑市第三中学一名女教师近日在家中上完网课后意外离世，她的女儿在一段母亲给学生上网课的视频中发现，母亲生前上最后一堂课时疑似遭遇过“网课入侵”，有人进入网课直播间播放音乐、说脏话。

11月2日，新郑市委宣传部官方微博通报称，10月28日，该市第三中学教师刘某某在家上完网课后意外离世，该市教育局第一时间向公安机关报案，并成立善后工作专班。经公安机关调查反馈，排除刑事案件可能。针对网传刘老师遭遇网暴事件，公安机关已立案侦查。


在某社交平台上，不少网友称曾在网课时遇到过“网课入侵”

一时间，“网课入侵”“网课爆破”等网络违法行为再度引发关注。澎湃新闻（www.thepaper.cn）了解到，有不少学生在上网课时遇到过同类情况。有截图显示，有人在社交平台发布“爆破群”及相关内容，有平台已开展巡查和治理，清理相关违规内容、处置严重违规账号。
	
		

3.12. 鼠标浮动伪类样式-hover

hover：可以使用其伪类控制单个或多个子元素的状态；

	
		
	   
	   	
		
	   	
	   
	
		YBM

		

			

                 A
				

			
            

				B
				

			
            

				C
				

			
            

				D
				

			
		
	
		

3.13. 控制鼠标光标样式-cursor

使用cursor让光标（鼠标）样式在进入某些元素区域时发生改变；
常用pointer. 光标指向时变为手指
none 光标指向时消失。

	
		
	   
	   	
		
	   	
	   
	
		234
		111 
		222
	
		

4.变量命名规范

在正常的项目中，一般不会給变量起一些没有意义的名字，而且一般一个严谨的程序员給变量命名都有一定的规范。
1.匈牙利命名法 变量名=属性+类型+描述对象
列如一个浮动(float)属性的(button)类型元素排在最外层给它取名为fbtonther;
2.驼峰命名法：float-button-top (属性-类型 -描述)
3.大驼峰法：floatButtonTop

5.标准流布局与非标准流布局

1.标准流布局：html文档中写在前面的元素在前面显示写在后面的在后面显示
2.非标准流布局：与标准流不同的都是非标准流布局。
tips:标准流子集margin-top会带动父集；

3.标准流与非标准流混用可能会发生元素重叠。（尽量不要混用）

6.影响盒子大小的因素

7.前端布局-定位 position

7.1.固定定位 （position:fixed)

固定定位：根据窗口进行固定位置；我们在网站中经常可以看到带有这种属性的元素，有兴趣可以打开淘宝或者京东的网页往下翻看是不是有东西一直固定在窗口不动。
tips:定位级别比标准流级别更高。
固定定位是根据浏览器窗口进行的定位。
只有定位才能使用z-index索引值。默认是0；越高的显示越优先。
可以使用left,right,top,bottom来进行具体位置定位。

下拉窗口

7.2.绝对定位 （position:absolute)

1.使用方法与fixed类似；但是它是根据上一级有定位的父级进行的定位，如果没有使用了position定位的父级，那么就根据body也就是窗口进行定位；
2.同时使用float与absolute的话，float会失效；
3.百分比根据相对定位元素来算；

7.3.相对定位 （position:relative)

1.使用方法与绝对定位类似；但它是根据自己原来元素的位置进行的定位,但实际上它的位置只是表面上被调到了一个相对位置，实际上并没有变。
2.使用relative不会破坏原有的元素布局，可以和float并用；
3.若在某个元素内使用绝对定位则可以给这个元素使用相对定位让内部元素根据父级定位；

7.4.定位继承 （position:inherit)

1.定位本身是不继承的；
2.定位根据上一级的定位来进行继承，如果元素的上一级没有设定定位那么就继承body的默认定位static；如果上层定位也是继承定位那么就继续向上看；

8.css-常用基础文本样式

8.1.文本大小粗细样式-font-size/font-weight

font-size:用于控制网页字体的大小，默认是16px;
也可以用英语或者数字来调节字体大小；google浏览器有最小文字大小限制。它的x-small和xx-small字体大小是显示为一样大的。

	

	
	
	


	
watch and learn
    
watch and learn
    
watch and learn
    
watch and learn
     
watch and learn
    
watch and learn
    
你好
    
你好
    
你好
    
watch and learn
    
watch and learn
    
watch and learn

	

在html文件中插入正常的屏幕截图需要注意电脑的缩放大小与浏览器的缩放大小，如果电脑的缩放大小为125%，浏览器的缩放大小为100%，那么截图时可把浏览器的缩放大小调成80%，（1.25*0.8=1）。而英文在量取后还需要考虑在每行的占比，如果占比3/4那么就要将量取的尺寸再除以3/4得到真实的像素值；

font-weight:调节文字粗细取值范围为1-1000，实际有区别范围为51-949；可以用英语或者数字来调节；本身不具备继承样式；

	

	
	
	
        


	
watch and learn
    
watch and learn
    
watch and learn
    
watch and learn
    
watch and learn
    
watch and learn
         
watch and learn
    

  
	

8.2.字体样式 -font-family

font-family:直接输入与字体样式对应的样式值即可；
常用的字体样式有"宋体”,“微软雅黑”,“Arial”;如果没有输入的字体样式就会自动列为默认样式；多重选择：font-family:“宋体”,“Arial”; 如果没有宋体样式就切换使用arial样式，arial也没有就为默认样式； 可以去网上下载你需要的字体；

	
	
	


watch and learn
watch and learn
 
watch and learn
 
watch and learn

win系统字体默认为微软黑体；mac系统字体默认为Arial。

8.3.风格样式-font-style

斜体：1.输入属性值；font-style:italic或者font-style:oblique; 都能让字体变为斜体
2.使用< i >标签； i为italic的缩写

	
	
	


watch and learn
 
watch and learn
 
watch and learn
  
watch and learn

8.4.文字对齐样式（text-align)

text-align:只能用英文属性值，默认为left；
h1-h6：标题标签；

	
	
	


watch and learn
watch and learn
watch and learn

8.5.文本行高样式-line-height

line-height:如果给予元素高度值的话，行高会被调至元素内部位置上下中心处显示；
调节指定行高位置，可以用ps创建一个与元素尺寸一致的画布,测量字体在画布中上方的高度*2+文本高度的值作为样式值；

	
	
	


watch and learn

8.6.小写字母改小型大写-font-variant

font-variant:small-caps :只影响小写字母，将小写字母变成大写，但不改变其文本大小；

	
	
	


aabbccHHHH

8.7.文本换行样式-word-wrap:break-word

因为在元素内的英文文本不会自动换行，中文可以；
所以使用word-wrap:break-word来給英文文本换行；

	
	
	


todayistodayigotomorrwfjwioefjiwefjioawuejfuieruiergjuiergjeruiuijhnfawuidjfiowefj
（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）

8.8.文本缩进样式-word-indent

使用word-indent給文本缩进，可往左（正数）也可往右（负数）；
word-indent遇到text-align:right会失效；

	
	
	


（￣▽￣）（￣▽￣）
（￣▽￣）（￣▽￣）
（￣▽￣）（￣▽￣）

8.9.font缩写

	
	
	


"hello world"
"hello world"