广州番禺Python, Java小班周末班培训
薯条老师在广州做Python和Java的小班培训，一个班最多10人，学员的平均就业薪资有11K。不在广州的同学可以报名线上直播班，跟线下小班的同学们同步学习。培训的课程有Python爬虫，Python后端开发，Python办公自动化，Python大数据分析，Python量化投资，Python机器学习，Java中高级后端开发。授课详情请点击：http://chipscoco.com/?cate=6
7.1.1 前端开发：HTML,CSS,javascript
在本章的项目实战中，需要学习前端开发的一些基础知识。前端开发涉及的学习内容主要为：HTML，CSS, 以及javascript。在后续的内容中，薯条老师会分三个小节对html,css,javascript的内容进行讲解。述其核心，以便初学者快速入门。
7.1.2 HTML：超文本标记语言
HTML是一种简单易学的标记语言，通过一系列标签将网页组织成具备层次结构的文档。
我们上网时所浏览的网页，是由HTML这种标记语言定义和描述的。通过HTML，将网页组织为具备层次结构的文档。网页中的文字，链接，图片，视频等，均由对应的HTML标签进行定义。
html中的标签使用<>符号括起来,<>中的为标签名，在html规范中，标签名必须使用小写的形式。html中的标签必须关闭，标签关闭有两种形式：单独成对的标签或在标签内部使用/符号来进行关闭。单独成对的标签是指<标签名></标签名>的形式，在标签内部进行关闭的形式则为:<标签名 />。html中的标签内部包含0个或多个属性值对，形式为：name="value"，属性值对以空格符号进行分隔，以html中的<p>标签为例：
<p id="python">python是一种简单易学的语言</p>
在html中，id属性定义的是一个唯一值，网页中只能出现一个id值, 而class定义的是同一类的属性，页面中的标签可以出现多个相同的class。
html中的标签名，标签的关闭形式，标签的属性定义都有一套标准的规范，学习html主要是学习html中的标签及其语义。
html的总体结构
html文件最外围的标签为<html>。代码实例：
<html></html>
在<html>内部，按其组成结构又可分为html head，html body,分别对应于<head>标签，<body>标签，类似于人体的头部，身体结构。
代码实例：
<html> <head> </head> <body> </body> </html>
html中的head标签用来对网页的属性进行定义，比如网页的标题，网页的字符编码等。body标签用来对网页的主体内容进行组织。以下为head标签的常用子标签：
标签名
| 标签关闭形式 | 标签的常用属性 | 描述 |
title | <title></title> | 定义html文件的标题 | |
link | <link /> | (1)rel:用于设置对象和链接目的间的关系，常用的属性值为"stylehseet"，表示一个样式表 (2)href:指定外部文件的路径 (3)type:指定外部样式文件的类型 | 定义了当前html文件所需使用的外部文件，通常用来链接css文件，链接的文件在href属性中进行定义。 |
meta | <meta /> | (1)http-equiv:定义http的请求头部 (2)content:指定mime类型 (3)charset:指定网页的字符编码 | 定义html文档的元信息，例如网页的字符编码。 |
script | <script> </script> | (1)src:指定外部脚本文件的路径 | 定义了当前html文件使用的脚本，通常用来链接javascript文件。链接的文件在src属性中进行定义。 |
以下为body标签的常用子标签：
html中的标签按其是否独占一行，又可分为块级标签和行级标签，块级标签会自动换行，行级标签与其它标签出现在同一行。
标签名
| 标签关闭形式 | 标签的常用属性 | 语义描述 |
h | <h1></h1> | 块级标签，html定义了从h1到h6的标签，用来定义内容的标题，h后面的数字越大显示的字体越小 | |
p | <p></p> | 块级标签，标记当前内容为一个段落 | |
div | <div></div> | 块级标签，使用div标签用来将html文档分隔为多个分区 | |
form | <form></form> | (1) action: 指定提交的服务器路径 (2) method:指定http请求方法，主要为get和post。 | 块级标签，定义html表单，用户在html表单中进行输入 |
ul | <ul> <li></li> </ul> | 块级标签，使用ul来定义一个无序的列表，ul标签内部使用li标签来标记列表的内容 | |
input | <input /> | (1) type:表示输入框的类型，常用的类型为 text,password,button,submit,分别表示文本输入框，密码输入框，按钮框，提交框。 (2) name:输入值的别名，在后端代码中通过name来对输入值进行引用 | 行级标签，对应于表单中的输入框 |
a | <a /> | (1) href:指定页面的url | 行级标签，标记一个超链接，在href属性中指定其它页面的url |
img | <img /> | (1) src: 指定图片文件的路径 (2) width: 指定图片的宽度 (3) height: 指定图片的高度 | 行级标签，标记一张图片，在img标签内的src属性中定义图片的路径 |
br | <br/> | 行级标签，在当前位置处添加一个换行符 |
html中的标签可以相互嵌套，例如在div中嵌套div，在ul中嵌套div:
<!-- 在div中嵌套div --> <div> <div> </div> </div> <!-- 在ul中嵌套div --> <ul> <li> <div> </div> </li> </ul>
标签的布局及嵌套，应根据其常规语义来合理地使用，而不是毫无逻辑的乱用。
7.1.3 HTML实例
<html> <head> <link rel="stylesheet" type="text/css" href="css/index.css'" /> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="js/search.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Github 项目搜索</title> </head> <body> <div id="wrapper"> <div class="search-container"> <div id="logo"> <img width="271" height="106" src="images/logo.png'" alt="logo" /> </div> <div class="search-form"> <form action="/search/" method="get"> <input type="text" id="query" name="query"/> <input type="submit" id="submit" value="搜索" /> </form> </div> </div> </div> </body> </html>
以下为网页在浏览器中的显式效果 ：
7.1.4 最具实力的小班培训
薯条老师在广州做Python和Java的小班培训，一个班最多10人。不在广州的同学可以报名线上直播班，跟线下小班的同学们同步学习。打算参加小班培训的同学，必须遵守薯条老师的学习安排，认真做作业和项目。把知识学好，学扎实，那么找到一份高薪的工作就是很简单的一件事。
(1) Python后端工程师高薪就业班，月薪11K-18K，免费领取课程大纲
(2) Python爬虫工程师高薪就业班，年薪十五万，包拿Offer
(3) 数据分析高薪就业班，月薪11K-15K, 免费领取课程大纲
(4) Python大数据挖掘，量化投资就业班，月薪12K-25K,免费领取课程大纲
扫码免费领取Python学习资料：
