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

前端与HTML

什么是前端

解决 GUI 人机交互问题

跨终端
PC/移动浏览器
客户端/小程序
VR/AR 等
WEB技术栈

前端技术栈

JavaScript（行为）
CSS（样式）
HTML（内容）

前端应该关注哪些方面？

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

前端的边界

Node、Electron、Raect Native、Web RTC、WebGL、WebASSEMBLY

开发环境

浏览器

IE/Edge、Chrome、Firefox、Safari

编辑器

VSCode、Vim、WebStorm

HTML

HTML是什么？

HTML是 HyperText Markup Language 的缩写，即超文本标记语言

HyperText 的意思是超文本，包括：图片、标题、链接、表格

Markup Language 的意思是标记语言，包括：

<h1>文章标题</h1>

<img src = "photo.jpg" /> (src为属性名) （photo.jpg为属性值）

<!doctype html>
<hmtl>
	<head>
        <meta charset = "HTF-8" >
        <title>标题页面</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>标题内容</p>
    </body>
</hmtl>

DOM树

DOM树即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API DOM树包括：

元素（element）：文档中的都有标签都是元素，元素可以看成是对象
节点（node）：文档中都有的内容都是节点：标签，属性，文本
文档（document）：一个页面就是一个文档

语法

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

标题 h1 ~ h6

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

链接

<a href="https://www.baidu.com/">
    百度搜索
</a>

<a href="https://www.baidu.com/" target="_blank">
    百度搜索
</a>

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

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

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

输入

<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min = "2018-02=10">
<textarea>Hey</textarea>

选择

<p>
    <label><input type="checkbox" />1</label>
    <label><input type="checkbox" checked />2</label>
</p>

<p>
    <label><input type="radio" />3</label>
    <label><input type="radio" checked />4</label>
</p>

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

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

字体

<blockquote cite="">
    <p>
        hello world
    </p>
</blockquote>
<p>
    我最喜欢的一本书是<cite>小王子</cite>。
</p>
<p>
    在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。
</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

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

语义化是什么？

HTML中的元素、属性和属性值都拥有某些含义
开发者应该遵循御医来编写HTML
- 有序列表用 ol；无序列表用 ul
- lang 属性表示内容所使用的语言

谁在使用我们写的 HTML

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

语义化的好处

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

传达内容，而不是样式

<!-- <p style="font-size:32px">前端工程师的自我修养</p>  错-->
<h1>
    前端工程师的自我修养
</h1>

如何做到语义化

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

前端与HTML | 青训营笔记