首页向大家介绍一下，什么是工程师

Web前端工程师

负责网页编写
Web后端工程师
负责数据库和查询逻辑编写
Web全栈工程师

上述二者和项目控制

博主我，正往着，Python后端和全栈工程师发展，并且Python知识已经完全写在我的博客分类专栏，相信，很多人都是准备往着这两个方向进击，那么作为后端工程师，需要掌握前端知识，从今天开始，更新作为后端工程师需要掌握哪些知识。

这是我做的思维导图，有需要的小伙伴们，评论下方。

一、Html介绍

HTML： 超文本标记语言，主要作用是用来编写网站页面。
超文本：文本是含有完整含义的文字组成的段落或者文件，超文本是在表达形式上超出文字范围：
    超链接，含有跳转的对象，
    图片，
    声音，
    视频
    
标记：指的的HTML的代码风格，HTML依赖标签进行内容的表述：
    标签：
          <标签名称  属性=”值”>
    单标签
          <标签名称  属性=”值”>
    双标签
          <标签名称  属性=”值”></标签名称>

在Pycharm中创建一个html文件

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

</head>
<body>
    <h1> hello</h1>
    <h2> hello</h2>
    <h3> hello</h3>
    <h4> hello</h4>
    <h5> hello</h5>
</body>
</html>

点击运行可以看到如下效果

基于上面的案例要有以下的认识：

html文件的后缀是.html
html的标签是固定的，单标签和双标签都是固定好的，我们需要做的事在学习完成之后总结。
html的基本结构
向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english页面如果是中文页面，可将其改为<html lang="zh">zh即表示中文

html标签是HTML文件的最大一个标签，也被称为根标签
html的标签通过嵌套来声明层级
在html标签内部把整个html分为了头部（head标签）和内容部分（body部分）
头部负责声明页面的属性，title就是页面的标题
内容部分负责页面上的内容

二、常用的HTML标签

1、h标签

标题标签，一共是h1-h6六个等级，再html当中代表标题。

2、文本常用标签

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

</head>
<body>
    <!-- ①html文本常用标签 -->
    <p>1、使用文本内容去表达</p><!-- 文本标签 一个p一行 -->
    <p>2、使用文本内容<br>去表达</p> <!-- br标签用于换行 -->
    <hr><!-- hr标签换行一条线 -->
    <p>3、使用文本内容&nbsp;&nbsp;&nbsp;去表达</p><!-- &nbsp空格表示 -->
    <p>4、hello&lt;wrold</p><!-- &lt符号< -->
    <p>5、hello&gt;wrold</p><!-- &ge符号> -->
</body>
</html>

3、文本修饰标签

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

</head>
<body>
    <!-- ②html文本修饰标签 -->
     <i>稳稳c9___html学习笔记</i>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- 倾斜，具有语句含有，表强调 -->
    <em>文本修饰标签</em>&nbsp;&nbsp;&gt;<!-- 仅仅倾斜 -->
    <b>第二阶段</b>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- 加粗 -->
    <strong>Web学习</strong>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- 加粗，表强调 -->
    <u>hello</u>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- 下划线 -->
    <del>world</del> <!-- 删除线 -->
</body>
</html>

4、div 盒子标签

Html布局历史：
现在学习的内容是将内容放到页面上，之后的学习一定要涉及到页面布局，就是把今天学习到的标签如何放到页面合适的位置，这样技术就是布局。
在最初html流行表格布局类似于现在的简历模板，将整个页面看成一共表格，然后进行表格的合并，最后形成网页布局。

后来随着网络的发展，表达的形式越来越复杂，表格布局有写苍白，就有了新的布局方式，盒子布局，将整个页面看作一个盒子，在里面嵌套小盒子，通过描述盒子的位置，边框，边距进行布局。

div 就是盒子模型一个元素，频繁使用在网页布局中
后面会详细说道

5、img 图片标签

Image 图片，镜像，html当中的图片标签采用的是image的缩写 img 和上面的标签相比，我们在图片标签就要接触到标签的属性了。
<img>

  src 图片地址可以使用绝对路径
            Windows下以盘符开头 D:\\
            Linux下以根开头 /usr/root/
  也可以使用相对路径指的是以当前文件为参照，其他文件的位置
            ./当前路径 默认可以不写
            ../代表上一层
            / 项目的根目录

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <img src="img/3.jpg" title="测试图片" alt="图片找不到" wigth="50px"> <!-- 图片标签image 单标签 -->
    </body>
