前端基础笔记(HTML5+CSS)

HTML :

表格 : <table>

<tr> : 表格的一行   <td> : 表格的一列

align : 位置:   center(居中)  lift(左对齐)   

cellspacing : 两个单元格之间的距离： （默认为1）

cellpadding : 单元格内容与其边缘的距离

<thead> 、<tbody> : 标签表示表格的头部和身体部分

rowspan : 跨行合并单元格，写在上侧单元格处 ；用法： rowspan="合并单元格个数"    
colspan : 跨列合并单元格，写在左侧单元格处 ；用法： colspan="合并单元格个数"

列表 (无序、有序、自定义) ：

<ul> ：无序列表 （后只能包含<li>；<li>里可以包含任何标签）序号为：·  去掉前面的 · 使用：list-style: none;
<ol> ：有序列表 （后只能包含<li>；<li>里可以包含任何标签）
<dl> ：自定义列表 （后只能包含<dt> <dd>；<dt>、<dd>里可以包含任何标签）

表单（表单域、表单控件、提示信息）：

<form> ：把范围内的表单元素的信息提交给服务器。其后的属性有 action、method、name；action="url地址"、method="提交方式" 、name="表单域名称"
<input> : 定义输入的属性，用type具体设置——     text ：文本框格式
(在CSS里加上outline: none;)                      password ：密码框格式
                              radio ：圆点框格式（多选一）
                              checkbox ：方形点框格式（多选）
                              label ：点击文字即可选中(优化)
                              select ：下拉显示列表
                              option ：select中的元素，代表列表里每一个选项
                              textarea ：大文本框，用于输入长信息(在CSS里加上resize: none;)
                              submit ：用于提交表单的按钮

CSS :

类选择器口诀：样式 . 定义，结构类(class)调用，一个或多个，开发最常用
id选择器口诀：样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用

字体属性：

font-size：字号；通常单位是px（记得加单位）
font-family：字体；字体通常会指定
font-weight：字体粗细；加粗=700=bold（用700不用bold），不加粗=400=normal（用400不用normal）
font-style：字体样式；倾斜是italic（很少用），不倾斜是normal（常用）
font：字体连写；①、有固定顺序，格式顺序为：font: font-style font-weight font-size(*) font-family(*) ；②、必须含有带*号的 font-size 和 font-family 属性，其余可省略

文本属性：

color：文本颜色
text-align：文本对齐；可设置文字水平对齐方式
text-indent：文本缩进；通常首行缩进两个字的距离（text-indent : 2em）
text-decoration：文本修饰；常用 none(取消下划线) 和 underline(添加下划线)
line-height：行高；控制行与行直接的距离

元素选择器：

    后代选择器：<元素名>  <后代元素名>  {……}
    子元素选择器：<元素名> > <子元素名>  {……}
    并集选择器(喜欢竖着写)：<元素1> , <元素2>  {……}
    链接伪类选择器：
                未访问的链接：a:link
                已访问的链接：a:visited
                鼠标指向的链接：a:hover
                鼠标正在按下的链接：a:active
    :focus 伪类选择器：<元素名> :focus {……}

行内元素(一行可放多个；不能设置宽度和高度)：display：inline
(*)块级元素(一行只能放一个；可以设置宽度和高度)：display：block
(*)行内块元素(一行可放多个；可以设置宽度和高度)：display：inline-block

CSS背景属性：

background-color 背景颜色
background-image 背景图片 格式为：background-image ：url(图片地址)
background-repeat 背景平铺(默认为平铺) 格式为：background-repeat：repeat | no-repeat | repeat-x | repeat-y
background-position 背景图片位置 格式为：background-position top|center|bottom.....(方位名词，存在两个时与顺序无关；一般第一个控制水平方向，第二个控制垂直方向)
综合写法格式(常用)：background：背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置
background: rgba( ,  ,  ,  ) ：背景透明格式，前三个设置颜色，最后一个是透明度

元素的继承：

子元素的格式如果没有指定，按父元素中可使用的格式来规定子元素
special：父元素的行高可设置子元素字体的大小 例：font: 20px/1.5 'Microsoft YaHei'; → 子元素中的字体大小为 设定大小 * 1.5（如果没有单独设定的话，子元素中的字体大小为 20px * 1.5）

优先级：
       选择器                            选择器权重
    继承 或者 *                           0,0,0,0
    元素选择器                           0,0,0,1
    类选择器,伪类选择器            0,0,1,0
    ID选择器                               0,1,0,0
    行内样式 style=""                 1,0,0,0
    !important 重要的                =无穷大

盒子模型：

