web前端基础教程 html+css

文章目录

  • html部分
    • 1.骨架知识
      • html声明方法:
      • 视口的使用:
      • SEO的使用
      • 更改网页的ico图标:
    • 2.标签的使用
      • <1>排版标签
          • 标题标签:(块级)
          • 段落标签:(块级)
          • 换行标签:
          • 水平线标签:
          • 布局标签:
      • <2>文本标签
      • <3>媒体标签
          • 图片标签:
          • 音频标签:
          • 视频标签:
      • <4>链接标签
    • 3.列表的使用
    • 4.表格的使用
    • 5.**表单的使用**
      • <1>input标签
      • <2>按钮button标签
      • <3>下拉菜单select
      • <4>文本域textarea
      • <5>lable绑定
  • css部分
    • css引入方式
    • 1.基础选择器
    • 2.高级选择器
    • 3.光标类型(cursor)
    • 4.元素显示模式
    • 5.文字相关设置
    • 6.溢出处理 (overflow)
    • 7.背景相关设置
    • 8.盒子模型
    • 9内外边距塌陷
    • 10.元素定位
    • 11.元素显示模式
    • 12.浮动
    • 13.过渡效果
    • 14.渐变(透明)效果
    • 15.动画效果
    • 16.弹性布局(flex)
    • 17.滚动贴合
    • 18.平面转换——缩放
    • 19.平面转换——位移
    • 20.平面转换——旋转

html部分

1.骨架知识

html声明方法:

html声明方法:
<html>
    <head>
        <title>这里写网页标题title>                        
             <style>
                         /*这里写css样式 */
             style>
             <script>
                        // 这里写javascript代码
             script>
    head>
    <body>
        
    body>   
html>

视口的使用:

一个完整的html介绍:
<head>
    
    DOCTYPE html>
	
	<html lang="en">
    
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
head>

SEO的使用

一个SEO的声明:
<head>
    
    <title>我是标题title>
    
    <meta name="description" content="我是网页的描述信息">
    
    <meta name="keywords" content="这是网页的搜索关键词">
head>

更改网页的ico图标:

更改网站的图标:
   <head>
	 head>

2.标签的使用

<1>排版标签

标题标签:(块级)
标题标签有6级:
	<h1>1级标题h1>
	<h2>2级标题h2>
	<h3>3级标题h3>
	<h4>4级标题h4>
	<h5>5级标题h5>
	<h6>6级标题h6>
段落标签:(块级)
段落标签:
    1. <p>这是段落标签pp>
换行标签:
换行标签:
     1. <br>    <!--单标签,强制换行->
水平线标签:
水平线标签:
     1. <hr>    
布局标签:
独占一行(块级) 网页头部 一行多个(行内) 网页导航
div header span nav
网页底部 网页侧边栏 网页区块 网页文章
footer aside aection article

<2>文本标签

说明 标签 标签
加粗 b strong
下划线 u ins
倾斜 i em
删除线 s del

<3>媒体标签

图片标签:
图片标签:(记得设置 宽 width 高 height)
     <img src="路径" alt="图片加载失败显示我的内容" title="鼠标移动到图片上显示我的内容">
音频标签:
音频标签:    audio
     <audio src="路径" controls autoplay loop> audio>
显示播放控件 controls
自动播放 autoplay
循环播放 loop
视频标签:
视频标签:       video
     <video src="路径" controls autoplay muted widht="" height="">video>
显示播放控件 controls
自动播放(静音) autoplay muted

<4>链接标签

链接标签:      a
     <a href="要跳转的链接地址" target="_self">点我就能跳转了a>        
覆盖原网页跳转 target = “ _self ”
保留原网页跳转 target = “ _blank ”
去除链接标签的方法(css去除):
     text-decoration:none;

3.列表的使用

<1>无序列表

无序列表
     <ul>这是无序列表
         <li>本行前面显示 黑点li>
         <li>本行前面显示 黑点li>
     ul>

<2>有序列表

有序列表:
     <ol>这是有序列表
         <li>本行前面显示 1li>
         <li>本行前面显示 2li>
     ol>

<3>自定义列表

自定义列表:
     <dl>
         <dt>自定义列表dt>
            <dd>本行前面是 空白dd>
            <dd>本行前面是 空白dd>
     dl>
