html/css基础

html

一、标签（重要）

1.web标准的组成三部分

结构层 html  样式层css  行为层JS。

 

2.标签的分类  （单标签，双标签） (嵌套关系，并列关系) 

 

3.文本格式化标签

b,  p i u h1 en 

 

4.img标签使用及属性  <img src="路径" alt=“图片加载失败显示”title=“鼠标悬停出现”width=“宽”height=“高”>

*图片设置宽高，最好宽和高只选择一项设置防止变形;除非有确定的宽和高

5.a标签的使用以及页面定位功能

   标签<a herf="#" 属性:href路径 target窗口打开方式:_blank(新窗口打开) _self(当前窗口打开)  ( <base target="打开方式">写在hady标签内 base英文基础的意思S

 

 

  ) onclick:(点击)="return fase" 禁止当前页面跳转

   锚点定位   加id名   herf="路径+#id名"

6.绝对定位/相对定位: 绝对路径是从盘符,网络资源路径出发(不常用)   相对路径是从文件本身出发.

 

H5标签：<nav></nav>导航  <aside></aside>侧边栏 <article><article>文章 footer脚注 header头部

二、无序列表(常用、重要)

    ul  li    （导航    多种相同的）

 

例:  <ul>

                <li><p></p><li>    *在ul内写其他标签， 要用li包以下

      </ul>

 

三、表格(了解)

 table   tr  （th td）  并列

 

四、表单控件

 

1.文本框<text>   

   密码框<password>

   单选框<radio>

   多选框<checkbox>   属性：checked选中的

 

2.按钮

form  属性  

下拉框

        select》option  --用js循环写

 普通按钮<botton>   属性:value

 图片按钮 <image>  属性src--- 给图片添加点击事件

 提交按钮<submit>  到form表单

 重置按钮<reset>

 

css

css的三种书写位置  

    行内式-影响范围最小   

           <style></style>

    内嵌式--影响当前页面内  外链式-影响整个网站、站点 

        <link rel="stylecheet" herf="css路径">

    导入式 @import  （基本不用）  一般用于权重中 !import 

   font: 

           size: 大小

           widht: 粗细  400正常  700粗 

            连写

             是否倾斜(style)-粗细(weight)-字体大小（size）字体（）颜色（color)

font:14px/100%  "微软雅黑

 

简单选择器  标签选择器  . 类选择器 # id选择器 *通配符（不推荐使用，推荐用并集选择器）

符合选择器  后代选择器（选择器 空格 选择器 ）最多3-5个        

                   子代选择器（选择器>标签）（不怎么用）

                  交集选择器（选择器，选择器）(当后代没办法实现控制的时候，可以用交集来提高精确度;  只跟一个元素有关，找到当前元素上的所有选择器或标签连写中间没有空格跟后代没有关系)

                  位置伪类选择器 选择器：li:last-child(找到最后一个子元素是li标签)  nth-child（数字odd基数 even偶数 4n（倍数））

                  伪类选择器 ：link:当鼠标为访问的状态  hover鼠标移入的时候        

                  伪元素选择器::after（暂时用来清除浮动） 样式：.clearfix::after{content“”； display：block; clear:both；heighte:0;visilibity：hidden;}

                   伪元素选择器

                     例                左边

                                    父盒子选择器::before{content"内容"}   配合 

                                      父盒子内的选择器::after{content:"内容"}

                  相邻选择器 选择器+选择器

                   属性选择器[  标签中的属性  ]  配合type

                              如果标签中类型相同  属性选择器  [标签中的属性="属性的数值"]

