前端与HTML介绍|青训营笔记这是我参加『第四届青训营』笔记创作的第1天什么是前端?前端涉及的技术栈? 前端：解决GU

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

什么是前端?前端涉及的技术栈?

前端：解决GUI人机交互的问题
前端技术栈：HTML CSS JavaScript

前端技术栈.png

浏览器的工作原理：用户在浏览器中发出请求，该请求命令通过网络协议传到服务器端；经过某种后端语言处理后，服务器返回给浏览器处理结果；最后，浏览器将结果渲染到网页，呈现给用户。

这个过程中，服务器返回给浏览器的请求结果就是我们前端工程师所要实现的内容。具体包括：通过HTML定义网页的内容，CSS设置网页的样式以及JS实现网页的交互行为。

前端的边界：当前，前端不再是只包含页面这一范畴，比如：
1. 可以利用node.js 开发服务器端的应用；
2. 可以利用elecron和 RN 开发客户端的应用；
3. 可以利用WebRTC进行P2P的在线传输，实现多人会议等；
4. 可以利用WebGL开发3D游戏等；
5. 可以利用WebAssembly将其他C++等语言编写成可以直接在浏览器中运行的代码。

前端边界.png

前端技术发展迅速，不断学习才能跟上发展的脚步！

HTML

代码风格

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
  <h1>一级标题</h1>
   <p>段落内容</p>
</body>
</html>

基本语法

html标签关注语义，而非样式。

<body>
        <!-- 
        块元素（block element）
            - 在网页中一般通过块元素来对页面进行布局
            - div
        行内元素（inline element）
            - 行内元素主要用来包裹文字
            - span p h1-h6
        -->
            <div>块元素</div>
            <p>一行文字</p>

</body>

布局标签
1. header 表示网页的头部
2. nav 表示网页中的导航
3. main 表示网页的主体部分(一个页面中只会有一个main)
4. article 表示一个独立的文章
5. aside 和主体相关的其他内容（侧边栏）
6. footer 表示网页的底部

内容划分.png

超链接

<body>
      <!--       
          使用 a 标签来定义超链接
          属性：href 指定跳转的目标路径
      --> 
      <a href="https://www.baidu.com">超链接</a>
</body>

图片标签

<body>
      <!-- 
          使用 img 标签来引入外部图片，img标签是一个自结束标签 
          属性：
              src 属性指定的是外部图片的路径
              alt 图片的描述，这个描述默认情况下不会显示，一般图片无法加载时显示       
      -->
        <img src="./img/cat.png" alt="猫咪">
</body>

DOM树

DOM树.png

HTML使用

HTML使用.png

总结

HTML作用：定义网页的基本结构；
HTML语法：关注标签语义，而不是样式；
查阅MDN文档，尽可能了解标签的属性含义。