0
点赞
收藏
分享

微信扫一扫

html、css基础---学习笔记

是归人不是过客 2022-04-14 阅读 87
csshtml

title: VScode编辑同步Markdown文档到印象笔记
tags: Blog,Elegent
notebook: Elegent

超文本标记语言

超文本 : 文本内容 + 非文本内容
所谓HTML语义化指的是,根据网页中内容的结构,选择适合的HTML 标签进行编写。

好处:

  1. 在没有CSS的情况下,页面也能呈现出很好的内容结构。
  2. 有利于SEO,让搜索引擎爬虫更好的理解网页。
  3. 方便其他设备解析(如屏幕阅读器、盲人阅读器等)。
  4. 便于团队开发与维护

文本修饰标签

  <h></h>标题标签
  <p></p>段落标签

  <strong></strong>: 表示强调,会对文本进行加粗 

  <em></em>: 表示强调,会对文本进行斜体
  <i></i>
   
  <sub></sub>、<sup></sup>: 下标文本、上标文本

  <del></del>、<ins></ins>: 删除文本、插入文本

图片标签与图片属性

  <img>: 图片 (单标签)
  src :图片位置
  alt :图片加载失败时显示的文字
  title :网页显示信息
  width 、height

引入文件的地址路径

  相对路径:
     . 在路径中表示当前路径
     ..在路径中表示上一级路径

  绝对路径:
     E:/
     http://

跳转链接

  标签  <a>
  href:链接地址

  target:可以改变链接打开的方式,默认情况下:在当前页面打开 _self  新窗口打开 _blank

  <base>标签:在head里面写入<base target="_blank">所有a标签都在新窗口打开

跳转锚点

  实现一
  #号
  id属性
  实现二
  #号
  name属性(注意name属性加给的是a标签)

特殊字符

  特殊字符    含义      特殊字符代码
  空格符                   &nbsp;
  ©          版权          &copy;
  ®         注册商标        &reg;
  <          小于号         &lt;
  >          大于号         &gt;
  &           和号         &amp;
  ¥          人民币        &yen;
  °          摄氏度        &deg;

无序列表

  <ul>、<li> :列表的最外层容器、列表项
  注:ul和li必须是组合出现的,他们之间是不能有其他标签的

  type属性 : 改变前面标记的样式

有序列表

  ol>、<li> :列表的最外层容器、列表项
  注:有序列表用的非常少,经常用的是无序列表,无序列表可以去代替有序列表。

 type属性 : 改变前面标记的样式

定义列表

     需要添加标题和对标题进行描述的内容
  <dl>:定义列表
  <dt>:定义专业术语或名词(标题)
  <dd>:对名词进行解释和描述(标题解释)

  列表之间可以互相嵌套形成多层级列表

表格标签

  <table>:表格的最外层容器 
  <tr> :  定义表格行
  <th>:   定义表头
  <td>:   定义表格单元
  <caption>:定义表格标题 

表格属性

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

语义化标签

  <tHead>、<tBody>、<tfoot> 
  在一个table中,tBody是可以出现多次的,但是tHead、tfoot只能出现一次。

表单标签

  <form> : 表单的最外层容器
  <input>: 标签用于搜集用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框等
  <textarea> : 多行文本框
  <select>、<option>:下拉菜单
  <label>:辅助表单

  type属性          含义
  text        普通的文本输入框
  password       密码输入框
  checkbox        复选框
  radio           单选框
  file            上传文件
  submit          提交按钮
  reset           重置按钮

块和内联

  div (块):做区域划分的块
  div全称为division,“分割、分区”的意思,<div>标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套 在 <div>标签中,<div>中还可以嵌套多层<div>,用来将网页 分割成独立的、不同的部分,来实现网页的规划和布局。

  span(内联) : 对文字进行修饰,内联
  用来修饰文字的,div与span都是没有任何默认样 式的,需要配合CSS才行。

CSS 样式

