HTML

什么是HTML? 超文本标记语言（HyperText Markup Language，简称 HTML）

结构：一般情况下在pycharm里新建一个html类型的文件时，会自动生成以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

如果没有自动生成，就输入！然后摁下tab键就会出来

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

常用标签

标签定义:

由尖括号包裹单词构成，eg：,所以标签不可能以数字开头

标签格式:

标签不区分大小写，推荐小写

注意事项:

错误示例：

正确示例：

也就是说，前后必须配套

标签使用样式：

1.开始标签-标签体-结束标签

2.自闭合标签，

eg： < hr >，< input >，< img >

标签属性：

通常为键值对形式出现，eg：color=“red” id = ‘eat’

属性只能出现在开始标签和自闭和标签内

属性名字全部小写，属性值必须用单引或者双引包裹

如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）

完整内容：

标签简介：

1.块级标签和内联标签：

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

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

2.块级元素特点：

总在新行上开始高度，行高以及外边距和内边距都可控制，宽度缺省，则是它容器的100%它可以容纳内联元素和其他块元素

3.inline元素特点：

和其他元素在一行上高，行高以及外边距和内边距不可改变，宽度就是其文字或图片宽度，不可改变，内联元素只能容纳文本或者其他内联元素

4.行内元素注意：

设置宽度width无效设置高度height无效设置margin只有左右margin有效，上下无效设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影响的。

块级标签详解：

1.标题标签(共六个)

每次占一行
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    <h7>七级标签</h7>   #高亮显示
</body>
</html>
效果如下:   可以看到七级标签当作了普通文本去显示，标题标签只有六个，七级标签不存在

<h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><h7>七级标签</h7>  
这种写法和上面的效果是一样的，每次只占一行

2.段落标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>
        望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之中，带来一阵阵钻心的疼痛
    </p>
    <p>
        “萧炎，斗之力，三段级别：低级”测验魔石碑之旁，一位中年男子，看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来
  中年男子话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动
    </p>
</body>
</html>
注:不是说正文只能用p标签写，而是大部分都是这么写，所以推荐用p标签

效果如下：

虽然pycharm里面首行有空格，但是实际上不会显示出来，如果想显示空格的话必须使用特殊字符

3.div标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>
        望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之中，带来一阵阵钻心的疼痛
    </p>
    <p>
        “萧炎，斗之力，三段级别：低级”测验魔石碑之旁，一位中年男子，看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来
  中年男子话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动
    </p>
    <div>
        少年缓缓抬起头来，露出一张有些清秀的稚嫩脸庞，漆黑的眸子木然的在周围那些嘲讽的同龄人身上扫过，少年嘴角的自嘲，似乎变得更加苦涩了
    </div>
</body>
</html>
效果如下:

你看着效果差不多，但是div是一个最干净的容器，div标签是分层的，区分结构、目录，它无属性无样式，所以你可以自己设置样式，div什么都可以装，用于分化一个一个的区域。

行内标签详解：

1.超链接标签

超链接标签其实就是a标签，href后面写的是要跳转去的网址

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com">baidu</a>
</body>
</html>
效果如下:

点击后跳转到百度的网站:

到这里，我们看到的效果和前面的块级标签效果一样，那为什么叫做行内标签呢，我们再添加一行来看

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com">baidu1</a>
    <a href="https://www.baidu.com">baidu2</a>
</body>
</html>
效果如下:

他会在同一行，行内标签是不占一行的，会在一行内接着排，所以叫行内标签

2.图片标签

src里面填写图片路径，alt里填写如果没有这张图片，他会显示出来的东西

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com">baidu1</a>
    <img src="2.jpg" alt="没有">
</body>
</html>
效果如下:

可以发现图片排在了baidu1的后面，所以图片标签也是一个行内标签，但是为什么会占据这么大的地方呢，因为占地面积是由图片高度来控制，所以会撑大。

如果想把图片做成可以点击的链接，可以把img标签放在a标签里面，如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com"><img src="2.jpg" alt="没有"></a>
</body>
</html>
效果如下:

点击图片以后就会跳转到百度首页，如果是下面这样:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com"><img src="2.jpg" alt="没有">百度</a>
</body>
</html>
效果如下:

此时点击图片或者文字都会跳转，只要在a标签里面都会跳转

如果没有这张图片:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com"><img src="1.jpg" alt="没有">百度</a>
</body>
</html>
效果如下:

3.锚点

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="aaa"></p>
    <p>
        数十年中，这片斗气大陆，也是再度变得精彩，各种天才辈出，惊艳世人，然而，似乎不论后人如何的出彩，在他们的头顶之上，依然是有着一道身影而立。
    </p>
    <a href="https://www.baidu.com"><img src="2.jpg" alt="没有">百度</a><br>          #<br>是换行符

<a href="#aaa">返回顶部</a>
</body>
</html>
效果如下:

