HTML/CSS基础笔记 | 青训营笔记

头发少的程序媛
111 阅读2分钟

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

1.HTML

1.1 DOM树的构造

image.png

1.1 HTML语法

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

1.2列表

  • 有序列表ol，li
  • 无序列表ul,li
  • 自定义列表dl,dt,dd
  <h1>有序列表</h1>
  <ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
  </ol>
  <h1>无序列表</h1>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <h1>自定义列表</h1>
  <dl>
    <dt>爱好</dt>
    <dd>吃饭</dd>
    <dd>睡觉</dd>
    <dt>日常</dt>
    <dd>敲代码</dd>
  </dl>
</body>

结果：

image.png

1.3 较陌生输入标签

image.png

image.png

1.4 文字格式化

  <blockquote cite="hhwuna">
   <p>书山有路勤为径，学海无涯苦作舟</p>
  </blockquote>
  <!-- 标注书名 -->
  <p>最喜欢<cite>山海经</cite></p>
  <!-- 引用代码 -->
  <pre><code>
    let a = 1;
    let b = 2;
  </code>
  </pre>
  <!-- 加粗字体 -->
  <p>我喜欢<strong>敲代码</strong></p>
  <!-- 斜体 -->
  <p>我喜欢<em>跳舞</em></p>

结果：

image.png

语义化是什么？

  • HTML中的元素、属性以及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML

如何做到语义化？

理解标签的含义，根据具体的场景来选用合适的标签，而不是一昧直接使用相等含义标签

2.CSS

2.1 CSS是什么？

用来定义页面元素的样式（设置属性，动画效果）

2.2 如何引用CSS?

有三种方式

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 外部引入 -->
  <link rel="stylesheet" href="./index.css">
  <!-- 嵌入式 -->
  <style>
    * {
      color: red;
    }
  </style>
</head>
<body>
  <!-- 内联式 -->
  <p style="color: red;">hhhhh</p>
</body>
</html>

注意：内联式优先级更高

2.3 CSS工作方式

image.png

2.4 选择器Selector

1.通配选择器 * ：body内所有内容都会被选择器内样式所渲染

2.标签选择器(例如h1):所有该标签都会被渲染

3.id选择器（#app):所有id为app的标签都会被渲染

4.类选择器(.root):所有类别为root的标签都会被渲染

5.属性选择器(input[disabled]):所选属性被渲染

进阶写法：

  • 标签名[属性*='属性值']：只要满足条件都有效，例如Input[type*='t']表示只要type属性中有t字符都有效。
  • 标签名[属性^='属性值']:^代表开始，例如Input[type^='p']表示只要type属性中以p字符开头都有效。
  • 标签名[属性$='属性']:$代表结束，例如Input[type$='t']表示只要type属性中以t字符结尾都有效。

2.5 伪类

不基于标签和属性定位元素

几种伪类：状态伪类和结构性伪类

1.状态伪类

  <label>用户名:
    <input type="text">
  </label>
  <style>
    /* 超链接被点击之前 */
    a:link {
      color: pink;
    }
    /* 链接被访问之后 */
    a:visited {
      color: red;
    }
    /* 悬停：鼠标放在标签上时 */
    a:hover {
      color: green;
    }
    /*激活：鼠标点击标签，但不松手*/
    a:active {
      color: orange;
    }
    /* 某个标签获得焦点时的样式 */
    /* 以下代码指当输入内容时外边框不突出 */
    input:focus {
      outline: none;
    }
  </style>

2.结构性伪类

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
    <li>梨</li>
    <li>桃子</li>
  </ul>
  <style>
    /* 第一个元素*/
    li:first-child{
      color: aqua;
    }
    /* 最后一个元素 */
    li:last-child {
      color: red;
    }
    /* 改变第2n个元素 */
    li:nth-child(2n){
      color: orange;
    }
  </style>

结果：

image.png

2.6 选择器组合

image.png

2.7 字体

缩写：font:style weight size/line height family(size和family必须写)

  • line-height(行高):一般设置为height来保证字体垂直居中

image.png

  • text-align:center/left/right/justify
  • spacing:letter-spacing和word-spacing(取值为xxpx)
  • text-indent(缩进):取值为xxpx或xxem
  • text-decoratin:none/underline/linethrough/overline
  • while-sapce(处理元素内空白):normal/pre/nowrap/pre-wrap/pre-line/inherit

3.总结

本堂课复习了html和css的一些基本属性以及原理，具体可查看MDN官网或W3school

avatar
文章
阅读
粉丝