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

前端概述

前端的核心工作：使用Web技术栈解决多终端GUI（图形用户界面）下的人机交互问题
前端技术栈：

HTML：用于展示页面内容
CSS：用于设置页面样式
JavaScript：用于定义网页中的行为
网络协议：负责传输服务器与浏览器之间的数据。比如：浏览器向服务器发送请求，服务器响应请求，通过HTTP协议将服务器的前端代码传递给浏览器，然后浏览器用这些代码渲染页面，用户填写的表单等数据也可以通过HTTP协议传递给服务器

前端应该注意的问题：

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

借助以下工具，前端还可以做

Node.js：让JavaScript不局限在浏览器运行，可以开发服务器端的应用
ELECTRON：开发客户端的应用
React Native：开发客户端的应用
WebRTC：实现P2P（点对点）的在线数据传输，实现在线多人会议
WebGL：开发出较为流畅的3D游戏
WebASSEMBLY：可以将其他语言（比如C++）编译成可以在浏览器里运行的代码

HTML概述

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

HTML文件结构

<!doctype html>标记当前页面的HTML的版本，浏览器据此采用相应的渲染模式
<html></html>文档根标签
<head></head>包含了文档的元（meta）数据，如定义网页编码格式为 utf-8
<title></title>元素描述了文档的标题
<body></body>元素包含了可见的页面内容

浏览器会把HTML代码解析成一个DOM树

HTML常用标签

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <!-- 音频标签 -->
    <audio src="D:\桌面\医护模拟系统代码\录音.m4a" controls></audio>
    <br>
    <!-- 视频标签 -->
    <video  height="300" controls></video><br>
    <!-- 输入框，placeholder表示输入框中的提示语 -->
    <input placeholder="Please input your username."><br>
    <!-- 范围调节 -->
    <input type="range"><br>
    <!-- 数字 -->
    <input type="number" min="0" max="10"><br>
    <!-- 日期输入 -->
    <input type="date"><br>
    <!-- 多行输入 -->
    <textarea name="MultiInput" id="" cols="30" rows="10">多行输入</textarea><br>
    <!-- checkbox表示复选框 -->
    <p>
        <label><input type="checkbox">香蕉</label>
        <label><input type="checkbox" checked>苹果</label>
    </p>
    <!-- radio表示单选按钮 -->
    <p>
        <!--通过name属性值来划分单选组-->
        <label><input type="radio" name="ball">篮球</label>
        <label><input type="radio" name="ball">排球</label>
        <label><input type="radio" name="ball" checked>足球</label>
    </p>
    <p>
        <!-- select表示下拉选择 -->
        <select>
            <option>选项1</option>
            <option>选项2</option>
            <option>选项3</option>
            <option>选项4</option>
        </select>
    </p>
    <!-- 指定list后会提示自动补全输入，但是也可以任意输入datalist中没有的数据项 -->
    <input list="countries"/>
    <datalist id="countires">
        <option>German</option>
        <option>China</option>
        <option>Italy</option>
        <option>America</option>
        <option>Canada</option>
        <option>Australia</option>
    </datalist>
    <!-- 块级引用，一般引用较长的文字cite表示引用的地址 -->
    <blockquote cite="">
        <p>
            走自己的路，让别人说去吧@#@￥￥￥#
        </p>
    </blockquote>
    <!-- 短引用，一般引用几个字的词语 -->
    <cite>短引用</cite><br>
    <q>也是一个引用，会自动加双引号</q>
    <!-- 引用代码词语或短句，相当于markdown语法中的` -->
    <code>
        const reverse=1
    </code>
    <!-- 引用较长的代码块，相当于markdown语法中的``` -->
    <pre><code>
        const reverse = function (headNode) {
            if (!headNode) {
                return headNode
            }
            // 定义当前节点 等于 headNode
            let cur = headNode;
            // 定义上一个节点 等于 null
            let prev = null;
            // 如果当前节点存在，在进行链表遍历
            while (cur) {
                // 存储当前节点的下一个，因为一会要存为上一个
                let temp = cur.next;
                // 改变当前节点的下一个节点的指向为上一个
                cur.next = prev;
                // 向前推进一步，上一个节点变为当前节点
                prev = cur;
                // 当前节点变为原来当前节点的下一个节点
                cur = temp;
            }
            headNode = prev
            // 返回反转后的头节点
            return headNode;
        };
    </code></pre>
    <strong>重要性、紧急上的强调</strong><br>
    <em>语气上的强调</em>
</body>
</html>

运行结果

HTML语义化

HTML的元素、属性及属性值都有某种含义。开发者应遵循语义来编写HTML 语义化可提高代码可读性，可维护性和无障碍性，有利于SEO（搜索引擎优化）我们应根据想要传达的内容来选择合适的标签，而不是传达视觉上样式的相似

前端与 HTML | 青训营笔记

前端概述

HTML概述

HTML文件结构

HTML常用标签

HTML语义化