目录
1.web服务器搭建
1.0 扩展——库要点
sys库：
sys.argv 获取终端命令行参数，返回列表
1.1 前端开发基础
1.1.1 基本结构：
手风琴.html
<!DOCTYPE html>
<!-- 当前网页语言 zh:中文；en:英文 -->
<html lang="en">
<!-- 头 -->
<head>
<!-- 指定编码格式 -->
<meta charset="UTF-8">
<!-- 在IE浏览器浏览网页时，使用IE的最高版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 在移动设备浏览网页时，网页不缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题 -->
<title>手风琴</title>
<!-- 导入链接 -->
<link rel="stylesheet" href="./index.css">
</head>
<!-- 网页展示 -->
<body>
<div class="shell">
<div>
<span>one</span>
</div>
<div>
<span>two</span>
</div>
<div>
<span>three</span>
</div>
<div>
<span>four</span>
</div>
<div>
<span>five</span>
</div>
</div>
</body>
</html>index.css
/* CSS文件对网页格式约束 */
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color:rgb(243,230,241);
}
.shell{
width: 90%;
height: 700px;
display: flex;
}
.shell div{
flex: 1;
overflow: hidden;
transition: .5s;
margin: 0 20px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
border-radius: 20px;
border: 10px solid #fff;
background-color: #fff;
}
.shell div:hover{
flex-basis: 40%;
}
.shell div span{
font:200 45px '';
text-align: center;
height: 15%;
display: flex;
justify-content: center;
align-items: center;
}文件来源：HTML、CSS实现手风琴效果_网页手风琴效果-CSDN博客
1.1.2 常见HTML标签
<h1></h1> 一级标题
<h6></h6> 六级标题
<p></p> 段落标签
<br> 换行
加粗：<strong></strong> or <b></b>
倾斜：<em></em> or <i></i>
删除线：<del></del> or <s></s>
下划线：<ins></ins> or <u></u>
大盒子：<div></div> 竖放
小盒子：<span></span> 横放
图像标签：<img src="图片路径" alt="替换文本" title="提示文本" width="像素，图宽" height="像素，图高" border="像素，边框粗细">
超链接标签：<a href="url地址" target="用于指定页面的打开方式：_self:本窗口打开（默认）;_blank:新窗口打开">
href="#"表示这是一个空链接
如果href里是个文件或者压缩包，则会下载这个文件
锚点链接：<a href=""></a>
页面分割:<hr style="width:50%;text-align:left;margin-left:0 （css）">部分详细：HTML <hr> 标签 (w3school.com.cn)
特殊字符：
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和 | & |
| ￥ | 人名币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ℃ | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方上标2 | ² |
| ³ | 立方上标3 | ³ |
表格标签：
<table></tabe>是用于定义表格的标签。
<tr></tr>标签用于定义表格中的行,必须嵌套在< table></ table>标签中
<td></td>用于定义表格中的单元格，必须嵌套在< tr></ tr>标签中
<th></th>表示表格的表头部分，表示表格的第一行或第一列，其中的文本内容加粗居中显示
<thead></thead>用于定义表格的头部。< thead>内部必须拥有< tr>标签，一般是位于第一行
<tbody></tbody>用于定义表格的主体，主要用于放数据本体。
部分转载：https://blog.csdn.net/weixin_43461520/article/details/110143997
表格标签：
<table></table> 定义表格
<tr></tr> 定义行
<td></td> 定义单元格
<th></th> 表示表格的表头部分，文本加粗居中显示
<thead></thead> 定义表格头部 <thead>内部必须拥有<tr>
<tbody></tbody> 定义表格主体，主要用于放数据本体
| 属性 | 属性值 | 说明 |
|---|---|---|
| align | left、center、right | 对齐方式 |
| border | 1 or "" | 是否单元有边框，""(默认)表示无 |
| cellpadding | pixel | 单元边沿与其内容间的空白距离 |
| cellspacing | pixel | 单元格间的空白距离 |
| width | pixel or % | 宽度 |
| height | pixel or % | 高度 |
| rowspan | count | 合并单元格，列合并 |
| colspan | count | 合并单元格，行合并 |
<table border="1" cellpadding="0" width="500" height="50">
<thead>
<tr>
<th>名字</th>
<th>年龄</th>
<th>身高</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td align="left" colspan="2">未知</td>
<td>168</td>
</tr>
<tr>
<td rowspan="2">王五</td>
<td>18</td>
<td>180</td>
</tr>
<tr>
<td>17</td>
<td>175</td>
</tr>
<tr>
<td>陈六</td>
<td>15</td>
<td>140</td>
</tr>
</tbody>
</table> 
列表标签：
<ul> </ul> 无序列表 内部只能放<li>
<ol> </ol> 有序列表 内部只能放<li>
<li> </li> 列表项
<dl> </dl> 自定义列表 内部只包含dt、dd
<dt> </dt> 自定义列表项目
<dd> </dd> 描述自定义列表中的每一个项目表单标签：
<form action="接收并处理的url地址" method="get or post提交方式" name="名称"> </form> 表单域标签，就是包含表单元素的区域
<input type="类型" name="名称" value="值" checked="" maxlength="max_length"> 输入,存在各种类型
<lable></lable> 绑定表单元素，id属性包含for属性
<select></select> 下拉表单元素
<option></opeion> 下拉列表元素
<textarea></textarea> 文本域元素| 属性 | 定义说明 |
|---|---|
| button | 点击按钮 |
| checkbox | 复选框 |
| file | 输入字段和“浏览”按钮 |
| hidden | 隐藏的输入字段 |
| image | 图像形式的提交按钮 |
| password | 密码字段 |
| radio | 单选按钮 |
| reset | 重置按钮 |
| submit | 提交按钮 |
| text | 单行输入字段 |
例：
<html lang="en">
<head></head>
<body>
<head>
<title class="demo1" id="text1">我的html记录</title>
</head>
<br>
<body>
————————————————<br>
参考文献链接：<br> 【1】
<a href="https://blog.csdn.net/qq_37872792/article/details/82219916" target="_blank">https://blog.csdn.net/qq_37872792/article/details/82219916</a><br>
<br><br>
<a href="https://www.w3sclool.com.cn/" target="_blank">http资料参考</a><br>
————————————————<br>
<!-- 代码与输出同在 -->
<br>
<br>
《a href="#C1"》《/a》
<a href="#C1" rel="external nofollow">下文快速链接</a>
<br>
<li>《a href="https://..." target="value"》 《/a》</li>
<br>
<a href="#beijintupian" rel="external nofollow">背景图片</a><br>
_blank表示跳到新页面打开，打开一个新窗口
_self表示当前页面打开链接
_parent表示在父集框架中打开
_top表示在整个窗口中打开
framename表示在指定的框架中打开
</body>
<div class="demo1">
<h3>目录</h3>
<li><a href="#B1" rel="external nofollow">下文2链接</a></li>
<li><a href="#C1" rel="external nofollow">下文input练习链接</a></li>
<li><a href="#D1" rel="external nofollow">下文基本元素链接</a></li>
<li><a href="#004" rel="external nofollow">下文css链接</a></li>
<h4>0.1 不允许写结束标记的元素</h4>
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr.<br>
<h4>0.2 可以省略结束标记的元素</h4>
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th<br>
<h4>0.3 可以省略全部标记的元素</h4>
html,head,body,colgroup,tbody<br>
<!--只写属性，不写属性值，代表属性为true-->
<!-- <input type="checkbox" checked /> -->
<!--不写属性，代表属性为false-->
<!-- <input type="checkbox" /> -->
<!--属性值=属性名，代表属性为true-->
<!-- <input type="checkbox" checked="checked" /> -->
<!--属性值=空字符串，代表属性为true-->
<!-- <input type="checkbox" checked="" /> -->
<br>
<h4 id="aaaa">1.结构元素</h4>
<div> div：在文档中定义一块区域，即包含框，容器</div><br>
<span> span：在文本行中定义一块区域，即行内包含框</span><br>
<ol> ol：根据一定的排序进行列表</ol><br>
<ul> ul：没有排序的列表</ul><br>
<li> li：每条列表项</li><br>
<dl> dl：以定义的方法进行列表</dl><br>
<dt> dt：定义列表中的词条</dt><br>
<dd> dd：对定义的词条进行解释</dd><br>
<del> del：定义删除的文本</del><br>
<ins> ins：定义插入的文本</ins><br>
<h6> h1~h6：标题1到标题6，定义不同级别的标题(h6)</h6><br>
<p> p：定义了段落结构</p><br>
<hr> hr：定义水平线</hr><br>
<br>
<h4>2.内容元素</h4>
<li>a：定义超链接</li>
<a href="https://baidu.com/" name="#B1">百度</a><br><br>
<li>abbr：定义缩写词</li>
<p>use <abbr title="GeeksforGeeks">GFG</abbr></p><br>
<li>address：定义地址</li>
<address> * address：定义地址(默认斜体)</address><br><br>
<li> acronym：定义取首字母的缩写词</li>
<acronym title="GeekforGeeks">GFG(鼠标移至元素上时，将显示信息)</acronym> <br><br>
<li>dfn：定义条目</li>
<p><dfn title="GeekforGeeks">GFG </dfn>* dfn：定义条目<br></p><br>
<li>* kdb：定义键盘键</li>
<p> 对话框输入：<kbd>cmd</kbd></p>
<li> samp：定义样本<br></li>
<samp>样本</samp>
<li> var:定义变量<br></li>
<var>x</var>+<var>y</var>=10<br>
<li> tt：定义打印机字体<br></li>
<tt>定义打印机字体</tt>
<li>* code：定义计算机源代码<br></li>
<p><code>按钮<p></code><p>
<li>* pre：定义预定义格式文本，保留源代码格式<br></li>
<pre>定义</pre>
<li>* blockquote：定义大块内容引用<br></li>
<blockquote>定义大块内容引用jsvkjslvnwinvlsmdmdvslvnslvnlskdnvnfdlvsnldvsldkvnlskdnvlsnvlsnlvkdlnfjvvfjnvsldls</blockquote>
<li>* q：定义引用短语<br></li>
<q>文本引用</q>
<li>* strong：定义重要文本<br></li>
<strong>文本加粗</strong>
<li>* em：定义文本为重要<br></li>
<em>文本斜体</em>
<br>
<h4>3.修饰元素</h4>
<li>* b：定义粗体<br></li>
<b>粗体</b>
<li>* i：定义斜体<br></li>
<i>斜体</i>
<li>* big：定义文本增大<br></li>
<big>文本增大</big>
<li>* small：定义文本缩小<br></li>
<small>文本缩小</small>
<li>* sup：定义文本上标<br></li>
<sup>文本上标</sup>
<li>* sub：定义文本下标<br></li>
<sub>文本下标</sub>
<li>* bdo：定义文本显示方向<br></li>
<bdo>显示方向</bdo>
<li>* br：定义换行<br></li>
<br>换行<br>
* 已废除的修饰元素<br>
* center：定义文本居中<br>
* font：定义文字的样式、大小和颜色<br>
* u：定义文本下划线<br>
* s：定义删除线。strike的缩写<br>
* strike：定义删除<br>
<br>
<br>
<a name="C1">
<label for="head">大小
</label>
<input type="range" name="head">
</div>
<div class="demo2">
<span class="demo4">
<br>
<label for="name">name</label>
<input type="demo4" name="name">
<br>
<label for="password">password</label>
<input type="demo4" name="password">
<br>
电话号码
<input type="tel" name="tel">
<br>
搜索框
<input type="search" name="search" >
<a href="https://baidu.com/ ">百度一下
</a>
<br>
<label for="email">邮件地址</label>
<input type="email" name="email"><br>
<label for="datetime">datetime</label>
<input type="datetime" name="datetime"><br>
<label for="month">month</label>
<input type="month" name="month"><br>
<label for="week">week</label>
<input type="week" name="week"><br>
<label for="time">time</label>
<input type="time" name="time"><br>
<label for="datetime-local">本地时间日期和时间文本框</label>
<input type="datetime-local" name="datetime-local"><br>
<label for="range">范围</label>
<input type="range" name="range"><br>
<label for="number">输入数字文本框</label>
<input type="number" name="number"><br>
<label for="color">color</label>
<input type="color" name="color"><br>
</span>
<br>
<label for="int64">int64</label>
<input type="type" name="int64">
</div>
<div class="demo3">
<a href="https://baidu.com/" id="name" >百度</a>
<div contextmenu="mymenu">
<menu type="context" id="mymenu">
<menuitem label="微信分享"></menuitem>
</menu>
</div>
<b>
<ul contenteditable="ture">
<li>主要功能是允许用户在线编辑元素中的内容contenteditable</li>
<li>为true 表示允许编辑</li>
<li>列表li</li>
<li>3</li>
<li>4</li>
</ul>
</b>
<div class="demo5">
<ul>
<li data-animal-type = "bird">猫头鹰</li>
<li data-animal-type = "fish">鲤鱼</li>
<li data-animal-type = "spider">蜘蛛</li>
</ul>
<script type="text/javascript">
var lis = document.getElementsByTagName('li')
for (var i = 0;i<lis.lenhth;i++){
console.log(lis[i].dataset.animalType);
}
</script>
</div>
<div dropzone="copy"></div>
<p hidden>这个段落应该被隐藏</p>
</div>
</a>
</body>
<div>
<head>
<a name="D1">
<style type="text/css">
time {
color: #966b72 !important;
}
}
</style>
</a>
<h4>三、基本元素</h4>
<ul>
<li>列表1</li>
<ol>
<li>子列表1</li>
<li>子列表2</li>
</ol>
<li>列表2</li>
<li>some table</li>
<table>
<thead>
<tr>定义表头
<td>a</td>
<td>b</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>（1,1),(1,1)</td>
<td>（1,2),(1,2)</td>
</tr>
<tr>
<td>（2,1),(2,1)</td>
<td>（2,2),(2,2)</td>
</tr>
</tbody>
</table>
</ul>
<form>
<fieldset>
<legend>名片</legend>
<label for="name1">name</label>
<input type="name" name="name1" value="Your Name">
<br>
<label for="gender">gender</label>
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="femal"><br>
</fieldset>
<label for="type1">type1</label>
<select name="type1">
<optgroup label="负数">
<option value="-1">-1</option>
<option value="-2">-2</option>
</optgroup>
<optgroup label="自然数">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</optgroup>
</select><br>
<label for="message">Message</label>
<textarea name="message" rows="5" cols="20">Please Input your message here</textarea>
<a href="#C1">其他练习
<br>
<input type="button" name="button" value="提交">
</form><br>
<!-- 点击图片跳转页面 -->
<a href="https://baidu.com/" target="_blank">
<!-- 找到显示 如果没有找到图 将显示 alt.value -->
<img src="c3e3ece914c8b8d21a6f9aab6fe590e.jpg" width="100px" height="200px" alt="没有辣条的图"></a>
<meta name="description" content="This is my really,really,REALLY" charset="utf-8">
<a href="#aaaa">返回至顶部</a>
<!--
<a href="aaaa"> 后追路径跳转(无协议)
<a href="#aaaa"> 跳至本页id或name处
<a href="https://baidu.com" 路径跳转(有协议)
-->
<!-- 路径可选 https 或 本地 -->
<video controls width="400">
<source src="cb16c58e4818aad757a6e0dff84f1450.mp4" type="video/mp4" >
</video>
<svg xmlns="https://www.w3.org/2000/svg" version="1.1" height="190">
<polygon point="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke: purple;stroke-width: 5;fill-rule: evenodd;" />
</svg>
<br>
1<div>中间换行</div>1<br>
1<span>相当于一个跨度、空间</span>1
<h3 id="004">四、css</h3>
<!-- .hello {}:修改所有节点的类型hello
p .hello :该P节点 后包括的类型
P.hello ：该p节点内包括的类型
p.hello {color:blue;} !important :该p节点的属性hello中color列为此优先级max属性
其中！important 也可覆盖
树节点属性判定： 近者优先
Bordes 常见属性：solid(实线) dotted(点线) dashed(虚线) -->
<style type="text/css">
time {color: black;}
p { color: green !important; }
p { color: red; }
p .hello {color: #fb6090;}
p.hello {color: blue;}
#hgood{
color: blue;
}
#f0001{
background: blue;
color: red;
border-width: 5px;
border-style: solid;
border-color: #8b2;
display: inline;
}
#f0002{
background: #fb6090;
color: blue;
padding: 30px 20px 30px 20px;
border: 5px solid blue;
margin: 20px;
}
#f0003{
background: yellow;
color: black;
border: 5px solid #8b2;
border-radius: 5px 10px 20px 50px;
}
#f0004{
background: rgb(30, 72, 10);
color: green;
height: 100px;
line-height: 80px;
}
#f0004 p{
color: gray; !important;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2 style="color: red;">Health</h2>
<p style="color: blue;" class="hello"><del>现在</del>是北京时间 <time datetime="2052-11-21">2052年11月21日</time>,本车<ins>下一站</ins>为<span class="hello">翻斗花园</span>，请乘客们做好下车准备</p>
<div id="hgood">hello wang</div>
hello good<br>
<span class="hello">Hello Joshua</span><br>Hello Joshua
<br><br><br>
<div id="f0001">蒲公英</div>
<div id="f0002">灯笼草</div>
<div id="f0003">金银花</div>
<div id="f0004"><span><p>红玫瑰</span></p><p>大喇叭花</p></div>
</body>
<body class="beijing">
<br><br><br><br>
<h4>aaaa</h4>
<!-- 背景色 -->
<a name="beijintupian">背景图片</a>
<style type="text/css">
.beijing{
background: white url(c3e3ece914c8b8d21a6f9aab6fe590e.jpg) no-repeat top right; /* repeat-x repeat-y */
}
</style>
<div id="liebiao1">
<ul>
<li><a href="https://baidu.com/">百度1</a></li>
<li><a href="https://baidu.com/">百度2</a></li>
<li><a href="https://baidu.com/">百度3</a></li>
</ul>
</div>
<div id="context">
<h1>aaa</h1>
<p>现在是北京时间2052年11月21日,本车下一站为翻斗花园</p>
<p>请乘客们做好下车准备</p>
</div>
<!-- top 表头
position 定义位置 -->
<style type="text/css">
#liebiao1{
position: absolute;
left: 0;
width: 200px;
}
#liebiao1{
float: left;
width: 200px;
}
#context{
margin-left: 200px;
margin: 0 200px;
}
</style>
<div id="liebiao2">
<ul>
<li><a href="https://baidu.com/">百度4</a></li>
<li><a href="https://baidu.com/">百度5</a></li>
<li><a href="https://baidu.com/">百度6</a></li>
</ul>
</div>
<style type="text/css">
#liebiao2 ul li{
width: 200px;
float: left;
height: 20px;
}
</style>
<!-- 属性style中 * 为通配符 对所有的节点属性进行归零
可以用来清除浏览器的默认的一些属性
ul > li 选择ul节点的直系孩子li
h1 + p 选择h1作为父集，以两个p 作为亲戚 梯级颜色
abbr[title]
a[href^=http]
a[attribute^=something]将匹配以something开头的属性的值
a[attribute$=something]将匹配以something结尾的属性的值
a[attribute*=something]将匹配包含某些内容的属性的值，无论开头中间还是结尾
-->
<style type="text/css">
#f0004 *{
}
ul > li{
}
h1 + p {font-weight: bold;}
abbr[title]{ }
a[href^=http] { }
</style><br>
<h1>h1 aaaaaaa</h1>
<p>p ppppppppppppppp</p>
<p>p pppppppppppppppp</p>
<p>p ppppppppppp</p>
</body>
</div>
</html>输出：
扫一扫
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
