h5、css3基础

 

一、html(超文本标记语言)

1. 作用：实现页面布局

2. 页面由许多标记符号组成

3. 由浏览器解释执行

   二、html主题创建方式

   1. !(英文状态)+tab

   2. html：4s+tab

   3. html:5+tab

      三、标签

      在html页面中用尖括号括起来的叫做标签（标记符号）

分类

• 双标签：成对出现的标签。html body

• 单标签：只存在一个标签。img meta

  四、DOCTYPE

作用：告知浏览器解析本文档的 规范，它不是一个标签

五、注释标签

ctrl+/

• 代码失效

• 注释说明

六、图片标签

img+tab键

属性：

• src图片路径

• alt加载失败

• title 图片主题

七、a标签（超链接标签）

a+tab键 实现页面跳转

属性：

- herf要跳转的页面 - title 主题 - target设置窗口打开位置

​ -self在本窗口打开

​ -blank跳转窗口

a标签不能嵌套a

去掉a标签的样式
text-decoration:none;
border: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline: none;

css基础

一、css（层叠样式表）

1. 作用：用来写页面样式的（字体大小，颜色，图片大小，图片位置）

2. 由浏览器解释执行的

二、css语法

选择器{
  属性；属性值
}

三、颜色的表示方式

• 关键字表示（black）

• 十六进制表示0-9，a-f #000000黑；#ffffff白

• rgb模式 rgb(255,0,0)

• rgba透明度：rgba(0,0,0,0.5) a代表透明度 0-1

• opacity:0—1之间的属性

  区别：rgba只是当前元素透明，opacity当前元素和子元素一起透明

四、属性

• 宽width

• 高：height

• 背景色：backgroud

• 圆角：border-radius50%（圆）20%圆角

• 字体大小：fort-size

• 字体颜色：color:rgb(0,0,0)

• 字体：font-famliy:'楷体'；

• 字体加粗：font-weight:bold 100—900的整百数

• 文本水平居中：text-align:center

• 文本垂直居中：line-height:200(line-height值与height相同)

• 去掉加粗font-weight:normal

• 字体倾斜：font-style:italic; 不倾斜font-style:normal

五、盒子模型

组成：

• 内容

• 内填充（padding）

  • 表示内容到边框的距离

  • 问题：添加padding盒子会变大，宽高减去相应的值 box-sizing:border-box(自定义盒模型)将边框也量在内

  
  //分别设置：
  padding-top:10px;  //上填充
  padding-bottom:10px;  //下填充
  padding-left:10px;  //左填充
  padding-right:10px; //右填充
  //简写
  padding:10px; //四个方向
  padding：10px 20px； 上下 左右
  padding：10px 20px 30px；上 左右 下
  padding：10px 20px 30px 40px；上 右 下 左 （顺时）

  ​

• 边框（border）：

border:1px solid #000000;  //四个方向
       粗细  样式   颜色
       实线 solid
       虚线 dashed
 border-top:1px solid #000000;  上边框
 border-left:1px solid #000000; 左边框
 border-right:1px solid #000000; 右边框
 border-bottom:1px solid #000000; 下边框
 border:none; 边框消失

• 外边距（margin）

  • 代表盒子与盒子之间的距离

  • 分别设置：margin-top margin-bottom margin-left margin-right

  • 简写：同内填充一致

问题:

1. margin:0 auto;使块标签水平居中 （盒子）

2. margin-top的BUG：

   产生条件：子元素是父元素的第一个子元素

   ​ 父元素没有边框

   ​ 父元素没有浮动

   ​ 父元素没有填充

   ​ 子元素没有浮动

   解决方式：

   • 给父元素加overflow:hidden

   • 用父元素的padding-top模拟子元素的margin-top

     • margin可以设置负值，padding不能设置负值

• 行内标签只能设置左右间距，不能设置上下间距

  1. 去掉浏览器默认样式*{

​ margin:0

​ padding:0

​ }

list-style：none 去掉列表标签的修饰   点点

text-decoration:none; 去掉a标签的下划线

：hover 鼠标移入

&lt；小于号 &gt；大于号 &times； x &copy；版权符号 &nbsp；空格

十三、标签分类

• 块标签：div 能设置宽高，能独占一行 h1~h6 p ul li ol header

• 行内标签：a 不能设置宽高，不能独占一行，大小由内容决定 span 倾斜i 加粗b em strong

• 行内块标签：img 能设置 宽高，不能独占一行 input meta audio video

标签的转换

• display:block转换为块标签

• display:line转换为行内标签

• display:inline-block转换为行内块标签

十四、选择器

作用：选中页面中的元素

• 基础选择器：

• 标签选择器：css：标签名

• 类名选择器：html：class=“box” css：.box

• id选择器：html：id：“box” css：#box id名唯一

• 通用选择器：*选中页面中所有的标签

• 后代选择器：css：父元素（空格）子元素 子元素是标签名不用

• 群组选择器：选择器，选择器，选择器

• 交叉选择器：多个选择器共同选中一个元素 选择器选择器

• 伪类选择器： 操作真实的DOM元素

