前端小白认真学习

等风花雪月

已于 2022-09-07 08:05:40 修改

阅读量214

点赞数 1

文章标签： safari 前端

于 2022-09-07 07:30:37 首次发布

本文链接：https://blog.csdn.net/weixin_56823534/article/details/126737382

版权

本文详细介绍了HTML、CSS的基础知识，包括标签结构、属性、样式表、表格、表单、浮动与定位原理，以及浏览器兼容性和网页布局策略。重点讲解了HTML5的新特性、CSS的选择器、盒模型、浮动与定位，以及BFC和IFC的概念。内容涵盖网页元素的语义化、文件目录命名规范和前端开发的最佳实践。

摘要由CSDN通过智能技术生成

1.W3C 标准由结构，表现，行为三部分组成
  W3C的嵌套规范：
  1）块级元素可以包含行级元素或块级元素，但行级元素只能包含行级元素;
  2) p,h1-h6,dt标签中只能包含行级标签，不能再包含块级标签;
  3）块级元素与块级元素并列，行级与行级并列。|
2.项目开发时，项目文件和目录名中不能出汉字和空格之类的其他符号，文件和目录名一般以字母或下划线开头_
  目录名：taobaopro imahes/img/pic  video music file web/sites...
  文件名：index.html(首页)  product.html(产品页)  order.thml(订单页)
  全部小写可加下划线
  文件和目录名一般以字母或下划线开头_，其后可以出现字母，数字，下划线。。。
