Html

标签学习

  • 排版标签

    • 标题

      • h1、h2、h3、h4、h5、h6只有这六个

    • 段落标签

      • p标签 段落之间有空隙换行

    • 换行标签

      • br 空换行
      • hr 下划线换行

  • 文本格式化标签 根据语境区分

    • b、strong 加粗
    • u、ins 下划线
    • i、em 倾斜
    • s、del 删除线

  • 媒体标签

    • 图片标签img
      • 属性名、属性值
      • alt属性值作为替换文本、src属性作为图片链接、title属性在鼠标悬停时显示
      • width、height 很容易理解，控制图片宽高
    • 路径
      • 相对路径
      • 绝对路径
    • 音频标签audio
      • controls 显示播放的空间
      • autoplay 自动播放(部分浏览器不支持)
      • loop 循环播放
    • 视频标签video
      • 谷歌浏览器需要配合muted实现静音播放

  • 链接标签a

    • href
    • target 目标网页的打开形式
      • _blank 在新窗口中跳转 保留原网页
      • _self 在当前窗口中跳转(覆盖原网页) 不打开新的网页窗口

h5 不再支持 div盒子 align: center 的属性


列表标签

  • ul无序列表
    • 只能包含li标签
    • li标签可以包含任意内容
  • ol 有序列表 可以认为是 order list: 有顺序的列表
    • ol 列表中只允许包含li标签
    • li 标签可以包含任意内容
  • dl自定义列表 diy list
    • dt 自定义列表的主题
    • dd自定义列表的内容 注意dd会默认显示缩进效果
    • dl标签中只允许包含dt/dd标签
    • dt/dd标签可以包含任意内容

表格

  • table
    • tr 行 可以理解为table row 可以包含n个td
    • td 单元格
    • th 表头 table head 放在tr中
    • caption 书写在table标签内容 表示表格大标题 一般居中
  • 表格的结构标签 (了解)
    • thead
    • tbody
    • tfoot
    • 语义化的标签 易于后期维护 及浏览器理解渲染
  • 合并单元格
    • 不能跨结构标签合并(不能跨thead、tbody、tfoot)
    • 跨行合并rowspan、跨列合并colspan
      • 明确合并哪几个单元格
      • 通过左上原则，确定保留谁，删除谁
      • 给保留的单元格设置属性

表单

  • input系列 type属性值如下：

    • text 文本框，用于输入单行文本 不换行 即写代码需要br手动换行
    • password 密码框 用于输入密码
    • radio 单选框 用于多选一
    • checkbox 多选框
    • file 用于之后上传文件
    • submit 提交按钮 用于提交
    • reset 重制按钮 重制和提交生效 必须要有父级标签表单域
    • button 普通按钮 可以配合js添加功能

  • input 其他属性

    • placehold 给输入框提示文字
    • name 用name属性分组，相同name属性的单选框为一组
    • checked 表示默认选中 指选项的默认值
    • multiple 上传文件时实现多选
    • value 给按钮添加或修改按键文字，包括submit、reset、button

  • 单独的button标签 也可以作为按钮使用

    • 由于 button 本身不具有功能，因此可以灵活地给 button 添加功能，拓展性极高
    • 与 js 搭配使用有奇效

  • select 下拉菜单

    • 组成：
      • select 标签，下拉菜单的整体，需要包裹住option
      • option 下拉的选项
    • 默认选中：value的值设置为 selected，不设置默认为第一项

  • textarea 文本域标签

    • 一般通过css给其添加行列，即宽高
    • 禁用文本域的拖拽改变大小

  • label标签

    • 实现点击固定区域便可选中单选框、多选框
    • 使用方法①
      • 用label标签把内容包裹起来
      • 在表单标签上添加 id 属性
      • 在 label 标签的for属性中设置对应的id值
    • 使用方法②
      • 直接使用label标签把内容和表单标签一起包裹起来
      • 需要把label标签的for属性删除

语义化标签

  • 无语义
    • div
    • span
  • 有语义(了解)
    • 用于手机端的开发
    • header、nav、footer、aside、section、article

字符实体

  • html中空格合并的现象
    • &nsbp 空格
    • &copy 网页的版权 copyright

Css

基础认知

  • css的引入方式

    • 内嵌式

      • css写入style标签中，通常约定为html文件中的head标签内

    • 外联式

      • 写入单独的.css文件中
      • 通过link引入link中

    • 行内式

      • css 写在标签的style属性中

