<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style type="text/css">
        /* body{
            font-size:10px;
        } */
        div{
            /* font-family:"幼圆","微软雅黑","宋体";
            font-size:2em;/*small larger 1em 20px
            color:rgb(255,0,0);/*red #addddd
            font-style:oblique;/* italic斜体 oblique倾斜 
            font-weight:lighter;100-900|bolder|lighter 字体粗细 */
            font:oblique bold 20px "幼圆";
        }
    </style>
</head>
<body>
    <div>
        HTML的 英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </div>
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
</body>
</html>

字体
font-family:"楷体","幼圆","黑体";
font-size:12px; 2em 
color:rgb(255,255,255);  #000000 red;
font-style:normal;italic 斜体显示 oblique 倾斜显示(区别不明显)
font-weight:normal; bold bolder lighter  100~900
font-variant:small-caps; 小型大写字母
简写
font:"楷体" 20px
书写顺序：http://www.w3school.com.cn/cssref/pr_font_font.asp

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style type="text/css">
        /* body{
            font-size:10px;
        } */
        div{
            font-family:"幼圆","微软雅黑","宋体";
            font-size:2em;/*small larger 1em 20px*/
        }
    </style>
</head>
<body>
    <div>
        HTML的 英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </div>
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
</body>
</html>

字体
font-family:"楷体","幼圆","黑体";
font-size:12px; 2em 
color:rgb(255,255,255);  #000000 red;
font-style:normal;italic 斜体显示 oblique 倾斜显示(区别不明显)
font-weight:normal; bold bolder lighter  100~900
font-variant:small-caps; 小型大写字母
简写
font:"楷体" 20px
书写顺序：http://www.w3school.com.cn/cssref/pr_font_font.asp

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style type="text/css">
        div{
            text-indent:2em;/* 字体设置大小*2 */
            text-align:justify;/* center|justify|left|right */
            color:blue;
            word-spacing:20px;/* 通过空格是否设置间距 *//* 英文单词之间的间距；不会设置中文字之间的间距，例外的话，中文之间有空格，会设置；通过空格来区分单词。 */
            text-decoration:underline;/* blink闪烁; line-through叫中线; overline叫文字上面的线; underline叫底部的线 */
            line-height:30px;
        }
        p{
            text-indent:2em;
            text-align:left;
            /* letter-spacing:20px; */
        }
    </style>
</head>
<body>
    <div>
        HTML的 英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </div>
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
</body>
</html>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style type="text/css">
        div{
            text-indent:2em;/* 字体设置大小*2 */
            text-align:justify;/* center|justify|left|right */
            color:blue;
            word-spacing:20px;/* 通过空格是否设置间距 *//* 英文单词之间的间距；不会设置中文字之间的间距，例外的话，中文之间有空格，会设置；通过空格来区分单词。 */
        }
        p{
            text-indent:2em;
            text-align:left;
        }
    </style>
</head>
<body>
    <div>
        HTML的 英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </div>
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
</body>
</html>

文本
text-indent: 5em;缩进
text-align:left; right center justify文本对齐
不止可以设置文本居中，还可以设置图片等其他内容，其他东西的对齐，使用别的方式
word-spacing:10px; 字间隔（单词）
letter-spacing:10px;字母间隔
text-decoration:none;underline overline line-through blink 文本装饰
line-height:20px; em 或者百分比

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">    
    <title>css样式设置背景颜色</title>
    <style type="text/css">
        body{
            background-color:transparent;
        }
        .one{
            width:800px;
            height:2000px;
            /* background-color:aqua;
            background-image:url(img/api.jpg);
            background-repeat:no-repeat;
            background-position:right top;
            background-position:30px 10px;
            background-attachment:fixed; */
            background:aqua url(img/api.jpg) no-repeat right top fixed;
        }
        /* .two{
            width:800px;
            height:2000px;
            background: green;
        } */
    </style>
</head>
<body>
    <div class="one">
        1sdfssjajdfaldfjoaldfladfls
        www.w3school.com.cn/cssref/pr_background.asp
    </div>
    <!-- <div class="two">
        1sdfssjajdfaldfjoaldfladfls
    </div> -->
</body>
</html>