点击返回顶部就会回到顶部，返回底部也能(把那两行调换一下位置就行)，但是做网站是希望用户尽量在网站里多停留，所以一般不常用

4.假链接

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="aaa"></p>
    <p>
        数十年中，这片斗气大陆，也是再度变得精彩，各种天才辈出，惊艳世人，然而，似乎不论后人如何的出彩，在他们的头顶之上，依然是有着一道身影而立。
    </p>
    <a href="https://www.baidu.com"><img src="2.jpg" alt="没有">百度</a><br>
    <a href="#aaa">返回顶部</a><br>
    <a href="javascript:void(0)">点开有惊喜</a>
</body>
</html>
效果如下:

此时点击“ 点开有惊喜 ”不会有任何反应

5.粗体斜体颜色标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>
    数十年中，这<b>片斗</b>气大陆，<i><strong>也是再度变得精彩</strong></i>，各种天才辈出，惊艳世人，然而，似乎<a href="">不论后人如何的出彩，</a> 在他们的头顶之上，依然是有着一道身影而立。
    </p>
</body>
</html>
效果如下:

其中，b、strong标签是加粗，i标签是变斜，a标签是立即变色并且可以点击

6.文字标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>
    数十年中，这片斗气大陆，<span style="color: #0040ff">也是再度变得精彩，</span>各种天才辈出，惊艳世人，然而，似乎不论后人如何的出彩，在他们的头顶之上，依然是有着一道身影而立。
    </p>
</body>
</html>
效果如下:

如果只有，就和原来没有变化，里面如果指定属性就会变化，比如颜色。

特殊符号

因为标签就是用<>包裹起来的，所以你再里面的内容想用比如时，直接输入他是不会显示出来的，因为他和标签长得一模一样，这时就需要特殊符号，包括空格也需要特殊符号。

<是&lt； >是&gt； eg：&lt；a&gt；出现在网页文本当中就是

一个空格是&nbsp；一个字符宽度是&emsp

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>
    &emsp;&emsp;数十年中，这片斗气大陆，也是再度变得精彩，各种天才辈出，惊艳世人，然而，似乎不论后人如何的出彩，在他们的头顶之上，依然是有着一道身影而立。<br>
    &nbsp;&nbsp;“纳兰小姐，看在纳兰老爷子的面上，&lt;萧炎奉劝你几句话，&gt;三十年河东，三十年河西，莫欺少年穷”萧炎铮铮冷语，<br>
    让得纳兰嫣然娇躯轻颤了颤
    </p>
</body>
</html>
效果如下:

列表标签详解

1.有序列表

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ol type="1">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ol>
</body>
</html>
效果如下:

如果只是

，里面什么都没有，则默认是按1，2，3，4，5...去排，如果写了type=""，则里面写

a对应是按a,b,c,d,e...排

A对应是按A,B,C,D,E...排

i对应是按小写罗马数字排

I对应是按大写罗马数字排

1对应是按1，2，3，4，5...排

还有一个属性是start，< ol type="" start="" >,start里面是几，就是从几开始排序

2.无序列表

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul type="circle">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
</body>
</html>
效果如下:

如果只有< ul >，里面什么都没有，则默认是圆形实心，如果是< ul type="" >,则里面写circle是圆形空心，disc是圆形实心，none是什么都没有，square是实心正方形，还有就是解释一下在pycharm里时，type会有一横线，意思是过一个或者过几个版本以后这个方法会废弃掉。

3.自定义列表

这个方法很少用到
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<dl>
    <dt>内蒙古自治区</dt>
        <dd>呼和浩特市</dd>
        <dd>包头市</dd>
    <dt>陕西省</dt>
</dl>

</body>
</html>
效果如下:

行内元素与块级元素的互相转化

行内元素→块级元素：display:block

块级元素→行内元素：display:inline

直接在<>里加上这条属性即可style="",eg：

表格

1.基本内容

#下表没写表脚
<table border="2">    
        <thead>
            <tr>
                <th>序号</th>
                <th>班级</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>46</td>
                <td>haha</td>
                <td>22</td>
                <td>男</td>
            </tr>
            <tr>
                <td>46</td>
                <td>qiye</td>
                <td>20</td>
                <td>男</td>
            </tr>
            <tr>
                <td>46</td>
                <td>baye</td>
                <td>22</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>
效果如下:

如果把border="2"去掉的话就是这样的：

其他属性：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        table{
          width:300px;
          border-collapse:collapse;  
          text-align: center;
        }
    </style>

</head>
<body>

    <table border="2">
        <thead>
            <tr>
                <th>序号</th>
                <th>班级</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>46</td>
                <td>haha</td>
                <td>22</td>
                <td>男</td>
            </tr>
                    <tr>
                <td>46</td>
                <td>qiye</td>
                <td>20</td>
                <td>男</td>
            </tr>
                    <tr>
                <td>46</td>
                <td>baye</td>
                <td>22</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>

</body>
</html>
效果如下:

解释：width:300px;→调整宽度