基础选择器

  • 标签选择器
    • 标签名 {css属性名: 属性值;}
  • 类选择器
    • .class 通过类名 指定标签的style
    • 一个标签需要多个类名，用空格隔开即可
  • id 选择器
    • 配合js 诞生，在一个页面中式唯一的，不可替代的
    • #id {属性名: 属性值}
    • 所有标签上都有id 属性
    • 每一个标签只能有一个id属性值
    • 一个id 选择器只能选中一个标签
  • 通配符选择器
    • 使用* 号可以匹配所有的标签
    • 一般用其清除margin、padding属性

字体和文本样式

字体

  • 字体大小
    • font-size
    • 浏览器有默认值 16px
  • 字体粗细
    • font-weight
    • 取值
      • 关键字: 正常normal 加粗 blod
      • 纯数字: 正常400 加粗 800
  • 字体样式
    • font-style 字体是否倾斜
    • 正常 normal 倾斜 italic
  • 字体系列
    • font-family
    • 雅黑、宋体、黑体之类的
    • windows电脑 默认是微软雅黑
    • 一般网页会提供多个字体，用逗号隔开，表示按顺序显示，避免出现用户电脑上没有安装字体的情况
  • 常见字体系列
    • 无衬线字体 sans-serif 均匀 无笔锋 一般网页都用这种类型
    • 衬线字体 serif 不均匀 有笔锋
    • 等宽字体 monospace 所有文字占相同宽度
  • 样式的层叠问题
    • 层叠性: 后面的覆盖前面的属性
    • 样式以最后覆盖的为准
  • font 相关属性的连写
    • font: style weight size family
    • 只能省略前两个，省略相当于默认值
    • 一个属性冒号后面书写多个值的写法，属于复合属性

文本

  • 文本缩进
    • text-indent
    • 取值为 数字+px 或者 数字+em; 1em为当前font-size的大小
  • 文本水平对齐
    • text-align
    • 左对齐、右对齐、居中对齐
    • 能让哪些元素水平居中
      • 文本
      • span 标签
      • input标签、imp标签
  • 文本修饰
    • text-decoration
    • 属性值有:
      • underline下划线 常用
      • line-through 删除线 不常用
      • overline 上划线 不常用
      • none 无装饰线 常用
  • 行高
    • line-height 取值为px 或者font-size的倍数
    • 行高 = 上间距 + 文本高度 + 下间距
    • 应用
      • 单行文本垂直居中 可以设置为line-height: 文字父元素高度
    • 注意点
      • 如果同时设置了行高和font连写，注意覆盖问题
      • font: style weight size/line-height family
  • 颜色常见取值 网页设计时直接取色器吸就好啦qvq
    • 关键词
    • rgb
    • rgba
    • 十六进制
  • 标签水平居中
    • margin: 0 auto

选择器进阶

  • 后代选择器: 空格
    • 选择器1 选择器2 {css}
    • 只要是后代，儿子、孙子等都会被选中
  • 子选择器: >
    • 选择器1 > 选择器2 {css}
    • 只选择儿子，不选其他
  • 并集选择器: ,
    • 选择器1, 选择器2 {css}
    • 两者均包括
  • 交集选择器：紧挨着
    • 作用 选中页面中同时满足多个选择器的标签
    • 选择器1.选择器2 {css} 满足既又原则
  • 伪类选择器 hover
    • 当鼠标放置到目标上时，样式改变
    • 任何一个标签都可以写hover

背景属性

  • background-color 略过 英语够用就行
  • background-image
    • background-image: url()
  • background-repeat
  • background-position
    • 两个参数分别控制左右和上下（水平方向、垂直方向）
    • 可以用数字如100px控制、也可以用方向right、left、center控制
  • 复合属性
    • color、image、repeat、position
    • 不分先后顺序，但是推荐上述顺序
    • 如果需要单独的设置与连写，要么把单独的样式写到连写的后面，要么写到连写的里面
    • 背景图位置如果是英文单词 可以不分先后顺序；数字写法 默认第一个是水平位置 第二个是竖直位置
  • 图案img 、background-image: 重要的图片用img 不重要的图片用background-image