去除li前面的样式:(css去除)
     list-style: none;

4.表格的使用

表格整体 表格每一行 (横的) 表格每一项内容 (加粗) 表格每一项内容 表格大标题 (居中)
table tr th td caption
表格头部 表格主体 表格底部
thead tbody tfoot
合并单元格 (上下) 合并单元格 (左右)
rowspan=“这里写要合并的个数” colspan=“这里写要合并的个数”
创建一个 宽400 高 300的表格
     <table border="1" width="400" height="300">
         <caption>我是表格大标题caption>
         <thead>
             <tr>
                 <th>姓名th>
                 <th>性别th>
                 <th>年龄th>
             tr>
         thead>
         <tbody>
             <tr>
                 <td>张三td>
                 <td>td>
                 <td>17td>
             tr>
         tbody>
         <ftooy>
             <tr>
                 <td>评价:td>
                 <td colspan="2">非常努力td>
             tr>
         ftooy>
     table>

5.表单的使用

<1>input标签

文本框 密码框 单选框 多选框 提交按钮 重置按钮
text password radio checkbox submit reset
分组 (参数) 分组默认选中项 文件选择 多文件选择(参数) 提示信息(参数) 聚焦(css)
name checked file file multiple placeholder outline:none;
input标签:
     1. 文本框
         <input type="text" placeholder="这是提示信息" style="outline:none;">
	 2. 密码框
		 <input type="password" placeholder="这是提示信息" style="outline:none;">
	 3. 单选框
		 <input type="radio">
	 4. 多选框
		 <input type="checkbox">
	 5. 提交按钮
		 <input type="submit">  
	 6. 重置按钮
		 <input type="reset">   
	 7. 文件选择
		 <input type="file">
	 8. 多文件选择
		 <input type="file" multiple>
	 9. 分组       
		 <input type="radio" name="1" checked>
		 <input type="radio" name="1"> 女
     10. 提示信息 和 聚焦(选中后的黑边框)
         <input type="text" placeholder="这是提示信息" style="outline:none;">

<2>按钮button标签

提交按钮 重置按钮 普通按钮
submit reset button
button标签:
     1. 提交按钮
		 <button type="submit">提交button>
     2. 重置按钮
         <button type="reset">重置button>
	 3. 普通按钮
		 <button type="button">普通按钮button>

<3>下拉菜单select

下拉菜单整体 下拉菜单每一项 下拉菜单默认选项(参数)
select option selected
下拉菜单:
     <select>
         <option>北京option>
         <option>上海option>
         <option selected>深圳option>        
         <option>山西option>
     select> 

<4>文本域textarea

文本域 规定文本域的可见宽度 (参数) 规定文本域的课件行数 (参数)
textarea cols rows
文本域:   宽度 3 个字符   行数 5个字符
     <textarea cols="3" rows="5">textarea>

<5>lable绑定

与单选框绑定后,点击绑定过的单选框旁边的元素,能够自动选中单选框

lable绑定:   
     <lable> <input type="radio" name="1">lable>
     <lable> <input type="radio" name="1">lable>
        
	 <div>我是标签选择器div>
------------------------
	       div { 
                   }
类选择器:    以div为例子

	<div class="one">我是类选择器<div>
        ------------------------
	        .one{
                    }

<3>id选择器

id选择器:    以div为例子

	 <div id="one">我是id选择器div>
------------------------
             #one{
                    }

<4>通配符选择器

通配符选择器:    所有元素

	 *{ 
          }

2.高级选择器

<1>并集选择器

并集选择器:   (用来选择多个标签)

	<p>我是p标签p>
	<span>我是span标签span>
------------------------
	  p,span{
                }

<2>后代选择器:

后代选择器:   某标签的下一个标签

	<div>我是div
        <span>我是spanspan>
    div>
------------------------
 	  div span{
                   }
子代选择器: (要满足父子关系)

	 <div>我是div
         <p>我是pp>
     div>
------------------------
 		div>p{
                 }

<4>交集选择器

交集选择器:    同时满足多个条件

	 <p class="one">我是第一个pp>
	 <p id="one">我是第二个pp>       
------------------------
		p#one{
                  }

<5>伪类选择器

