HTML+css重要知识点总结

HTML重要知识点复习笔记

一. VSCode配置和插件

1.1. VSCode配置

{
            "type": "chrome",
            "request": "launch",
            "file":"${file}",
            "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "userDataDir": "${tmpdir}",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }

1.2. VSCode插件

• Beautify

• Chinese Language Pack for Visual Studio Code

• Chinese Lorem Ipsum

• Debugger for Chrome

• EJS language support

• ESLint

• Front Mattter

• Language-styles

• lit-html

• Lorem ipsum

• Manta’s Stylus Supremacy

• Markdown-formatter

• Markdowm+Math

• one Dark Pro

• Prettier - Code formatter

二. HTML基本元素

2.1. html元素

• 根元素
• lang属性: 设置语言
  • 翻译工具
  • 语音合成

2.2. head元素

• 字符编码
  • charset=“utf-8”
• title

2.3. h/p/strong元素

2.4. code-br-hr元素

2.5. 字体实体

> => >

2.6. span/div

2.7. img元素

• src属性
• alt属性

2.8. a元素

• href: 指定超链接
• target:
  • _self
  • _blank
  • _parent
  • _top
  • 指定值
  • 和iframe结合使用
• base元素 -> http://www.baidu.com
• a元素的锚点链接
• a元素和img元素结合

三. CSS的基本使用

3.1. CSS引入方式

• 内联样式 style
• 文档样式表
• 外部样式表

3.2. CSS常用选择器

• 统配选择器
• 元素选择器
• id选择器

3.3. 最常用的CSS属性

• width
• height
• color
• background-color
• font-size

3.4. 颜色设置方式

• 关键字: red/orange/blue
• 十六进制: #ffaabb
• rgb: rgb(r, g, b)
• rgba: rgba(r, g,b,a)

四. 文字和字体

4.1. 文字属性的设置

• text-decoration
  • underline : 下划线
  • line-through: 删除线
  • none
  • overline: 上划线
• letter-word-spacing
• text-transform(不常用)
• text-indent:
  • 缩进（2em）
• text-align:
  • 内容对齐
  • left
  • right
  • center
  • 行内级元素

4.2. 字体属性的设置

• font-size
  • 百分比是基于父元素
• font-family
  • 如果希望中英文分别使用不同的字体，应该先将英文字体写在前面，中文字体写在后面
• font-weight
  • 一般是700加粗
• font-style
  • italic: 斜体
  • oblique: 文本倾斜显示
• font-varient(不常用)
• line-height
  • 等于行高时文本垂直居中（间距等分）
• font缩写属性:
  • font-size/line-height font-family
  • style varient weight(前三个可以省略，也可以交换顺序) size/line-height family

五.CSS其他选择器

5.1. 属性选择器

[title="abc"] {
    
}

5.2. 后代和子代选择器

.box a{
    
}

.box>a {
    
}

5.3. 相邻兄弟和全兄弟

div+p {
    
}

div~p {
    
}

5.4. 交集和并集

div.box {
    
}

div, .box{
    
}

5.5. 伪类选择器

• 目标伪类: :target
• 元素状态伪类: :enable
• 动态伪类:
  • :link：未访问之前的状态
  • :visited：访问之后的状态
  • :focus：指当前拥有输入焦点的元素（能接收键盘输入）
    • 去除a元素的focus效果： a:focus {outline: none;}
  • :hover：鼠标移动到链接之上的状态
  • :active：长按未松开的状态
• 结构伪类:

  • nth-child：父元素中的第一个子元素

    • 数字
    • n

  • nth-last-child

  • nth-of-type：只计算同类型的元素

  • nth-last-of-type

  • only-child：是父元素中唯一的子元素

  • root：根元素，就是HTML元素

  • empty：代表里面完全空白的元素

  • :not（x）：除什么以外

    • x只能是简单的选择器，不能是组合选择器

5.6. 伪元素使用

• ::first-letter：针对首字母设置属性

• ::first-line

• ::before：用来在一个元素的内容之前插入其他内容（可以是文字、图片）

• ::after：用来在一个元素的内容之后插入其他内容（可以是文字、图片）

  • 可以用来设置清除浮动的选择器（放在浮动元素的父元素中）

    • /* 清除浮动 */
      .clear-fix::after {
          content: "";
          display: block;
          clear: both;
          height: 0;
          visibility: hidden;
      }
      
      .clear-fix {
          *zoom: 1;
      }
      

六. CSS的特性

6.1.继承

• 一般和文字相关的都是可以继承的
  • font-size
  • line-height
  • color

6.2. 层叠

• 后面写的会层叠前面
• 权重:
  • !important：10000
  • 内联样式：1000
  • id: 100
  • class: 10
  • 元素: 1
• 多个选择器时权重的比较：
  • p从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较
  • p如果数量相同，比较下一个较小的权值，以此类推
  • p如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”

七. 其他HTML元素

7.1. 列表元素

• ol li：有序
• ul li：无序
• dl dt dd：定义列表
• list-style: 设置li元素前面标记的样式
  • desc/circle/square/…
  • none (重要)：无样式，经常用在像导航栏这样的列表中

7.2. table

• tbody：表格的主题

• caaption：表格的标题

• thead：表头（配合th：表头单元格）使用

• tfoot：页脚（一般不用）

• colspan/rowspan：单元格可跨行列数

• border-collapse: collapse

  • 单元格的合并

7.3.表单

• form

  • enctype

    • multipart/form-data：文件上传时必须为这个值，并且method必须是post

  • input: p单行文本输入框、单选框、复选框、按钮等元素

    • type
      • text/password/radio/checkbox/button/reset/submit/file
    • maxlength：允许输入的最大的字数
    • placeholder: 占位文字
    • readonly: 只读
    • disable: 禁用
    • checked: 默认被选中
    • name----value：键值对 名字----值

  • textarea：多行文本框

  • select、option：下拉选择框

  • button：按钮

  • textarea：多行文本

    • resize: none(禁止缩放)/horizontal(水平)/vertical(垂直)/both（水平垂直）

  • label：表单元素的标题

    <laber for="username">用户名：</laber>
    <input id="username" type="text" name="name">
    

  • fieldset：表单元素组（整个表单的边框）

  • legend：fieldset的标题（边框上的信息）

八. CSS元素类型

8.1. 元素的类型

• 展示方式

  • 块级元素：不能在同一行显示
  • 行内元素：不能设置宽高，只能由内容撑起

• 浏览是否替换方式

  • 替换元素
  • 非替换元素

• display:

  • inline
  • block
  • inline-block：同一行显示，并可以设置宽高
  • none：隐藏

• visibility:visible/hidden

• overflow

  • scroll：滚动机制
  • auto
  • visible：内容溢出依旧可见
  • hidden：溢出直接裁剪

• 元素之间的空隙是如何产生的

  • 浮动解决
  • flex

• 元素的嵌套

  • 块级元素可以嵌套行内级元素
  • p元素不要嵌套div元素

九. CSS的盒子模型

9.1. 重要的几个属性

• content:
  • width
  • height
  • max-width
  • min-width
  • max-height
  • min-height
• padding
  • padding缩写属性
• margin
  • margin缩写属性
  • 传递和折叠问题
    • 只有上下会传递和折叠
• border
  • border: 1px solid red;
• 行内元素:
  • width/height/margin-top/margin-bottom无效
  • padding-top/bottom ， border-top/bottom比较特殊
    • 看来有设置但是不占据空间
• 设置圆角效果
  • border-radius：参考当前元素的border+padding+width
    • 4个值的顺序是top-left、top-right、bottom-right、bottom-left（顺时针方向
• 设置轮廓
  • outline
• 设置阴影
  • box-shadow: 第一个是水平方向上的偏移，第二个是垂直方向上的偏移，第三个值是使阴影模糊，第四个是延伸距离，颜色，inset（向内扩散阴影可以省略）色
• 文字阴影
• 水平居中的不同方式
  • text-align
  • margin: 0 auto;

十. 背景的设置

• background-image

  • 设置背景图片居中显示

    •  /* 向左移动img的一半 */
                  position: relative;
                  /* left: -960px; */
                  
                  /* 相对于自己移动 */
                  transform: translate(-50%);
        
                  /* 向右移动父元素（.box)的一半 */
                  margin-left: 50%;
      

• background-color

• background-repeat

  • repeat:平铺
  • no-repeat:不平铺
  • repeat-x/repeat-y

• background-size

  • cover 使图片覆盖整个元素
  • contain：对背景图片进行拉伸，按原来的比例拉伸
  • 设置百分比 或者具体的大小

• background-position

• background-attachment

  • scroll：背景图片跟随元素一起滚动（默认值）local：背景图片跟随元素以及元素内容一起滚动 fixed：背景图片相对于浏览器窗口固定

• background缩写属性:

• 光标: cursor: pointer

• 精灵图

十一. 定位的使用

• position:
  • static
    • 非定位元素
  • relative
    • 相对于自己的位置
  • absolute
    • 祖先元素的定位元素
    • 子绝父相
    • 绝对定位—会脱离标准流
  • fixed
    • 相对视口

十二. 浮动

• float

  • left
  • right
  • 脱标 -> block

• 浮动的六个规则

  • 定位元素会层叠在浮动元素上面
  • 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
  • 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

十三. 补充

13.1. transform

• translate：平移translate(x, y)

• scale：缩放：scale(x, y)

• rotate：旋转：rotate(deg)

• skew：倾斜：skew(deg, deg)

• transition：是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

  •   值1 transition-property：要过渡动画的属性名称
    
      值2：过渡动画所需的时间
    
      值3：动画的变化的曲线
    
      值4：动画的延迟等待
    

• transform-origin：变形的原点

13.2. vertical-align

13.3. 背景颜色渐变

• background: linear-gradient

13.4. HTML5元素补充

• 语义化标签:
  • nav：导航元素
  • header：头部元素
  • footer：尾部元素
  • section：定义文档某个区域的元素
  • article：内容元素
  • aside：侧边栏元素
• 多媒体元素
  • video
  • audio
• input补充
  • 属性: autofocus / multiple / size / placeholder
  • type补充
    • email
    • date
    • time

13.5. flex布局

• flex-container
  • display: flex/inline-flex
  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • flex-flow:缩写属性
  • align-content: 多行
• flex-items
  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

13.6. 网络字体

• 使用网络字体
• 字体图标
  • 阿里icon

13.7. 动画的补充

• 关键帧动画
  • @keyframes
  • animation: name duration function;
• 3D
  • perspective
  • transform-style: preserve-3d

13.8. 文字的换行

• white-space: nowrap
• text-overflow: ellipsis;
• overflow: hidden;

/* 显示两行文本并且显示省略号的方法 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;


/* 显示一行文本并且显示省略号的方法 */
/* 文字超出后是否自动换行 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

13.9. 移动端适配

• 视口的设置:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• rem设置
  • 相对html字体大小
  • 问题一: 设置不同html的font-size
    • 媒体查询
    • js代码
  • 问题二: 动态计算rem值
    • vscode插件
    • webpack postcss-pxtorem
    • less/sass计算

…等待后续

最后，不经历风雨,怎能在计算机的大山之顶看见彩虹呢！ 无论怎样，相信明天一定会更好！！！！！