HTML-03

用户409379271368
62 阅读3分钟

  1. *(理解) *元素语义化

    每个标签的本质其实都是一样的,只是不同的标签,浏览器给它添加了不同的样式罢了,就比如写一个h元素,使用chrom浏览器查看代码,右侧找到计算属性可以看见h标签的样式,给段落标签添加h标签相同的样式,p标签也能实现和h标签相同的效果,所以说理论上来说,所有的HTML标签,都能够实现相同的效果,但是每个标签的不同样式被赋予了特殊的语义,比如标签标签h,段落标签p,应该使用正确的元素去做正确的事情.这样可以减少代码量,方便维护,并且有利于SEO.

  2. *(理解) *SEO ---搜索引擎优化

  3. *(理解) *字符编码

  4. *(掌握) *认识CSS

    CSS --- 层叠样式表,非编程语言,是计算机语言

    CSS的出现是为了美化HTML的，并且让结构（HTML）与样式（CSS）分离

  5. *(掌握) *CSS编写

    • CSS语法 : 属性:值; color: red;

    • 内联样式

      • 开始标签中的style属性中,多个属性之间用分号隔开

        ​

        内联样式

        ​

        <div style="font-size: 20px;color: red;">内联样式</div>

    • 内部样式

      • 将CSS放在HTML文件元素里的元素之中

      • 选择器:{CSS样式}

        <!DOCTYPE html>
<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>
​
  <style>
    div {
      color: red;
      background-color: orange;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div>我是div标签</div>
</body>
</html>

    • 外部样式

      • 创建一个.css结尾的文件

      • 在内部写上选择器+CSS样式

        .title {
  font-size: 30px;
  color: red;
  background-color: yellow;
}

      • 在需要使用该文件的HTML文件中引入

        <!DOCTYPE html>
<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">
  <!-- 引入CSS样式文件 -->
  <link rel="stylesheet" href="./css/03_css.css">
  <title>Document</title>
</head>
<body>
  <div class="title">DIV--title</div>
</body>
</html>

  6. *(掌握) *CSS注释与建议

    <!DOCTYPE html>
<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>
  <style>
    /* CSS注释 */
    div {
      /* 文字大小 */
      font-size: 30px;
      /* 前景色 */
      color: red;
    }
  </style>
</head>
<body>
  <div>盒子</div>
</body>
</html>

  7. CSS相关文档

    CSS官方文档地址: www.w3.org/TR/?tags%5B…

    CSS推荐文档地址: developer.mozilla.org/zh-CN/docs/…

    查询CSS属性的可用性: caniuse.com/

  8. CSS最常见的5种属性

    • font-size: 字体大小

      <!DOCTYPE html>
<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>
  <style>
    .title {
      /* 字体大小 */
      font-size: 20px;
    }
  </style>
</head>
<body>
  <!-- 默认16px -->
  <div class="title">HELLO WORLD</div>
</body>
</html>

    • color: 前景色

      <!DOCTYPE html>
<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>
​
  <style>
    .title {
      font-size: 24px;
      /* 前景色 */
      color: chocolate;
    }
  </style>
</head>
<body>
  <div class="title">Hello World</div>
</body>
</html>

    • background-color: 背景色

      <!DOCTYPE html>
<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>
​
  <style>
    .title {
      /* 背景色 */
      background-color: yellow;
    }
  </style>
</head>
<body>
  
  <div class="title">Hello World</div>
</body>
</html>

    • width&height: 宽度&高度

      <!DOCTYPE html>
<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>
  <style>
    .title {
      background-color: red;
      /* 宽度 */
      width: 100px;
      /* 高度 */
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="title">Hello World</div>
</body>
</html>
    1. *(掌握) *额外知识补充 --link元素

    外部资源链接, 将外部资源引入当前文档中(引入CSS, 创建站点图标)

    href: 被指定引入资源的URL

    rel: 引入资源的类型, icon: 站点图标, stylesheet: css样式, dns-prefetch: 做网站性能优化,提前解析域名,节省转换为对应ip地址的时间

    更多类型: developer.mozilla.org/zh-CN/docs/…

    <!DOCTYPE html>
<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>
  <!-- 引入CSS样式 -->
  <link rel="stylesheet" href="./css/style.css">
  <!-- 引入站点图标 -->
  <link rel="icon" href="../预习代码/images/favicon.ico">
</head>
<body>
  
</body>
</html>

  9. *(掌握) *额外知识补充 --CSS颜色各种表示方法

-   颜色关键字

    -   color: red
    -   <https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#%E8%AF%AD%E6%B3%95>

-   RGB/RGBA

    -   十六进制: #aabbcc
    -   缩写: #abc
    -   函数: rgb(0-255,0-255,0-255)5f

11. *(掌握) *额外知识补充 --浏览器渲染的流程

加载HTML(本质上下载的是index.html) --> 从上往下解析HTML --> 如果解析到引入外部的CSS资源时,则会分出一条分支下载资源,主分支继续解析HTML --> 主分支解析完HTML后会生成一颗DOM树(DOM Tree), 并且会等待其他分支解析CSS --> CSS解析完,结合DOM Tree则会生成一颗Render Tree(渲染树) --> 浏览器根据渲染树进行页面的渲染.
avatar
文章
阅读
粉丝