伪类选择器:         (  :hover  )

	 <p>我是pp>
------------------------
	 	p:hover{
                  }

<6>结构伪类选择器

匹配父元素的第一个子元素 匹配父元素的最后一个子元素 匹配父元素的第n个子元素
父元素 : first-child{ } 父元素 :last-child{ } 父元素 : nth-child (n)
找到前3个元素 找到5的倍数 找到 奇数 / 偶数
父元素 : net-child (-n +3) { } 父元素 : net-child(5n){ } 父元素: net-child( odd / even) { }

<7>伪元素

在父元素前添加一个伪元素 在父元素后添加一个伪元素
::before ::after
伪元素:  

	 <span>span>
------------------------
	    span::before{
              content:"张";
                }
	    span::after{
              content:"学";
                }

3.光标类型(cursor)

箭头光标 小手光标 工字光标 十字光标
default pointer text move
光标类型:
	1. 箭头光标
		cursor="default";
	2. 小手光标
		cursor="pointer";
	3. 工字光标
		cursor="text"
	4. 十字光标
		cursor="move"

4.元素显示模式

<1>块级元素 block

块级元素独占一行默认宽度就是父级的100%添加宽高也生效

块级元素代表:
	div	p	ul	li	header	nav	footer等

<2>行内元素 inline

行内元素一行多个默认宽高由内容撑大不能设置宽高

行内元素代表:
	a	span	b	i	u	s	strong	

<3>行内块元素 inline-block

行内块一行多个能够设置宽高

行内块元素代表:
		

<4>元素显示模式转换: display

转换成块级元素 转换成行内元素 转换行内块元素
display : block display :inline display : inline-block

5.文字相关设置

字体大小 字体颜色 文字缩进2字符
font-size : 大小px color :颜色 text-indent:2em
文字粗细 字体样式 标签水平居中
font-weight:正常400/加粗700 font-style:正常normal / 倾斜 italic margin : 0 auto
行高 水平对其方式(居中) 字体类型
line-height text-align:居中center / 左 left / 右right font-family: 微软雅黑;

<1>.文字样式

文字样式:

	<div>我是divdiv>
------------------------
	div{
		font-size:30px;
		color:red;
		text-algin:center;
    }

6.溢出处理 (overflow)

溢出部分可见 (默认) 溢出部分隐藏 显示滚动条(都显示) 根据溢出决定是否显示滚动条
overflow :visble overflow :hidden overflow : scroll overflow :auto
溢出处理:

	<div>11111111111111111111div>
------------------------
	div{
		
		overflow : hidden;
}

7.背景相关设置

<1>背景颜色

背景颜色:
     background-color:颜色值

<2>背景图片

背景图片:
	 background-image:url(图片路径)

<3>背景图片大小

背景图片大小:
	 background-size: 大小值
						contain       等比例缩放,可能会留空白
						cover		  等比例缩放,直到不留空白

<4>背景平铺

背景平铺:
	 background-repeat : 平铺值
	 					  repeat           x轴y轴全部平铺
						  no-repeat 	   不平铺
						  repeat-x/y 	   沿着x或者y轴平铺

<5>背景所在位置

背景位置:   (可以设置百分比)
	 background-position :   水平值()     垂直值()    /* 左移动 或 上移动  的值为负数 */
					   左 left  右 right | 上 top  下  bottom
精灵图要用  标签(行内)

<6>元素 / 背景 透明

元素透明:   取值在0~1之间。值越小 透明度越高
	 opacity:0.1

8.盒子模型

内边距 边框 虚线
top left padding border dashed
外边距 实线 点线
bottom right margin solid dotted

<1>元素版心居中

元素版心居中:
	 margin : 0  auto

<2>边框设置

边框设置:
	 边框粗细    border-width: 数字px
	 边框样式    border-style: 实线 solid  /  虚线 dashed  /  点线  dotted
	 边框颜色 	 border-color: 颜色值
边框设置复合属性 (不区分先后顺序)
  盒子边框设置:
	 border : 粗细px   边框样式   颜色值;  
  对边框中的 某一边 进行设置
	 border-left: 粗细px  实线 solid 颜色值 ;

<3>盒子模型4个角的度数

盒子模型4个角的度数:
	 border-radius: 左上px  右上px  右下px  左下px
