什么是前端

解决GUI人机交互问题

跨终端

PC/移动浏览器
客户端/小程序
VR/AR

Web技术栈

前端应该关注那些方面

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

前端的边界

开发环境

HTML

HyperText Markup Language

示例

<!doctype html>
<!--标记HTML版本-->
<html>
    <head>
    <!-- 页面需要的信息，但是不需要直接呈现给用户 -->
        <meta charset = 'UTF-8'>
        <title>页面标题<>/title
    </head>
    <body>
    <!-- 需要呈现给用户的真正的内容 -->
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

DOM树

HTML语法

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

标题

列表

有序列表 ol
无序列表 ul
定义列表 dl --> dt + dd

链接

<a href = "heeps://www.baidu.com/">
    百度
</a>

图片 img
音频 audio
视频 video

输入

可多选 checkbox

只能选一个 radio (互斥关系有相同的name实现)

下拉选择

自动提示

文本

blockquote 快捷引用
cite 短引用
q 具体的引用的内容
code 代码
pre 引用多行代码
strong 强调
em 语气上的强调

内容划分

header : logo、导航
nav ：重点的，主要的内容
main ：文章等主要内容
aside ：广告
footer ：参考链接、备案链接

语义化是什么

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

谁在使用我们写的HTML

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

如何做到语义化

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

个人思考

通过本节课的学习，我学习到了HTML的基本知识，并掌握了一些HTML的基本概念和语法。

这节课最让我印象深刻的是，HTML应该是服务于内容而不是样式。也就是说，前端开发者在从事前端的工作时，应该更加注重如何把要表达的内容清晰直观地传达给阅读者，而不是一味的追求样式的复杂。

在学习前端的过程中，尤其应该认真摸索什么内容用什么标签来表达最合适，只有这样，才能让自己写的前端代码更清楚，同时让产生的内容也更明白。

前端与HTML | 青训营