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

HTML与Nextjs学习|青训营笔记

1、前端与HTML

1.1前端技术栈

HTML(内容)、CSS(样式)、JavaScript(行为)

1.2什么是HTML?

HyperText Markup Language(超文本标记语言)

<!-- 标记了当前html文件版本，浏览器根据其进行渲染 -->
<!doctype html>
<!-- 根标签 -->
<html>
    <!-- 页面原数据 标题、编码等-->
    <head> 

    </head>
    <body>
        <h1>一级标题</h1>
        <!-- 有序列表  -->
        <ol>
            <li>阿凡达</li>
            <li>泰坦尼克号</li>
        </ol>
        <!-- 无序列表 -->
        <ul>
            <li>清单1</li>
            <li>清单2</li>
        </ul>
        <!-- 自定义 -->
        <h2>霸王别姬</h2>
        <dl>
            <dt>导演：</dt>
            <dd>陈凯歌</dd>
            <dt>主演</dt>
            <dd>张国荣</dd>
            <dd>张丰毅</dd>
            <dt>上映日期</dt>
            <dd>1993-01-01</dd>
        </dl>
        <!-- 超链接 -->
        <a href="www.baidu.com">超链接</a>
        <!-- 图片 alt是替代性文本 -->
        <img src="" alt=""/>
        <!-- 音频 controls带有浏览器默认控件-->
        <audio src="" controls></audio>
        <!-- 视频 -->
        <video src=""></video>
        <!-- 输入框 类型：range、number、data等-->
        <input type="">
        <!-- 多行输入 -->
        <textarea></textarea>
        

    </body>

</html>

1.3HTML语法

标签和属性不区分大小写，推荐小写

空标签可以不闭合，比如 input（输入框）、mate（定义页面说明）

属性值推荐双引号包裹

某些属性值可以省略，比如required（属性规定必须在提交之前输入字段，如果使用该属性、则字段是必填（或选填）的）、readonly（只读）

1.4内容划分

2、Nextjs的学习

2.1简介

nextjs是基于react的框架，主要解决ssr（server side render）问题。ssr优势： 1、更好的seo,更有利于搜索引擎抓取2、解决首页白屏问题

2.2安装

npm install --save next react react-dom
在此之后，文件系统是主要的 API。每一个。 Js 文件变成了一条路由，可以自动处理和呈现填充 `./pages/index.js` 你的项目当中: