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

一、前端的基本概念

前端的技术栈包括服务器端、前端以及连接服务器端与前端的网络协议。
简单地理解，前端是指图形界面的人机交互。
前端应该关注的方面有：美观、无障碍、功能、安全、性能（速度足够快/兼容性）、用户体验。
前端的开发环境包含浏览器和编辑器。其中浏览器包含IE/Edge、Chrome、Firefox、Safari；编辑器包含VSCode、Vim、WebStorm。

二、HTML基本标签

1.<head>和<body>
<head>：网页的源数据,不需要直接展示给用户
<body>：标签中的内容需要呈现给用户

2.<ol>、<ul>、<dl>
<ol>：有序列表（ordered list）
<ul>：无序列表（unordered list）
<dl>：定义列表（definition list）
    <dt>:definition title 
    <dd>:definition description

3.<a>
<a>：链接标签
<a href="" target="_blank">href的属性值表示链接的地址；target的属性值"_blank"表示点击这个链接后，会在新的窗口打开网页

4.多媒体标签<img>、<audio>、<video>
<img> 的alt作用:图片展示不出来时作为替代性文本
<audio>、<video>：加了control代表要有视频的控件
注：<audio>标签定义声音，比如音乐或者其他音频流
    <video>标签定义视频，比如电影片段

5.输入标签<input>
<input type='range'>：滑动条
<input type="number" min="1" max="10">:在给定的范围内输入数字
<textarea>:输入多行内容，可以调整输入框的大小
<input type="checkbox">：多选框 
<input type="radio"> 单选框：只针对name属性值的 
<select><option></option></selection>：下拉列表

三、内容划分

Web的内容划分结构如下所示：
<header>
    <nav> </nav>
</header>
<main>
    <article></article> 
    <aside></aside>
</main>
<footer>
</footer>

四、Html语法

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

写在最后：前端工程师的自我修养：传达内容，而不是样式！

前端与HTML | 青训营笔记

一、前端的基本概念

二、HTML基本标签

三、内容划分

四、Html语法