css三大特性（继承性 层叠行（权重）， 优先级）

        继承性  font  color  行高   宽高不继承， a标签不继承颜色， h系列不继承字体大小，（也不是不继承而是把父元素的字体，拿过来加以计算，然后进行赋值显示）——

       层叠行 --权重

      优先级 ！important<内联元素<id选择器<l类选择器<标签选择器<通配符<继承

   背景图片 background-image：

        背景图片url(路径）

        背景图片是否平铺 repeat 

        背景图片位置position

        北京图片大小 size

        背景颜色 color；

    连写顺序  背景图片-是否平铺-图片位置-背景图片大小-背景颜色

     背景图片和img用法

             img：经常更新的图片用img

             背景图片： 固定不经常动。

 显示模式:

   disiplay: blok;快元素(p,h1-h6,div,ul,li)

                          行内元素 b, u,a,i,em,span.s

                           行内快(input img)

    边框

    border-color 颜色

               -width粗细/大小

                -style 边框的样式

                -rdius 圆角边框

                连写  border: -widht -style-color

标准流  用margin-top会出现高度塌陷, 包含塌陷.

  浮动后的元素,可以随便用;

 

         盒子水平居中方式 margin:0 auto;

                                     margin:auto;

                                    margin-left:50%

                                   margin-right:50%

  浮动的特点

                 1. 脱离标准流

                   2.显示为行内块

                    3.父元素浮动子元素也会跟着移动.

                   4.浮动后,子元素不会超过父元素

                 浮动最先开始的特点是,图文环绕效果.

 

       版心布局:特点:有固定的宽度

      

    定位

    固定定位 fixed

    相对定位relative;  父盒子有定位参照父父盒子，父盒子没有定位，会在找上一级。，如果没有以浏览器作为参考

      绝对定位：absolute;父盒子有定位参照父父盒子，父盒子没有定位，会在找上一级。，如果没有以浏览器作为参考

        一般情况下（子绝父相常用） 。子绝父绝  子绝父绝。 子绝父固

        z-index

 

      显示图片模块为 inline-block  图片会跟文字对齐。

    给图片设置 vertical-align: middle;

 

高级CSS

 

鼠标样式

cursor：  default（小白箭头/默认） pointer（小手/点击光标） move（移动光标） text（文本光标）help（帮助光标） wait（载入光标）

 

outline  input外轮廓线 不占像素   一般用于清空input的轮廓线， 

 

文本域清除拖拽

resize：none；  清除拖拽功能；

 

vertical-align：middle； 清除图片底部间隙；

display：block；          清除图片底部间隙；

 

标签嵌套规则

1.p  h  不能嵌套块级元素  a标签可以嵌套其他元素，但不推荐

2.块级元素和块级元素嵌套，行内元素和行内元素嵌套，

3.行内元素和行内元素并列，块级元素和块级元素并列，

 

 

 

   white-space:nowrap 强制在一行显示

  text- overflow:hidden;溢出隐藏

    text-overflow:ellipsis 文本溢出显示省略号; 

 

精灵图，  是为了 节省浏览器和服务器的通信；

精灵图 一般用于图片量比较大，才会使用

        图片比较少没有必要使用因为后期美工还要进行维护。

滑动门写法

 

 

line-height  没有内容不会有效果

 

过渡css3

 

transition 0.3  过渡

 

transition -property  过渡css属性的名称

 

                -duration 过渡效果的时间

                -timing-function 过渡效果的时间曲线。 默认是“ease”(不常用)

                -delay 过渡效果何时开始。( 不常用)

                        all属性值。代表全部属性的意思。

        

                    拥有多个属性用逗号隔开。

                图片无法使用； all

 

        2D变形

                transform（变换） 

                 

                   (属性)：  - translate(x,y)（移动）

                                    缩放scale（2，2）（括号内的数值是倍数） 也可以缩小到0   比1大就是放大，比1小就是缩小。

            

                    《旋转rotate（deg）（deg代表度数） 顺时针（-代表逆时针）

                                       

 t                     ransform-grigin(修改制定的旋转点) 例如（left top）（ 0px 0px ） 就是0点 -50px  会在原点在负出去。

 

                        

这样写会重叠

                         

 

    可以使，定位居中方式更便捷,

 

 定位居中方式. tranfrom:translate(-50%,-50%)

 

 

 

                   transform（变换） 

                 

                   (属性)：  - translate(x,y)（移动）

                                    缩放scale（2，2）（括号内的数值是倍数） 也可以缩小到0   比1大就是放大，比1小就是缩小。

            

                    《旋转rotate（deg）（deg代表度数） 顺时针（-代表逆时针）

                                       

 t                     ransform-grigin(修改制定的旋转点) 例如（left top）（ 0px 0px ） 就是0点 -50px  会在原点在负出去。

 

移动 translate(x, y) translate 移动平移的意思

缩放 scale(x, y)

 

旋转 rotate(deg)

 

transform-origin可以调整元素转换变形的原点

倾斜 skew(deg, deg)

3D变形(CSS3)transform

rotateX()

就是沿着 x 立体旋转.

rotateY()

沿着y轴进行旋转

 

rotateZ()

沿着z轴进行旋转

 要配合 透视用。

跟缩小效果是有区别的。

透视(perspective)

动画 animation

 

 

          声明动画 @keyframes ; 声明过后可以多次调用， 

 

例子

 

infinite    次数的无穷循环。

 

反方向，是走出去 是否还回到初始点。

   @

    

写三角方法简单方法       

在·    

行内块元素，默认不会等于父和子的高度。

 

定位结构越往后，层级越高。 就近原则

 

小旗子的画法。

 

 

如果给父和子设置宽度和高度的情况下，给子盒子设置margin-bottom盒子不会被撑大，但是下面的内容会被挤出，盒子不会不会

来源：https://www.cnblogs.com/myStudyCareer/p/9563806.html