HTML与CSS讲义整理 | 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第1天。

本堂课重点内容

简单介绍了HTML以及HTML中常用的一些标签

简单介绍了CSS中的基本属性

详细知识点介绍

HTML

HTML部分比较熟悉，仅作拾遗。

语法：

• 标签和属性都不区分大小写，推荐小写
• 空标签可以不闭合
• 属性值推荐用双括号包裹
• 某些属性值可以省略

dl是定义列表，内含dt和dd。

CSS

在页面中使用CSS：

• 外链（推荐）
• 嵌入（SFC）
• 内联（UI组件库）

CSS如何工作：

在解析HTML时加载并解析CSS，添加样式到DOM树的节点中。

选择器：

• 通配选择器

• 标签选择器

• id选择器

• 类选择器

• 属性选择器

   <style>
   [disabled]{
       background: #eee;
       color: #999;
   }
   </style>
  

  如果我们想要对执行标签的特定属性值元素进行选择：

   <style>
   intput[type="disabled"]{
       color: #999;
   }
   /* 匹配以#开头的href */
   a[href^="#"]{
       
   }
   /* 匹配以.jpg结尾的href */
   a[href$=".jpg"]{
       
   }
   </style>
  

• 伪类选择器

  • 状态伪类

     <style>
     a:link{
         
     }
     :focus{
         
     }
     <style>
    

  • 结构伪类

     <style>
     li:first-child{
         
     }
     <style>
    

• 组合

  名称	语法	说明	示例
  直接组合	AB	同时满足	input:focus
  后代组合	A B	B为A后代	nav a
  亲子组合	A>B	B为A子元素	section>p
  兄弟选择器	A~B	B在A后且与A同级	h2~p
  相邻选择器	A+B	B紧跟在A后	h2+p

  A,B代表选择器组

颜色：

• RGB：红 绿 蓝
• HSL ：色相 饱和度 亮度
• 关键字
• alpha：透明度，可以缀在RGB和HSL后

字体font-family：

最后加上通用字体族，英文字体写中文字体前面，通用字体族：

• Serif：衬线体，线条粗细不均一（宋体）
• Sans-Serif：无衬线体，线条粗细均一（黑体）
• Cursive：手写体
• Fantasy：范特西
• Monospace：等宽字体（编程常用）

font-size：

• 关键字：

  • small medium large

• 长度：

  • px em

• 百分数

  • 相对于父元素字体大小

font-weight：字重，100-900，400为normal，700为bold，需要字体支持。

line-height：行高，两行文字baseline之间的距离

 h1{
     /* 斜体 粗细 大小/行高 字体族*/
     font: bold,14px/1.7 Helvetica,sans-serif;
 }

HTML中多个连续的空格和换行会被合并成一个，可以通过white-space控制：

• normal：默认
• nowrap：不换行
• pre：保留所有
• pre-wrap：保留换行，合并空格
• pre-line：合并空格，保留换行