​ :frst-child第一个 :last-child最后一个 :nth-child（n）元素的位置

​ :nth-child（odd）奇数 :nth-child（enen）偶数

​ nth-last-child(n) 倒数第几个

​ ：first-of-type第一个 :nth-of-style :last-of -type 最后一个 "关心元素"

​ ：hover 鼠标移入

​ ：focus获取焦点

• 伪元素选择器： 操作非真实的DOM元素

​ 选择器：first-letter 选中第一个字

选择器：first-line 选中第一行

选择器：before 在元素内添加第一个子元素 （定位写）

选择器：after 在元素内添加最后一个子元素

id>类名>标签>通用

100 10 1

属性选择器：

• input[type='text'] tagName[attr=value]

子选择器：

div>img 选中直接子元素

+相邻的兄弟元素

~同级所有的兄弟元素

十五、浮动

• 何时用：元素横排

• 分类：float:left float:right

• 浮动的元素会脱离文档流（元素会按照从上到下，从左到右进行排布）

• 浮动引发的BUG:

​ 问题：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素的高度

​ 解决：父元素能设置高度的要设置高度

​ 父元素添加overflow:hidden

​ 用clear:both 清除浮动

​ 父元素：before{

​ content：“ ”；

​ display：block；

​ }

父元素：after{

​ content：“ ”；

​ display：block；

​ clear：both；

​ }

• 绝对定位：元素需要层叠时用

  • 1、父元素添加position:relative；

  • 2、子元素添加position:absolute;

  • 3调整位置top bottom left right

  
  垂直居中：
  top:0;
  bottom:0;
  margin-top:auto;
  margint-bottom:auto;
  水平居中：
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;                                                                           

• 固定定位：

  • position：fixed

  • 调整位置 top、bottom、left、right

  • 调整层级z-index

  背景图片

  
  background:url(图片路径)   no-repeat(禁止重复)  center（图片位置）
  图片路径：
  需要返回上一级 ../
  禁止重复
  图片位置：水平：left center right
           垂直：top center bottom
           图片精灵：均为负值

   

  css3基础

  1. 外部引入方式 link标签

  2. 嵌入式 html页面中的style

  3. 行内样式 style样式

  4. 一个css文件引入另一个css文件 @import （base.css）

  5. 优先级：行内样式优先级最高，外部样式和嵌入式的优先级距元素的位置决定

十六、2d转换效果

• 平移

transform:translateX(40px); //水平方向 正：右； 负：左

transform：translateY（40px）； //垂直方向 正：下 负： 上

transform:translate(40px,-40px); //水平垂直方向

• 缩放（倍数）

transform:scale(2,1.2); //水平垂直

transform:scaleX(2); //水平方向

• 旋转（角度deg）

transform:rotate(180deg);

• 斜切（角度deg）

transform：skewX（180deg）； 水平方向

transform：skew（45deg，45deg）；

十七、过渡

对运动过程的控制，运动时间，运动方式

transition:all 2s 1s linear;

​ all:运动属性

​ 2s：运动时间

​ 1s：延时

​ linear：运动方式

十八、阴影

box-shadow:10px 10px 20px 10px rgba(0,0,0,0.5)

第一个参数：水平偏移量  正：右  负：左   0左右
第二个参数：垂直偏移量  正：下  负：上   0上下
第三个参数：模糊程度，值越大越模糊
第四个参数：阴影大小，3000px
第五个参数：阴影颜色

二十、文本模型

• 文本换行

• word-break:break-all;   非中日韩自动换行

• 单行文本溢出

white-space:nowrap   文本禁止换行

overflow:hidden;   超出部分隐藏

text-overflow:ellipsis   文本隐藏方式  省略号隐藏

• 多行文本溢出

display:-webkit-box;  指定为弹性模型
-webkit-box-orient:vertical  排布方式垂直
-webkit-line-clamp:3    指定行数
line-height:70px;   与height的倍数关系

二十一、移动端布局的步骤：

• 修改视口（物理像素980 改为逻辑)

<meta  name="viewport"   content="width=device-width">  

• 引入rem.js

<script src="js/rem.js"</script>

• 修改设计稿宽度

将一个css文件引入另一个css文件：@import url （base.css）

二十二、线性渐变

background-image:linear-gradient(top,red,yellow)
第一个参数：渐变开始的方向 top  left  right  bottom  30deg
第二个参数：渐变开始的颜色
第三个参数：渐变结束的颜色
浏览器内核：-webkit谷歌  -moz火狐  -ms IE浏览器  o 欧鹏

二十三、表单标签

1、输入框

<input type="text"  placeholde="请输入用户名"  class="user"   name="username"  maxlenth="10"规定输入最大字符数    autofoucs(自动获取焦点)>
outline:none; 去外边线      padding-left:10px;      text-indent:1em    缩进

2、密码框s

密码<input type="password" placeholde="请输入用户名" class="user" name="username" maxlenth="10"规定输入最大字符数> <br>

3、单选按钮（相同的name值）

请选择您的性别 男：<input="radio" name="sex" id="man" checked(默认选中)>