简写教程:
	 如果俩个角相等 且俩叫向对  就可以只写一个  (左上--右下)  (右上--左下)
	 如果所有角的值都一样 可以只写一个值
胶囊按钮:  (胶囊按钮的大小为高度的一半)
	 border-radius:高度的一半
元素为圆形:  (值为高 宽的一半)
	 border-radius: 高的一半   宽的一半

<4>盒子大小自动内减

盒子大小自动内减:
	 box-sizing:border-box

<5>盒子阴影

盒子阴影:
	 box-shadow: 水平偏移()px  垂直偏移()px   模糊度px  阴影大小px  颜色值;
	 		     向左移动填写负数,向上移动填写负数

<6>内边距 / 外边距

内边距: 
	 padding: 上   右   下    左
	 	 	  上   左右一样   下
	 	 	  上下一样   左右一样
外边距:
	 margin:  上   右   下    左
	 	 	  上   左右一样   下
	 	 	  上下一样   左右一样

<7>清除默认的内外边距

清除默认内外边距:
	 *{
	    margin : 0 ;
	    padding: 0 ;
	                    }

<8>元素显示/隐藏

元素隐藏:
	 display : none
元素显示:
	 display : 元素是块级就写 block  元素是行内就写  inline

9内外边距塌陷

(指设置内外边距不生效)

父子级标签,都是块级子级设置内外边距就会影响父级位置

内外边距塌陷解决办法:   
	 overflow:hidden    /* 要放到不生效元素的上一级 */
双伪解决塌陷办法:
	 父级元素::before{
	 	content:"";
	 	display:table;
          }
	 

10.元素定位

绝对定位 相对定位 固定定位 粘贴定位
absolute relative fixed sticky

定位的值同时写 left和right,只有left生效。同时写 top和bottom时,只有top生效

<1>绝对定位居中

绝对定位的盒子不能使用 居中

绝对定位时牢记子相父对

绝对定位居中:
	 position : absolute;     /* 绝对定位 */
	 left : 50%;      /* 设置定位为水平的一半 */
	 top : 50%;     /* 设置定位为垂直的一半 */
	 transform : translate(-50%,-50%);  /* 位移居中 */

11.元素显示模式

元素显示模式:    
	 z-index:/* 值越大,元素显示越靠上 */

12.浮动

浮动:    (float)
	 左浮动 : float : left 
	 右浮动 : float : right

父子级标签,父级没有高度子级浮动就会产生显示影响

<1>清除浮动影响 (属性清除)

清除浮动影响,使用css属性清除   ( clear:both )
	在添加浮动的元素的html后面写一个相同的标签,然后增加一个css属性
	 <div style="clear:both">div>

<2>单伪清除浮动的影响

单伪清除浮动:
	 设置浮动的上一级::after{
	 		content: "";    /* 使用伪元素必须写这一个,意思时在 */   
	 		display: block;  /*伪元素默认时行内,要改为块级*/
	 		clear:both;   /*清除浮动的css属性*/
	 		height:0;     /*处理兼容性问题*/
	 		visibilility:hidden;
	 }

<3>最简单的清除浮动

最简单的清除浮动:   (在浮动元素的父级设置)
	 overflow:hidden

13.过渡效果

过渡效果:   (过渡一般和 :hover 配合使用,:hover的内容为元素过度后的样式)
	 transition: 要过度的属性(如高,宽等,全部属性为all)  时间s;

14.渐变(透明)效果

渐变效果:
	 background-image: liner-gradient(位置,颜色值1,颜色值2, ...)
渐变颜色 粉色 到 浅蓝色(渐变颜色从左上到右下)
	 background-image: liner-gradient(to right bottom,pink,skyblue)
透明效果:(配合hover伪元素使用)
	 background-image: liner-gradient(transpatent,rgba(0,0,0,0.5))  /*css效果*/
	 透明元素.hover{ opacity:1 }     /*设置透明度 值在0~1之间,值越小颜色越透明*/

15.动画效果

定义动画:
	 方法一:(定义俩种动画形态)
	 	@keyframes 动画名称 {
	 		from{
                     }
	 		to{
	 		       }
	 	}
	 方法二: (定义多种动画形态)
	 	 @keyframes 动画名称 {
	 	 	 0%{
	 	 	      }
	 	 	 10%{
	 	 	      }
	 	 	 可以设置到100%
	 	 }
