前端与HTML | 青训营笔记

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

前情提要：

本次简单介绍了前端，HTML的标签及使用

主要内容

什么是前端？

前端主要解决的问题 —— 解决GUI人机交互问题

前端主要面对的设备 —— 跨终端：PC/移动浏览器、客户端/小程序、VR/AR等

前端主要的技术栈 —— Web技术栈

那么前端工程师又是做什么的呢？

前端工程师就是使用web技术栈解决多端图形用户页面交互问题的工程师

我们知道想跨入前端，首先要学会的就是前端三大件： HTML、CSS、JavaScript。那你知道这三部分分别负责的是什么吗？ html——内容、css——样式、javascript——行为

三者都是运行在浏览器中，浏览器通过http协议和服务器进行通信。服务器可以通过协议将代码运行显示在浏览器中，浏览器也可以通过http协议将用户的行为或填写的内容提交到服务器端。

当我们在进行网页开发是，不光要注意我们的代码能否实现功能，还应该注意：页面的美观，视觉无障碍，数据是否安全，网站性能，多设备的兼容性，用户的体验这些方面。

如果想开发，我们要先做一些准备工作。

我们要在我们的电脑上配置一些开发环境：

浏览器：IE/Edge、Chrome、Firefox、Safari

编辑器：VSCode、Vim、WebStorm

一切准备就绪，那就一起进入前端的世界吧！

首先要掌握的是HTML

什么是HTML

HTML 全称 HyperText Markup Language.他是一种超文本标记语言。只要通过标签来对网页中的文本、图片、音频、视频等内容进行描述。

让我们一起来看一段代码吧！

HTML代码：

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

我们在编写之前基本都会使用！+ tab快捷键来自动生成基础模板，很少会知道这几行代码到底有什么用，接下来我们一起来仔细看一下吧！

分析如下：

<!DOCTYPE html>

这个标签，标记了我们当前在使用的html文件是什么版本，浏览器会根据这个来确定用什么模式来渲染页面，如果不写，可能浏览器就会用比较老的版本来进行渲染，这样出来的页面可能不是我们想要的。

<html></html>

html标签是文档的根标签，其他所有的标签都写在html标签内。

<head></head>

head标签中会放入页面的源数据，页面上不用显示，但是又很重要的信息，例如页面的编码形式，页面的标题等等。

<body></body>

body标签中放入的就是页面需要呈现的内容，用户所能看到的界面。比如文字，图片等

当我们把代码写完进行运行时，浏览器会将我们的代码解析，生成DOM树—— 也就是将html代码转换成一种树形结构，里面的每一个节点称之为DOM节点。

DOM树如下显示：

HTML语法准则：

标签和属性不区分大小写，推荐小写

空标签可以不闭合，比如： input， meta， img， br等

属性值推荐用双引号进行包裹

某些属性值可以省略进行简写，比如： required， readonly等

  <p class="box">多选按钮</p>
  <p>
    <label><input type="checkbox" name="fruit"/>苹果</label>
    <label><input type="checkbox" name="fruit"/>香蕉</label>
  </p>

  <p class="box">单选按钮</p>
  <p>
    <label><input type="radio" name="fruit"/>苹果</label>
    <label><input type="radio" name="fruit"/>香蕉</label>
  </p>

  <p class="box">下拉菜单</p>
  <p>
    <select>
      <option>苹果</option>
      <option>香蕉</option>
      <option>橘子</option>
      <option>柠檬</option>
    </select>
  </p>

  <p class="box">快速输入提示</p>
  <input list="countries" />
  <datalist id="countries">
    <option>Greece</option>
    <option>United Kingdom</option>
    <option>United States</option>
  </datalist>

效果图：

文本类标签

块引用（长引用）—— blockquote

<blockquote cite="https://baike.baidu.com/item/blockquote/3348394?fr=aladdin">
    <p> blockquote之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。</p>
</blockquote>

blockquote ：直接引用别人的一段话

cite ：表示这段话来源于那

展示：

短引用 —— cite

<p>我喜欢的一本书是<cite>小王子</cite></p>

cite: 这里的cite是标签，用于引用简短的文字，比如别人的作品的名字或者章节

展示：

短引用 —— q

q：定义一个短小的引用，一般是具体内容的引用

<p>在第一章我们讲过<q>字符串是不可变量</q></p>

展示：

代码 —— code， pre + code（引用多行代码）

<p>单行代码</p>
<p>
  <code>const</code>声明创建一个制度的常量
</p>

<p>多行代码</p>
<p>
  <pre>
    <code>
      const add = (a, b) => a + b;
      const multiply = (a, b) => a * b;
    </code>
  </pre>
</p>

效果：

强调 —— strong, em

<p> 在投资之前，<strong>一定要做风险评估</strong>。</p>
<p>Cats <em>are</em> cute animals.</p>

展示：

区别：

em和strong都有强调的作用，但是还是有区别的。

1、em 显示为斜体， strong 显示为黑体。

2、使用em标签会引起语义上的变化，强调的主体不同，语义也会不一样。而strong则是将重要的部分进行着重显示，不会引起语义上的变化。

前端与HTML | 青训营笔记

前端与HTML | 青训营笔记

前情提要：

主要内容

什么是前端？

那么前端工程师又是做什么的呢？

什么是HTML

HTML语法准则：

标签

标题：h1 ~ h6

列表：

链接标签 —— a

媒体标签

表单标签

文本类标签