​ 女：<input="radio" name="sex">

点文字选中

<lable   for="man 
<input="radio"  name="sex"  id="man"   checked(默认选中)>
lable>      lable自动聚焦标签

4、复选按钮

<input type="checkbox">

二十四、段落标签

<p> 可嵌套标签，不能嵌套块标签
<pre>和编辑器中的预先定义好的一致

二十五、

ul无序列表 disc实心圆  circle空心   square方形
ol有序列表

二十六、弹性布局

基本概念：

父元素叫做容器，子元素叫做项目
父元素添加display：flex；属性，项目的float、clear、vertical-align 属性失效
主轴默认水平方向，从左到右，   交叉轴默认垂直方向从上到下

容器的属性：

1、flex-direction决定主轴的方向
   row：主轴水平方向，从左到右
   row-reverse：主轴水平方向，从右到左
   column：主轴垂直方向，从上到下
   column-reverse：主轴垂直方向，从下到上

2、flex-wrap 决定项目的换行
   wrap：项目换行
   nowrap：项目不换行
   warp-reverse：项目换行且反向

3、justify-content决定项目在主轴方向的对齐方式
   flex-start:主轴的起点
   flex-end:主轴的终点
   center：主轴的中心
   space-between:俩端对齐
   space-around:项目两侧距离相等

4、align-items决定项目在交叉轴方向的对齐方式。适用于一根轴或多根轴，
   flex-start：交叉轴的起点
   flex-end：交叉轴的终点
   center：交叉轴中心
   baseline：基于文字底部对齐

5、align-content 决定项目在交叉轴方向的对齐方式。只适用于多根轴线
   flex-start：交叉轴的起点
   flex-end：交叉轴的终点
   center：交叉轴中心
   space-between:两端对齐
   space-around:项目两侧距离相等

项目的属性:

order:定义项目的排列顺序，数值越小越靠前，默认值为0，可以识别负值。
flex-gorw：定义项目的放大比例，默认为0，存在剩余空间也不放大，如果值为1，该项目会等分剩余空间
flex-shrink：项目的缩小比例，默认值为1，空间不足，项目缩小，值为0，即使空间不足项目也不缩小
flex-basis：定义项目占据主轴的空间
align-self：定义单个项目在交叉轴上的对齐方式
   flex-start：交叉轴的起点
   flex-end：交叉轴的终点
   center：交叉轴中心

二十七、动画

1、定义动画

@keyframes 动画名称{
   0%{
     background:red;   属性名；属性值
   }
   20%{
     
   }
   100%{
     属性名；属性值
   }
}

2、绑定

 animation:color 2s        1s    linear     infinite   forwards
       动画名称 持续时间   延时   运动方式    次数       保留结束时的状态

自定义字体

@font-face：阿里巴巴矢量图标库（彩色icon）

二十七、响应式

一个页面可以适应各个终端，而不需要为每个终端写不同的页面

优点：

节省资源

缺点：

存在代码冗余

技术支持

媒体查询

@media screen and (min-width:1200px){
  选择器{
    属性：属性值；
  }
}

二十八、栅格系统

快速开发响应式页面

预定义类：将屏幕平均分成12份

内宽：.container

宽度通屏：.container-fliud

行：.row

列：.col-

​ .col-lg-n(大屏幕)

​ .col-md-n（中屏幕）

​ .col-sm-n（小屏幕）

​ .col-xs-n（超小屏幕）

h4中的标签：

照片:

<input type="file">

请选择你的学历：

<select name=""  id="">
   <option value="  ">学士</option>
   <option value="  ">硕士</option>
   <option value="  ">博士</option>
</select>

文本域：

<textarea name="  " id="  " cols="30"宽    row="10"高 placeholer="请留言"></textarea><br>
是否允许用户缩放：
    resize:none; 禁止缩放
    resize：vertical;垂直缩放
    resize:horizontal;水平缩放
    resize:both;水平垂直缩放

表单标签

按钮

<button>自定义按钮</button>

提交

<input type="submit">

自定义按钮

<input type="button" value="搜索">

<from action="index.php" method="post">
 action:提交的位置
 method：提交的放式
 get:提交信息出现在地址栏
 post：不出现在地址栏

h5新增标签

色板：<input type="color"><br>
时间日期：年月<input type="month"><br>
         年周<input type="week"><br>
         时间<input type="time"><br>
         年月日时分<input type="datetime-local"><br>
email:<input type="emaiil"><br>
tel:<input type="tel"><br>
音频标签：<audio src="1.mp4" controls loop autoplay></audio>
         controls 控件向用户显示   loop 循环    autoplay自动播放
视频标签：<video src="1.mp4" controls loop></video>
画布标签：canvas style="  "  width="30" height="30"></canvas>
框选标签：<fieldset>
         标题<legend>基本信息</legend>
           要框选的内容
         </fieldset>

3d

perspective:1000px;景深
transform-style:preserve-3d

自定义盒模型

box-sizing:border-box; 将边框量在内

em当前像素的倍率     rem.js适配不同终端