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

前端&HTML

课程内容

1. 介绍了什么是前端、前端技术栈以及前端需要注意哪些方面
2. 介绍了什么是HTML
3. HTML语法
4. HTML标签
5. HTML语义化

知识详情

什么是前端？

前端，又称Web前端。是指计算机Web应用程序（网站）的前台页面。前端能解决GUI人机交互问题；能跨如PC/移动浏览器、客户端/小程序、VR/AR等终端运行

前端技术栈的包括HTML、CSS、JavaScript。HTML作为前端的内容部分，而CSS则是前端样式，JavaScript是行为。 三者通过网络协议与服务器端连接，实现前端交互功能。
前端应该关注页面的美观性、安全性、功能性、兼容性、体验感等方面。

什么是HTML

HTML，是HyperText Markup Language的缩写。

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作

HTML语法

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

HTML标签

• 标题: h1~h6
• 超链接: <a href=""></a>
• 段落： <p></p>
• 有序列表：ol
• 无序列表：ul
• 定义列表：

<dl>
    <dt>
        <dd>
        </dd>
    </dt>
</dl>

除此之外还有其它空标签（可以不闭合）：

• 进度条：<input type="range">
• 文本框：<input type="text"> <textarea>文本</textarea> <input placeholder="请输入用户名">
• 日期： <input type="date" min="年-月-日">
• 按钮： <input type="summit"> <input type="button">

HTML语义化

什么是语义化？

--HTML中的元素、属性及属性值拥有的某些含义。

语义化的好处有：

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

如何做到语义化？

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

个人总结

以上是我对本次课程的知识点总结笔记，通过本次课程我对HTML的相关知识及一些概念有了更多的了解，更对HTML语义化有了一定的认识，也了解了DOM树在WEB前端中对HTML转换渲染到浏览器的作用，收益颇多。目前为止没有遇到困难的地方，今后也要努力扩充自己的前端知识库！

参考资料

-第四届青训营课件《前端与HTML》（不知道链接能不能发，安全起见就不分享课件链接了qaq）

-开始学习 HTML - 学习 Web 开发 | MDN developer.mozilla.org/zh-CN/docs/…