前端与HTML｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第2天（一）什么是前端？解决 GUI 人机交

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

（一）什么是前端？

解决 GUI 人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR 等
Web 技术栈

Web 技术栈解决多段交互的技术

HTML

CSS

JavaScript

运行在浏览器，通过HTTP协议和服务器进行通信，渲染到页面

HTML、CSS -> 浏览器内核 -> 页面

浏览器：

shell：外壳
core：内核（JS执行引擎、渲染引擎）

IE: Trident

Firfox: Gecko

Chrome: Webkit / Blink

Safari: Webkit

Opera: Presto / Blink

谁在使用我们写的 HTML

开发者 - 修改、维护页面
浏览器 - 展示页面
搜索引擎 - 提取关键词、排序
屏幕阅读器 - 给盲人读页面内容

（二）前端应该关注哪些方面？

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

（三）HTML是什么

HTML (HyperText Markup Language) 超文本标记语言，不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。

书写一个一级标题：

<h1> 一级标题 </h1>

MDN：Mozilla Development Network，Mozilla开发者社区。

（四）标准的文档结构

HTML：页面、HTML文档

<!DOCTYPE html>

文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5。

不写文档声明，将导致浏览器进入怪异渲染模式。

<html lang="en">
</html>

根元素 <html></html>

lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

<head>

</head>

文档头，文档头内部的内容，不会显示到页面上。

<meta>

<title>网页标题</title>

属性 = 属性名 + 属性值

<meta charset="UTF-8">

有些元素没有结束标记，这样的元素叫做：空元素

空元素的两种写法：

<meta charset="UTF-8">
<meta charset="UTF-8" />

<body> <h1> 一级标题 </h1> </body>

（五）语义化

什么是语义化

1. 每一个HTML元素都有具体的含义

a元素：超链接

p元素：段落

h1元素：一级标题

2.传达内容，而不是样式

所有元素与展示效果无关

元素展示到页面中的效果，应该由CSS决定。

因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

重要：选择什么元素，取决于内容的含义，而不是显示出的效果

为什么需要语义化？

代码可读性
可维护性
搜索引擎优化
提升无障碍性

搜索引擎优化（SEO）

搜索引擎：百度、搜狗、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码

如何做到语义化?

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

（六）文本元素

h1--h6：表示1级标题--6级标题（h1最大，然后依次递减）
有序列表

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

无序列表

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

定义列表

<dl>
 <dt>导演：</dt>
 <dd>陈凯歌</dd>
 <dt>主演：</dt>
 <dd>张国荣</dd>
 <dd>张丰毅</dd>
 <dd>巩俐</dd>
 <dt>上映日期：</dt>
 <dd>1993-01-01</dd>
</dl>

a标签

<a href="https://www.bytedance.com/">
  字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>

img标签
src 属性是必须的，嵌⼊图⽚的⽂件路径
alt 属性包含⼀条对图像的⽂本描述，⾮强制。屏幕阅读器会将这些描述读给需要使⽤阅读器的使⽤者听，让他们知道图像的含义。图像⽆法加载时(⽹络错误、内容被屏蔽或链接过期时)，浏览器会在⻚⾯上显示alt 属性中的⽂本

<img src="/view.jpg" alt="图片">

<cite>

<cite>元素通常⽤于引⽤作品标题
包括论⽂、⽂件、书籍、电影等的引⽤

⾳视频

<video></audio>

src 属性是必须的，嵌⼊视频⽂件路径
controls 是否展示浏览器⾃带的控件，可以创建⾃定义控件
autoplay 是否⾃动播放
source元素表示视频的可替代资源(不同格式、清晰度，读取失败或⽆法解码时可以依次尝试)

<audio 
  src="/assets/music.ogg"
  controls
></audio>

<video
  src="/assets/video.mp4"
  controls
></video>

<input>

输入（表单输入）元素
<input>的工作方式相当程度上取决于type属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text。

<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>

HTML <select> 元素表示一个提供选项菜单的控件：

<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

萌新上路，如有不足之处，还请多多指教。

前端与HTML｜ 青训营笔记