border-collapse:collapse;→调整方框，默认是separate，就是一开始那种双线框

text-align: center;→让文字跑到中间

2.表格其他用法补充

①合并行/列

把上面的代码中这部分改成如下： (注意只能写在表身里)

<td rowspan="2">46</td>
<td>haha</td>
<td>22</td>
<td>男</td>
效果如下:

数字是几就合并几行或者几列，多余的数据不会消失，会挤出去。

rowspan=""→合并行

colspan=""→合并列

②表头

在这里加一行

<table border="2">
        <caption>标题</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>班级</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
效果如下:

表单※

1.基本内容

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="https://www.baidu.com/s" method="get">
         <input type="text" name="wd" id="" placeholder="输入你要搜索的内容">
         <input type="submit" value="已提交">
    </form>
</body>
</html>
效果如下:

输入东西以后点"已提交",就会直接百度搜索你输入的东西

解释：

1.method有两种选择，分别是get和post

placeholder是提示，get方法是把name、id和上面的网址拼接起来然后去搜索，每个搜索网站要拼接的内容都不一样，要改，=就相当于字典里的冒号，？相当于分界夫前面是路径，后面是键值对。

3.get请求会把你所有填写的东西拼接到url路径当中去，就像上面那张图一样

下面我们来看post方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="https://www.sogou.com/web" method="post">
         <input type="text" name="query" id="" placeholder="输入你要搜索的内容">
         <input type="submit" value="已提交">
    </form>
</body>
</html>
效果如下:

可以看到你输入的不会在url里显示，只会保存在开发工具里的Form Data里

完整实例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     <form action="" method="get">
        <p>
            用户名：<input type="text" name="usr" placeholder="输入用户名">
        </p>          
        <p>
        密&emsp;码：<input type="password" name="psw" placeholder="输入密码">
        </p>
        <p>性&emsp;别:
            <input type="radio" name="sex" value="female">女
            <input type="radio" name="sex" value="male">男
        </p>
        <p>
            爱&emsp;好：
            <input type="checkbox" name="hobby" value="sing">唱歌
            <input type="checkbox" name="hobby" value="dance">跳舞
            <input type="checkbox" name="hobby" value="swim">游泳
        </p>
        <p>文件上传:
            <input type="file" name="file">
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
    <p>地&emsp;址：
            <select name="addr" id="">
                <optgroup label="湖南省">
                    <option value="cs">长沙市</option>
                    <option value="cd">常德市</option>
                </optgroup>
                <optgroup label="湖北省">
                    <option value="cs">长沙市</option>
                    <option value="cd">常德市</option>
                </optgroup>
            </select>
        </p>
</body>
</html>

效果如下：

解释：

1.密码是不希望别人看见的，所以这里类型是，他输入以后会显示一堆圆形实心点。

2.radio是单选。

3.checkbox是勾选框，可以勾选多个。

4.file是文件上传，name是随便取的。

(http://localhost:63342/pythonProject/第三阶段/web--01.html?usr=qqq&psw=zcdc&sex=male&hobby=sing&hobby=dance&file=)

url长度显示是由应用控制的，不是由get和post方法控制的

可以看到提交以后url里的键值对是你输入的，这样不安全，所以一般涉及到隐私都用post，下面是使用post提交后的效果。

可以看到输入的信息不会在url里显示，会在开发工具里的表单数据(Form Data)里储存。

再介绍一下文本域

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <textarea name="" cols="30" rows="10" placeholder="写下你的梦想"></textarea>

</body>
</html>
效果如下:

2.其他

①name属性：

表单提交项的键，与id不同，name属性是和服务器通信时使用的名字，通过name找到value，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用

②value属性：

表单提交项的值

③input标签中不同type，value值的不同

type="button"/"reset"/"submit" --定义按钮上显示文本

type="text"/"password"/"hidden" --定义输入字段初始值

type="checkbox"/"radio"/"image" --定义与输入相关联的

④type类型

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="" name="frm">
        <input type="hidden" name="hello" value="qiye">
        <input type="button" value="cick" onclick="alert(document.frm.hello.value)">
    </form>
</body>
</html>

效果如下:

点击以后

最常用的结构：

web开发中html详细的用法，详细介绍了html里的各种标签的用法以及示例

HTML

常用标签

标签定义:

标签格式:

注意事项:

标签使用样式：

标签属性：

完整内容：

标签简介：

1.块级标签和内联标签：

2.块级元素特点：

3.inline元素特点：

4.行内元素注意：

块级标签详解：

1.标题标签(共六个)

2.段落标签

3.div标签

行内标签详解：

1.超链接标签

2.图片标签

3.锚点

4.假链接

5.粗体斜体颜色标签

6.文字标签

特殊符号

列表标签详解

1.有序列表

2.无序列表

3.自定义列表

行内元素与块级元素的互相转化

表格

1.基本内容

2.表格其他用法补充

①合并行/列

②表头

表单※

1.基本内容

2.其他