边框(border)：
  边框线类型：
    实线边框：border-style: solid
    虚线边框：border-style: dashed
    点线边框：border-style: dotted
  边框线大小及颜色：
    上边框：border-top
    下边框：border-bottom
    左边框：border-left
    右边框：border-right
    复合写法：border: 5px 4px 3px 2px; ——分别为上、右、下、左边框线
                     border: 5px 4px 3px;——分别为上边框、左右边框、下边框
                     border: 5px 4px; ——分别为上下边框、左右边框
  设置相邻边框的边框线重合：border-collapse
内边距(padding)：
    一个盒子加上内边距的话会导致宽和高延长，例如：一个盒子宽和高都为100px，加上10px的padding，宽和高都变为120，相当于四条边都扩大了10px，如果想不变，可以改盒子初始的宽和高。
    但是不管在哪里，如果没有指定某个盒子的高度或宽度，则加padding后该盒子大小不会发生变化。
    复合写法(同border的复合写法)：padding: 10px 20px;——上下边距为10px，左右边距为20px.
外边距(margin)：
    上边距：margin-top
    下边距：margin-bottom
    左边距：margin-left
    右边距：margin-right
    复合写法(同border的复合写法)：
        margin: 5px 4px 3px 2px; ——分别为上、右、下、左边距
                     margin: 5px 4px 3px;——分别为上边距、左右边距、下边距
                     margin: 5px 4px; ——分别为上下边距、左右边距
    想让块级盒子水平居中写法：margin: 0 auto；
圆角边框：
    设置元素的外边框圆角：border-radius: ___ ;    
    想得到圆形的话需要对正方形盒子设置 border-radius: ___，横线上的值为此正方形边长的一半
盒子阴影：
    box-shadow:  水平阴影  垂直阴影  模糊距离  阴影尺寸  阴影颜色  外部阴影改内部阴影；
文字阴影：
    text-shadow:  水平阴影  垂直阴影  模糊距离  阴影颜色

浮动：

  浮动的特性(一、二、三)：
      一、 1.脱离标准流的控制并移动到指定位置（脱标）2.浮动的盒子不再保留原先的位置（可能会导致原先的盒子与没有添加浮动的盒子产生重叠现象，因为浮动的盒子不保留原先的位置）
      二、 如果多个盒子都设置的浮动，会按照属性值一行内显示并顶端对齐排列(相邻之间没有缝隙)
      三、 任何元素都可以浮动，不管是什么元素，添加浮动后都具有行内块元素的一些特性
  基本使用方法：为了将多个盒子放在同一行上
  代码为：float: left     左浮动
                float: right   右浮动
清除浮动方法：
    ① 额外标签法：在最后一个子元素后面添加一个额外标签，在其中添加清除浮动样式(不常用)
    ② 添加overflow：给父级添加overflow属性清除浮动。例:  overflow: hidden / auto / scroll
    ③ after伪元素法(给父元素增加类名clearfix)：添加代码如下：
        .clearfix::after {
                        content: "";
                        display: block;
                        height: 0;
                        clear: both;
                        visibility: hidden;
                }
                .clearfix {
                    /* IE6、IE7专用 */
                        *zoom: 1;
                }
    ④ 双伪元素清除浮动(给父元素增加类名clearfix)：代码如下
        .clearfix:before,
                .clearfix:after {
                        content: "";
                        display: table;
                }

                .clearfix:after {
                        clear: both;
                }
                .clearfix {
                        *zoom: 1;
                }

CSS属性书写顺序：

    1.布局定位属性：display(尽量第一个写) / position / float / clear / visibility / overflow
    2.自身属性：width / height / margin / border / background
    3.文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
    4.其他属性(CSS3)：content / cursor / border-radius / box-shadow / text-shadow / ....

定位：

  将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式摆放盒子
定位 = 定位模式① + 边偏移②  
① 定位模式用于指定一个元素在文档中的定位方式。
② 边偏移决定了该元素的最终位置。
定位代码： position : static(静态定位) | relative(相对定位) | absolute(绝对定位) | fixed(固定定位)
边偏移代码：top : 80px | bottom : 80px | left : 80px | right : 80px
相对定位：
  1.相对于自己原来的位置来移动的(参照点是自己原来的位置)
  2.移动后原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它(不脱标，继续保留原来位置)
