# 第一节前端与HTML| 字节青训营笔记

一、前端概述

1、什么是前端？

解决图形界面下的人机交互问题
跨终端、兼容性（PC/移动浏览器、客户端/小程序、VR/AR等）
Web技术栈（HTML、CSS、JavaScript、HTTP等）

总结：前端工程师使用Web技术栈来解决多端图形用户界面交互问题。

2、前端技术栈

图片1.png

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

功能（核心问题）
性能
美观
兼容性
安全
无障碍
...

注：前端对于用户的体验来说，是非常重要的！

4、前端边界简介

node.js——开发服务器端的应用
electron、react native——开发客户端应用
Web RTC——在线传输、实现多人会议
Web GL——游戏开发
WEBASSEMBLY...
...

5、开发环境

浏览器+编辑器即可实现代码编辑及实现效果的查看，开发门槛较低

二、HTML简介

1、网站与网页

网站：指在因特网上根据一定规则，使用HTML等制作的、用于展示特定内容的网页集合；

网页：网站中的“一页”，通常是html格式的文件，通过浏览器来阅读。

网页是构成网站的基本元素，它是由图片、链接、文字、音频等元素组成。

2、HTML

都说HTML，那么HTML到底是个什么东西？

答：HTML全称：Hyper Text Markup Language,即超文本标记语言，一种用来描述网页的语言（非编程语言，是一种标记语言）。

所谓超文本，它有两层含义：

它可以加入图片、声音、动画、多媒体等内容，超越了文本的限制
它可以从一个文件跳转到另一个文件，与世界各地的其他主机的文件夹相连接，即超级链接文本。

3、用VS Code创建第一个HTML

使用VS Code创建第一个html文件，输入！+tab键快捷生成页面骨架结构，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<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>My first Web</title>
</head>
<body>
    This is my first html file!
</body>
</html>
复制代码

代码第一行，文档类型声明标签，位于文档的最前面，作用是告诉浏览器应使用哪个html版本来显示网页；

代码第二行，定义文档当前显示的语言，“zh-CN”表示中文网页；

代码第四行，规定文档字符集，“UTF-8”又称作万国符，基本包含全世界所有国家所需的字符。

HTML标签详解

标签 h1~h6 主要是标题标签，h1代表一级标题，h2二级标题，以此类推，具体的展示效果如下图：

列表标签主要有三类

有序列表 ol：在ol标签中使用li标签可以实现1-n的数字排序
无序列表 ul：在ul标签中使用li标签可以实现 . 的项目符号排序
定义列表 dl：在dl标签中可以使用dt（标题）dd（标题具体描述的值），且一个dt可以对应多个dd

链接标签 a

主要使用href属性来确定具体要跳转的页面链接以及跳转方式。

    <a href ="https://juejin.cn/?utm_source=gold_browser_extension">
    稀土掘金首页
    </a>
    
    <a href ="https://juejin.cn/?utm_source=gold_browser_extension"
    target="_blank">
    在新的页面中打开稀土掘金首页
    </a>
复制代码

输入标签 input

主要使用input + 属性值来实现不同效果的输入表示。

    <input placeholder ="请输入用户名">  输出一个可以填写文本信息的文本框
    <input type ="range">  输出一个可以调节范围的拉伸条
    <input type ="number" min ="1" max ="10"> 输出一个可以填写数字的文本框并规定范围
    <input type ="date" min ="2018-02-10"> 输出一个可以填写日期的文本框并有最小日期
    <textarea> Hey </textarea> 输出一个可以填写多行文字的文本框
复制代码

选项标签 p

多选标签：在p标签中使用label和input标签通过定义input的type属性为checkbox来实现多选功能

    <p>
        <label><input type="checkbox" /> 选项1</label>
        <label><input type="checkbox" /> 选项2</label>
    </p>
复制代码

单选标签：在p标签中使用label和input标签通过定义input的type属性为radio和name来实现单选功能，具体是通过比较多个radio之间如果name相同，则只能从name相同的选项中去选择一个，属于是互斥的关系。

     <p>
        <label><input type="radio" name="sport" /> 选项1</label>
        <label><input type="radio" name="sport" /> 选项2</label>
    </p>
复制代码

下拉选择标签：在p标签中使用select和option标签来实现

     <p>
         <select>
         <option>选项1</option>
         <option>选项2</option>
         <option>选项3</option>
         </select>
     </p>
复制代码

自定义输入标签：在p标签中使用input和datalist标签来实现,同样可以使用option标签来为用户输入的答案做一些提示信息。

      <input list="countries" />
      <datalist id="countries">
         <option>提示信息1</option>
         <option>提示信息2</option>
         <option>提示信息3</option>
       </ datalist>
复制代码

其他标签

blockquote:快捷引用标签，表示较长的引用，一般用于直接引用其他文章的一段话，使用cite属性指明文章的来源。
cite标签：短引用标签，引用较短的文字，例如引用其他人的作品名字，类似功能的有q标签。
code标签：代码标签，引用长段代码和较短的代码关键字。
strong标签：通常用于文本标签中，表示强调，突出所描述内容的严重性和紧急性，类似的有em标签，em标签主要侧重于在语气上的强调，通常去强调一个词的重音。

4、语义化

何为标签语义化？即指在选择html的标签时，注意不要过分注重文本的样式，而是应该注意文本所需传达的内容。

如何做到语义化？首先我们得了解每个标签及其对应属性的含义，再思考什么标签最适合去描述当前文本所需表达的内容，最后，我们应避免直接使用可视化开发工具，而不去了解其背后所蕴含的底层逻辑。

三、今日小节

今天是入营学习第一天，发现基础知识还是很重要的，仍需巩固。望在后面学习中，可以边加固已有的知识，边学到新的东西。

愿与诸位共勉！

第一节 前端与HTML| 字节青训营笔记

# 第一节 前端与HTML| 字节青训营笔记