HTML+CSS重要知识点总结

HTML重要知识点总结

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一个

一. 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;
      
      ```css
      /* 显示两行文本并且显示省略号的方法 */
      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计算