</html>

6、超链接标签 a

我们单纯文本表述，就不需要有过多的属性，比如：span,h,p,br,hr
如果是超文本就需要属性：图片需要地址，标题，错误提示，高宽
在HTML当中a标签是超链接标签，a标签是双标签
<a></a> 超链接也是超文本，所以a标签也是需要参数：

href：超链接的地址，链接到哪里
target: 代表打开链接的方式

src 可以加载外部网页，也可以是锚点操作

加载外部网页：

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

</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">点击我,新打开一个网页</a>
    <hr>
    <a href="https://www.baidu.com/" target="_self">点击我，原网页刷新</a>
</body>
</html>

锚点操作：

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

</head>
<body>
    <a href="#1" >跳转文章底部</a>
    <hr>



    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>

    <h1 id="1">文章底部</h1>
</body>
</html>

不好贴图，这里就是相当于，跳转目录一样

7、列表标签

1. ol 有序标签

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

</head>
<body>
    <ol>
        <li>Python</li>
        <li>Java</li>
    </ol>
    
    <ol type="A" start="2">
        <li>Python</li>
        <li>Java</li>
    </ol>
</body>
</html>

默认是i罗马数字可以通过 type指定类型，以及start开始位置

2. ul 无序标签

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

</head>
<body>
    <ul>
        <li>Python</li>
        <li>Java</li>
    </ul>

    <ul type="circle" >
        <li>Python</li>
        <li>Java</li>
    </ul>
</body>
</html>

默认是disc 实心圆点，可以通过type指定

3. dt 自定义标签

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

</head>
<body>
    <dl>
        <dt>目录</dt>
        <dd>1、Python</dd>
        <dd>1、JAVA</dd>
    </dl>
</body>
</html>

其实就是分级目录的意思、

自定义列表没有前面的字符
自定义列表可以按照需求进行缩进
通常会用作导航栏
有序或者无序列表是可以嵌套的

8、表格标签

1. table 标签表格

table有一系列的属性

1、 cellspacing cellspacing 单元格和单元格直接的距离
2、cellpadding cellpadding 单元格和内容的距离
3、width 表格的宽度
4、height 表格的高度，由于数据条数不固定，所以通常不设置高度

这里提前用到 tr 和 td 标签，分别表示行，列

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

</head>
<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

我们可以看到，像表格，但是又不像。这是因为table属性的原因

设置table属性，让它更像表格，读者可以自己调节数据，测试一下

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

</head>
<body>
    <table cellspacing="20" cellpadding="10" width="300px">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

发现距离变远了

其实没有边框，那么这里先超前使用边框css样式，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }


    </style>
</head>
<body>
    <table cellspacing="20" cellpadding="10" width="300px">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

读者可以，根据这个源码去调试感受下 table属性

2. tr 标签【行】

tr 全称 table row 也是就是表格行的意思
当然也有自己的属性
属性都是在标签内部写的比如 <tr align=" center"> </tr>
表示，里面的内容都居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }


    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="10" width="200">
        <tr align="center">
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

3. td 和 th 标签【列】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }


    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="10" width="200">
        <tr align="center">
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td align="center">小明</td>
            <td>18</td>
        </tr>
        <tr>
            <th>小红</th>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

4. 表格结构

其实就是为了，好阅读，可以不写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="10" width="200">
        <caption>人员信息调查表</caption>
        <thead>
            <tr align="center">
            <td>姓名</td>
            <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="center">小明</td>
                <td>18</td>
            </tr>
            <tr>
                <th>小红</th>
                <td>20</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>时间：2020-1-1 </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

5. 表格合并

现在有这么个需求

如果你前面有试过table属性的cellspacing 和cellpadding 你就知道能够做出一张表格

可以看到，是不是需要合并照片部分的行，或者合并几个列

先从一个简单的表格做起

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

    </style>
</head>
<body>
    <table  border="1" cellspacing="0" cellpadding="0" width="200">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

可以看到这是一个表格

如果我们要求合并1-2 和 1-3 两列
可以遵循从左往右原则，第一个列中设置属性
colspan = " 2 " 其中2 代表合并两列，所以 1-3 哪列注释掉，删除也行。

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

    </style>