基础语法

  格式:
  选择器{ 属性1 : 值1 ; 属性2 : 值2 }
        1. px -> 像素
        2. % -> 百分比    
        外容器1 -> 600px  当前容器 50% -> 300px
        外容器2 -> 400px  当前容器 50% -> 200px
  基本样式:
      width、height、background-color
  CSS注释:
     /*  CSS注释的内容  */

内联样式与内部样式

  内联(行内、行间)样式
  在html标签上添加style属性来实现的

  内部样式
  在<style>标签内添加的样式
    注:内部样式的优点,可以复用代码

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

外部样式

  <link>标签
  rel
  href

CSS中的颜色表示法

  单词表示法
  十六进制表示法
  rgb三原色表示法:rgb(255,255,255);
  取值范围 0 ~ 255

CSS背景样式

  background-color 背景色
  background-image 背景图

  url(背景地址)
  默认:会水平垂直都铺满背景图

  background-repeat 平铺方式
  repeat-x   x轴平铺
  repeat-y   y轴平铺
  repeat ( x , y 都进行平铺,默认值 )
  no-repeat  都不平铺

  background-position : 背景位置
  x y : number(px、%) | 单词
      x : left、center、right
      y : top、center、bottom

  background-attachment : 背景图随滚动条移动的方式
  scroll : 默认值  ( 背景位置是按照当前元素进行偏移的 )
  fixed ( 背景位置是按照浏览器进行偏移的 )

CSS边框样式

  border-style : 边框样式
      solid : 实线
      dashed : 虚线
      dotted : 点线

  border-width : 边框大小
      px ...

  border-color : 边框颜色
      red #f00 ...  
      颜色:透明颜色 transparent      
      边框也可以针对某一天边进行单独设置 : 
  border-left-style : 中间是方向 left、right、top、bottom    

CSS文字样式

  font-family:字体类型
  英文字体:Arial , 'Times New Roman' 
  中文字体:微软雅黑 ,  宋体

  font-size : 字体大小
    默认 : 16px
    写法 : number(px) | 单词 ( small large ... 不推荐使用)

  font-weight : 字体粗细
    模式: 正常( normal )   加粗 ( bold )
    写法:单词(normal、bold)   |  number ( 100 200 .....  900 , 100到500都是正常的,600都900都是加粗的 )  

  font-style : 字体样式
    模式: 正常 ( normal )   斜体 ( italic )
    写法:单词 (  normal 、 italic )
    注:oblique也是表示斜体,用的比较少,一般了解即可。
    区别:1.italic 带有倾斜属性的字体的才可以设置倾斜操作。
          2.oblique 没有倾斜属性的字体也可以设置倾斜操作。  

CSS段落样式

  text-decoration:文本装饰
    下划线 : underline
    删除线 :line-through
    上划线 : overline
    不添加任何装饰 : none
    注:添加多个文本修饰:line-through underline overline

  text-transform:文本大小写 ( 针对英文段落 )
    小写:lowercase
    大写:uppercase
    只针对首字母大写:capitalize

  text-indent : 文本缩进
    首行缩进
    em单位:相对单位,1em永远都是跟字体大小相同

  text-align : 文本对齐方式
    对齐方式 : left 、right、center、justify(两端点对齐)

  line-height : 定义行高
    什么是行高,一行文字的高度,上边距和下边距的等价关系。
    默认行高:不是固定值,而是变化的。根据当前字体的大小再不断的变化。
    取值:1. number( px )   |  scale ( 比例值 , 跟文字大小成比例的 )

  letter-spacing : 字之间的间距
  word-spacing : 词之间的间距  ( 针对英文段落的 )

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

CSS复合样式

  一个CSS属性只控制一种样式,叫做单一样式。
  一个CSS属性控制多种样式,叫做复合样式。
  复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如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 style size/line-height family √
        注:如果非要混合去写的话,那么要先写复合样式,再写单一样式,这样样式才不会被覆盖掉。

