web前端学习单词积累（上）

align="center"居中    style="color:颜色"
<br>跨行     <h1></h1>一行     <p>段落标签（内容）</p >   <hr >水平线
size 宽度    width 长度
文字效果    文字加粗<b></b>    文字倾斜<i></i> 
 文字下滑线  <u></u>按Tab
删除线 <del></del>  文字放大<big></big>  文字缩小small
文字标签font  设置文字大小  size 1——7和颜色 color
font-size: 18px;  字体大小
font-weight: 100px;  字体宽度
vertical-align: middle  文字单元格实在不行运这个

特殊符号  & 与字符
        <  &lt;    >  &gt;     空格  &nbsp;
 3、滚动标签  marqueefor
      behavior  滚动的方式
       1、scroll  循环滚动 默认
          2、alternate  来回滚动 只能设置左右
3、slide   滚动一次　
   direction  滚动的方向
       up 上 down 下 left 左 right 右
   滚动的速度 
      scrollamount 
   背景颜色 bgcolor
   width 宽
   height 高

4.1 图片标签及属性
       <!--    关键字  img   image 单标签 -->
        属性：
           src  存放图片的路径
        width 设置图片的宽
        height 设置图片的高
         <!-Alt 图片不能正常加载时的提示语句
       <!-- title 图片能正常加载时的提示语句
        border 设置图片的边框
        style="border-color: pink;" 边框颜色
        div   图片居中 把图片放在div中 对div进行居中  
+ 4.2 有序列表及属性
          关键字 ol li   快捷键 ol>li*4
         属性
         type 改变编号类型  数字 大小写英文字母 大小写的罗马文
         start 改变编号起始数字 
         reversed="reversed" 倒序
+ 4.3 无序列表及属性
         关键字 ul li 
         type 改变编号类型  disc 实心圆 circle 空心圆 square 小方块
         
+ 4.4 自定义列表 
      关键字 dl  dt  dd 
      
+ 4.5 超链接标签及属性
        关键字 a
       属性：
       href  跳转的地址
       target="_blank"  新打开一不能给vv、                         个网页
      < a href=" ">置顶</ a>
      点击图片跳转
     --><!-- -->
     表格及属性    关键字 <table></table>
       表格的标题 caption
        行 tr
        单元格 td 
        tr*4>td*3 
        一、表格的属性
        border 表格的边框 1 有 0 无

画⚪ border-radius: 5px;  边框圆角

        width 表格的宽
        height 表格的高
        bordercolor 边框的颜色
        bgcolor  表格的背景颜色
        align   表格的位置
        background  表格的背景图片
        cellspacing  边框的间隙  1 有 0 无
        cellpadding  内容和边框之间的距离
       二、tr的属性
       bgcolor 行的背景颜色
       align center 内容居中
       三、td的属性
       bgcolor 背景颜色
       background 背景图片
       width 宽
       height 高
        单元格的合并
        横向合并 colspan
        纵向合并 rowspan
        表单  关键字       <form></form>
          作用：用来和用户进行交互、从而获取用户的信息
          for 的内容要和id的内容为一致。用户选择标签是。浏览器会自动将焦点转到标签相关的控件上
         <!-- <label fro ="pwd">
                          密码
          </label>
          <input id="pwd" > -->
          action   表单要提交的地址 
          method   发送的方式  get  　post
          placeholder  提示语句        
          maxlength 用户可以输入最多字符
          minlength 用户可以输入最少字符
          required 必填项 如果不写，无法提交
          disabled 是否禁用
          readonly 只读不写
          ·1、文本框   ----- input  type="text"  输入文字
           2、密码框   ----- input  type="password"   输入密码
           3、数字框    ----- input  type="number"    输入数字   checked="true" 默认选中
           4、单选框     ----- input  type="radio"   name  1 
           5、复选框   ----- input  type="checkbox" 
           6、下拉菜单   ----select  option   multiple="multiple" 多选
           7、文件域      ----- input  type="file"
           8、文本域   ------ textarea   就是能写内容的
           9、按钮    ----- input   type="button"  普通按钮
                                   type="reset"  重置按钮
                                     type="submit"  提交按钮
           10、日期  ---- input  type="date" -->0