</head>
<body>
    <table  border="1" cellspacing="0" cellpadding="0" width="200">
        <tr>
            <td>1-1</td>
            <td colspan="2">1-2</td>
<!--            <td>1-3</td>-->
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

可以看到效果出来了

我们还是用原来表格源码

需求改变，合并第二行 2-2 和第三行 3-2

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

    </style>
</head>
<body>
    <table  border="1" cellspacing="0" cellpadding="0" width="200">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td rowspan="2">2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
<!--            <td>3-2</td>-->
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

可以看到成功了

9、表单标签

为什么要用表单，什么是表单？
之前学习的内容都是为了在html上向用户展示数据，但是没有获取用户数据的地方，问题是web开发要实现用户和网站的交互。表单技术就是获取用户反馈的一个重要手段。

1. form 表单标签

提前用到点后面控件知识

使用get方法显示用户输入

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

    </style>
</head>
<body>
        <!--
        action：提交的地址
        method：提交的方式
            get:参数会拼接到url中，一般不建议将敏感信息放在这里，不能上传超过4kb
            post:参数不会拼接到url中，相对get，更安全，文件上传必须使用post
        enctype：数据类型
            application/x-www-form-urlencoded：非文件上传，默认值，可以不写
            multipart/form-data：文件上传必须这是这个值，同时method设置为post-->
    <form action="#" method="get" enctype="application/x-www-form-urlencoded">
            <table>
                <tr>
                    <!--
                    input: 输入控件
                    type=“ text” ：控件类型为文本
                    name: 控件名称  键
                    placeholder: 用户提示信息
                    -->
                    <td>账户</td>
                    <td>
                        <input type="text" name="username" placeholder="请输入用户名">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

可以看到页面出现了这个东西你品，你细品

这就是我们平时输入账户一样，随便输入

回车后，看url 网址变化

get 是明文显示的，post跟它相反，这里不做例子，修改上面源码即可试试

现在我们可以按F12 或者在设置找到开发者终端

点击玩最后一个，往下面找找，可以看到我们在控件
<input type="text" name="username" placeholder="请输入用户名"> 中name就是我们定义的键username 得到用户输入的value 值。
组合成字典 { " key" : "value "} 在后期会介绍怎么获取前端页面的值，在后端处理，这就是表单数据交互的基本使用。

2. input 控件

其实这些控件一般都是要配合 form使用的，作为前后端数据交互，并且设置name，前面已经提及

input 控件相信各位都已经有了大概的概念，在前面已经用到通过 type 指定为什么控件

那么我就通过进展案例来演示，也就是逐步使用上面图片控件

版本v1.0 密码控件

password 表名为面控件

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

    </style>
</head>
<body>
    
    <form action="#" method="get">
            <table>
                <tr>
                    <td>账户</td>
                    <td>
                        <input type="text" name="username" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="请输入密码">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

版本v2.0 单选框

控件属性说明：
radio 选择的圆圈
name = " sex" 控件名为性别
value = " 0 或 1" 就是明确只能有一个，要么男要么女
checked 默认选项

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

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>账户</td>
                    <td>
                        <input type="text" name="username" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="请输入密码">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

版本v3.0 复选框

`checkbox` 表示多选复选框，比如一个人的爱好有多个，值得注意的是一定要设置其`value` 为相同，因为并不是唯一选项不像男女 `value` 要么0 要么 1

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

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>账户</td>
                    <td>
                        <input type="text" name="username" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="请输入密码">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>您的爱好是什么？</td>
                </tr>
                <tr>
                    <td>
                        篮球<input type="checkbox" name="lanqiu" value="hobby">
                        网球<input type="checkbox" name="wangqiu" value="hobby">
                        足球<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

版本v4.0 文件框

file 上传文件

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

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>账户</td>
                    <td>
                        <input type="text" name="username" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="请输入密码">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>您的爱好是什么？</td>
                </tr>
                <tr>
                    <td>
                        篮球<input type="checkbox" name="lanqiu" value="hobby">
                        网球<input type="checkbox" name="wangqiu" value="hobby">
                        足球<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        请选择您要上传的头像<input type="file" name="pic">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

因为没有，关注布局，那个密码那么飞的老远了，大家忽略不计。

版本v5.0 隐藏域