1.HTML是一种超文木标记语言，它不属于编程语言。
2.HTML5是2014后推出的，它是公认的下一代web语言，是重要的网络推手。
3.HTML具有简易性、可扩展性、平台无关性和通用性等特点。
4.网页分为静态和动态两种。
5.五大主流浏览器:IE(Edge), FireFox,Chrome,Opera, safari6.浏览器内核由渲染引擎和JS引擎两部分组成。
内核:Trident(IE), Gecko(FireFox), Webkit(safari/chrome),Blink(chrome/opera)国内大多数浏览器采用的双核驱动(Trident&Webkit或Trident&Blink>
移动端: iphoe/ipad采用的是webkit内核，android4.4以下版木采用的webkit内核，而4.4以上:版本采用是blink内核。
7.常用的专业开发工具有: sublime,HBuilder, vscode,Atom, Webstorm
8.一个网页页面基本组成:
  <html>
  <head></head>
  <body></body>
  </html>
9.标签分块级和行级（内联）两种。
  块级独占一行，识别宽高，如果不设置，宽度为整行宽度，高度为内容实际的高度;
  行级不独占一行，不能设置宽高，宽高分别为内容实际的宽高;
  块级标签可以通过设置样式: display:inline;转换为行级标签，而行级标签可以通过设置样式: display:block;转换为块级标签

  学过的块级标签有：
  div,p,h1-h6,ul,ol,pre,table,address等
  行级标签：
  span,a,b,strong,i,em,sup,sub

  img属于行级块标签。相当于执行了display:online-block;操作。
10.在开发过程中，尽量要使用语义化标签。

day2

标签签名，标签属性和文本三部分组成（注意：单标签没有文本内容）
2.标签属性是对标签的一种描述方式。
3.标签属性分通用属性，自有属性和自定义属性。
4.通用标签：所有标签都有的属性（除<br/>标签外）。
  通用标签有：
  id:用来给标签取一个唯一的名称。id名称在一个网页中必须是唯一的
  class:用来给标签取一个类名。
  style:用来设置标签的行内样式。
  title:当鼠标移到该标签，所显示的提示内容。
5.用户自定义标签属性：通常用来传值或图片的懒加载等方面。
  格式：data-*(*表示任意的，通常是个单词)
  <img data-src="图片路径" alt="提示文字" />
  <p data-id="goodsid">...</p>
6.table表格，主要用于呈现格式化数据。 表格是由行和列组成。
    格式<table>
        <tr>               行
            <th></th>表头  :th表头的意思 自动居中 加粗 起说明作用。
            <td></td>表体   列
            ...
        </tr>              行
        ...
        </table>
7.table表格属性:
  border:设置表格边框
  width :设置表格宽度
  align:设置表格对齐(left(默认)/center/right)
  cellpadding:设置单元格文本与边框的距离
  cellspacing:设置单元格边框的间距
8.跨行/跨列属性主要用来绘制复杂表格。还得删减！
  rowspan:跨行
  clospan:跨列
  table[border=1 with=500 align=center]>tr*3>td{内容区$$}*3
  valign:垂直对齐（top/middle/bottom）
9.完整表格组成：caption（标题）、thead（表头）、tbody（表体）、和tfoot（表尾）四部分组成。
10.form表单标签是所有标签最核心标签之一。他是实现前后段交互的一个重要标签。
 常用属性：
     name:表单名称
     action:表单数据提交的地方（通常是一个后台文件名（.jsp/.php/.asp/.aspx/.py等）/网址）。如果是#，表示提交到的当前文件下。
     method:前端提交数据到后端的方法,主要有：get（提交的数据会暴露）和post（提交的数据不会暴露）,默认的是get.
11.表单元素分为：
   1>input类（标签）:主要用来输入，选择或发出指令。
       type:text/password/radio/checkbox/file/button/image/submit/reset
      a.text:单行文本输入框 type=“text”可以不写默认值。
       属性：placeholder（提示）、name（命名）、value（初值）、minlength和maxlength（最少、最多输入的字符个数）、disabled（失效）、readonly（只读）
            pattern（正则匹配）、
      b.password:密码框 属性与text一样
      c.radio:单选钮，通常是两项以上。常用的属性有：name（必须要有）、value/checked（默认选中）、disabled（失效）、readonly（只读）
      d.checkbox:复选框，可以用来选择0项、1项或多项。常用的属性有：name（必须要有）value/checked（默认选中）、disabled（失效）、readonly（只读）
      e.file:文件上传按钮
      f.button:普通按钮 发送指令 通常用它去执行脚本代码，它有提交功能和submit功能一样。 常用的属性有：value（按钮的标题）、disabled（失效）
      g.image:图片按钮 用法和button完全一样。有一个特殊属性src（用来加载提示图片，用它替换了value）
      h.submit:提交按钮，用来将表单数据提交到后台。 常用属性：value（按钮的标题）、disabled（失效）
      j.reset:重置按钮，将表单所有组件输入的内容全部清空还原为初始状态。 常用属性：value（按钮的标题）、disabled（失效）
       <input type="text" name="test" placeholder="请输入一行文字" disabled="disabled"><br>
     <input type="text"/> 定义供文本输入的单行输入字段
     <input type="password"/> 定义密码字段
     <input type="submit"/> 定义提交表单数据至表单处理程序的按钮
     <input type="image"/> 定义图片提交按钮
     <input type="radio"> 定义单选按钮
         checked{boolean} 属性为选中状态,true为选,false为未选中
     <input type="checkbox"> 定义复选框
         checked{boolean} 属性为选中状态,true为选,false为未选中
     <input type="button"> 定义普通按钮
     <input type="reset"> 定义重置按钮
     <input type="file"> 定义文件框
   2>textarea类
       文本域（也可以叫多行文本框），主要用于输入大批量的内容。
       常用属性：name/id/cols列数/rows行数/placeholder/minlength/maxlength/required（必须输入）/value
   3>select类
      下拉列表框，默认用于下拉列表框。用option呈现每一个选项。
      multiple属性：表示可以实现多选，这时的下拉列表框变成了列表框。
      size:最多显示的行数
   4>button类
      普通按钮，具有提交功能，可以单独使用，不写在form元素中；如果写在form中有提交功能。
12.iframe:框架集，是用来将多个网页文件组合成一个文件
      常用属性：
      name属性∶规定框架的名称。 框架名
      src属性︰规定在框架中显示的文档的URL。 引入的外部的html文件
      scrolling属性∶设置滚动条。 滚动条（yes/no/anto(内容超过自动加滚动条)）
      width属性: iframe设置宽度。 （%/px）
      height属性: iframe设置高度。 （%/px）
      frameborde江属性:设置框架边框。是否有边框（1/0）
      marginheiht:框架离顶部和底部的距离 （%/px）
      marginwidth:框架离左右的距离 （%/px）
      注意：
          在实际开发中尽量减少使用iframe,因为破坏了前进和后退功能，且不利于SEO（搜索引擎优化）
          div布局也可以是实现相同的效果。

day3

1.CSS层叠样式表，美化网页:使用CSS可以让结构HTML与表现CSS分离。
2.CSS基本语法：选择器 {
                    属性：属性值;
                   }
3....css的引用方式：行间样式、内部样式、外部样式、导入外部样式。
     行间样式：直接在标签上写样式
     内部样式：在文件内部书写样式
            <style type=“text/css”>
                样式内容
            </style>
     外部样式：<1>先创建一个CSS文件； <2>再用link标签引入这个文件，link:css+tab。
     导入外部样式：<1>先创建一个css文件； <2>在style标签中用@import导入这个样式文件。

     以上四种CSS引用方式的区别：
     行间样式只作用当前标签，而内部样式作用于当前文件，外部文件可以被多个html文件引用。
     在实际项目开发中最多使用外部样式！
     外部样式分为link引入和import引入两种方式。

     1.link是XHTML标签，除了加载css外，还可以定义RSs等其他事务;@import属于CSs范畴，只能加载css。
     2>link引用css时，在页面载入时同时加载;@import需要页面网页完全载入以后加载。
     3.link是XHTMIL标签，无兼容问题;@import是在CSS2.1提出的，低版本的浏览器不支持。
     4>link支持使用Javascript控制DoM去改变样式;而@import不支持。
4....CSS选择器分类：
     1.*：匹配html中所有元素。（注意*号 的性能比较差因为它要匹配所有元素，所以在开发时不建议使用）
     2.标签选择器：用来匹配所对应的标签。
     3.类选择器：用来匹配class命名的标签。 .类名
     4.id选择器：用id命名的标签。 id必须唯一不允许重复出现 #id
     5.派出选择器：根据上下文来确定选择的标签
     6.伪类选择器：（后面说）
     7.伪元素选择器
5.选择器的分组
     让多个选择器（元素）具有相同的样式，一般用于设置公共样式。
6.选择器的继承
     子元素可以继承父元素的样式，反之不可以。
7....样式权重
     ！important(10000)>内联样式(1000)>id选择器(100)>类、伪类和伪元素选择器(10)>标签选择器(1)
8....CSS字体
     1.font-size; 字号 px像素，%相对于父元素的大小
     2.font-family; 字体
     3.font-style; 样式 normal正常 italic斜体 oblique倾斜的字体
     4.font-weight; 加粗 normal正常 bold粗体 bolder比bold粗 ,lighter比normal细 {100-900}定义由粗到细的字符
     5.font-height; 行高 字体最低端与字体内部顶端之间的距离
     6.color: 文字的颜色 name rgb(r>0-255 g>0-255 b>0-255) 16进制写(以#号开头，后跟6位（#rrggbb）或3位（#rgb）16进制数)
     7.text-decoration; 文字修饰 normal正常 underline下划线 line-through贯穿线 overline上划线
     8.text-align; 文本对齐方式 left center right
     9.text-transform; 字母大小写 none默认 capitalize将每一个单词的第一个字母转换成大写 uppercase转换成大写 lowercase转换成小写
     10.text-indent; 文体缩进 首行缩进{number+px}字符 {number+em}像素

     tip:font复合属性：
         font:font-style font-variant font-weight font-size/line-height font-family;
         注意属性值的位置顺序，按照顺序去写。
         除了font-size和font-family之外，其他任何一个属性值都可以省略。
         font-variant:文本修饰 normal/small-caps(让大写字母变得小一些)/
9....CSS背景
     1.background-color:背景色（transparent/color）
     2.background-image:背景图（none/url）
     3.background-position:背景图像铺排方式（repeat/no-repeat/repeat-x/repeat-y）
     4.background-position:设置对象的背景图像位置（x-number/top/center/bottom）（y-number/left/center/right）
     5.background-attachment:背景图像滚动位置（scroll/fixed）
     6.background:设置背景的复合写法。
       background:color image repeat attachment position
       body{background: #fff url("beijing/222.jsp") no-repeat fixed center center}
10....CSS伪类选择器
   伪类：专门用来表示元素的一种特殊状态。
   常用的伪类选择器：
   1. a标签的伪类：
      a:visited:已被访问的状态。
      a:link:未访问状态
      a:hover:鼠标悬停状态。
      a:active:用户激活。
   2.focus 获得焦点(input鼠标点击单选框 单选框变颜色)
   3.first-child（第一个）/:last-child（最后一个）/:nth-child(number )(第number个)
11.属性选择器（用的较少）
   [属性名]:包含有指定属性名的元素（常用）
   [属性名=值]:属性名的值为指定值的元素（常用）
   [属性名~=值]:属性名的值包含指定值的元素
   [属性名^=值]:属性名的值以指定值的开头的元素
   [属性名$=值]:属性名的值以指定值的结尾的元素
12....关系选择器
   a.空格：后代选择器
   b.>:只选择儿子元素
   c.+:兄弟选择
13....CSS伪元素
   1>CSS伪元素和伪类的区别：
   css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。
   伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
   它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
   伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
   2>伪元素&伪类的特点:
   伪元素和伪类都不会出现在源文档或者文档树中
   伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
   伪元素名和伪类名都是大小写不敏感的
   有些伪类是互斥的，而其它的可以同时用在一个元素上。(在规则冲突的情况下，常规层叠顺序决定结果）。
   3>before/:afeter/:first-letter/:frest-line:前面可以是1个冒号也可以是双冒号
   ::selection/::placeholder/::backdrop:前面只能是双冒号

day4

1.什么是浮动？
  浮动就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。
  float:
  left/right/none（默认，不浮动）/inherit（从父元素上继承float值）
  .box
2.浮动的原理：就是让元素脱离文档流，不占用标准流。
3.浮动后后面的元素不管是块级还是行级元素不会显示在下一行。
4.清除浮动：让后面的元素自动调用到下一行。
  方法：添加空标签，并设置样式：clear:both;
       clear:left; 清除左浮动
       clear:right;清除右浮动
       clear:both;清除全部
       clear:none;左右浮动都不清除

       在要清除浮动的父级添加样式：overflow:hidden; （首选方法）
       overflow:hidden;超出部分隐藏，也可以用来实现清除浮动。

       在要清除浮动的元素的父级添加伪元素，并设置样式：
       .父元素:after
               {
                   content: "";
                   display: block;
                   clear:both;
               }

       注意：在实际项目开发中我们一般首选第2种方案。
6.CSS盒子模型
       每一个元素就是一个盒子，一个盒子由外边距margin（外边距）、border（边框线）、padding（内边框）、content（内容）组成
       IE的盒子中的content又由padding和content组成。

       区别外边距和内边距是以边框区别的。

       系统默认外边距为8px。
       1、外边距margin：值边框线之外的距离。
          margin:可用来设置任意一个边的边距，可以带1到4个参数。
                1个：表示上下左右都有这样的外边距
                2个：表示上下  左右外边距
                3个：表示上 下 左右
                4个：表示上 右 下 左
          margin-left:左边距
          margin-right:右边距
          margin-top:上边距
          margin-bottom:下边距

       display:block  将行级标签转为块级标签
       2、内边距padding:元素的文本内容与边框之间的距离。它的用法和margin一样。
       3、边框border
             border-width:边框的宽度。
             border-style:边框的样式。
             none:默认值，无边框。
             solid:定义实线边框。
             double:定义双实线边框。
             dotted:定义点状线边框。
             dashed:定义虚线边框。
             border-color:边框颜色
             边框简写{width style color}
             复合写法：border:border-width border-style border-color这些没有位置之分
             盒子的真实尺寸
             盒子宽度=width+padding左右+border左右
             盒子高度=height+padding上下+border左右
       4、display属性：用来设置元素的显示方式。
             属性值：
             none:不显示元素
             block:块显示，在元素前后设置换行符。目的：将行级标签准换为块级标签（因为行级标签不识别宽高，而块级标签识别，准换后，行级标签也可以设置宽高了）
             inline:行内显示，将块级标签转换为行级标签。  宽高自适应
             inline-block:将块级或行级标签转换为行内块级标签。
       5、table样式
             table一般不用来布局，主要用来个格式化数据。
             属性：
                 width:宽度
                 height:高度
                 border-collapse:collapse:单线边框
                 border:边框线
             td,tr属性：
                 width:宽度
                 height:高度
                 border:边框线
                 text-align:文本左右对齐（left（默认）/center/right）
                 vertical-align:文本垂直对齐（top/middle（默认）/bottom）
7.列表样式
  不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列表等。
  a.列表类型
    无序列表ul   有序列表ol   用户自定义列表dl
    ul和ol的列表项都是用li表示的，而dl是又一个dt和一个或多个dd组成的。
    dl一般用来设定一个定义，比如名词解释。dt:标题，dd:描述，用来对dt的内容进行解释说明的。
  b.样式（用来修饰标识类型）
    list-style-image:用图像表示标识
    list-style-position:标识的位置（inside/outside(默认值)）
    list-style-type:标识类型

    简写：
       list-style:list-style-image:   list-style-position:    list-style-type:
       list-style的值可以任意顺序列出，而且可以任意省略，只要提供有个值，其他都自动为默认。

    list-style-type的属性值：
    a.无序
      disc（默认值）/circle/square实心圆   空心圆 实心矩形框
    b.有序
      decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/
      lower-greek/lower-latin/upper-latin......
    有序和无序：
      none 取消 用的最多 取消前面标识符
8.轮播图
  作用：主要用于产品的展示或公司相关的宣传。
  组成：
     a.轮播的组图（至少两张以上，不能太多）
     b.控制器
     c.计数器
     《重要》

day5

第五天相当重要呀！！！

1、定位（position） 2、网站整体布局 3、BFC 4、IFC
1、1.定位（position）
   设定元素在文章的位置。  使用非常频繁  会将标签（元素）转换为块级。
2、2.定位的分类（属性值）《重点》
    a.static:静态定位，
      默认值，没有定位，不能设定偏移值（left/top/right/bottom）会占用标准流（文档流）
    b.relative:相对定位
      会占用标准流（文档流），它会出现在文档流中它该出现的位置。可以设置偏移值改变他的位置。它相对于自身所在的位置做偏移。
      c.absolute:绝对定位
        脱离文档流 ，相对于body做偏移。 绝对定位一般和相对定位结合使用，它相对的父级是relative定义的元素做偏移。
        relative的元素必须是absolute的父级。在项目开发中，一般用relative+absolute结合使用。
      d.fixed:固定定位
        脱离文档流 ，相对于浏览器窗口左上角（0,0）做偏移，它与relative设定的对象没有关系，也就是说他跟父级的定位没有任何关系。
        一般在开发中用来固定导航栏。
3、z-index
     值越大 就在最上层
     当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。
     文档流默认的z-index的值为0。
     绝对定位用
     用在static和relative元素上将无效。
4、网站的开发策略：先整体在局部，自顶向下，逐步细化。
     a.双飞翼布局:由三列组成，两端固定，中间自适应。
                 会叠加
       双飞翼布局的优点︰
       (1)兼容性好，兼容所有主流浏览器，包括万恶的IE6。
       (2)因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。

     b.圣杯布局：
               由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。
               布局时与双飞翼比增加了定位和偏移设置。
               不会叠加
     c.侧边栏固定布局
       1.两栏布局《重点》
         左侧固定，右侧自适应
         左侧自适应，右侧固定
         左右都固定
       2.三栏布局《重点》
         a)左侧固定，中间自适应，右侧固定
         b)左侧自适应，中间和右侧固定
         c)左侧和中间固定，右侧自适应

6、BFC&IFC
  FC:Fomatting Context(格式上下文)。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。分为:BFC和IFC。
  1）BFC:块级格式上下文
    a)形成BFC的条件
      i)浮动元素(float除none以外的值>
      ii）定位元素（position(absolute/fixed))
      iii) display（值为inline-block/table-cell/table-caption时)
      iv) overflow(值为hidden/auto/scroll时)
    b)BFC特性(规则)
      i)内部的盒子会在垂直方向上一个接一个的放置
      ii)垂直方向上的距离会叠加值由最大margin决定（如果不要叠加，就需要将该盒子变成一个独立的盒子）

      iii)BFC的区域不会float元素区域重叠
      iv)计算BFC的高度时，浮动元素也参与计算
      v)BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素
    c)BFC的作用
      i)解决margin重叠的问题<添加独立BFC>
      ii)解决浮动高度塌陷的间题<在父级添加overflow:hidden>
      iii)解决侵占浮动元素的问题<添加overflow:hidden清除浮动>
  2)IFC:内联（行级）格式上下文
    a）形成IFC的条件
      i)font-size
      ii)line-height
      iii)height
      iv)vertical-align
    b)IFC特性（规则)
      i)IFC的元素会在一行中从左至右排列
      ii)在一行上的所有元素会在该区域形成一个行框
      iii)行宽的高度为包含框的高度，高度为行框中最高元素的高度
      iv)浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
      v)行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框
      vi)行框的元素内遵循text-align和vertical-align(顶端对齐)

      容器的高度：/height = line-height + vertical-align