CSS选择器

  class选择器
  css : .elem{}
  html : class =“elem”
    注:
   1. class选择器是可以复用的。
   2. 可以添加多个class样式。
   3. 多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序。
   4. 标签+类的写法

  ID选择器
  css : #elem{}
  html : id=“elem”
    注:
   1. 在一个页面中,ID值是唯一的。
   2. 命名规范, 字母  _  -  数字(命名的第一位不能是数字)。
   3. 命名方式,驼峰式、下划线式、短线式。
             驼峰写法 : searchButton (小驼峰)  SearchButton (大驼峰)  searchSmallButton
             短线写法:search-small-button
             下划线写法:search_small_button

  标签选择器
  css : div{}
  html : <div> 
    div{}          <div></div>
    使用的场景:
          1. 去掉某些标签的默认样式时
          2. 复杂的选择器中,如 层次选择器

  群组选择器
  css : div , p , span{}
         可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用。

  通配选择器
  *{  } ->  div,ul,li,p,h1,h2....{}    
          注:尽量避免使用通配选择器,因为会给所有的标签添加样式,慎用。
          使用的场景:
              1. 去掉所有标签的默认样式时 

  伪类选择器
  CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
      :link、:visited、:hover、:active 
      注:
         1. link visited 只能给a标签加,hover和active 可以给所有的标签加。
         2. 如果四个伪类都生效,一定要注意顺序 : L V H A。
         3. 一般网站只这样去设置:a{} a:hover{}。

  M:伪类{}
     :link            访问前的样式    ( 只能添加给a标签 )
     :visited         访问后的样式    ( 只能添加给a标签 )
     :hover           鼠标移入时的样式  (可以添加给所有的标签)
     :active          鼠标按下时的样式  (可以添加给所有的标签)
     :after、:before    通过伪类的方式给元素添加一段文本内容,使用 content属性

     :checked、:disabled 、:focus 都是针对表单元素的   

  结构性伪类选择器
     nth-of-type()   nth-child()
     角标是从1开始的,1表示第一项,2表示第二项 | n值 表示从0到无穷大
     first-of-type
     last-of-type
     only-of-type 

     nth-of-type()和nth-child()之间的区别
       nth-of-type是取当前元素的兄弟元素的第n个
       nth-child取的是当前元素的第n个节点的当前元素
         type : 同类型下的元素
         child :当前元素下的

  层次选择器
     后代  M N { }
     父子  M > N { }
     兄弟  M ~ N { }  当前M下面的所有兄弟N标签
     相邻  M + N { }  当前M下面相邻的N标签

  属性选择器
     M[attr] {}    
     = :  完全匹配
     *= : 部分匹配
     ^= : 起始匹配
     $= : 结束匹配
     [][][] : 组合匹配

CSS样式继承

  文字相关的样式可以被继承
  布局相关的样式不能被继承((默认不能继承,但是可以设置继承属性)inherit;)

CSS优先级

  相同样式优先级
  当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。
  
  内部样式与外部样式
  内部样式与外部样式优先级相同,如果都设置了相同样式,那么后写的引入方式优先级高。

  单一样式优先级
  style行间 > id > class > tag > * > 继承

  层次优先级
  1. 权重比较
        ul li .box p input{}   1 + 1 + 10 + 1 + 1
        .hello span #elem{}    10 + 1 + 100

  2. 约分比较    
        ul li .box p input{}    li p input{}
        .hello span #elem{}      #elem{}