hidden 用户在前端页面看不到，用来测试的，一般不用

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

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>账户</td>
                    <td>
                        <input type="text" name="username" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="请输入密码">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>您的爱好是什么？</td>
                </tr>
                <tr>
                    <td>
                        篮球<input type="checkbox" name="lanqiu" value="hobby">
                        网球<input type="checkbox" name="wangqiu" value="hobby">
                        足球<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        请选择您要上传的头像<input type="file" name="pic">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="hidden" name="hid">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

版本v6.0 提交框重置框

`submit` 用户注册好了，用来提交的按钮 `reset` 重置按钮

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

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>账户</td>
                    <td>
                        <input type="text" name="username" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="请输入密码">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>您的爱好是什么？</td>
                </tr>
                <tr>
                    <td>
                        篮球<input type="checkbox" name="lanqiu" value="hobby">
                        网球<input type="checkbox" name="wangqiu" value="hobby">
                        足球<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        请选择您要上传的头像<input type="file" name="pic">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="hidden" name="hid">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" name="提交">
                        <input type="reset" name="重置">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

版本 v7.0 button按钮

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

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>账户</td>
                    <td>
                        <input type="text" name="username" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="请输入密码">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>您的爱好是什么？</td>
                </tr>
                <tr>
                    <td>
                        篮球<input type="checkbox" name="lanqiu" value="hobby">
                        网球<input type="checkbox" name="wangqiu" value="hobby">
                        足球<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        请选择您要上传的头像<input type="file" name="pic">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="hidden" name="hid">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" name="提交">
                        <input type="reset" name="重置">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="按钮一">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

3. name value

这里有必要总结下

1、在密码框中 name = “username” 没有设置value ，而是用户输入的值就是value，以字典形式保存，通过F12查看{“username”：“用户输入”}
2、在 radio 单选框中，name=“ sex” , value="1" , value="0" ,分别表示性别单选，只能选一个
checkbox复选框中，name="zhuqiu",name=" wangqiu"，所有value =" hobby"都为相同，name代表不同名称，value表示多选
3、在input控件中 button 设置 value =“按钮一” 则表示控件中间名称

4. select 控件多选

配合option使用
selected 属性表示默认选项，回忆下radio 和 checkbox 里面也有checked默认选项

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

    </style>
</head>
<body>
    <select>
        <option>湖南</option>
        <option selected>广东</option>
        <option>上海</option>
    </select>
</body>
</html>

可以看到我设置了默认广东

5. testaera 文本域

经常会遇到表单，让你有其它意见的话，就填入
textarea 设置文本域
cols 设值列
rows 设置行

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

    </style>
</head>
<body>
    其它意见
    <textarea cols="40" rows="3">

    </textarea>
</body>
</html>

6. 按钮

按钮其实在前面已经说过了
主要是 input控件里面的 submit ，reset ，button 按钮

7. 控件属性

这边略过，控件属性可以进行这些操作

三、html案例