元素显示模式

  • 块级元素
    • 独占一行
    • 宽度默认是父元素的宽度 高度默认由内容展开
    • 可以设置宽高
    • div、h系列、p、ul、li、dl、dt、dd、form、header、nav、footer
  • 行内元素
    • 一行可以显示多个
    • 宽高默认由内容撑起
    • 不可以设置宽高
    • a、span、b、u、i、s、strong、ins、em、del
  • 行内块元素
    • 一行可以设置多个
    • 可以设置宽高
    • input、textarea、button、select
    • img 有行内块的特点 但是chrome调试后显示有inline
  • 元素显示模式转换
    • display: block 转换为块级元素
    • display: inline-block 转换为行内块元素
    • display: inline 极少……
    • 转换规范：
      • 块级元素作为大容器，可以嵌套很多元素，但是不能用小范围的元素嵌套大范围元素 如p标签不能嵌套div、p、h
      • a标签内部可以嵌套任意元素，除了a标签

css特性

  • 继承性
    • 子元素没有的 从父元素处继承；子元素有的，不继承
    • 可以理解为 父元素的样式先赋给子元素 子元素自己的样式又赋给自己 后者覆盖前者 故显示子元素的样式
  • 层叠性
    • 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
    • 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
    • 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
  • 优先级 最复杂

css三大特性

  • 优先级的介绍

    • 不同的选择器具有不同的优先级，优先级高的选择器样式会夫噶优先级低的样式

    • 优先级公式 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

    • !important不能提升继承的优先级，且实际开发中不建议使用

    • 标签的范围越广，其优先级越低，个人认为可简记为 远水解不了近渴

  • 权重叠加计算

    • 场景：复合选择器 需要通过权重叠加计算 判断最终哪个选择器优先级会生效
    • 权重叠加计算公式
      • (0, 0, 0, 0) (行内，id，类名，标签) 之间无进位
      • 只是统计每个复合选择器的对应选项个数 如果都相同 谁在后面谁生效
      • 如果第一级数字相同 再去比较其他 需要结合例子理解
      • 对于!important 如果不是继承，则权重最高

  • 排错

    • 使用谷歌F12找错误 开发者常用
    • 常用单词拼写错误 我自己就经常犯 main函数都能搞成mian
    • 上一行出错的代码可能会导致下一行代码失效

盒子模型

  • 概念
    • 每一个标签都是一个盒子
    • 浏览器在网页渲染时，会将网页中的元素看作是一个个的矩形区域，我们也称其为盒子
  • 内容
    • content内容区域、padding内边距、border边框、margin外边距
    • 官方的联想模型为 苹果电脑的包装盒，个人理解为箱装盒式牛奶
  • 边框
    • 简写为 bd后按tab键
    • border: 粗细 线条样式 颜色 不分先后顺序 MDN官网上线条的样式如下
    • 可拆分单个属性 border-width、 border-style、 border-color
    • 也可以拆分为单个方向 属性名为: borde-方位名词 属性值连写
  • 大小计算
    • 盒子宽度 = 左边框 + 内容宽度 + 右边框
    • 盒子高度 = 上边框 + 内容高度 + 下边框
  • 设置
    • 顺序
      • 从外往内，从上往下
    • 盒子的样式：
      • 宽高
      • 辅助的背景颜色
      • 盒子模型的部分：border、padding、margin
      • 其他样式：color、font-、text-、……
  • 内边距
    • 上右下左旋转设置padding的值
    • 注意：
      • ① 设置width和height是内容的宽高！
      • ② 设置border会撑大盒子
      • ③ 设置padding会撑大盒子
    • 优化计算公式
      • 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
      • 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
  • css3模型自动内减
    • 加上box-sizing: border-box
    • 浏览器会自动计算多余大小，自动在内容中减去
  • 外边距
    • 与内边距设置写法一样，只是不计入盒子的大小中
  • 清除默认边距
    • 浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
    • 常用 * {margin: 0; padding: 0;}清除内边距
  • 外边距折叠现象
    • 合并现象
      • 相邻的两个盒子，margin-bottom 和 margin-top 会合并 取最大值 而不是相加
    • 塌陷现象
      • 发生在互相嵌套的块标签
      • 给子元素添加margin值，会使父标签子标签都下移， 坑爹现象
      • 解决方法(四种)：
        • 给父元素设置border-top 或者 padding-top（分隔父子元素的 margin-top）
        • 给父元素设置overflow：hidden 这个方法最完美
        • 转换成行内块元素
        • 设置浮动
  • 行内元素、行内块元素的padding、margin无效情况
    • 给行内元素设置margin和padding
      • 水平方向的margin和padding布局中有效
      • 垂直方向的margin和padding布局中无效