绝对定位：
  1.如果没有父元素或父元素没有定位，则以浏览器为准定位。
  2.如果祖先元素有定位(相对, 绝对, 固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
  3.绝对定位不占有原先的位置(脱标)。
子绝父相：
  如果子元素要用绝对定位的话，父级要用相对定位
  因为父级需要占有位置，所以用相对定位，子盒子不需要占有位置，则用绝对定位。
固定定位：
  1.以浏览器的可视窗口为参照物——跟父元素没有任何关系；不随滚动条的滚动而滚动
  固定定位小技巧: (目的：固定在版心右侧位置)
      1.让固定定位的盒子 left: 50% 走到版心的一半位置
      2.让固定定位的盒子 margin-left: 版心宽度的一半. 使其多走版心宽度的一半距离就可以完成目的。
粘性定位 (sticky)：
  1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2.粘性定位占有原先的位置(相对定位的特点)
  3.必须添加 top, left, right, bottom 其中一个才有效
定位叠放次序：
  z-index: __;   __上加一个数字
  ① 该数值可以是正整数、负整数或0, 默认是auto, 数值越大, 盒子越靠上。
  ② 如果属性相同，则按照书写顺序，后来居上
  ③ 数字后面不能加单位
  ④ 只有定位的盒子才有 z-index 属性
浮动和定位的区别：
  设置浮动的元素不会压到下面标准流的文字(或图片)，只会压到盒子。
  设置绝对定位的元素会压住下面标准流的所有内容。
网页布局总结：
  1.标准流：可以让盒子上下或者左右排列，垂直的盒子显示就用标准流布局。
  2.浮  动：  可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
  3.定  位：  定位最大的特点就是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局

元素的显示与隐藏：
1.display:
    display: none ;隐藏对象(隐藏元素之后元素的位置也不再占有)
    display: block ;转换为块级元素或显示元素
    
2.visibility:
    visibility: hidden ;隐藏对象(隐藏之后继续占有原先的位置)
    visibility: visiable ;元素可视

3.overflow:(有定位的时候慎用overflow: hidden)
    overflow: hidden ;把盒子内超出盒子部分的内容隐藏
    overflow: scroll ;在元素中显示滚动条
    overflow: auto ;只有在溢出的时候显示滚动条

精灵图：

  目的: 有效地减少了服务器接收和发送请求的次数，提高页面的加载速度
  总结:
  1.精灵图主要针对于小的背景图片使用
  2.主要借助于背景位置来实现 — background-position
  3.一般情况都是负值(X轴右边走是正值，左边走是负值；y轴向下走是正值，向上走是负值)
字体图标(iconfont)：
  展示的是图标，本质属于字体。
  步骤：
    ① 在网页  https://icomoon.io/app/  中找到需要使用的图标
    ② 找全后下载，把压缩包解压，把其中的fonts文件夹复制到网页的根目录里
    ③ 在需要使用的网页中把下载的文件里的css文件的 @font-face 内容复制到页面的style里
    ④ 在 https://icomoon.io/app/#/select/font 中复制需要使用的图像的后方的小图标并粘贴到网页上
    ⑤ 在该元素中声明 font-family: 'icomoon'; 用来显示所要的图标

鼠标样式：
    li {cursor : pointer；}
  设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
    属性值           描述
    default        小白  默认
    pointer           小手
    move           移动
    text           文本
    not-allowed       禁止
 
图片文字垂直居中对齐：
    vertical-align属性，用于设置一个元素的垂直对齐方式，只针对行内元素或者行内块元素有效
    语法：
    vertical-align ：baseline | top | middle | bottom
    baseline：默认，元素放置在父元素的基线上
    top：元素的顶端与行中最高元素的顶端对齐
    middle：此元素放置在父元素的中部
    bottom：把元素的顶端与行中最低的元素的顶端对齐     
  若图片底部出现默认空白缝隙，依旧用vertical-align设置一个非默认值来解决

溢出文字用省略号显示
单行：
   分为三步：
   1.规定格式为必须在同一行显示
         white-space: nowrap ;
   2.规定超出盒子的长度隐藏
         overflow: hidden ;
   3.文字溢出用省略号显示
         text-overflow: ellipsis ;
多行：
    适用于webKit浏览器或移动端(移动端浏览器大多是webKit内核)
    方法：
      overflow: hidden ;
      text-overflow: ellipsis ;
  弹性伸缩盒子模型显示
      display: -webkit-box ;
  限制在一个块元素显示的文本的行数
      -webkit-line-clamp: 2 ;
  设置或检索伸缩盒子对象的子元素的排列方式
      -webkit-box-orient: vertical ;

布局技巧：

  1.margin的负值运用：给需要相邻的盒子加边框线的时候，为了不使相邻的边框线宽度相加， 给每个盒子一个margin: -1px ; 来使相邻的边框线重合。
    如果盒子没有定位，则鼠标经过添加相对定位即可（position: relative）
    如果盒子有定位，则在鼠标经过添加 z-index: 1; 提高层级

  2.文字围绕浮动元素：
  给图片添加浮动后，文字不需要添加东西即可在图片旁边显示，因为浮动原本就是为了用于文字环绕的。

  3.行内块元素的运用：
  如果需要做翻页的页面可以考虑用，在一个盒子里使用 a 并设定为 inline-block，这样各 a 之间会默认有距离，且在修改细节时会比较方便，不需要过多定义。

  4.CSS三角强化的运用：
  在一个盒子中如果要做到斜线效果，则可以在所需盒子中通过border来设置出需要的三角形，如等边三角形、直角三角形等。具体见 CSS三角强化.html 练习页面。

HTML5新增特性：
  1.新增的语义化标签：
  <header>：头部标签；    <nav>：导航标签；    <article>：内容标签
  <section>：定义文档某个区域；    <aside>：侧边栏标签；    <footer>：尾部标签
  注：在IE9中，需要把这些元素转换成块级元素。  

  2.新增的多媒体标签：
  ① 视频<video>: 只支持四种视频格式：MP4(最好用这个)、WebM、Ogg
    格式：<video src="文件地址" controls="controls"> </video>
    考虑兼容的话需加：< video controls="controls" >
                <source src="happy.mp4"  type="audio/mp4" >
                <source src="happy.ogg"  type="audio/ogg" >
                您的浏览器暂不支持  video 元素。
          </video>

  ② 音频<audio>: 支持三种音频格式：MP3(最好用这个)、Wav、Ogg
    格式：<audio src="文件地址" controls="controls"></audio>
    考虑兼容的话需加：< audio controls="controls" >
                <source src="happy.mp3"  type="audio/mpeg" >
                <source src="happy.ogg"  type="audio/ogg" >
                您的浏览器暂不支持  audio 元素。
          </audio>

  3.新增的 input 类型：
    具体类型：看  ”基础班pages\HTML5新增“  里的图片
    新增的表单属性（具体看page中图片）：
        属性           值                             说明
     requlred             requlred             该属性表示内容不为空，必填
  placeholder    用户输入的提示文本           表单的提示信息，存在默认值将不显示
    autofocus           autofocus           自动聚焦属性，页面加载完成自动聚焦到指定表单
  autocomplete          on/off        是否记录已经输入提交的文字，一般用off
      multiple              multiple            可以多选文件提交
    可以通过以下设置来修改placeholder里字体的颜色：
      input::placeholder {
      color : blue;
      }

CSS3的新特性：

    1.CSS3新增选择器：① 属性选择器( [ ] )；② 结构伪类选择器(：)；③ 伪元素选择器( :: )  （三种选择器的权重为10）
        ①：根据元素特定属性来选择元素，可以不用借助于类或者id选择器，选择的属性可以带有值。
        ②：根据排列顺序来选择元素，选择位置顺序时用 nth-child(n)，n可以是数字、关键字或公式，如果直接写成 n ，则表示选中所有孩子。
  nth-child 和 nth-of-type的区别：
    nth-child ：把父类的所有孩子依次排号，不论类型。
    nth-of-type：把父类的指定的孩子类型排号，不同类型的孩子不会排。
        ③(⭐)：利用CSS创建新标签元素，不需要HTML标签。::before、::after
    注：before和after创建一个元素，但属于行内元素；必须要有 content 属性；权重为1
    伪元素清除浮动：具体在同目录文件夹中。

    2.CSS3盒子模型：concent-box(默认)，border-box(新)
        box-sizing : content-box ——默认选项，盒子大小会受 width、padding、border的影响
        box-sizing : border-box ——盒子大小只受 width 的影响

    3.CSS3其他特性：
        ① 图片变模糊：CSS3滤镜 filter：
    filter : blur( 5px )；模糊处理：小括号里数值越大，图像越模糊
        ② calc 函数：
    width: calc(100% - 80px)；作用为子盒子和父盒子的宽度之差固定为80px
    
    4.CSS3的过渡 (★)：谁做过渡给谁加
        transition: 要过渡的属性①  花费时间②  运动曲线③  何时开始④ ；
        ①：想要变化的css属性，宽度高度 背景颜色 内外边距都可。所有都变化的话用 all
        ②：单位是秒 s 必须写单位，如：0.5s
        ③：默认是 ease (可以省略)
        ④：单位是 秒(必须写单位) 可以设置延迟触发时间  默认是 0s (可省略)

补充：
1：块元素想居中对齐，使用margin方法即可；行内元素或者行内块元素想居中对齐，则需要给其父元素添加—— text-align: center；即可。
2：如果想让子元素在父元素中使用外边距，可以在其父元素中设置内边距、边框线或用 overflow: hidden; 来实现。
3：清除内外边距—— * { margin: 0；padding: 0；}
4.在 ul li 里去掉前面的 · 使用：list-style: none;