动画无限循环 动画匀速进行 动画延迟
infinite linear delay
动画实现收缩效果 动画结束恢复原始状态 动画结束停留当前状态
alternate backwards forwards
使用动画:	 
	 animation : 动画名称  动画所用的时间   延迟时间  速度曲线  重复次数  动画方向  执行完毕后的样子
动画匀速进行,实现动画收缩效果
	 animation : 动画名称  动画所用的时间    linear  alternate ;

图片走马灯效果

图片走马灯效果:
	准备5张相同宽和高的图片,然后设置一个盒子能同时放3张图片,然后图片从右到左循环播放,总盒子宽度必须为所有图片宽度+同时显示的图片的宽度(这里的总宽度为8张图片的宽),才能实现走马灯效果

逐帧动画

逐帧动画:
  使用from和to的方式定义动画
	 逐帧动画是从左到右实现动画,那么在from里面写入的背景位图的宽为 负数总宽度
	 逐帧动画是从右到左实现动画,那么在to里面写入的背景位图的宽为 负数总宽度
	 @keyframes 动画名{
	 	from{
	 	    background-position: 0  0  (若逐帧动画精灵图从左到右,那么第一个0为负数的总宽度)
	 	}
	 	to{
	 		background-position: 0  0  (若逐帧动画精灵图从右到左,那么第一个0为负数的总宽度)
	 	}
	 }
使用逐帧动画:
	 animation: 动画名称  所用时间  step(数量)---数量的值为精灵图动画的个数  

16.弹性布局(flex)

使用弹性布局:

组成部分: 弹性容器 /盒子 主轴 侧轴

使用弹性布局:  (默认是主轴对齐)
	display:fiex;    /*创建弹性布局,给父级添加*/

改变主轴对齐方式:

主轴对齐方式: (父级修改)
	 justify-content:对齐方式
	 					flex-start   从开头处开始依次排列(默认值) 
	 					flex-end	 从结尾处开始一次排列
	 					center	  	 居中依次排列
	 					space-around     沿主轴均匀排列,空白间距平均分派在盒子俩测
	 					space-between	 沿主轴均匀排列,空白间距平均分派在相邻盒子直接按
	 					space-evenly 	 沿主轴均匀排列,弹性盒子和容器之间间距相等

改变侧轴对齐方式:

侧轴对齐方式:(父级修改)
	 align-items:对齐方式
	 				flex-start    从开头处依次排列(默认值)
	 				flex-end	  从结尾处依次排列
	 				center		  沿侧轴居中排列
	 				stretch		  弹性盒子的高铺满容器,前提是子元素不能设置高
	 align-self:对齐方式  (可以针对某一个元素单独设置对齐方式)

17.滚动贴合

使用滚动贴合: (在父级添加)
	 scroll-spap-type: 滚动方向    滚动样式
	 	滚动方向    y表示上下滚动     x表示左右滚动
	 	滚动样式    mandatory表示强制滚动        proximity 表示智能滚动,靠近哪里向哪里滚动
	 
设置滚动贴合的对齐方式:
 	scroll-snap-align: 对齐方式
 						 start       下一块元素贴到顶部
 						 end		 下一块元素贴到底部
 						 center		 下一块元素贴到屏幕中间

18.平面转换——缩放

平面缩放:
	 1. 使用img插入图片
	 2. transform:scale(x轴缩放倍数;y轴缩放倍数)   /* 只写一个值就是等比例缩放,值大于1放大*/

19.平面转换——位移

平面位移:
	 transform:translate(水平位移距离,垂直位移距离)
	          /* 往左移动写负数,往上移动写负数 */
单独设置某个位置移动
	 左右移动	transform:translatex()
	 上下移动	transform:reanslatey()

20.平面转换——旋转

平面旋转:
	 transform:rotate(旋转角度 单位deg)   /*顺时针旋转取正数,默认以中心旋转 */
通过某个位置旋转
	 transform-orgin:要改变的位置    /* 上top  下bottm  左left  右right  居中center  */

你可能感兴趣的:(前端,前端,html,css)