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

前端与HTML笔记

前端技术栈

JavaScript（行为）
CSS（样式）
HTML（内容）

前端：关注图形界面下人机交互（功能、美观、安全、无障碍、性能、兼容性、体验.etc）

HTML

HyperText Markup Language 超文本标记语言

通过标签来表示图片，链接，表格，标题.etc

<!DOCTYPE html><!--标记了当前在使用html文件的版本，帮助浏览器选择更好的渲染模式-->
<html>

<head><!--页面需要的信息但不需要直接呈现给用户的-->
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>

<body><!--呈现给用户的内容-->
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>

</html>

DOM树：即document，把html代码转化成对应树形结构，节点称为DOM节点

语法：

标签和属性不区分大小写
空标签例如input、meta可以不闭合
属性值推荐双引号包括
某些属性值可以忽略，比如required、randonly

标签：

标题h1-h6
列表：分为有序列表和无序列表，也可以定义列表。

    <ol><!--有序列表--!>
        <li>first</li>
        <li>second</li>
    </ol>
    <ul><!--无序列表--!>
        <li>first</li>
        <li>second</li>
    </ul>
    <dl><!--定义的列表--!>
        <dt>number</dt>
        <dd>1</dd>
        <dd>2</dd>
    </dl>

控件：可以让用户提供输入信息，例如

    <input placeholder="请输入用户名">

文本：

引用标签如长引用bokckquote，短引用cite、q等
代码标签如code、pre
强调标签如strong、em

其余标签与具体功能等参考HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)

内容划分

header 页头，可以放logo，导航nav一类的元素
main 一个页面只有一个main元素
aside 表示跟内容相关但不直接属于页面内容
footer 主要含参考链接，版权信息，备案信息等内容

开发者应当遵循语义来编写HTML

PS：本笔记为本人课程过程中的记录与部分思考，仅供参考，欢迎友好交流。

前端与HTML笔记 | 青训营笔记

前端与HTML笔记

HTML

语法：

内容划分