css盒子模型

  组成 : content -> padding -> border -> margin
       物品        填充物     包装盒      盒子与盒子之间的间距

  content : 内容区域  width和height组成的

  padding : 内边距(内填充)
       只写一个值: 30px (上下左右)
       写两个值 : 30px 40px ( 上下、左右 )
       写四个值 : 30px 40px 50px 60px(上、右、下、左)

  单一样式只能写一个值:
       padding-left
       padding-right
       padding-top
       padding-bottom

   margin : 外边距(外填充)
       只写一个值: 30px (上下左右)
       写两个值 : 30px 40px ( 上下、左右 )
       写四个值 : 30px 40px 50px 60px(上、右、下、左)

  单一样式只能写一个值:
       margin-left
       margin-right
       margin-top
       margin-bottom
        注:
            1. 背景色填充到margin以内的区域 (不包括margin区域)    
            2. 文字在content区域添加。
            3. padding不能为负数,而margin可以为负数。

  box-sizing:
    盒尺寸,可以改变盒子模型的展示形态。
    默认值: content-box :  width、height -> content
            border-box : width、height -> content, padding, border

    使用的场景:    
        1. 不用再去计算一些值
        2. 解决一些100%的问题       

  盒子模型的一些问题:
    1. margin叠加问题,出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
    2. margin传递问题,出现在嵌套的结构中,只是针对margin-top的问题。

  margin叠加
  当给两个盒子同时添加上下外边距的时候,就会出现叠加的问题。这个问题,只在上下有,左右是没有这个叠加问题的
    解决方案:
  1. BFC规范
  2. 想办法只给一个元素添加间距。

  margin传递
  margin传递的问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其它三个方向是没有传递问题的。
  解决方案:
    1. BFC规范
    2. 给父容器加边框。
    3. margin换成padding。

  margin自适应居中margin:0 auto;
 
  扩展:
    1. margin左右自适应是可以的 ,但是上下自适应是不行的。( 如果想实现上下自适应的话,需要在第二大部分来进行学习 )
    2. width、height不设置的时候,对盒子模型的影响,会自动去计算容器的大小,节省代码。 

