Day1前端知识串讲

ChrisorLoser
85 阅读3分钟

一、前端语言三剑客：
HTML,CSS,JavaScript。

1.HTML:超文本标记语言。HTML包括一系列标签，通过标签将网络上文档格式统一，使分散的Internet资源连接为一个逻辑整体。并通过浏览器和容器完成文本到页面内容的转换过程。（HTML相当于盖好房子）

2.CSS：层叠样式表，用于表现HTML，可以静态地修饰网页，也可以配合各种脚本语言动态对应地对网页各元素进行格式化。CSS选择器用于对HTML中的元素实现一对一，一对多或多对一控制。（CSS相当于给房子装修）常见CSS选择器种类有：
（1）类别选择器（class selector）
.demo{ color:skyblue; }
（2）标签选择器。如： 对p标签样式的声明：
p{ font-weight:600; font-size:16px; font-family:Times New Roman; }
（3）Id选择器；
（4）子选择器；
（5）子选择器；

3.JavaScript：一种用于开发Web页面的脚本语言（就是给网页增加动态的功能）。主要功能有：
（1）嵌入HTML于HTML页面；
（2）对浏览器事件作出响应；
（3）读写HTML元素；
（4）在数据被提交到服务器之前验证数据;

4.浏览器引擎：

从接收来的HTML、CSS、JavaScript等资源进行解析、构建DOM树，并计算CSS树，然后进行排版，渲染合成最后绘制，给用户呈现界面。

image.png


二、前端协作

  1. CSS in HTML:
    (1)行内样式：

      <a style="color:black;">hello word</a>

(2) 内部样式:

 <head> 
          <style type = text/ css>
            body { 
            background-color : blue ; 
           }
               p 
               { 
                   color : yellow; 
               }
          </style>  
 </head>

(3)外部样式：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

2.CSS in JavaScript:

    div.style.width="100px";
    div.setAttribute("class","div2")

    import React from "react";
    import "./APP.css";

三、HTML介绍：
一、标签
(1)基本语法

  • HTML并非图灵完备，只是一门标记语言。
  • HTML由标签组成
  • HTML文本Text
  • 注释Comment
  • DTD Document Type Defination
  • 处理信息ProcessingInstruction

(2)HTML基本标签

  • 文档类：,<head>,<body>
  • 闭合型：闭合标签(如<p></p>);空标签(如<br><img><input>)
  • 换行型：块级标签(如<div><h1><h2>...<h6>);行内标签(如<span><a>)
  • H5新元素：语义化标签；媒体标签(<video><audio><embed>);表单标签(<input type="date>);功能标签(<canvas><progress>)

    (3)head组成部分
  • title:标题，全局唯一
  • base:1.向页面所有相对URL提供前缀;2.全局唯一，不建议使用
  • meta:1.通常是约定好的键值对;2.例外：charset、http-equiv
  • link:rel决定类型，href决定引入地址
  • script:1.type指定MIME类型；2.可内嵌代码，可外链文件

    (4)body组成部分

image.png

二、HTML5
1.语义化 ：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析。常见语义化标签：

  • <h1>~<h6>
    -<header>
    -<nav>
    -<main>
    -<section>
    -<footer>
    -<strong>
    2.存储/音视频
    3.浏览器API
    4.可视化相关:如HTML5 Shadow DOM
    Shadow DOM（Shadow Document Object Model）是一种用于创建封装和隔离 Web 组件的技术。它允许开发者创建具有自己独立样式和行为的组件，同时将其与其他组件或页面的样式和行为隔离开来。

image.png

第一天的前端知识串讲大致介绍了前端所涵盖的范围，我也了解了前端的基础。为我今后的前端学习指明了路线，希望我能在青训营学有所成叭。

avatar
文章
阅读
粉丝