同时设置了right top 和 fixed 就是以浏览器为基准。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">    
    <title>css样式设置背景颜色</title>
    <style type="text/css">
        body{
            background-color:transparent;
        }
        .one{
            width:500px;
            height:500px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div class="one">
        1
    </div>
</body>
</html>

其他选择器
1，群组选择器
多个选择器应用同一组样式，多个选择器之间用逗号隔开。
p,h1,h2,.c1,.c2,#id{}
2，全局选择器
*{} 对所有html元素有效
3，后代选择器
标签1 标签2{}
选择器 标签2{}
控制标签1下面的标签2的样式。（对标签1下面的其他标签不影响）
4，属性选择器
标签名[属性名=‘属性值’]{}
控制标签相同属性相同的元素的样式。
5，伪类选择器
超链接有四种状态，不同状态下的样式怎么设置？
a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接（点击鼠标不松开） */
和CSS类搭配
.red : visited {color: #FF0000}
注意1：
link和visited时候超链接的伪类
hover和active不止可以对超链接使用，别的html元素也可以
注意2：
超链接伪类顺序
link visted hover active
其他伪类
:first-child 伪类（选择元素的第一个子元素）

使用F12工具查看网页指定部分的代码
 

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /* a{
            color:green;
        } */
        a:link{
            color:yellow;
        }
        a:visited{
            color:burlywood;
        }
        a:hover{
            color:red;
            font-size:30px;
        }
        a:active{
            color:#008000;
            font-size:10px;
        }
        .one:link{
            color:blue;
            font-size:12px;
        }
        .one:visited{
            color:pink;
            font-size:10px;
        }
        img:hover{
            width:300px;
        }
        img:active{
            width:200px;
        }
        /* div:first-child{
            color:blue;
        }
        span:first-child{
            color:green;
        } */
        .one{
            color:blue;
        }
    </style>
</head>
<body>
    <div>我是body的第1个孩子</div>
    <!-- 1，正常状态；2，鼠标移上；3，鼠标按下，不抬起；4，被点击过，被打开过 -->
    <a href="https://www.baidu.com">GoTo百度</a>
    <a href="http://www.sikiedu.com" class="one">SiKi学院</a>
    <a href="https://www.taobao.com">淘宝</a>
    <img src="img/640.jpg" />
    <div class="one">
        <span>我是第1个孩子
            <span>我是第1个孙子</span>
        </span>
        <span>我是第2个孩子</span>
    </div>
</body>
</html>

5，伪类选择器
超链接有四种状态，不同状态下的样式怎么设置？
a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接（点击鼠标不松开） */
和CSS类搭配
.red : visited {color: #FF0000}
注意1：
link和visited时候超链接的伪类
hover和active不止可以对超链接使用，别的html元素也可以
注意2：
超链接伪类顺序
link visted hover active
其他伪类
:first-child 伪类（选择元素的第一个子元素）

使用F12工具查看网页指定部分的代码
 

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /* a{
            color:green;
        } */
        a:link{
            color:yellow;
        }
        a:hover{
            color:red;
            font-size:20px;
        }
        a:active{
            color:#008000;
            font-size:10px;
        }
        a:visited{
            color:burlywood;
        }
    </style>
</head>
<body>
    1，正常状态；2，鼠标移上；3，鼠标按下，不抬起；4，被点击过，被打开过
    <a href="https://www.baidu.com">GoTo百度</a>
    <a href="https://www.sikiedu.com?564452152">SiKi学院</a>
    <a href="https://www.taobao.com">淘宝</a>
</body>
</html>

其他选择器
1，群组选择器
多个选择器应用同一组样式，多个选择器之间用逗号隔开。
p,h1,h2,.c1,.c2,#id{}
2，全局选择器
*{} 对所有html元素有效
3，后代选择器
标签1 标签2{}
选择器 标签2{}
控制标签1下面的标签2的样式。（对标签1下面的其他标签不影响）
4，属性选择器
标签名[属性名=‘属性值’]{}
控制标签相同属性相同的元素的样式。
5，伪类选择器
超链接有四种状态，不同状态下的样式怎么设置？
a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接（点击鼠标不松开） */
和CSS类搭配
.red : visited {color: #FF0000}
注意1：
link和visited时候超链接的伪类
hover和active不止可以对超链接使用，别的html元素也可以
注意2：
超链接伪类顺序
link visted hover active
其他伪类
:first-child 伪类（选择元素的第一个子元素）

使用F12工具查看网页指定部分的代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>选择器变形</title>
    <style type="text/css">
        /* 后代选择器 */
        div p{
            font-size:20px;
        }
        div p span{
            color:#0000FF;
        }
        div.one{
            color:red;
        }
        .two{
            font-size:30px;
        }
    </style>
</head>
<body>
    <div><div>我是第1个div标签里面的内容<p>我是<span>p标签</span>里面的内容</p></div></div>
    <div class="one two">我是第2个div标签里面的内容</div>
    <div class="one">我是第3个div标签里面的内容</div>
    <p class="one">我是p标签里面的内容</p>
</body>
</html>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>其他选择器</title>
    <style type="text/css">
        /* div{
            font-size:30px;
            color:blue;
        }
        span{
            font-size:30px;
            color:blue;
        }
        p{
            font-size:30px;
            color:blue;
        } */
        
        /* 1，群组选择器 */
        /* div,span,p,.one,#header{
            font-size:30px;
            color:blue;
        } */
        
        /* 2，全局选择器 */
        /* *{
            color:green;
            font-family:宋体;
        } */

        /* 3，属性选择器 */
        input[type="text"]{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div>我是第1个div标签里面的内容</div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    <span>我是第1个span标签里面的内容</span>
    <span>我是第2个span标签里面的内容</span>
    <span>我是第3个span标签里面的内容</span>
    <p>我是第1个p标签里面的内容</p>
    <p>我是第2个p标签里面的内容</p>
    <p>我是第3个p标签里面的内容</p>
    <input type="text" />
    <input type="password" />
</body>
</html>

优先级 id选择器 > 类选择器 >标签选择器
其他时候 ： 就近原则

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">    
    <title>选择器的优先级</title>
    <style type="text/css">
        /* id选择器 优先于> 类选择器 优先于> 标签选择器*/
        div{
            font-size:30px;
        }
        .one{
            font-size:10px;
        }
        #header{
            font-size:20px;
        }
    </style>
</head>
<body>
    <div class="one" id="header">我是第1个div标签里面的内容</div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    <p>我是p标签里面的内容</p>
</body>
</html>

其他选择器
1，群组选择器
多个选择器应用同一组样式，多个选择器之间用逗号隔开。
p,h1,h2,.c1,.c2,#id{}
2，全局选择器
*{} 对所有html元素有效
3，后代选择器
标签1 标签2{}
选择器 标签2{}
控制标签1下面的标签2的样式。（对标签1下面的其他标签不影响）
4，属性选择器
标签名[属性名=‘属性值’]{}
控制标签相同属性相同的元素的样式。
5，伪类选择器
超链接有四种状态，不同状态下的样式怎么设置？
a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接（点击鼠标不松开） */
和CSS类搭配
.red : visited {color: #FF0000}
注意1：
link和visited时候超链接的伪类
hover和active不止可以对超链接使用，别的html元素也可以
注意2：
超链接伪类顺序
link visted hover active
其他伪类
:first-child 伪类（选择元素的第一个子元素）

使用F12工具查看网页指定部分的代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>选择器变形</title>
    <style type="text/css">
        div p{
            font-size:20px;
        }
        div p span{
            color:#0000FF;
        }
        div.one{
            color:red;
        }
        .two{
            font-size:30px;
        }
    </style>
</head>
<body>
    <div><div>我是第1个div标签里面的内容<p>我是<span>p标签</span>里面的内容</p></div></div>
    <div class="one two">我是第2个div标签里面的内容</div>
    <div class="one">我是第3个div标签里面的内容</div>
    <p class="one">我是p标签里面的内容</p>
</body>
</html>

css核心语法
选择器{
属性名1：属性值1；
属性名2：属性值2；
属性名3：属性值3；
}

选择器
1，标签选择器
标签{}
2，类选择器（前面加上点）
.类名{}
标签.类名{}
标签的类名通过class属性指定
a,可以给多个标签指定同一个类名 class="xx"
b,也可以给一个标签指定多个类，中间空格隔开    class="xxx xxx"
3，id选择器
#id名{}
一般id名是不相同的，通过id属性指定某个标签的id，id就相当于我们每个人的身份证，是唯一的。
一个html元素只有一个id，不同元素的id是不相同的。

优先级 id选择器 > 类选择器 >标签选择器
其他时候 ： 就近原则

注意：
一个标签可以既指定class也指定id。
class和id的值是区分大小写的。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>css语法</title>
    <style type="text/css">
        /*
        选择器{
            属性名1:属性值1;
            属性名2:属性值2;
            属性民3:属性值3;
        }
        */
        /* 1。标签选择器 */
        div{
            font-size:12px;
        }
        /* 2，类选择器 */
        .one{
            color:blue;
        }
        .two{
            color:green;
        }
        /* 3，id选择器 */
        #header{
            font-family:幼圆;
            font-size:20px;
        }
        #nav{
            font-size:20px;
        }
    </style>
</head>
<body>
    <!-- 注释 -->
    <div class="one" id="header">我是第1个div标签里面的内容</div>
    <div class="two" id="nav">我是第2个div标签里面的内容</div>
    <div class="one">我是第3个div标签里面的内容</div>
    <p class="one">我是p标签里面的内容</p>
</body>
</html>

书写css代码的三种方式

1，内部引入方式（直接在html页面上书写css代码）

放在head标签里面

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>基本css语法</title>
    <!-- 外部引入方式 -->
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <!-- 内部引入方式 -->
    <style type="text/css">
        div{
            font-size:30px;
            font-family:"楷体";
        }
        p{
            font-size:10px;
        }
    </style>
    <link rel="stylesheet" href="css/footer.css" />
</head>
<body>
    <div>我是第1个div标签里面的内容</div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    <p>我是p标签里面的内容</p>
    <!-- 行内引入 -->
    <p style="color: brown;font-size: 30px;">我是p标签里面的内容</p>
</body>
</html>

div{
    color:green;
    font-size:10px;
}

HTML
什么是css？
w3cschool：http://www.w3school.com.cn/css/css_jianjie.asp

HTML是基础，承载基本内容（图片，文本）
CSS可以让网页更加美观！
JavaScript可以让网页动起来，实现特效（动画，渐隐渐现等....）。

简述：CSS是用来控制样式的。
控制谁的样式？html里面的所有标签和标签里面内容的样式。
什么是样式？颜色，大小，位置...等视觉效果都是样式。
优点：解决内容与表现分离（.html   若干.css文件）
在学习开发期间，我们把css代码直接写在html文件里面，便捷

案例：
p{
    font-size:15px; /*这个是css注释*/
    color:blue;
    font-family:"幼圆";
}
div{
    font-family:"隶书";
}
h1,h2,h3,p{
    font-size:90px;
}

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>基本css语法</title>
    <style type="text/css">
        div{
            font-size:30px;
            font-family:"楷体";
        }
    </style>
</head>
<body>
    <div>我是第1个div标签里面的内容</div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    <p>我是p标签里面的内容</p>
</body>
</html>

什么是块级标签和内联标签（行内标签）？
块级标签占据一行，需要换行。
div p ul ol h1~h6 hr form ...
行内标签：在一行内显示，不换行
span b i font a textare img span input ...

标签嵌套规则：
https://www.cnblogs.com/xiyangbaixue/p/4090511.html

浏览器F12调试工具

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>块元素和行内元素的区别</title>
</head>
<body>
    <div>div是块元素</div>
    <h1>标题</h1>
    <p>段落</p>
    <hr />
    <span>span是行内</span><b>b标签</b><i>i标签</i><font>font标签</font><img src="img/640.jpg" /><input type="text" /><textarea></textarea>
</body>
</html>

什么是html元素？

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

什么是div？

div是一个标签，叫做一个块标签，一个div就是一个块，单独占用一行，div可以用作容器，容纳其他html元素（可以包含其他标题，表格，图片等各种html元素）。

单独使用起来，没有其他的效果，需要通过css来控制。

示例（单独占一行）

我是一个好人！

什么是span？

span是一个标签，它是一个内联标签。

单独使用起来没有其他效果，需要通过css来控制样式。

当没有css控制span的样式的时候，span对标签里面的内容，没有任何效果影响。

示例：

SiKi学院是一个很牛B的网站！没错！

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>什么是html元素</title>
</head>
<body>
    什么是html元素？
    <p>我是一个好人！</p>
</body>
</html>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>什么是div</title>
</head>
<body>
    <div>我是第1个div标签里面的内容<h1>这个是标题</h1></div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    我是第1个div标签里面的内容<br />
    我是第2个div标签里面的内容<br />
    我是第3个div标签里面的内容<br />
</body>
</html>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>什么是span标签</title>
</head>
<body>
    <span>我是第1个span标签里面的内容</span><br />
    <span>我是第2个span标签里面的内容</span><br />
    <span>我是第3个span标签里面的内容</span><br />
    我是第1个span标签里面的内容<br />
    我是第2个span标签里面的内容<br />
    我是第3个span标签里面的内容<br />
    <p>我是第1个p标签里面的内容</p>
    <p>我是第2个p标签里面的内容</p>
    <p>我是第2个p标签里面的内容</p>
</body>
</html>

https://www.dcloud.io/

布局方式：
为什么需要先给整个网页布局？
没有布局的网页，是不美观的，是杂乱的。
有了布局，就相等于大楼有了主体结构，接下来就是给主体结构添砖加瓦，刷漆等。
这些后续工作在我们的网页中就是内容，图片文字等内容。
第一种方式：Table（基本不用）
第二种方式：DIV+CSS（项目中的常用方式）

CSS用来布局和设置样式。

css设置字体不可以直接用中文，建议用Unicode或者英文(得百度找)，不然会因为utf8编码不识别而出错

示例(楷体)：font-family: "KaiTi";

安装过程中卡在Initializing Database中并报错

搞出这故意气人机制的开发者简直是畜生！