body标签
一 基本标签（块级标签和内联标签）

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

<div><span>

块级标签：<p><h1><table><ol><ul><form><div>

内联标签：<a><input><img><sub><sup><textarea><span>

block（块）元素的特点

总是在新行上开始；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素

inline元素的特点

和其他元素都在一行上；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

特殊字符

&lt; &gt；&quot；&copy;&reg;

 

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world</h1>
<p>hello world</p>
<div style="color: rebeccapurple">hello world</div>
<span>smoke</span>
</body>
</html>

点击pycharm上面浏览器

 

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world</h1>
<p>hello world</p>
<div>hello div</div>
<span>smoke</span>
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
        }
    </style>
</head>
<body>
<h1>hello world</h1>
<p>hello world</p>
<!--<div style="color: rebeccapurple">hello div</div>-->
<div>hello div2</div>
<span>smoke</span>
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
hello before<div>hello div2</div>
<!--<span>smoke</span>-->
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
hello before
<div>hello div2</div>
<!--<span>smoke</span>-->
</body>
</html>

点击pycharm上面浏览器

 修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
hello before
<div>hello div2</div>hello after
<!--<span>smoke</span>-->
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
hello before
<div>hello div2</div>hello after
<span>hello span</span>
<!--<span>smoke</span>-->
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--<span>smoke</span>-->
<h1>hello</h1>
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--<span>smoke</span>-->
<h1>hello</h1>hello2
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--<span>smoke</span>-->
<h1>hello</h1>hello2
<p>hello</p>hello2
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--块级(block) 那联(in-line)-->
<!--<span>smoke</span>-->
<h1>hello</h1>hello2 h1
<p>hello</p>hello p
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--块级(block) 那联(in-line)-->
<!--<span>smoke</span>-->
<h1>hello</h1>hello2 h1
<p>hello</p>hello p
<!--注意：1 所有标签统分为块级标签和内联标签 2 div:block span:in-line-->
<b>给字体加粗</b>
<em>变成斜体</em>
<strike>去除</strike>
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--块级(block) 那联(in-line)-->
<!--<span>smoke</span>-->
<h1>hello</h1>hello2 h1
<p>hello</p>hello p
<!--注意：1 所有标签统分为块级标签和内联标签 2 div:block span:in-line-->
<b>给字体加粗</b>
<em>变成斜体</em>
<strike>去除</strike>
<del>delete</del>
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--块级(block) 那联(in-line)-->
<!--<span>smoke</span>-->
<h1>hello</h1>hello2 h1
<p>hello</p>hello p
<!--注意：1 所有标签统分为块级标签和内联标签 2 div:block span:in-line-->
<b>给字体加粗</b>
<em>变成斜体</em>
<strike>去除</strike>
<del>delete</del>
2<sub>3</sub>
2<sup>3</sup>
</body>
</html>

点击pycharm上面浏览器

 修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--块级(block) 那联(in-line)-->
<!--<span>smoke</span>-->
<h1>hello</h1>hello2 h1
<p>hello</p>hello p
<!--注意：1 所有标签统分为块级标签和内联标签 2 div:block span:in-line-->
<b>给字体加粗</b>
<em>变成斜体</em>
<strike>去除</strike>
<del>delete</del>
2<sub>3</sub>
2<sup>3</sup>
hello     smoke
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--块级(block) 那联(in-line)-->
<!--<span>smoke</span>-->
<h1>hello</h1>hello2 h1
<p>hello</p>hello p
<!--注意：1 所有标签统分为块级标签和内联标签 2 div:block span:in-line-->
<b>给字体加粗</b>
<em>变成斜体</em>
<strike>去除</strike>
<del>delete</del>
2<sub>3</sub>
2<sup>3</sup>
hello  smoke
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--块级(block) 那联(in-line)-->
<!--<span>smoke</span>-->
<h1>hello</h1>hello2 h1
<p>hello</p>hello p
<!--注意：1 所有标签统分为块级标签和内联标签 2 div:block span:in-line-->
<b>给字体加粗</b>
<em>变成斜体</em>
<strike>去除</strike>
<del>delete</del>
2<sub>3</sub>
2<sup>3</sup>
hello  smoke &copy
</body>
</html>

点击pycharm上面浏览器

修改lesoon2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: #cc3399;
            background-color:cadetblue;
        }
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--<h1>hello world</h1>-->
<!--<p>hello world</p>-->
<!--<div style="color: rebeccapurple">hello div</div>-->
<!--hello before-->
<!--<div>hello div2</div>hello after-->
<!--<span>hello span</span>-->
<!--块级(block) 那联(in-line)-->
<!--<span>smoke</span>-->
<h1>hello</h1>hello2 h1
<p>hello</p>hello p
<!--注意：1 所有标签统分为块级标签和内联标签 2 div:block span:in-line-->
<b>给字体加粗</b>
<em>变成斜体</em>
<strike>去除</strike>
<del>delete</del>
2<sub>3</sub>
2<sup>3</sup>
hello  smoke &copy
<h1>
</body>
</html>

点击pycharm上面浏览器