1、【文本标签文本修饰标签锚点】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style="text-align: center" id="top">广州百度百科</h1>
    <h2>简介</h2>
     广州，简称“穗”，别称羊城、花城，是广东省省会、副省级市、国家中心城市、超大城市，国务院批覆确定的中国重要的中心城市、<br>
    国际商贸中心和综合交通枢纽 [1]。<br>
    截至2018年，全市下辖11个区，总面积7434平方千米，建成区面积1249.11平方千米，常住人口1530.59万人，城镇化率86.46%。 [2-3]

    <h2>目录</h2>
    <a href="#1">1、历史</a>
    <br><br>
    <a href="#2">2、地理环境</a>

    <h2 id="1">历史</h2>
    传说广州最早的地名为“楚庭”（或“楚亭”）。越秀山上的中山纪念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍将“楚庭”视为广州的雏型，是广州最早的称谓，距今已有2847年。<br>
    传说有五位仙人，身穿五彩衣，骑着五色羊，拿着一茎六穗的优良稻谷种子，降临“楚庭”，将稻穗赠给当地人民，并祝福这里永无饥荒。<br>
    说完后，五位仙人便腾空而去，五只羊则变成了石头。当地人民为纪念五位仙人，修建了一座五仙观，传说五仙观即为“楚庭”所在。<br>
    由此，广州又有“羊城”、“穗城”的别名。 [22]
    传说广州最早的地名为“楚庭”（或“楚亭”）。越秀山上的中山纪念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍将“楚庭”视为广州的雏型，是广州最早的称谓，距今已有2847年。<br>
    传说有五位仙人，身穿五彩衣，骑着五色羊，拿着一茎六穗的优良稻谷种子，降临“楚庭”，将稻穗赠给当地人民，并祝福这里永无饥荒。<br>
    说完后，五位仙人便腾空而去，五只羊则变成了石头。当地人民为纪念五位仙人，修建了一座五仙观，传说五仙观即为“楚庭”所在。<br>
    由此，广州又有“羊城”、“穗城”的别名。 [22]
    传说广州最早的地名为“楚庭”（或“楚亭”）。越秀山上的中山纪念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍将“楚庭”视为广州的雏型，是广州最早的称谓，距今已有2847年。<br>
    传说有五位仙人，身穿五彩衣，骑着五色羊，拿着一茎六穗的优良稻谷种子，降临“楚庭”，将稻穗赠给当地人民，并祝福这里永无饥荒。<br>
    说完后，五位仙人便腾空而去，五只羊则变成了石头。当地人民为纪念五位仙人，修建了一座五仙观，传说五仙观即为“楚庭”所在。<br>
    由此，广州又有“羊城”、“穗城”的别名。 [22]
    传说广州最早的地名为“楚庭”（或“楚亭”）。越秀山上的中山纪念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍将“楚庭”视为广州的雏型，是广州最早的称谓，距今已有2847年。<br>
    传说有五位仙人，身穿五彩衣，骑着五色羊，拿着一茎六穗的优良稻谷种子，降临“楚庭”，将稻穗赠给当地人民，并祝福这里永无饥荒。<br>
    说完后，五位仙人便腾空而去，五只羊则变成了石头。当地人民为纪念五位仙人，修建了一座五仙观，传说五仙观即为“楚庭”所在。<br>
    由此，广州又有“羊城”、“穗城”的别名。 [22]
    传说广州最早的地名为“楚庭”（或“楚亭”）。越秀山上的中山纪念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍将“楚庭”视为广州的雏型，是广州最早的称谓，距今已有2847年。<br>
    传说有五位仙人，身穿五彩衣，骑着五色羊，拿着一茎六穗的优良稻谷种子，降临“楚庭”，将稻穗赠给当地人民，并祝福这里永无饥荒。<br>
    说完后，五位仙人便腾空而去，五只羊则变成了石头。当地人民为纪念五位仙人，修建了一座五仙观，传说五仙观即为“楚庭”所在。<br>
    由此，广州又有“羊城”、“穗城”的别名。 [22]
    传说广州最早的地名为“楚庭”（或“楚亭”）。越秀山上的中山纪念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍将“楚庭”视为广州的雏型，是广州最早的称谓，距今已有2847年。<br>
    传说有五位仙人，身穿五彩衣，骑着五色羊，拿着一茎六穗的优良稻谷种子，降临“楚庭”，将稻穗赠给当地人民，并祝福这里永无饥荒。<br>
    说完后，五位仙人便腾空而去，五只羊则变成了石头。当地人民为纪念五位仙人，修建了一座五仙观，传说五仙观即为“楚庭”所在。<br>
    由此，广州又有“羊城”、“穗城”的别名。 [22]

    <h2 id="2">地理位置</h2>
    广州地处中国南部、广东省中南部、珠江三角洲中北缘，是西江、北江、东江三江汇合处，濒临中国南海，东连博罗、龙门两县，西邻三水、南海和顺德 <br>
    北靠清远市区和佛冈县及新丰县，南接东莞市和中山市，隔海与香港、澳门相望，是海上丝绸之路的起点之一，中国的“南大门”， <br>
    是广佛都市圈、粤港澳都市圈、珠三角都市圈的核心城市。 [33]  <br>
    <br>
    广州位于东经112度57分至114度3分，北纬22度26分至23度56分。市中心位于北纬23度06分32秒，东经113度15分53秒。 [34]
    <br><br><br><br><br><br>
    <a href="#top">返回文章顶部</a>

</body>
</html>

