今天这节课的课程围绕“前端要解决的基本问题”及“什么是HTML”两个基本问题展开，层层解析前端技术栈的构成以及HTML基本语法和功能以及在实际研发过程中如何做到HTML语义化。通过这节课的学习，使我对前端工作的定义、前端技术栈拆解和分析、HTML作用、HTML语义化这几个课程重点有了初步的认识和理解。

前端工作是什么

解决GUI人机交互问题
跨终端（pc/移动浏览器、客户端/小程序、VR/AR等）
web技术栈

总结来说，前端工程师的工作就是使用web技术栈解决多端GUI人机交互问题的工程师。

前端技术栈

HTML负责页面结构、内容，CSS可以设计页面样式，JavaScript定义网页的行为，这三者都是运行在浏览器中，浏览器通过http网络协议与服务器端进行交互。HTML、css、JavaScript、网络协议就构成了前端最基础的技术栈。

前端关注哪些方面

功能--需要解决的问题，设计的页面能实现什么样的功能
美观--用户对产品的第一印象就是产品的“样貌”，注重美观也是十分需要注意的点
性能--动画流畅度、用户体验、速度等等
安全--要能够保障用户的信息数据安全、是否有漏洞等等
无障碍--要能够满足各类用户的需求
兼容性--可在各种设备上使用
用户体验--客户的体验感的大小即衡量产品优劣的重要指标
不断拓宽的边界--前端不再只局限于页面，客户端、服务端、开发游戏、在线传输、将其他代码可运行于浏览器等等，前端在不断发展，这一点十分重要

HTML

hypertext超文本+Markup language标记语言（标签）

<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

以上为一个基础的HTML结构。作用是说明标记使用的是什么HTML版本，浏览器可根据这个选择渲染模式。html标签为根标签，head标签放置页面源数据，body标签放置的为向用户展示的内容。

HTML元素与内容划分

标题
列表
链接
表格表单
文本

以下为一串HTML代码示例：

<html>
    <head>
        <title>yuan shen qi dong</title>
    </head>
    <body>
        <!-- headings -->
        <h1>hello everyone</h1>
        <h2>hello everyonr</h2>
        <h3>hello everyonr</h3>
        <h4>hello everyonr</h4>
        <h5>hello everyonr</h5>
        <h6>hello everyonr</h6>
        <!-- paragraph -->
        <p>Lorem <strong> dolor sit amet consectetur </strong>>adipisicing elit. At, excepturi.</p>
        <p>Lorem ipsum dolor sit amet, <a href="https://baidu.com" target="_blank">consectetur</a>> adipisicing elit. Dolorem, aliquam?</p>
        <!-- lists -->
        <ul>
            <li>op1</li>
            <li>op2</li>
            <li>op3</li>
            <li>op4</li>
            <li>op5</li>
            <li>op6</li>
        </ul>>
        <ol>
            <li>op1</li>
            <li>op2</li>
            <li>op3</li>
            <li>op4</li>
            <li>op5</li>
            <li>op6</li>
        </ol>>
        <!-- tables -->
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>age</th>
                    <th>favourite game</th>
                    <th>phone</th>
                </tr>>
            </thead>
            <tbody>
                <tr>
                    <td>hu</td>
                    <td>tao</td>
                    <td>18</td>
                    <td>yuanshen</td>
                    <td>123456</td>
                </tr>
                <tr>
                    <td>li</td>
                    <td>chenglin</td>
                    <td>18</td>
                    <td>jinchanchan</td>
                    <td>54250</td>
                </tr>
                <tr>
                    <td>jiang</td>
                    <td>shuluo</td>
                    <td>18</td>
                    <td>kaiche</td>
                    <td>54250</td>
                </tr>
            </tbody>
        </table>
        <br>
        <hr>
        <br>
        <!-- Forms -->
        <form action="form.js" method="post">
            <div>
                <label>First name</label>
                <input type="text" name="firstname" placeholder="enter first name">
            </div>>
            <div>
                <label>Last name</label>
                <input type="text" name="lastname" placeholder="enter last name">
            </div>
            <div>
                <label>Email</label>
                <input type="email" name="email" placeholder="enter email">
            </div>
            <input type="submit" name="submit" value="submit">
        </form>
        <br>
        <!-- button -->
        <button>beautiful button</button>
        <br>
        <hr>
        <!-- image-->
        <img style="width:100vw"  src="c:\Users\DELL\Pictures" alt="this is a cool boy">
        <div style="margin-top: 500px;" ></div>
        <br>
        <hr>
        <blockquote>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates nesciunt amet veniam?</blockquote>
        <p><abbr title="yuanshen">ys</abbr>is a good game</p>
        <p><cite>ys is a good game</cite> by op</p>
    </body>
</html>

HTML的语义化

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

语义化的好处

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

总结

通过今天这节课，我对前端和HTML有了进一步的了解，前端不再仅仅局限于网页，前端行业也在不断发展，需要我们不断去学习新的技术方法来不落后于潮流。我也对HTML的基础语法和基础结构有了一定的了解，同时通过对语义化的学习了解到了标准规范对开发团队的重要性。我的从零开始的前端之旅刚刚开始，期待下一节课的学习。

前端与HTML课程总结｜ 青训营