前端基础

最新推荐文章于 2022-05-07 11:46:58 发布

web前端菜鸟

最新推荐文章于 2022-05-07 11:46:58 发布

阅读量248

点赞数

分类专栏：前端笔记文章标签： css css3 html5 html 前端

本文链接：https://blog.csdn.net/weixin_46261309/article/details/107295752

版权

前端笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端基础

学习目标：能根据psd文件，用HTML + CSS 布局出符合W3C规范的网页

HTML

HTML： HyperText Markup Language（超文本标记语言）

一、常见的html标签及属性

标题标签 ( h1~h6 ) ;
段落标签( p) ;
列表标签 ( ul>li无序列表，ol>li有序列表，ol的属性：type) ；
超链接标签（a，属性：href指要跳转地址、target=’_blank’）；
图片标签（img，属性：src路径、alt、title）；
加粗（strong）；
斜体（em）；
删除（del）；
容器标签（div，span）

二、表单与表格

表格：

table标签：表格容器
thead标签：表头
tbody标签：表体
tr标签：行，内部一定是只有td或th
th标签：表头单元格，字体会加粗
td标签：单元格
合并单元格：rowspan、colspan

表单：

form：表单
input：输入框

<input type="text">  <!-- 文本框 -->
<input type="password">  <!-- 密码输入框 -->
<input type="radio">  <!-- 单选框 -->
<input type="checkbox" >  <!-- 复选框 -->
<input type="button">  <!-- 按钮 -->
<input type="submit">  <!-- 提交按钮 -->

label：文本
placeholder：占位符，提示作用
下拉菜单

三、其他

空格： &nbsp；
换行：
分割线：
注释：

CSS

一、 css引入样式的方法

行内样式
```
<div style="background: red;"></div>
```

内部引入

<style type="text/css">
	div{
		background: red;
	}
</style>

外部引入

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

二、CSS选择器

标签选择器
类选择器（多个）
id选择器（唯一）
通配符选择器（页面所有标签）

子元素选择器

div p  ： 选取到div内 "所有" 的p标签
div>p  ： 选取到div内 "子集" 的p标签

兄弟元素选择器

div+span  ： 选取到div标签 "同级" 下一个span标记

伪类选择器（ :hover ）
伪元素选择器( ::before、::after )

属性选择器

[value]  :  选取到标签的属性有value的
[value=a] : 选取到标签的属性值为a的元素

三、选择器权重

!important（无穷大） > 行内样式（1000） > id （100）> class |属性|伪类（10）> 标签|伪元素（1） > 通配（0）

四、CSS常用属性

背景颜色：background-color、background:
文字颜色：color
颜色值可以写成：rgba(255,255,255，1)
边框(border) ：border:1px solid pink；
width : 宽度
height : 高度
text-align：文字水平对齐（center、left、right）
line-height ：行高
font-size：字体大小（一般用12px、14px）
font-weight：字体加粗（normal、bold、数值100-900）
text-deoration：文本修饰
cursor：光标
小技巧：单行文字垂直居中用行高=高

DIV + CSS

一、盒子模型

属性值 2个（上下，左右）、3个（上、左右、下）、4个（上、右、下、左）

margin：外边距
padding：内边距
border：边框

宽高的计算：

元素的实际宽度 = border-left + border-right + width + padding-left + padding-right
元素的实际高度 = border-top + border-bottom + width + padding-top + padding-bottom

可以通过设置box-sizing: border-box; 元素的实际宽度（高度）就是width（height）设置的宽度（高度）

*{
     box-sizing: border-box;
}

二、元素分类

行级元素 : inline（div、p、ul、ol、li、form…）
块级元素 : block （span、em、strong…）
行级块元素 : inline-block（img…）

三、元素类型转换

定位：position:absolute/fixted （转成块级）
float ：自动转换：inline-block
display属性

四、浮动布局

可以使用float属性来实现让两个div在同一行显示
浮动元素会脱离文档流
浮动元素的最下面加入： clear:both（块元素）display:block，可清除浮动
伪元素清除浮动 (只需要在浮动元素父级容器添加 class=“clear”)

.clear::before,.clear::after{
    content:"";
    display: block;  /*将伪元素增加的内容设置成块元素*/
    clear:both;
}

五、定位

定位：position

默认值：static
inherit
fixed ==》相对于浏览器窗口定位，脱离文档流
absolute ==》绝对定位，相对元素最近的已定位祖先，脱离文档流
relateive ==》相对元素原定位置，不脱离文档流

H5

语义化标签：header、nav、asidearticle、section、footer
媒体标签：音频标签audio、视频标签video

autoplay :自动播放 controls:播放器的控制页面

C3

一、css3新增属性

圆角（border-radius）

阴影（box-shadow）

 box-shadow: 10px 20px 10px blue;  
// 水平偏移值    垂直偏移值  模糊半径  阴影的颜色

形变（transform）属性值是函数
- 旋转 rotate()
- 缩放 scale()
- 移位 translate()

//以元素中心点，顺时针旋转了45度
transform: rotate(45deg);
//以元素中心点，逆时针旋转了45度
transform: rotate(-45deg);

//以元素中心点，向四周缩放1.5倍
transform: scale(1.5);

//利用位移，实现将元素放置在页面水平和垂直居中
.box {
    width: 200px;
    height: 200px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color: #00f;
}

//transform属性也可以将多个属性值写到一起，多种效果同时实现
transform:translate(100px,200px) rotate(-45deg)  scale(1.5);

