web design

本来想学习网站创立的底层原理（服务器、域名、DNS啥等等之类相关的），但是失手点开了Web Development Tutorial For Beginners ，fine，那就先开始学page configuration吧。

Preparation

install professional web dev tools

download VS code and install the extension live server

create a folder to store your page config

open a folder and add a new file named index.html, which almost holds everything showcased on your website page.

HTML (the language to edit content of the web)

three main part

head中是关于网页标题的设置，body中是关于网页内容的设置。
<html>和</html>起到一个封装网页的作用。

其他语法的详见 HTML教程 | 菜鸟教程
(~~用markdown一个一个敲好麻烦。~~)

CSS (cascading style sheet)

<head>
    <style>
        selector
        {
            property1: value;
            property2: value;
            ...
        }
    </style>
</head>

在头部区域使用<style>元素

具体语法详见 CSS 语法 | 菜鸟教程

(~~谁能教我比较方便的缩进方法。~~)

build a layout

<style>
    selector
    {
        background: rgb/color name/hexcolor; #颜色
        color: ...; #颜色
        font-family: ...; #字体
        padding: x px / x% /; #填充：像素值/百分比/
        margin: top_px right_px bottom_px left_px; #页边留白：上 右 下 左 
    }
</style>

最基础的页面布局如上，详见教程。（~~懒得超链接了~~）

Flexbox (layout mode)

需要在<style>中对flex进行声明一下

selector
{
    display: flex;
    flex: ...;
}

三个核心概念：
flex元素、flex容器、排列方向

主要涉及两种属性的使用：常见属性是对items在布局中的效果调整，项目属性是对单个item的属性调整，但会影响到其他item的相对效果。

（详见弹性盒子（flexbox）布局属性详解）

教程写的很清楚，值得一看！文章提到了多个item可以放在一个类中进行同步管理，体现了html语言的逻辑性和集合性。

例如：

<div class="a">
    <div class="a1"></div> #此处a1是类对象，修改a1的属性需要在style中调整。
    <div class="a2"></div>
    <div class="a3"></div>
</div>

这样能形成一个类，对该类的style调整，则在<head>里<style>中进行property的修改即可。

或者在<div>中直接声明flex

<div style="display: flex;">
  <div>a1</div> #注意此时a1是文本内容而不是类中的对象，即屏幕上会显示"a1"。
  <div>a2</div>
</div>

但这样的声明呢，不利于a1，a2等拥有各自特殊的属性值，所以放到类中的声明灵活度更高。

web dev —— page design (unfinished)