标签分类

   按类型
  block :      块
  inline :     内联
  inline-block : 内联块

  按类型
    block : div、p、ul、li、h1 ...
        1. 独占一行
        2. 支持所有样式
        3. 不写宽的时候,跟父元素的宽相同
        4. 所占区域是一个矩形

    inline : span 、a、em、strong、img ...
        1. 挨在一起的
        2. 有些样式不支持
           例如:width、height、margin、padding
        3. 不写宽的时候,宽度由内容决定
        4. 所占的区域不一定是矩形
        5. 内联标签之间会有空隙,原因:换行产生的

    inline-block : input、select ...
        1. 挨在一起,但是支持宽高

    注:布局一般用块标签,修饰文本一般用内联标签

   按内容
  Flow:       流内容
  Metadata:   元数据
  Sectioning: 分区
  Heading:    标题
  Phrasing:   措辞
  Embedded:   嵌入的
  Interactive:互动的
    (详情:https://www.w3.org/TR/html5/dom.html)

   按显示
  替换元素 :   浏览器根据元素的标签和属性,来决定元素的具体显示内容。
   img、input ...
  非替换元素 : 将内容直接告诉浏览器,将其显示出来。
   div、h1、p ... 

显示框类型

   display: block inline inline-block none ...
   block      块元素
   inline     行内元素
   inline-block  行内块
   none       无

  区别:
   display:none   不占空间的隐藏
   visibility: hidden 占空间的隐藏

标签嵌套规范

  块标签可以嵌套内联标签
  块标签不一定能嵌套块标签
  内联标签不能嵌套块标签
  a标签是一个例外

溢出隐藏

  overflow
  visible : 默认
  hidden:   隐藏溢出的部分
  scroll:  右,下出现滚动条
  auto:    内容足够多的时候右侧出现滚动条
  x轴、y轴

透明度与手势

  opacity:
       opacity : 0(透明) ~ 1(不透明) ,0.5(半透明)
       注:占空间、所有的子内容也会透明
  rgba:
       rgba() : 0 ~ 1
       注:可以让指定的样式透明,而不影响其他样式
  cursor :手势
       要实现自定义手势需要:
       准备图片: .cur 、 .ico 
       cursor : url(./img/cursor.ico),auto;
  default: 默认箭头
  自定义鼠标样式

最大、最小宽高

  min-width、max-width
  min-height(>=)、max-height(<=>)
  %单位:换算 -> 已父容器的大小进行换算的
  一个容器怎么适应屏幕的高 : 
     容器加height:100%;   body:100%;  html:100%;
 
  html,body{ height:100%;}
  .contrainer{ height:100%;}

CSS默认样式

  有些标签有默认样式,有些标签没有默认样式。
  没有默认样式:
  div、span、…
  默认样式: 
  body、h1…h6、p、ul、…
      body ->  marign : 8px
      h1   ->  margin : 上下 21.440px
             font-weight : bold
      p    ->  margin : 上下 16px
      ul   ->  margin : 上下 16px  padding : 左 40px
      默认点:
           list-style : disc
           a ->   text-decoration: underline;

CSS reset重置属性

  *{ margin:0; padding:0;}
      优点:不用考虑哪些标签有默认的margin和padding
      缺点:稍微的影响性能
      body,p,h1,ul{ margin:0; padding:0;}

  ul{ list-style : none;}    

  a{ text-decoration: none; color:#999;}

  img{  }
      问题的现象:图片跟容器底部有一些空隙。

      内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐的。
      vertical-align: baseline;  基线对齐方式,默认值
      img{ vertical-align:bottom;} 解决方式是推荐的
      设置块:dispaly:block; 👍

  写具体页面的时候或一个布局效果的时候:
        1. 写结构
        2. css重置样式
        3. 写具体样式

photoShop的使用

  组成:
    菜单项
    工具栏
    辅助面板

  下载:
    https://pan.baidu.com/s/1LVa5R_btSjczLBwskCZidQ 提取码: sc3v      

  快捷键:
    ctrl + r : 显示隐藏标尺
    在标尺上可以拖拽参考线
    可以通过移动工具拖拽回去,也可以在视图菜单中选择清除所有的参考线
    图层中的小眼睛可以对当前图层进行显示隐藏
    alt + 滚轮:可以对图片进行放大缩小

  png等图片的切图流程:
    1. 通过矩形选框工具,选择指定的区域
        微调:alt 减少区域  shift 增加区域   上下左右键进行微调
        利用参考线记录量取的位置,以便以后测量其他的值
    2. ctrl + c : 复制图层
    3. ctrl + n : 新建图层
    4. ctrl + v : 粘贴图层
    5. 存储为web格式        

  psd图片的切图流程:
    1. 启动生成器
    2. 图像资源
    3. 重命名图层,自动获取切图
    4. 可上传到线上,方便数据获取

float浮动

  脱离文档流,延迟父容器靠左或靠右进行排列。
    left、right、none

  float注意点:
    只会影响后面的元素。
    内容默认提升半层。
    默认宽根据内容决定。
    换行排列。
    主要给块元素添加,但也可以给内联元素添加

  如何清除浮动?
    上下排列:clear属性,表示清除浮动的,left、right、both
    嵌套排列:
        固定宽高   :  不推荐 , 不能把高度固定死,不适合做自适应的效果。
        父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
        overflow : hidden (BFC规范) , 如果有子元素想溢出,那么会受到影响。
        display : inline-block (BFC规范),不推荐,父容器会影响到后面的元素。
        设置空标签 : 不推荐 , 会多添加一个标签。
        after伪类 : 推荐,是空标签的加强版,目前各大公司的做法。
            ( clear属性只会操作块标签,对内联标签不起作用 )

CSS 定位

  position : 
    static(默认)
    relative
    absolute
    fixed
    sticky

  relative:
    如果没有定位偏移量,对元素本身没有任何影响
    不使元素脱离文档流
    不影响其他元素布局
    left、top、right、bottom是相对于当前元素自身进行偏移的

 absolute:
    使元素完全脱离文档流
    使内联元素支持宽高 (让内联具备块特性)
    使块元素默认宽根据内容决定(让块具备内联的特性)
    如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)

  fixed:
    使元素完全脱离文档流
    使内联元素支持宽高 (让内联具备块特性)
    使块元素默认宽根据内容决定(让块具备内联的特性)
    相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响

  sticky黏性定位:
    在指定的位置,进行黏性操作。

    z-index定位层级。

PC端的布局

  通栏 : 自适应浏览器的宽度。
  版心 : 固定一个宽度,并且让容器居中。
举报

相关推荐

0 条评论