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

前端与HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

虽然第一天课程比较基础，但是很多知识以前学习的时候都是过一遍，有很多漏学的知识，或者随时间遗忘的知识点，这次就相当做一个知识回顾，回顾一些不常用到或者以前学习时没学到的知识点

注意点

html不区分大小写

html属性用双引号

尽量把样式交给css，不在标签上写样式

标签

新学习的标签

blockquote 引用标签 标注内容为引用

cite 作品引用 作品题目、标题等信息

datalist标签搭配使用input标签使用，可以实现输入提示功能

input 标签的样式可以有很多种type range <input type="range">可以显示为可以拉动的控件

<input list="ice-cream-flavors"/>
<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>
复制代码

语义化

语义化标签： footer header nav aside section article

使用 figure 标签规定独立的流内容（图像、图表、照片、代码等等） 使用article 标注文章 使用footer 标注页尾 使用header标注标题 使用nav标注导航栏 等等

总之开发中使用div虽然完全可以达到相同的显示效果，但是使用语义化标签才是更符合规范的做法

<section>
    
    <h1>介绍: HTML语义化</h1>

    <article>
        <h2>设计师</h2>
        <p>设计网页...</p>
    </article>

    <article>
        <h2>程序员</h2>
        <p>写后台程序..</p>
    </article>

    <article>
        <h2>前端工程师</h2>
        <p>写前端界面..</p>
    </article>

</section>
复制代码

语义化的好处

开发者：方便阅读、查找、维护代码

浏览器：便于解析渲染页面

搜索引擎：便于提取关键信息

屏幕阅读器、翻译插件：便于阅读解析资源信息