前端与HTML|青训营笔记

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

一、课程知识要点：

1.前端是什么 2.要解决的问题和技术栈 3.HTML 的概念、语义化和常用的 HTML 标签

二、详细知识点介绍：

什么是前端？

解决GUI人机交互问题（一个概念就是人和机器可以互动，就比如siri）；跨终端（PC/移动浏览器（兼容各种设备的web浏览），客户端/小程序，VR/AR等； web技术栈

前端技术栈：

HTML(内容) CSS（样式）JavaScript(行为) 运营在浏览器里面，浏览器通过HTTP协议与服务器端进行通信

前端应该关注哪些方面？

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

HTML语法：

1、标签和属性不区分大小写，推荐小写 2、空标签可以不闭合，比如 input 、meta（标签里不放其他东西了） 3、属性值推荐用双引号包裹 4、某些属性值可以省略，比如required（必填，属性值是true或false）、readonly

常用标签：

<!-- 单选按钮radio，从name相同中选 -->
<input type="radio" name="sport" />篮球
<input type="radio" name="sport" />足球

<p>
    <!-- 下拉选择select -->
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</p>
<!-- 给提示，输入前面都出来，一些快捷的输入方式 -->
<input list="countries" />
<datalist id="countries">
    <option>Greece</option>
    <option>United Kindom</option>
    <option>United States</option>
</datalist>
<!-- 文本类的标签 -->
<!-- blockquote长引用 cite这段引用来源于哪里（快捷应用，引用一段话 -->
<blockquote cite="#">
    <p>我我我我</p>
</blockquote>
<!-- <cite></cite>:作品名字和章节  <q></q>：具体的内容  短引用 -->
<p>我秀色可餐<cite>小王子,<q> 小孩子</q></cite></p>
<!-- <code>代码</code> -->
<pre><code>
    const add=(a,b)=>a+b;
    const multiply=(a,b)=>a*b;
</code></pre>
<!-- 强调 -->
<strong>加粗</strong>
<em>倾斜</em>

语义化是什么？

1.HTML中的元素、属性及属性值都拥有某些含义 2.开发者应该遵循语义来编写HTML:有序列表用ol,无序列表用ul ; lang属性表示内容所使用的语言.

三、课后总结：

HTML 的标签非常多，需要我们自己去了解每个标签的语义并运用。

四、引用参考：

w3cschool 上面的相应文档和标签介。

# 前端与HTML|青训营笔记