transform属性也可以将多个属性值写到一起，多种效果同时实现

二、css3过渡效果

谁做过渡给谁加

transition可设置多个属性值

// 过渡属性 过渡时间 过渡函数 延时时间
transition: width 2s linear 0.5s;

transition可设置多个属性的过渡效果

//用逗号隔开
transition: width 2s linear 0.5s,height 3s linear 0.2s;

将transform指定为过渡属性，可实现形变的过渡效果
```
 transition: transform 3s;
```
过渡属性可以设置为all
```
transition: all 2s linear 0.5s;
```

transform-origin 可变换中心点（方位）

//transform-origin: x y;
transform-origin:50px 50px;

三、动画效果

定义动画 (@keyframes )

//第一种：
@keyframes 动画名称{
    0%{
      transform: translate(0px,0px)
    }
    50%{
      transform: translate(10px,10px)
    }
    100%{
	  transform: translate(20px,20px)
    }
}

//第二种：
@keyframes 动画名称{
    from{
      transform: translate(0px,0px)
    }
    to{
	  transform: translate(20px,20px)
    }
}

调用动画

定义好动画之后，在需要使用动画的元素上添加animation属性

.box {
    width: 200px;
    height: 200px;
    background-color: #00f;
    //调用anim动画，动画执行10s，匀速
    animation: anim 10s linear;
}

将动画100%设置跟0%状态一样，可以使动画更连贯

循环动画 animation-iteration-count：infinite

.box {
    width: 200px;
    height: 200px;
    background-color: #00f;
    //调用anim动画，动画执行10s，匀速
    animation: anim 10s linear;
    animation-iteration-count:infinite;
}

停止动画
```
animation-play-state:paused;
```

flex布局

一、flex容器

先给容器设置属性 display: flex; 将此容器会变成一个flex容器

常见的flex容器属性

属性	说明	属性值
flex-direction	主轴方向	row（默认值）、row-reverse、column、column-reverse
justify-content	子元素在主轴上的排列方式	flex-start、flex-end、flex-center
align-items	侧轴的排序方式	flex-start、flex-end、flex-center

二、flex子项

flex容器内部的元素被称为flex子项（flex item），在这个容器内部浮动会失效，不分行、块元素
常见的flex子项属性

属性说明属性值
align-self 子项自己在侧轴的排序方式 flex-start、flex-end、flex-center
flex 占flex容器的几份 1、2、3…

属性	说明	属性值
align-self	子项自己在侧轴的排序方式	flex-start、flex-end、flex-center
flex	占flex容器的几份	1、2、3…

grid布局

grid布局为二维布局

一、 grid容器

先给容器设置属性 display: grid; 将此容器会变成一个grid容器

常见的grid容器属性

属性	说明	属性值
grid-template-columns	设置gird容器中的项目有多少列，并指定列的宽度/比例	grid-template-columns: 100px 100px 100px; grid-template-columns: 1fr 1fr 2fr;
grid-template-rows	设置gird容器中的项目有多少行，并指定行的宽度	grid-template-rows: 100px 100px 100px;
grid-column-gap	列之间设置间距	grid-column-gap: 30px;
grid-row-gap	行之间设置间距	grid-row-gap: 20px;
justify-items	单元的水平位置	justify-items: center;
align-items	单元的垂直位置	align-items: center;
justify-content	整个内容区域在容器里面的水平位置	justify-content: center;
align-content	整个内容区域在容器里面的垂直位置	align-content: center;

二、 grid子项

grid容器内部的元素被称为grid子项
常见的grid子项属性

属性	说明
justify-self	自身单元格内容的水平位置
align-self	自身单元格内容的垂直位置
grid-column-start 、 grid-column-end	指定左右边框垂直网格线，可合并写成grid-column：1/3；
grid-row-start 、 grid-row-end	指定上下边框水平网格线，可合并写成grid-row：1/3；

媒体查询

使用@media来定义不同的条件和样式，窗口尺寸（或设备尺寸）满足指定条件的时候才会应用指定的样式

max-width 、 min-width

@media screen and (min-width:600px) {
    /* 窗口大于600px才会应用指定的样式 */
}

@media screen and (min-width:600px) and (max-width:900px){
    /* 窗口大小600px到900px才会应用指定的样式 */
}

@media screen and (max-width:900px){
    /* 窗口小于900px才会应用指定的样式 */
}

rem

单位：
1. px （像素）
2. em （相对父元素的字体大小font-size）
3. rem （相对html的字体大小font-size）

使用js代码让html元素的font-size属性在不同的设备中设置不同的值

(function (doc, win) {
var docEl = doc.documentElement,
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
  };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

代码第7行：100就会起到百分比的作用。例如1px=1/100=0.01rem;
720为设计稿宽度。在实际工作中如果设计稿宽度改变，只需要讲720替换成设计稿宽度即可。

web前端菜鸟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端基础

前端基础目录前端基础HTML一、常见的html标签及属性二、表单与表格表格：表单：三、其他CSS一、 css引入样式的方法二、CSS选择器三、选择器权重四、CSS常用属性DIV + CSS一、盒子模型二、元素分类三、元素类型转换四、浮动布局五、定位H5C3一、css3新增属性二、css3过渡效果谁做过渡给谁加transition可设置多个属性值transition可设置多个属性的过渡效果将transform指定为过渡属性，可实现形变的过渡效果过渡属性可以设置为all三、动画效果flex布局一、flex容器
复制链接

扫一扫