前端与HTML|青训营笔记

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

1、什么是前端?

需要解决的是GUI（图形界面）人机交互的问题

一句话总结： 前端工程师是使用web技术栈解决多端图形用户界面交互问题的工程师。

2、前端技术栈

主要技术分为三层，最基础的是HTML，负责页面、结构和内容。

页面中可以使用CSS设置页面的样式，例如位置、大小、颜色等

使用JavaScript定义网页的行为 HTML、CSS、JavaScript运行在浏览器里面，浏览器通过HTTP协议和服务器进行通信，把前端的代码通过HTTP协议从服务器获取到，然后渲染成我们看到的页面。浏览器也能把用户填写的内容或一些行为通过HTTP协议交到服务器端。

HTML、CSS、JavaScript和网络协议构成了前端最基础的技术栈。

3、前端应该关注哪些方面？

• 功能
• 美观
• 无障碍
• 安全
• 性能
• 兼容
• 体验

4、前端的边界？

• Node.js：服务器端应用
• ELECTRON、React Native：客户端应用
• WebRTC：p2p在线传输（多人会议）
• WebGL：3D游戏
• WebASSEMBLY：使C++/Rust等语言代码编译成可以在直接浏览器运行的代码

前端是一个发展很快的领域，技术不断更新，我们也要持续学习，才能跟上发展。

5、HTML是什么？

HyperText

• 超文本 可以包含图片、标题、链接、表格

Markup Language

• 标记语言 用开始标签和结束标签表示
• 在标签上可以设置属性

DOM树

树型类结构，包含文档的根节点

把HTML代码转化成对应的树型类结构，里面的每一个节点称为DOM节点。

6、HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如image、input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如required、readonly

标题

h1~h6，h1是一级标题，h2是二级标题，以此类推

列表

有三类标签

​

1. order list
2. 有序列表
3. 是这样的
4. 看

​

​

• unordered list
• 无序列表
• 可以没啥关系
• 随便

​

​

• 导演：

  • dl，表示定义列表，类似t-value形式，属性名属性值
  • AA

• title

  值

• 多个dt可以对应多个dd，多对多

  • 11
  • 22
  • 33

​

链接

 <a href="https://www.bilibili.com/">哔哩哔哩
 </a>

如果想在新窗口打开，而不是替换原有页面打开，可以添加target="_blank"

 <a href="https://www.bilibili.com/"
 target="_blank">哔哩哔哩
 </a>

插入多媒体

如图片、音频、视频

 <img src=""  alt=""  width=""  />

• src表示图片地址

 <audio 
    src=""
    controls
 ></audio>

• controls表示默认显示播放控件

 <video 
    src=""
    controls
 ></video>

输入

 <input placeholder="">
 <input type="range">
 <input type="number" min="1" max="10">
 <input type="date" min="2022-07-24">
 <input type="checkbox" name="">
 <input type="radio" name="">

• placeholder 表示一个占位符，默认显示
• type，range范围，number数字，date日历，checkbox多选框，radio单选框
• 如果选项比较多，可以用select，选项写进option，下拉框

 <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
 </select>

• 选择时也可以给提示的内容
• 当需要输入比较长的文字，多行的文字，可以用

 <textarea>文本域</textarea>

引用

​

nihao 你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好

长引用，快捷引用，cite写来源

我最喜欢的一本书是小王子

<cite>标签，短引用，章节啊，标题啊

 <q>具体的引用的内容</q>

• 短引用

 <code>const</code>

• 引用单行代码  

  
         var sum = new Array(10);
         sum[0] = 0;              
         var iCount;
         for(iCount = 0; iCount < sum.length; iCount++) {
         if(iCount!=0)
         sum[iCount] = sum[iCount-1] + iCount;
         print(iCount + ": " + sum[iCount]);
   }
   

   

  引用多行代码

##### 强调


 <strong>需要强调的内容</strong>
 <em>需要强调的语气落在哪个词上</em>