<!--          网页的三大标准
                         html   页面的内容/布局
                         css    样式
                         js     行为/动作
             今日内容：
             css  
            一、定义： 层叠样式表
            二、作用：
                1、 定义如何显示html元素   
                2、 样式必须写在样式表里   style 
                3、 外部样式效率最高
                4、外部样式必须写在以.css结尾的文件中
                  style=" 属性:值;属性:值;属性:值;属性:值;"
            三、引入方式
                   优先级    就近原则
                   行内>内嵌>外部
                1、行内式
                   直接在html标签里写style
                2、内嵌式
                步骤：
                1、在头部标签里写一个style
                2、在style里写html标签{
                   属性:值;属性:值;属性:值;属性:值;
                   }
                3、外部式
                步骤：  
                1、新建一个.css结尾的文件
                2、在css文件中 设置样式
                   html标签{
                   属性:值;属性:值;属性:值;属性:值;
                   } 
                3、在html文件中用link中的href属性引入css文件（注意保存） 
                4、直接使用html标签
                
               四、div/span
                   div  ---盒子标签  有固定的大小  主要用于页面的布局  块级元素 独占一行 会自动换行
                   span  没有固定大小 根据内容的变化而改变   行内元素  不会自动换行
               五、属性
                1、像素单位 px 
                2、百分比单位  
                        前提：必须在嵌套标签中使用
                3、背景色
                  1、常见的颜色 red yellow 　blue green purple 
                  2、十六进制颜色 
                  3、rbg颜色 (255,0,0)
                4、背景样式
                  1、背景颜色     background-color
                  2、背景图片     background-image
                      用法：    background-image:url(图片路径)
                3、背景平铺方式 background-repeat
                 四种：
                  1、默认repeat    平铺
                  2、no-repeat    不平铺
                  3、repeat-x     x轴平铺  水平方向
                  4、repeat-y     y轴平铺  垂直方向
                     
                4、背景图片的位置 background-position
                           用法：background-position:x轴 y轴;
                            x轴 左 left 中 center 右 right
                            y轴 上 top 中  center 下 bottom 
                       两种写法：
                               1、background-position:100px 100px;
                               2、background-position:left bottom;
                          注意：
                              只写 left/right  默认 y轴是center
                              只写 top/bottom  默认 x轴是center
                5、背景图片的滚动方式 
                               用法：background-attachment:滚动方式
                      滚动方式有两种：
                                   scroll    会随页面滚动
                                   fixed   将图片固定在原来位置 不会随页面滚动
                
               <!-- -->css样式：
                  1、背景样式
                  2、边框样式  border
                       1、边框的颜色   border-color
                                  1、关键字颜色 2、十六进制颜色 3、rgb 颜色
                    2、边框的大小   border-width
                                  1、值
                    3、边框的样式   border-style 
                                  1、solid  实现 2、dashed  虚线 3、dotted 点线
                    4、复合写法  border:颜色 样式 大小  
                    5、设置一个边框线
                                border-top
                       border-bottom
                       
                       
                       
                       border-left
                       border-right 
                  3、文字样式 
                           1、color 字体颜色  
                              1、关键字颜色 2、十六进制颜色 3、rgb 颜色
                        2、font-size  字体大小 
                              1、关键字  xx-small x-small small medium large x-large xx-large
                        2、像素单位
                     3、font-weight 字体的粗细
                              1、关键字 normal 400  lighter bold 700  bolder 
                        2、数值 100-900
                     4、font-style 字体样式
                               1、正常 normal
                         2、斜体 itailc 
                        5、font-famliy 字体类型 
                     
                     6、复合写法：先写样式、粗细、大小、类型
                  4、段落样式
                    1、 text-decoration  文本装饰
                           1、underline 下划线
                        2、line-through 删除线
                        3、overline 顶划线
                        4、blink  　文本闪烁
                     2、text-transform  设置文本大小写
                       1、uppercase  小--大
                       2、lowercase 大 --小a
                       3、capitalize 首字母大写
                     3、text-indent  文本缩进  
                         1、一定要设置字体大小
                      2、单位用em 一般缩进都是2em
                     4、text-align 文本对齐方式
                          1、左对齐 left
                       2、右对齐 right
                       3、居中对齐 center
                       4、左右对齐 justify
                    5、line-height  行高 
                           1、写固定的值
                    6.letter-spacing  字间距
                        1、写固定的值
                    7.word-spacing 词间距