2、【表单，控件，控件属性】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style="text-align: center">问卷调查</h1>
    <br>
    <p>您好！</p>
    <p>感谢您选择了本平台，为了更好的了解您的需求和期盼，为您提供更加优质的服务，我们诚挚邀请您参加本客户端满意程度调查，
        请您就下列问题发表宝贵意见，您的答案对于我们不断改进各项工作具有非常重要的价值，感谢您的配合！
    </p>
    <form action="#" method="post" >
        <table cellpadding="5">

            <tr><td>1、课程设计是否满意</td></tr>
            <tr><td><input type="radio" name="question1" value="a1">满意</td></tr>
            <tr><td><input type="radio" name="question1" value="a2">一般</td></tr>
            <tr><td><input type="radio" name="question1" value="a3">不满意</td></tr>
            <tr><td><input type="radio" name="question1" value="a4">非常不满意</td></tr>

            <tr><td>2、讲师的授课风格是否满意</td></tr>
            <tr><td><input type="radio" name="question2" value="b1">满意</td></tr>
            <tr><td><input type="radio" name="question2" value="b2">一般</td></tr>
            <tr><td><input type="radio" name="question2" value="b3">不满意</td></tr>
            <tr><td><input type="radio" name="question2" value="b4">非常不满意</td></tr>

            <tr><td>3、食宿是否满意</td></tr>
            <tr><td><input type="radio" name="question3" value="c1">满意</td></tr>
            <tr><td><input type="radio" name="question3" value="c2">一般</td></tr>
            <tr><td><input type="radio" name="question3" value="c3">不满意</td></tr>
            <tr><td><input type="radio" name="question3" value="c4">非常不满意</td></tr>

            <tr><td>4、整体感观是否满意</td></tr>
            <tr><td><input type="radio" name="question4" value="d1">满意</td></tr>
            <tr><td><input type="radio" name="question4" value="d2">一般</td></tr>
            <tr><td><input type="radio" name="question4" value="d3">不满意</td></tr>
            <tr><td><input type="radio" name="question4" value="d4">非常不满意</td></tr>

            <tr><td>5、对于本客户端您有什么好的建议？客户服务方面我们还需要做哪些改进？</td></tr>
            <tr><td><textarea name="respose" cols="80" rows="10"></textarea></td></tr>

            <tr><td>非常感谢您的支持和配合！我们讲不断努力，为您提供满意的服务</td></tr>

            <tr><td>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </td></tr>

        </table>
    </form>
</body>
</html>

3、【个人简历表格】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格合并</title>
    <style>
        td{
            width: 40px;
        }
    </style>
</head>
<body >
    <div>
    <table border="1" cellspacing="0" cellpadding="0" width="800" >
        <caption>个人简历</caption>
        <tr >
            <td>姓名</td>
            <td> </td>
            <td>性别</td>
            <td> </td>
            <td>出生年月</td>
            <td></td>
            <td rowspan="4"></td>
        </tr>
        <tr>
            <td>民族</td>
            <td> </td>
            <td>政治面貌</td>
            <td> </td>
            <td>身高</td>
            <td> </td>
        </tr>
        <tr>
            <td>学制</td>
            <td> </td>
            <td>学历</td>
            <td> </td>
            <td>户籍</td>
            <td></td>

        </tr>
        <tr>
            <td>专业</td>
            <td> </td>
            <td colspan="2">毕业学校</td>
            <td colspan="2"></td>
        </tr>
        <tr >
            <td colspan="7" align="center">技能、特长或爱好</td>
        </tr>
        <tr>
            <td>外语等级</td>
            <td colspan="2"> </td>
            <td>计算机</td>
            <td colspan="3"></td>
        </tr>
        <tr >
            <td colspan="7" align="center">个人履历</td>
        </tr>
        <tr>
            <td>时间</td>
            <td colspan="2">单位</td>
            <td colspan="4">经历</td>
        </tr>
        <tr>
            <td>2002年4月</td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td>2003年3月</td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td>2003年8月</td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td colspan="7" align="center">联系方式</td>

        </tr>
        <tr>
            <td>通讯地址</td>
            <td colspan="3"></td>
            <td>联系电话</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>email</td>
            <td colspan="3"></td>
            <td>邮编</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="7" align="center">自我评价</td>
        </tr>
        <tr>
            <td colspan="7" height="160"></td>
        </tr>
    </table>
    </div>
</body>
</html>

四、个人浅谈

后端工程师，所需要的是要看懂前端的大体内容，这样你才能进行数据交互设计

网上有需要好多的学习网站，在这里推荐给大家

菜鸟联盟
w3cschool

html_后端工程师必备知识-这些你都懂了吗？

文章目录