文章目录
Web前端开发介绍
Web概述
Web起源
1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点世界上第一个网站
Web的特点
- 易导航和图形化界面
- 与平台无关
- 分布式结构
- 动态性
- 交互性
Web工作原理
URL介绍
URL统一资源定位器可以理解为网址。
构成如下：
协议类型：//服务器地址（端口号）/路径/文件名
例子:http://www.westos.org/bbs/index.html
HTML网页结构
HTML（Hyper Text Mark-up Language）即是超文本标记语言,通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展现在网页上。
- 超文本指的是超链接
- 标记指的是标签
1).HTML文本是可以用编辑器打开显示的文本，可以用文本的方式编辑。
2).HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。
HTML基本结构
目前常用的两种文档类型是xhtml 1.0和html5
HTML文档规范与注释
xhtml制定了文档的编写规范，html5可部分遵守也可全部遵守。
- 所有的标签必须小写
- 所有的属性必须用双引号括起来
- 所有的标签必须闭合
- img必须要加alt属性（对图片的描述）
HTML注释：
html文档代码中可以插入注释，注释是对代码的说明和解释，解释的内容不会显示在页面上，html代码中插入注释的方法是：
< !-- 这是一段注释 --> 快捷键为Ctrl+/
HTML标签
文本标签
第一个html代码：
<!--声明html-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<!--html的头部,在页面中不会显示-->
<head>
<!--声明html文档的编码格式-->
<meta charset="UTF-8">
<!--页面标题-->
<title>西部开源技术中心</title>
</head>
<!--html主体,在页面中真正显示的内容-->
<body>
<h1 style="color: blue">标题一</h1>
<h2 style="color: blue">标题二</h2>
<h3 style="color: blue">标题三</h3>
<h4 style="color: bisque">标题四</h4>
<h5 style="color:green">标题五</h5>
<h6 style="color: black">标题六</h6>
<!--没有h7标题标签-->
<h7 style="color: aqua">标题七</h7>
<br>
<font color="aqua">标题七</font>
</body>
</html>
常用的文本标签：
| < i>…< /i> | 斜体 |
|---|---|
| < em>…< /em> | 强调斜体 |
| < b>…< /b> | 加粗 |
| < strong>…< /strong> | 强调加粗 |
| < cite>…< /cite> | 作品的标题（引用） |
| < sub>…< /sub> | 下标 |
| < sup>…< /sup> | 上标 |
| < del>…< /del> | 删除线 |
| < br> | 换行 |
| < u> | 字体加下划线 |
| < tt>…< /tt> | 标签呈现类似打字机或者等宽的文本效果 |
| < s>…< /s> | 字体加删除线 |
| < strike>…< /strick> | 字体加删除线 |
| < hr> | 水平分割线 |
| < p>…< /p> | 换段 |
常用的文本标签：
<!--声明html-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<!--html头部,在页面中不会显示-->
<head>
<!--html编码格式-->
<meta charset="UTF-8">
<!--页面标题-->
<title>Title</title>
</head>
<!--html主体,在页面中会真正显示的-->
<!--常用的文本标签-->
<body>
<i>斜体</i><br>
<em>强调斜体</em><br>
<b>加粗</b><br>
<strong>强调加粗</strong><br>
<cite>引用</cite><br>
<!--上标-->
S = pi * r<sup>2</sup><br>
<!--下标-->
Y = y<sub>1</sub> + y<sub>2</sub><br>
<del>删除线</del>
<br>
<u>字体加下划线</u><br>
<tt>标签呈现类似打字机或者等宽的文本效果</tt><br>
<s>字体加删除线</s><br>
<strike>字体加删除线</strike>
<!--水平分割线-->
<hr/>
<!--换段-->
<p>Python的创始人为荷兰人吉多·范罗苏姆 [3] （Guido van Rossum）。1989年圣诞节期间，在阿姆斯特丹，Guido为了打发圣诞节的无趣，决心开发一个新的脚本解释程序，作为ABC
语言的一种继承。之所以选中Python（大蟒蛇的意思）作为该编程语言的名字，是取自英国20世纪70年代首播的电视喜剧《蒙提.派森的飞行马戏团》（Monty Python's Flying Circus）。
ABC是由Guido参加设计的一种教学语言。</p>
<p>就Guido本人看来，ABC 这种语言非常优美和强大，是专门为非专业程序员设计的。但是ABC语言并没有成功，究其原因，Guido 认为是其非开放造成的。Guido 决心在Python
中避免这一错误。同时，他还想实现在ABC 中闪现过但未曾实现的东西。
就这样，Python在Guido手中诞生了。可以说，Python是从ABC发展起来，主要受到了Modula-3（另一种相当优美且强大的语言，为小型团体所设计的）的影响。并且结合了Unix shell和C的习惯。
Python [4] 已经成为最受欢迎的程序设计语言之一。自从2004年以后，python的使用率呈线性增长。Python 2于2000年10月16日发布，稳定版本是Python 2.7。Python
3于2008年12月3日发布，不完全兼容Python 2。 [3] 2011年1月，它被TIOBE编程语言排行榜评为2010年度语言。 [5]
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
第一行文字<br>
<b>第二行文字粗体</b><br>
<font color="blue">第三行蓝色文字</font><br>
<font size="5">第四行文字变大</font><br>
<font size="0">第五行文字变小</font><br>
</body>
</html>
列表标签
| < ul>…< /ul> | 无序列表 |
|---|---|
| < ol>…< /ol> | 有序列表，其中type为类型值 |
| < li>…< /li> | 列表项 |
| < dl>…< /dl> | 自定义列表 |
| < dt>…< /dt> | 自定义列表头 |
| < dd>…< /dd> | 自定义列表内容 |
| < div>…< /div> | 块级元素，一个元素占一整行 |
| < span>…< /span> | 行内元素，一个元素占的位置取决于标签的内容长短 |
列表标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<h1>无序列表：四大名著</h1>
<!--
type的类型指定：
disc 实心圆
square 方框
circle 空心圆
-->
<ul type="disc">
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
<li>西游记</li>
</ul>
<h1>有序列表：四大名著</h1>
<ol type="i">
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
<li>西游记</li>
</ol>
<h1>自定义列表</h1>
<dl>
<dt>四单名著</dt>
<dd>水浒传</dd>
<dd>三国演义</dd>
<dd>红楼梦</dd>
<dd>西游记</dd>
<dt>Python编程</dt>
<dd>数据结构与算法</dd>
<dd>网络爬虫实战</dd>
<dt>前端开发</dt>
<dd>HTML</dd>
<dd>CCS</dd>
<dd>JS</dd>
</dl>
</body>
</html>
idv和span：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div和span标签</title>
</head>
<body>
<!--块级元素：一个元素占一整行-->
<div style="font-size: 20px;border: black 1px solid;background-color: snow">
div标签
</div>
<!--行内元素：一个元素占的位置取决于标签的内容长短-->
<span style="font-size: 20px;border: black solid 1px;background-color: snow">
span标签
</span>
</body>
</html>
图片标签img
< img>标签 定义HTML页面中的图像。由两个必需的属性：src和alt。
属性：
| scr | 图片名及url地址 |
|---|---|
| alt | 图片加载失败时的提示信息 |
| title | 文字提示属性 |
| width/height | 图片宽度/高度 |
超链接标签
< a href=" ">…< /a> 超级链接标签
属性：
| href | 必须，指的是链接跳转地址 |
|---|---|
| target | 表示链接的打开方式。_blank 新窗口；_self 本窗口 |
| title | 文字提示属性 |
超链接标签和图片：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<h1>文字标签</h1>
<!--超级链接标签属性：href:必须,指的是链接跳转地址；
target：表示链接的打开方式。_blank新窗口，_self 本窗口(默认)
title：文字提示属性
-->
<!--<a href="http://www.baidu.com" target="_blank">百度一下</a>-->
<!--<a href="http://www.baidu.com">百度一下</a>-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!--<hr>-->
<h1>图片标签</h1>
<a href="http://www.baidu.com">
<img src="baidu.png" alt="baidu" title="baidu" >
<br>
<div style="width:202px" ><b>这是百度的图标拉斯凯蒂芬回家啊看是否立刻就即阿和苏联疯狂哈</u></b></div>
<span style="color: red">$300 <s style="color: grey">$400</s></span>
</a>
</body>
</html>
锚点链接：
1、定义一个锚点：
< a id=“a1”>< /a>百度一下< a name=“a1”>< /a>
2、使用锚点：
< a href="#a1">跳到a1处< /a>
锚点实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点实现</title>
</head>
<body>
<h1>锚点</h1>
<a href="#a1">跳到a1处</a>
<a href="#a2">跳到a2处</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 id="a1">a1处</h2>
<p>
3.5 实施 KNN 算法
对未知类别属性的数据集中的每个点依次执行以下操作:
(1) 计算已知类别数据集中的点与当前点之间的距离;
(2) 按照距离递增次序排序;
(3) 选取与当前点距离最小的k个点;
(4) 确定前k个点所在类别的出现频率;
(5) 返回前k个点出现频率最高的类别作为当前点的预测分类。
---------------------
作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接！
3.5 实施 KNN 算法
对未知类别属性的数据集中的每个点依次执行以下操作:
(1) 计算已知类别数据集中的点与当前点之间的距离;
(2) 按照距离递增次序排序;
(3) 选取与当前点距离最小的k个点;
(4) 确定前k个点所在类别的出现频率;
(5) 返回前k个点出现频率最高的类别作为当前点的预测分类。
---------------------
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 id="a2">a2处</h2>
<p>
作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接 作者：MyWestos
来源：CSDN
原文：https://blog.csdn.net/gf_lvah/article/details/89351699
版权声明：本文为博主原创文章，转载请附上博文链接
</p>
</body>
</html>
表格标签
在 HTML 文档中,广泛使用表格来存放网页上的文本和图像;
常用的表格标签：
| 表格标签 | table |
|---|---|
| 行标签 | tr |
| 单元格（表示列的概念） | td |
| 表头 | th（加粗并居中） |
| 表格标题 | caption |
表格标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1px" align="center" width="400px">
<caption>表格标题</caption>
<!--表头标签,不设置align则按照上述要求也就是居中-->
<tr>
<!--加粗并居中,但也可以设置-->
<th>姓名</th>
<th>年龄</th>
<th align="left">分数</th>
<th>性别</th>
</tr>
<!--创建3行表格-->
<!--第一行居中-->
<tr align="center">
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<!--第二行向左靠齐-->
<tr align="left">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<!--第三行向右靠齐-->
<tr align="right">
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
标签合并：
| 行合并 | rowspan |
|---|---|
| 列合并 | colspan |
标签常用属性：
| border | 边框 |
|---|---|
| width | 宽度 |
| height | 高度 |
| align | 对齐方式（center、left、right） |
表格合并：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格行列合并</title>
</head>
<body>
<!--5行3列的表格-->
<table border="1px" bordercolor="#9932cc" width="500" align="center">
<tr align="center">
<td colspan="3">星期一菜单</td>
</tr>
<tr align="center">
<td rowspan="2">素菜</td>
<td>清炒茄子</td>
<td>花椒豆角</td>
</tr>
<tr align="center">
<td>小葱豆腐</td>
<td>炒白菜</td>
</tr>
<tr align="center">
<td rowspan="2">荤菜</td>
<td>油闷大虾</td>
<td>海鲜鱼翅</td>
</tr>
<tr align="center">
<td><img src="baidu.png" width="20">红烧肉</td>
<td>烤全羊</td>
</tr>
</table>
</body>
</html>
form表单标签
常用属性：
- action属性：提交的目的地址（URL）
- method属性：提交方式：get（默认）和post
get方式：
URL地址栏可见
长度受限制
相对不安全
post方式：
URL地址栏不可见
长度不受限制
相对安全
< input >表单项标签input定义输入字段，用户可在其中输入数据。
在html5中，type属性有很多新的值：
| type属性 | 表示的表单项的类型 |
|---|---|
| text | 单行文本框 |
| password | 密码输入框 |
| submit | 提交按钮 |
| reset | 重置按钮，还原到第一次打开的效果 |
| checkbox | 多选框 注意要提供value值 |
| radio | 单选框，注意要提供value值 |
| file | 文件上传选择框 |
| button | 普通按钮 |
| image | 图片提交按钮 |
| hidden | 主表单隐藏域，是要和表单一块提交的信息，但是不需要用户修改 |
下拉列表标签
< select>…< /select> 标签创建下来列表
| name属性 | 定义名称，用于存储下拉值 |
|---|---|
| size | 定义菜单中可见项目的数量，html5不支持 |
| multiple | 多选 |
< option >…< /option > 下拉选择项标签，用于嵌入到< select >标签中使用的
| value属性 | 下拉项的值 |
|---|---|
| selected 属性 | 默认下拉指定项 |
文本域标签
< textarea >…< /textarea > 多行的文本输入区域
| name | 定义名称，用于存储文本区域中的值 |
|---|---|
| cols | 规定文本区内可见的列数 |
| rows | 规定文本区内可见的行数 |
| disabled | 是否禁用 |
| readonly | 只读 |
| placeholder | 模糊显示 |
按钮标签
< button >…< /button >标签定义按钮
< fieldset > --fieldset元素可将表单内的相关元素分组
form表单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单美观</title>
</head>
<body>
<form action="sucess.html" method="get">
<!--创建三行两列的表格-->
<table width="20" align="center">
<tr>
<td colspan="2" style="text-align: center"><h3>用户登录</h3></td>
</tr>
<tr>
<td style="text-align: right">用户名</td>
<td><input type="text"></td>
</tr>
<tr>
<td style="text-align: right">密码</td>
<td><input type="password"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center"><input type="submit" value="登录"></td>
</tr>
</table>
</form>
</body>
</html>
用户登录页面（背景图片）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录页面</title>
</head>
<body>
<table align="center" style="width:500px;height: 333px;background-image: url('./背景.jpg')">
<!--五行两列-->
<tr>
<td colspan="2" style="text-align: center" height="30px">用户登录</td>
</tr>
<tr>
<!--<td width="40%" height="20px"></td>-->
<td style="text-align: right" width="35%" height="20px">用户名:</td>
<td><input type="text"></td>
</tr>
<tr>
<td style="text-align: right" width="35%" height="20px">密码:</td>
<td><input type="text"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center" height="20px">
<input type="submit" value="登录">
<input type="reset" value="重新填写">
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center" width="%35" height="30px">
<a href="#">找回密码</a>
<a href="#">注册新用户</a>
</td>
</tr>
</table>
</body>
</html>
HTML内嵌框架
< iframe >标签会创建包含另外一个html文件的内连框架（即行内框架），
src属性用来定义另一个html文件的引用地址
frameborder属性定义边框
scrolling属性定义是否有滚动条
内嵌框架和a标签配合使用
a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中,代码如下：
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
