瞧一瞧看一看：新手小白写Web前端博客

最新推荐文章于 2024-06-30 14:19:03 发布

DaςPe

最新推荐文章于 2024-06-30 14:19:03 发布

阅读量405

点赞数 1

分类专栏： Web前端笔记文章标签： webpack

本文链接：https://blog.csdn.net/lovelmj123/article/details/127573502

版权

Web前端笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

二序

2.1 表格标签

   2.1.1  <table> : 表格的最外面容器
          <tr>  :  定义表格行
         <th>  :  定义表头
         <td>  :  定义表格标题
  注：之前是有嵌套关系的，要符合嵌套规范。
  语义化标签：tHead、tBody、tfood
  align : left、center、right
  valign: top、middle、bottom

2.2 表格属性

   2.2.1    border  :  表格边框
            cellpadding  :  单元格内的空间
            cellspacing  :  单元格之间的空间
            rowspan   :  合并行
            colspan   :  合并列
            aling   :  左右对齐方式
            valign  :  上下对齐方式

2.3 表单标签

2.3.1 form、input、textarea  select  label ...
           input(单标签）标签有一个type属性，决定是什么控件。
           还有一些常见属性：checked. disabled. named. for.....

请添加图片描述

2.4 表格表单组合使用

请添加图片描述

2.5 div和 span

 div : 做一个区域划分的块
 span : 对文字进行修饰内联

请添加图片描述

2.6 CSS基础语法

2.6.1   选择器{属性1 ： 值1；属性2 ：值2}
   width   weight  background-color : 背景色
   长度单位  ： 1.px  -> 像素
               2.%  -> 百分比
               外容器  -> 600px  当前容器  50% -> 300px

请添加图片描述

2.7 CSS样式的引入方式

请添加图片描述
区别：内部样式的代码可以复用，复合w3c的规范标准，进行让结构和样式分开处理。

请添加图片描述

2.7.2 外部样式
引入一个单独的CSS文件，name. css
通过link 标签引入外部资源，rel属性指定资源跟页面的关系，href属性指资源的地址。
通过@import方式引入外部样式（这种方式有很多问题，不建议使用）

2.8 CSS 中颜色的表示方法

 2.8.1    1.单词表示法 ： red  blue   green  yell....
         2. 十六进制表示法  ： #000000   #fffffff
         3. rgb三原色表示法  ： rgb(255.255.255)取值范围  0~255
         提取颜色的下载地址  ： https://www.baidufe.com/fehelper

2.9 CSS背景样式

 2.9.1   background-color   背景色
         background-image    背景图
         url(背景地址）
         默认： 会水平垂直都铺满背景图
         background-repeat  平铺方式
            repeat-x   x轴平铺
            repeat-y    y轴平铺
            repeat  (x ，y  都进行平铺，默认值）
            no-repeat    都不平铺
       background-position   :  背景位置
             xy :number  单词
                   x:  left   center   right  
                   y : top  center  bottom    
       background-attachment  : 背景图随滚动条移动的方式
             scroll  :  默认值 （  背景位置是按照当前元素进行偏移的 ）
             fixed  :  (背景图是按照浏览器进行偏移的  ）

请添加图片描述

2.9 CSS边框样式

  2.9.1  border-style  : 边框样式
          solid : 实线
          dashed  : 虚线
          dotter  :  点线
       border-width  : 边框大小
           px ...
       border-color  :  边框颜色
          red .....
    边框也可以针对某一边进行设置  : border-left-style
    颜色：透明颜色   transparent

请添加图片描述

2.10 CSS文字样式

 2.10.1   font-family  : 字体类型 
                    英文，中文
                    衬体线，非衬体线
                    注意点  ： 1. 多个字体类型的设置（可以让电脑识别）
                              2. 引号的添加的目的（字体名称中间有空格要加引号）

请添加图片描述

2.10.2 letter-spacing : 字之间的间距
word-spacing : 词之间的间距（针对英文段落的）

        英文和数字不自动折行的问题 ：
           1.word-break   : break-all  ;(非常强烈的折行）
           2.word-wrap  : break-word;(不是那么强烈的折行，会产生一些空白区域）

2.11 CSS复合样式

  2.11.1  复合的写法，是通过空格的方式实现的，复合写法有的是不需要关心顺序的，例如： background. border  ;有的是需要关心顺序的，例如： font。
         1.background  :red  url()  repeat  0 0;
         2.border   : 1px  red  solid ;
         3.font   ： 
                    注：最少要有两个值   size  family   
                      weight  style   size  family
                      style  weight   size   family
                      weight  sty;e  size/line-height   family
                  注 ： 如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

请添加图片描述

2.12 CSS选择器

     #elem{}      id="elem"
     注：
     1.  ID  是唯一的值，在一个页面中只能出现一次，出现多次是不符合规范的。
     2. 命名的规范，由字母，下划线，中划线，字母（并且第一个不能是数字）
     3. 驼峰写法  : seachButton  （小驼峰）   SeachButton  (大驼峰）  seachSmallButton
     4. 短线写法  ： seach-small-button
     5. 下划线写法  ： seach_small_button

请添加图片描述