html_后端工程师必备知识-这些你都懂了吗？
文章目录
- 一、Html介绍
- 二、常用的HTML标签
-
- 1、h标签
- 2、文本常用标签
- 3、文本修饰标签
- 4、div 盒子标签
- 5、img 图片标签
- 6、 超链接标签 a
- 7、列表标签
-
- 1. ol 有序标签
- 2. ul 无序标签
- 3. dt 自定义标签
- 8、表格标签
-
- 1. table 标签 表格
- 2. tr 标签 【行】
- 3. td 和 th 标签 【列】
- 4. 表格结构
- 5. 表格合并
- 9、表单标签
-
- 1. form 表单标签
- 2. input 控件
- 3. name value
- 4. select 控件 多选
- 5. testaera 文本域
- 6. 按钮
- 7. 控件属性
- 三、html案例
-
- 1、【文本标签 文本修饰标签 锚点】
- 2、【表单，控件，控件属性】
- 3、【个人简历 表格】
- 四、个人浅谈
首页向大家介绍一下，什么是工程师
-
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页面如果是中文页面，可将其改为
zh即表示中文
- html标签是HTML文件的最大一个标签，也被称为根标签
- html的标签通过嵌套来声明层级
- 在html标签内部把整个html分为了头部（head标签）和内容部分（body部分）
- 头部负责声明页面的属性，title就是页面的标题
- 内容部分负责页面上的内容
二、常用的HTML标签
1、h标签
标题标签，一共是h1-h6六个等级，再html当中代表标题。
2、文本常用标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
head>
<body>
<p>1、使用文本内容去表达p>
<p>2、使用文本内容<br>去表达p>
<hr>
<p>3、使用文本内容 去表达p>
<p>4、hello<wroldp>
<p>5、hello>wroldp>
body>
html>
3、文本修饰标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
head>
<body>
<i>稳稳c9___html学习笔记i> >
<em>文本修饰标签em> >
<b>第二阶段b> >
<strong>Web学习strong> >
<u>hellou> >
<del>worlddel>
body>
html>
4、div 盒子标签
Html布局历史：
现在学习的内容是将内容放到页面上，之后的学习一定要涉及到页面布局，就是把今天学习到的标签如何放到页面合适的位置，这样技术就是布局。
在最初html流行表格布局类似于现在的简历模板，将整个页面看成一共表格，然后进行表格的合并，最后形成网页布局。
后来随着网络的发展，表达的形式越来越复杂，表格布局有写苍白，就有了新的布局方式，盒子布局，将整个页面看作一个盒子，在里面嵌套小盒子，通过描述盒子的位置，边框，边距进行布局。
div 就是盒子模型一个元素，频繁使用在网页布局中
后面会详细说道
5、img 图片标签
Image 图片，镜像，html当中的图片标签采用的是image的缩写 img 和上面的标签相比，我们在图片标签就要接触到标签的属性了。
src 图片地址可以使用绝对路径
Windows下以盘符开头 D:\\
Linux下以根开头 /usr/root/
也可以使用相对路径指的是以当前文件为参照，其他文件的位置
./当前路径 默认可以不写
../代表上一层
/ 项目的根目录
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<img src="img/3.jpg" title="测试图片" alt="图片找不到" wigth="50px">
body>
html>
6、 超链接标签 a
我们单纯文本表述，就不需要有过多的属性，比如：span,h,p,br,hr
如果是超文本就需要属性：图片需要地址，标题，错误提示，高宽
在HTML当中a标签是超链接标签，a标签是双标签
超链接也是超文本，所以a标签也是需要参数：
- href：超链接的地址，链接到哪里
- target: 代表打开链接的方式
src 可以加载外部网页，也可以是锚点操作
加载外部网页：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
head>
<body>
<a href="https://www.baidu.com/" target="_blank">点击我,新打开一个网页a>
<hr>
<a href="https://www.baidu.com/" target="_self">点击我，原网页刷新a>
body>
html>
锚点操作：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
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 有序标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
head>
<body>
<ol>
<li>Pythonli>
<li>Javali>
ol>
<ol type="A" start="2">
<li>Pythonli>
<li>Javali>
ol>
body>
html>
默认是i罗马数字 可以通过 type指定类型，以及start开始位置
2. ul 无序标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
head>
<body>
<ul>
<li>Pythonli>
<li>Javali>
ul>
<ul type="circle" >
<li>Pythonli>
<li>Javali>
ul>
body>
html>
默认是disc 实心圆点，可以通过type指定
3. dt 自定义标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
head>
<body>
<dl>
<dt>目录dt>
<dd>1、Pythondd>
<dd>1、JAVAdd>
dl>
body>
html>
其实就是分级目录的意思、
- 自定义列表没有前面的字符
- 自定义列表可以按照需求进行缩进
- 通常会用作导航栏
- 有序或者无序列表是可以嵌套的
8、表格标签
1. table 标签 表格
table有一系列的属性
1、 cellspacing cellspacing 单元格和单元格直接的距离
2、cellpadding cellpadding 单元格和内容的距离
3、width 表格的宽度
4、height 表格的高度，由于数据条数不固定，所以通常不设置高度
这里提前用到 tr 和 td 标签，分别表示行，列
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
head>
<body>
<table>
<tr>
<td>姓名td>
<td>年龄td>
tr>
<tr>
<td>小明td>
<td>18td>
tr>
<tr>
<td>小红td>
<td>20td>
tr>
table>
body>
html>
我们可以看到，像表格，但是又不像。这是因为table属性的原因
设置table属性，让它更像表格，读者可以自己调节数据，测试一下
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
head>
<body>
<table cellspacing="20" cellpadding="10" width="300px">
<tr>
<td>姓名td>
<td>年龄td>
tr>
<tr>
<td>小明td>
<td>18td>
tr>
<tr>
<td>小红td>
<td>20td>
tr>
table>
body>
html>
发现距离变远了
其实没有边框，那么这里先超前使用边框css样式，
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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>18td>
tr>
<tr>
<td>小红td>
<td>20td>
tr>
table>
body>
html>
读者可以，根据这个源码去调试感受下 table属性
2. tr 标签 【行】
tr 全称 table row 也是就是表格行的意思
当然也有自己的属性
属性都是在标签内部写的 比如
表示，里面的内容都居中
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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>18td>
tr>
<tr>
<td>小红td>
<td>20td>
tr>
table>
body>
html>
3. td 和 th 标签 【列】
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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>18td>
tr>
<tr>
<th>小红th>
<td>20td>
tr>
table>
body>
html>
4. 表格结构
其实就是为了，好阅读，可以不写
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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>18td>
tr>
<tr>
<th>小红th>
<td>20td>
tr>
tbody>
<tfoot>
<tr>
<td>时间：2020-1-1 td>
tr>
tfoot>
table>
body>
html>
5. 表格合并
现在有这么个需求
如果你前面有试过table属性的cellspacing 和cellpadding 你就知道能够做出一张表格
可以看到，是不是需要合并照片部分的行，或者合并几个列
先从一个简单的表格做起
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<style>
style>
head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="200">
<tr>
<td>1-1td>
<td>1-2td>
<td>1-3td>
tr>
<tr>
<td>2-1td>
<td>2-2td>
<td>2-3td>
tr>
<tr>
<td>3-1td>
<td>3-2td>
<td>3-3td>
tr>
table>
body>
html>
可以看到这是一个表格
如果我们要求合并1-2 和 1-3 两列
可以遵循从左往右原则，第一个列 中设置属性
colspan = " 2 " 其中2 代表合并两列 ，所以 1-3 哪列注释掉，删除也行。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<style>
style>
head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="200">
<tr>
<td>1-1td>
<td colspan="2">1-2td>
tr>
<tr>
<td>2-1td>
<td>2-2td>
<td>2-3td>
tr>
<tr>
<td>3-1td>
<td>3-2td>
<td>3-3td>
tr>
table>
body>
html>
可以看到效果出来了
我们还是用原来表格源码
需求改变，合并 第二行 2-2 和 第三行 3-2
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<style>
style>
head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="200">
<tr>
<td>1-1td>
<td>1-2td>
<td>1-3td>
tr>
<tr>
<td>2-1td>
<td rowspan="2">2-2td>
<td>2-3td>
tr>
<tr>
<td>3-1td>
<td>3-3td>
tr>
table>
body>
html>
可以看到成功了
9、表单标签
为什么要用表单，什么是表单？
之前学习的内容都是为了在html上向用户展示数据，但是没有获取用户数据的地方，问题是web开发要实现用户和网站的交互。表单技术就是获取用户反馈的一个重要手段。
1. form 表单标签
提前用到点后面控件知识
使用get方法 显示用户输入
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<style>
style>
head>
<body>
<form action="#" method="get" enctype="application/x-www-form-urlencoded">
<table>
<tr>
<td>账户td>
<td>
<input type="text" name="username" placeholder="请输入用户名">
td>
tr>
table>
form>
body>
html>
可以看到页面出现了这个东西 你品，你细品
这就是我们平时输入账户一样，随便输入
回车后，看url 网址变化
get 是明文显示的，post跟它相反，这里不做例子，修改上面源码即可试试
现在我们可以按F12 或者在设置找到开发者终端
点击玩最后一个，往下面找找，可以看到我们在控件
中name就是我们定义的键username 得到用户输入的value 值。
组合成字典 { " key" : "value "} 在后期会介绍怎么获取前端页面的值，在后端处理，这就是表单数据交互的基本使用。
2. input 控件
其实这些控件一般都是要配合 form使用的 ，作为前后端数据交互，并且设置name，前面已经提及
input 控件相信各位都已经有了大概的概念，在前面已经用到 通过 type 指定为什么控件
那么我就通过进展案例来演示，也就是逐步使用上面图片控件
版本v1.0 密码控件
password 表名为面控件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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 默认选项
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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 上传文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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 用户在前端页面看不到，用来测试的，一般不用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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` 重置按钮
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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按钮
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<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默认选项
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<style>
style>
head>
<body>
<select>
<option>湖南option>
<option selected>广东option>
<option>上海option>
select>
body>
html>
可以看到我设置了 默认广东
5. testaera 文本域
经常会遇到表单，让你有其它意见的话，就填入
textarea 设置文本域
cols 设值列
rows 设置行
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<style>
style>
head>
<body>
其它意见
<textarea cols="40" rows="3">
textarea>
body>
html>
6. 按钮
按钮其实在前面已经说过了
主要是 input控件里面的 submit ，reset ，button 按钮
7. 控件属性
这边略过，控件属性可以进行这些操作
三、html案例
1、【文本标签 文本修饰标签 锚点】
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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、【表单，控件，控件属性】
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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、【个人简历 表格】
<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>emailtd>
<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