<!--                         以空格为基准
                        css  ---- 层叠样式表
                           一、css的引入方式
                           优先级 --就近原则 
                           样式一定要放在样式表中
                           1、行内
                              直接在html标签中 用style
                           2、嵌入
                               1、在头部标签 写style
                            2、在style标签里写 html标签 {
                               属性:值;属性:值;属性:值;
                            }
                            3、在body中使用html文档中使用
                           3、外部
                                1、先新建一个css文件
                             2、在css文件中 写 html标签 {
                               属性:值;属性:值;属性:值;
                            }
                               3、在html文档中使用link中的href引入css文件
                            4、在html文档中使用html文档中使用
                           二、css的选择器
                           1、id选择器
                               定义： 在style里  用 #选择器名称{属性:值;属性:值;属性:值;}
                            调用： 在标签里 用id="选择器名称"调用
                           2、class选择器
                             定义： 在style里  用 .选择器名称{属性:值;属性:值;属性:值;}
                             调用： 在标签里 用class="选择器名称"调用
                           
                           3、tag选择器/标签
                           4、通配符选择器 -->
                           
              今日内容：
                             css  ---- 层叠样式表
                              一、css的引入方式
                              优先级 --就近原则 
                              样式一定要放在样式表中
                              1、行内
                                 直接在html标签中 用style
                              2、嵌入
                                  1、在头部标签 写style
                               2、在style标签里写 html标签 {
                                  属性:值;属性:值;属性:值;
                               }
                               3、在body中使用html文档中使用
                              3、外部
                                   1、先新建一个css文件
                                2、在css文件中 写 html标签 {
                                  属性:值;属性:值;属性:值;
                               }
                                  3、在html文档中使用link中的href引入css文件
                               4、在html文档中使用html文档中使用
                              二、css的选择器
                              1、id选择器
                                  定义： 在style里  用 #选择器名称{属性:值;属性:值;属性:值;}
                               调用： 在标签里 用id="选择器名称"调用
                              2、class选择器
                                定义： 在style里  用 .选择器名称{属性:值;属性:值;属性:值;}
                                调用： 在标签里 用class="选择器名称"调用
                              
                              3、tag选择器/标签
                                 
                              直接在标签里写样式 
                              把标签作为选择器
                               等同于 嵌入式
                              
                              
                              4、通配符选择器
                                 没有设置样式的html标签 默认使用通配符选择器的样式
                                  *{
                               属性:值;属性:值;属性:值; 
                               }
                              
                              5、分组选择器
                                   p,h6,div{
                                 属性:值;属性:值;属性:值; 
                                }
                              
                              6、伪类选择器
                               用 : 来设置
                                 对a标签设置 
                              1、link 未访问时
                              2、hover 鼠标滑过时的样式
                              3、active 鼠标点击时
                              4、visited 访问后的样式
                                  
                               link 和 visited 只适用于a标签
                                  hover 和 active 适用于所有
                              
                              
                              7、包含选择器  
                                 ul li{
                               属性:值;属性:值;属性:值; 
                              }
                              ol li
                              dl dt/dd
                              tr td 
                              今日内容
                                 一、盒子模型   ----- div
                                    1、padding  内边距  内容与边框的距离 
                                    上边框 padding-top
                                    下边框 padding-bottom
                                    左边框 padding-left
                                    右边框 padding-right 
                                    复合写法：
                                    1、padding:20px 40px 80px 120px
                                    padding:上 右 下 左
                                    2、padding：40px 100px
                                    padding:上下 左右
                                    3、padding:80px
                                    padding:上下左右  --- 居中
                                 2、margin  外边距   盒子与盒子之间的距离
                                  上边距 margin-top 
                                  下边距 margin-bottom
                                  左边距 margin-left
                                  右边距 margin-right
                                     复合写法：
                                     1、margin:20px 40px 80px 120px
                                     margin:上 右 下 左
                                     2、margin：40px 100px
                                     margin:上下 左右
                                     3、margin:80px
                                     margin:上下左右  --- 居中
                                  
                                 margin叠加问题 
                                    当上下两个盒子需要设置上下边距时、只能设置一个样式 margin-top/margin-bottom
                                    不能设置两个、否则会取最大值
                                    
                                 margin传递问题 
                                 在div嵌套中会出现
                                 如何解决：对父类盒子设置溢出属性
                                 overflow: hidden;
                                  
                                 二、块与内联 
                                     块级元素   自动换行  div p h1 ul li ol dl   设置宽高、样式
                                  行内元素   不会自动换行  font a b img i u big small  不能设置宽高、样式
                                  
                                  改变类型
                                   行内---块级 display:block
                                   块级---行内 display:inline
                                 
                               <!-- 
                                 今日内容
  margin padding 定位 浮动 
  作用：改变盒子的位置 从而实现页面的布局 
  一、定位  position 
     方位：top bottom left right 
     方法： 
      1、静态定位(默认的位置) static
      2、固定定位  fixed
         参照物：整个页面
      3、相对定位  relative
         参照物：自己原有位置
      4、绝对定位  absolute 
            子绝父相x
  二、浮动  float 
      方法：
       left 
    right
    none 
   清除浮动： clear:浮动方式
   /* 高度塌陷
       1、给父级一个固定的高度
           优点：简单，代码少，容易掌握
           缺点：只是个高度固定的布局，要给一个精确的高度。如果高度和父级的div不一样的时候，会产生问题，对于响应式布局会有很大的影响
           
       2、利用清除浮动。在便签的尾部加一个空的div，然后写一个clear：both
         这样父级就可以自动获取高度。
         优点：简单，代码少，浏览器支持的好。不容易出现问题
         缺点：页面浮动布局多的时候，就会增加很多空的div，不利用页面的优化
         
       3、before和after 他们都是行内元素。需要转成块级元素   content:''  哪怕写空，也不能不写  zoom要配合visibility：hidden去使用
           是为了适配我们的i6 ie8和其他浏览器是支持:after 
           优点：浏览器支持好，不容易出现问题，写法也是固定 简单边界，只需要写一个class名即可
           缺点：css代码多。初学者理解起来很困难。要解决浏览器的兼容需要overflow: hidden;和zoom：1配合着使用
           
        4. 、overflow:hidden 触发了浏览器的bfc机制
                overflow:hidden 是超出该元素的部分进行隐藏，这个时候就需要明确一点，该元素的高度如何定义，当一个div中的两个元素浮动之后，
                此时的div高度就会塌陷高度为0，那是不是意味着就要将浮动的元素隐藏起来，如果真的隐藏就是反布局常识，会触发我们的bfc机制
    12
    
                
                作用：独立的块级上下文包裹浮动流，所有的子元素浮动以后也不会引起容器高度000坍塌，父级会自动计算所有子元素的高度
            8    优点：简单，代码少
                缺点：不能和定0位配合使用，因为超出的尺寸会被隐藏
       //例0子000
    .clearfix::after{
            display: block;
            
            clear: both;
            overflow: hidden; 
        }
        .clearfix{
            zoom: 1;
        }
         
    </style>
    <body >
        <div class="clearfix">
            <div class="box-1"></div>
            <div class="box-2"></div>
            <span style="clear: both;"></span>
        </div>
        <div class="box">
            
        </div>
        
        
    
      一、对块级元素设置浮动 
      第一个元素是块级元素、 第二个元素是块级元素
       对第一个元素设置浮动、第二个元素不浮动：第一个元素失+位置、第二元素顶替它的位置
         对第一个元素设置浮动、第二个元素也浮动：并排显示p
      二、对行内元素设置浮动
      第一个元素是行内元素、 第二个元素是行内元素
      对第一个元素设置浮动、第二个元素不浮动：行内元素变成块级恢复宽高、第二个元素紧跟第一个元素
      对第一个元素设置浮动、第二个元素也浮动：并排显示
   三、对行内元素、块级设置浮动
      第一个元素是块级元素、 第二个元素是行内元素
      对第一个元素设置浮动、第二个元素不浮动：第二个元素紧跟第一个元素
      对第一个元素设置浮动、第二个元素也浮动：并排显示 -->
 
    今日内容 
    一、默认样式
      1、浏览器调试工具
        右键--检查
     快捷键 f12 
      2、默认样式
         html标签中有默认样式的：p  a  h1  ol li ul dl dt dd 
      html标签中没有默认样式的：span  div 
      3、重置样式
          p,h1,ol,li,ul,dl,dt,dd {margin:0;padding:0}
       a{text-decoration:none}
      4、图片默认样式
        图片和文字的对齐方式
     vertical-align: bottom; 和文字底部对齐
     vertical-align: top; 和文字顶部对齐
     vertical-align: middle; 和文字中间对齐
    二、其他样式
      1、如何显示元素
         块级  block
      行内  inline
      隐藏  none
      既有行内的特点又有块级的特点 inline-block
      2、溢出隐藏
      white-space:nowrap;  强制不折行
      text-overflow:ellipsis;溢出文本省略号
         overflow: hidden;  阻止溢出、多的内容不显示
      overflow: scroll;  滑动显示多余内容
      overflow: auto;   自动判断内容多少、内容溢出自动滑动显示多余内容
      
      设置省略号
    3.  //设置弹性盒子
      、 -webkit-line-clamp: 4;
      //设置盒子排列属性
          -webkit-box-orient: vertical;
      
      3、透明度
        对盒子设置透明度
         opacity: 0/1/0.5;
      0 是透明 1是正常 0.5 半透明 
     对盒子的背景颜色设置透明度
     
     background-color: rgba(255,255,0,0/1/0.5);
    三、标签规范
       1、嵌套问题
          1、固定嵌套
       ul>li  ol>li  tr>td dl>dt/dd table>caption 
       2、限制嵌套
       块级元素可以嵌套行内元素
       行内元素不可以嵌套块级元素
       2、格式问题 
           1、双标签必须闭合处理
        2、单标签不必用 / 结束
        3、属性必须使用双引号
        4、属性和标签必须小写
        5、html文档必须添加文档说明
  
    <!-- 
      今日内容：
        一、css扩展
           1、css雪碧
           是用来将很多个小图标放到一个大背景图上的
        目的：减少http请求、实现css优化
        2、最大、最小宽高
           max-height  盒子最大的高度  
        max-width   盒子最大的宽度
        
        min-height  盒子最小的高度  
        min-width   盒子最小的宽度
        3、添加省略号
           overflow: hidden;  /* 防止内容溢出 */
           white-space: nowrap;  /* 阻止换行 */
           text-overflow: ellipsis; /* 省略号 */
           4、css表格
           去除表格和边框之间的空隙  border-collapse: collapse;
              
     
       -->
                    一、元素屏幕居中
                        1、对块级元素设置居中
                          margin:16px auto;
                          auto 自适应左右边距
                        2、对行内元素设置居中
                           设置父类居中  text-align: center;
                       二、分页
                            用到的知识点： 
                                  1、a  超链接
                            2、hover 鼠标滑过时的样式
                                 背景颜色
                              字体颜色
                            3、border 边框 
                            4、&lt; 小于号  &gt; 大于号 
                            5、重置样式  
                            6、padding  内容和边框之间的距离
                               margin   边框和边框之间的距离
                       三、三角形
                               用到的知识点： 
                              1、盒子 div
                           2、对盒子边框的设置
                              
                       四、上传按钮
                              用到的知识点：
                                     1、input
                            2、背景图片属性
                            3、定位
                            4、透明度
                            5、z-index 叠加顺序
                            6、阻止内容溢出
                       五、分页卡
                       <!-- 选项卡步骤：
                              1、html中内容 由 无序列表(ul>li*x)中嵌套 a 和 div 组成
                              2、在css中先清除所有样式(
                              
                              *{margin(内边距): 0px;
                                 padding（外边距）: 0px;}
                                  a{text-decoration: none;（取下a的下划线）color: darkblue;})
                           3、:after 伪类选择器 作用：在标签后添加内容  里面content:""
                              clear:both不允许有浮动对象     display: block;行内转块级）
                              类选择器:after{content:"",display:block;clear:both}
                           4、对ul设置  居中 宽度 边框 
                           5、对 ul li设置  设置宽度 浮动
                           6、对 ul li a 设置样式  宽度 边框 改变元素类型 居中  行高
                           7、设置鼠标滑过时的样式  :hover
                           8、对 ul li div  要隐藏    宽 边框 隐藏 定位  子绝父相 top：50  left：0
                           9、滑过li是 把隐藏的div显示  display:block
                          -->
              
                    audio 音频
                    controls 显示音频控件，如果出现该属性，则像用户展示控件，比如播放按钮
                    autoplay 如果出现该属性，视频在就绪后马上播放
                    muted  静音
                    loop 循环播放
                    
                    video 视频
                    controls 显示音频控件，如果出现该属性，则像用户展示控件，比如播放按钮
                    autoplay 如果出现该属性，视频在就绪后马上播放
                    muted  静音
                    loop 循环播放
                    poster 海报
                    
                    
                    //隐藏文本框
                1.    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    
                2.    overflow: hidden;
                    text-overflow: ellipsis;
                     white-space: nowrap;