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

一、本堂课重点内容：

前端是什么
前端的应用
HTML介绍
HTML语义化

二、详细知识点介绍：

前端：

什么是前端：

解决GUI人机交互问题
实现多端互通
Web技术栈

前端技术栈

HTML 对应内容
CSS 对应样式
Javascript 对应行为

前端与服务器之间通过网络协议通信

如何提高用户体验：

功能齐全
界面美观
支持无障碍阅读
网络隐私安全性好
工作性能好
兼容性好

应用场景举例：

node.js ：开发服务器端
electron/React Native ：开发客户端
webRTC ：p2p在线传输多人会议
webGL ：3D游戏
webASSEMBLY ：把一些语言编译成直接在浏览器运行的代码

HTML：

HTML：HyperText Markup Language 超文本标记语言

超文本：指图片、标题、链接、表格等非简单文本的表达形式
标记语言：用成对（开始/结束）的标签来表示一段内容，标签里面可以设置其内容的属性

DOM树

DOM（Document Object Model）即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。
DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。
将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。
DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。

语法：

标签和属性不分大小写
空标签可不闭合
属性值最好用 “ ”包裹
部分属性值可省略，只写属性名

语义化：

HTML中的元素、属性及属性值都有含义
开发者应遵循语义来编写HTML

如何做到语义化：

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

还有标题，列表，链接，多媒体，输入控件，选择控件，引用等标签用法，在下一部分实践中演示。

三、实践练习例子：

只有多实践使用才能熟悉其语法用法。

网页基本框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
主体
</body>
</html>

多级标题及段落使用

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<p>这是一个段落：本节课程围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开，
    层层解析前端技术栈的构成，以及作为前端最为基础的技术 - HTML 基础语法和基本功能，
    在实际研发过程中如何做到 HTML 语义化？</p>

列表使用

</ol>
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>
<dl>
    <dt>标题1：</dt>
    <dd>表1</dd>
    <dd>表1</dd>
    <dd>表1</dd>
    <dt>标题2：</dt>
    <dd>表2</dd>
    <dd>表2</dd>
    <dd>表2</dd>
</dl>

链接的使用

<p><a href="test1.html">链接</a></p>

<a href="test1.html"   target="_blank">新标签页打开链接</a>

多媒体的使用

<img src="kara-art.jpg"
     alt="Metal movable type"
     width="400"
/>

<audio
    src="Fade.mp3"
    controls
></audio>

<video
    src="bot-handy.flv"
    controls
></video>

输入的使用

<p><label>
    <input placeholder="输入提示"/>
</label></p>

<p><label>
    <input type="range"/>
</label></p>

<p><label>
    <input type="number" min="1" max="100"/>
</label></p>

<p><label>
    <input type="date" min="2019-12-18"/>
</label></p>

<p><label>
    <textarea>Hello</textarea>
</label></p>

一些控件的使用

<p>
    <label><input type="checkbox"/>多选1</label>
    <label><input type="checkbox" checked/>多选2</label>
</p>
<p>
    <label><input type="radio" name="type">单选1</label>
    <label><input type="radio" name="type">单选2</label>
</p>
<p>
    <label>
        <select>
            <option>选项1</option>
            <option>选项2</option>
            <option>选项3</option>
        </select>
    </label>
</p>
<p>
    <label>
        <input list="countries"/>
        <datalist id="countries">
            <option>China</option>
            <option>Greece</option>
            <option>United Kingdom</option>
        </datalist>
    </label>
</p>

引用的使用

</p>
<blockquote cite="引用地址">
    <p>引用内容</p>
</blockquote>
<p>用法：<cite>短引用</cite></p>

四、课后个人总结：

本节课主要是简单梳理了前端的基础知识以及讲解了HTML的基本语法。目前前端的发展已经不仅仅是一个页面这么简单，它的应用已经涉及到很多方面。然后总结一下HTML的重点就是：传达内容，而不是样式，样式交给后面的CSS。

本篇文章是学习笔记初尝试，如有错漏请多多包涵。

五、引用参考：

版权声明：本文 DOM树 的相关内容引用了博主「二哈汪汪叫」的文章内容，原文链接：blog.csdn.net/wei12733560…

[前端与 HTML | 青训营笔记]