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

前端主要的技术

基础语言

HTML：负责网页的页面、结构和内容
CSS：设置页面的样式
javaScript：定义用户的行为（点击按钮后页面的响应方式）

前端需要考虑的方面是：页面的功能、美观、无障碍（是否适用于各种各样的人群）、网络安全、网站性能，兼容性（网页是否能在各种设备上正常的使用），用户体验。

HTML

HTML是HyperText Markup Language（超文本标记语言）的缩写
下面是DOM树的结构，里面的每一个节点是DOM节点

HTML的基本语法

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

标题

HTML中的标题有6种，分别是从h1-h6，h1是一级标题展示的是最大的

列表

有序列表

<ol>
    <li>   </li>
<ol>

无序列表

<ul>
    <li>  </li>
</ul>

其他列表

    <dl>   //定义列表
        <dt> 导演： </dt>   //描述列表的标题
        <dd> 陈凯歌 </dd>   //具体的内容
    </dl>

链接

    <a href="https://www.bytedance.com/">
       字节跳动官网
    </a>

多媒体

    <img src="" alt=""(替代性的文本) width="" height="">
    <audio src="" controls></audio>
    <video src="" controls></video>

控件

    <input placeholder="请输入用户名">   //文本输入
    <input type="range">   //调节一个范围
    <input type="number" min="1" max="10">  //输入数字
    <input type="data" min"2018-02-10">  //日历
    <textarea>Hey</textarea>   //多行的输入文本

引用

    //长引用
    <blockquote cite="">
        <p>
            </p>
     </blockquote>
    //短引用 cite标签用于表示作品的名字或者章节 和q标签
    <p>  <cite> </cite> </p>
    //strong标签，表示这个事情比较严重和紧急
    <p>  <strong>  </strong>  </p>
    //em标签，表示语气上的重读
    <p>  <em>  </em>  </p>

内容划分

header是页头，是页面上关于头部的信息，可以放logo或者导航。页面的主体部分放在main标签中，一般来说一个页面里面应该只有一个main元素，重点的主要的内容都放在main元素中。 aside表示和内容相关，但并不直接属于该标题的内容，例如广告或者热点的文章推荐。文章的内容放在article中，或者是一些链接。footer会放一些版权信息或者相关的链接

语义化

HTML中的元素、属性及属性值都拥有某些含义，HTML的作用就是用来表示页面的内容和结构。
开发者应该遵循语义来编写HTML的语义来编写HTML
作为开发作者来说，HTML的代码需要有一些规范，利于修改和维护。浏览器利用HTML来展示页面，搜索引擎用其提取关键词和排序。无障碍型的场景下，屏幕阅读器为给盲人读页面的内容。

如何做到语义化

了解每个标签和属性的含义（MDN,W3C）
思考什么标签最适合描述这个内容
不使用可视化工具生成代码，可以使用编辑器的插件做一些辅助

前端与HTML | 青训营笔记

前端主要的技术

基础语言

HTML

HTML的基本语法

内容划分

语义化