目录
web前端实训day01——html部分知识回顾
骨架介绍
<!DOCTYPE html><!--html版本，这里h5，告诉浏览器，以h5的规范解析文档-->
<html lang="en"><!--lang表示该文档使用语言，en英文，zh-CN中文-->
<head>
<meta charset="UTF-8"><!--charset:本页面的字符编码集，一般使用utf-8-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><!--title:用于展示本页面的标题使用-->
</head>
<body>
<!--用于展示页面内容-->
body用于展示页面内容
<!--
1.双标签：<标签名>内容</标签名>
2.单标签：<标签名/>
3.标签名尽量使用小写
-->
</body>
</html>
标题标签:h1~h6
标题标签是：h1~h6,双标签
总结：
1.h1到h6字体是不断变小的
2.标题标签是自占一行的
3.标题标签是有语义的，标题
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
段落标签:p
段落标签:<p>内容<p>
总结：
1.p标签展示的内容就是普通的文字
2.p标签是自占一行的
<p>我是p标签</p>
<p>我是p标签2</p>
格式化标签:br(换行)、hr(横线)
格式化标签：br(换行符)、hr(线)，都是单标签
<hr/>
<hr>
<p>用<br>于<br>演<br>示<br>换<br>行<br>符</p>
<br/>
案例一
练习标题标签和段落标签
<h2>未进入复赛8队还要打比赛？ 美媒认为毫无意义</h2>
<p>北京时间7月5日，美媒对NBA计划在芝加哥进行剩下8支没能去奥兰多的球队的复赛发表了自己的看法，他们认为这样的计划确实不错。但是纽约尼克斯对此毫无兴趣，并
且这仍然会增加新冠传播的风险，并且费时费力。
</p>
<p>美媒是这样进行解读的：“我们需要认识到一些危险，最大的问题是关于球队和球员们的安全问题。实际上，联盟决定只邀请22支其对去奥兰多的迪士尼乐园最大的原因是
为了减少危险，毕竟，减少球队也意味着更少的球员参与到复赛中来，同时也希望这个赛季能够尽快打完。”
</p>
<p>“因此，在这样的情况下，如果在芝加哥还要继续举办剩下8支球队的比赛，那么这似乎就会起反作用。即使，这在某种程度上是正确的，但是需要注意的是，如果一旦保
护措施不到位，那么结果可想而知。”
</p>
<p>目前，NBA没有计划强迫任何球员违背自己的意愿参加复赛，如果球员感到不舒服并且为了家人们的健康也可以不用参加复赛，球员们也不会遭受到任何的处罚。在这样的
情况下，究竟剩下8支球队究竟会不会在芝加哥进行复赛呢？
</p>
div和span标签
div和span标签是占位标签(容器)，没有任何语义,是一组双标签
总结：
1.div自占一行
2.可以多个span共占一行
<div>
演示div
</div>
<div>
演示div1
</div>
<span>
演示span
</span>
<span>
演示span1
</span>
图像标签：img图片标签：
属性：
src:指向图片的资源
alt:用于展示当图片不显示时的提示
title:当鼠标放到图片上时展示的文字
相对路径：
当前路径：引用时，什么也不加，""
下一路径：/，images/image1.jpg
上一层：…/，…/image1.jpg
总的来讲：通过路径改变，改变到与图片同一目录下，然后在引用该图片
绝对路径：绝对路径是相对于电脑的盘符或者根目录来讲的
E:\coursewareAndHome\2020_2\webqianduan\day01\images\image1.jpg
建议：使用相对路径
<!--<img src="image1.jpg" alt="圣诞老人">-->
<img src="images/image1.jpg" title="圣诞老人">
<img src="E:\coursewareAndHome\2020_2\webqianduan\day01\images\image1.jpg" title="圣诞老人">
超链接：a
超链接：<a>链接的名称<a>
属性：
href：指向要跳转的界面
target:页面跳转的方式，第一种在本身页面跳转(_self),第二种创建新的页面跳转(_blank)
<h3>外部链接</h3>
<a href="https://www.baidu.com" target="_blank">跳转百度</a>
<h3>内部链接</h3>
<a href="图片.html">跳转图片页面</a>
<h3>空链接</h3>
<a href="#">空链接</a>
<h3>下载链接</h3>
<a href="images.rar">下载链接</a>
<h3>图片等多媒体资源链接</h3>
<a href="images/image1.jpg">资源链接</a>
锚点
锚点使用时，需要跳转的地方要定义id，a标签的href属性指向#id
#：代表自身
id：跳转的位置
<h1>目录</h1>
<a href="#11">跳转11</a>
<a href="#22">跳转22</a>
<a href="#33">跳转33</a>
<a href="#44">跳转44</a>
<h1 id="11">111111111</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="22">222222222</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="33">333333333</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="44">444444444</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
案例二
<h2>目录</h2>
<a href="#h1">1.历史沿革</a>
<a href="#h2">2.常用树种</a>
<a href="#h3">3.历史故事</a>
<h2 id="h1">历史沿革</h2>
<h4>发展演变</h4>
<p> 据说圣诞树 [2] 最早出现在古罗马12月中旬的农神节，德国传教士尼古斯在公元8世纪用枞树供奉圣婴。随后，德国人把12月24日作为亚当和夏娃的节日，在家放上象征伊甸园的“乐园树”，上挂代表圣饼的小甜饼，象征赎罪；还点上蜡烛和球，象征基督。到16世纪，宗教改革者马丁·路德，为求得一个满天星斗的圣诞之夜，设计出在家中布置一颗装着蜡烛和球的圣诞树。</p>
<img src="images/image1.jpg" alt="圣诞老人">
<h4>时间演变</h4>
<p> 传统上，直到平安夜（12月24日）圣诞树才会立起来装饰，然后在12夜（1月6日）之后移走。提前和推后这个日期都被认为是不吉利的。
但是，现代圣诞节购物旺季让大多数商店在10月底就把圣诞树立起来。（在英国 Selfridge's的圣诞节部9月上旬就开始营业，包括圣诞树）。
大多数美国家庭，其习惯在感恩节（11月的第四个星期四）后立即就竖起圣诞树直到新年之后。有些美国家庭直到12月第二个周才着手竖起圣诞树，圣诞树立到1月6日（主显节）。</p>
<h2 id="h2">常用树种</h2>
<h4>松柏类</h4>
<p> 松伯类是对裸子植物门松柏纲中的松科（Pinaceae）、杉科（Taxodiaceae）、柏科（Cupressaceae）和南
洋杉科（Araucariaceae）的统称。其中，柏科的树木大多不呈现三角塔状，极少被作为圣诞树使用；同时南洋杉科树木原产于南半球（位于南半球的新西兰、澳大利亚等地除外），通常只在南半球作为圣诞树来用，其他地区极少用来作为圣诞树；在松科和杉科中，由于松科所拥有的物种数可是杉科的十余倍，因此松科的植物常被作为圣诞树。 [2]</p>
<h4>松科冷杉属</h4>
<p> 松科冷杉属（Abies）的十余种树木是世界上用作圣诞树最多的树种，由于冷杉的树形美丽、颜色和气味讨人喜欢以及叶片在砍伐干燥后也不容易脱，成为最受欢迎的圣诞树树种。其中欧洲冷杉（Abies alba，也称为枞树、白枞）被视为是最为传统的圣诞树。 [2] </p>
<img src="images/image2.jpg" alt="圣诞树">
<h2 id="h3">历史故事</h2>
<p> 以前德国的亚尔萨斯（现一般译为阿尔萨斯，属法国），是出产圣诞树的地方。根据传说，有一位名叫弗乐伦亭的隐修圣人，住在亚尔萨斯的一个树林当中，他非常喜欢小孩子。有一年的圣诞节，他希望附近的小孩子，都能在一起快乐的玩，但是他很贫穷，没有钱买孩子们喜爱的玩具和糖果，因此他为这件事很伤脑筋。
一天早上，弗乐伦亭在树林中散步的时候，忽然看见一棵小杉树，树上堆满了雪，枝上挂着许多小冰条，经过太阳一照射，闪闪发光，非常的漂亮。他就把那棵树弄回来，种在盆里面。又在树林中捡一些野果子，再和上面粉，做成一些十字架，或星星形状的小饼，挂在树枝上面。又用一些小蜡烛，插在树枝上，把那棵树装扮得五光十色，非常的美观。到了圣诞夜晚，弗乐伦亭打起钟来，孩子们听到了，都跑到他的茅屋里，大家围着那棵树，手舞足蹈的唱着圣诞歌曲，然后弗乐伦亭把糕饼分给孩子们吃，让大家过了一个快乐的圣诞节。以后，这个习俗流传起来。</p>
特殊字符：大于(>)、小于(<)、空格( )
特殊字符：>(>)、<(<)、空格( )
<p>111111</p>
<p>111111<p>
<p>xxxxxx xxxxxxx</p>
<p>xxxxxx xxxxxx</p>
表格：table
表格:table(表格)、tr(行)、td(列)
caption:表名
align:对齐方式
border:边框
内边距：cellpadding
表格间隙：cellspacing
th:用于描述表头，使用th描述的表头字体会加粗
thead:语义化标签，用于描述表格头部
tbody:语义化标签，用于描述表格主题部分
表格合并：
行合并：rowspan, 合并多少单元格就写多少单元格，删除的时候，删除的是不同行指令列，删除的单元格数目是合并单元格数减一
列合并：colspan, 合并多少单元格就写多少单元格，删除的时候，删除的是同一行指令列，删除的单元格数目是合并单元格数减一
<table align="center" border="1" cellspacing="0" cellpadding="20">
<caption>表名</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>13</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>12</td>
</tr>
</tbody>
</table>
<!-- 表格合并-->
<table border="1" cellpadding="40px">
<tr>
<td rowspan="4">过道</td>
<td colspan="3">讲台</td>
<td rowspan="4">过道</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
列表
有序列表(order)：<ol></ol>、<li></li>
无序列表：<ul></ul>、<li></li>
li里面可以存放像a标签等内容的
自定义列表：dl,dt,dd
<h2>有序列表</h2>
<ol>
<li>小芳</li>
<li>小明</li>
<li>小红</li>
<li>小张</li>
</ol>
<h2>无序列表</h2>
<ul>
<li>小芳</li>
<li>小明</li>
<li>小红</li>
<li>小张</li>
</ul>
<h2>自定义列表</h2>
<dl>
<dt>天猫保障</dt>
<dd>发票保障</dd>
<dd>售后规则</dd>
<dd>缺货赔付</dd>
</dl>
案例三
<h2>2020-06编程语言排行榜</h2>
<table border="1" cellspacing='0'>
<caption>2020-06编程语言排行榜</caption>
<thead>
<tr>
<th>2020-06</th>
<th>2019-06</th>
<th>改变</th>
<th>编程语言</th>
<th>使用率</th>
<th>改变率</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td><img src="images/up.png" alt="上升"></td>
<td>C</td>
<td>17.19%</td>
<td>+3.89%</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td><img src="images/down.png" alt="下降"></td>
<td>Java</td>
<td>16.10%</td>
<td>+1.10%</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td></td>
<td>Python</td>
<td>8.36%</td>
<td>-0.16%</td>
</tr>
</tbody>
</table>
今日总结
一、什么是前端
凡是眼能所见的页面都可以纳入前端
二、前端的重要性
用户体验越来越重要，所以对前端的要求也越来越高，前端也就越来越重要
三、前端的主要结构
由三个部分组成，html(骨架)、css(美化)、js(行为)
四、开发工具(顺手就行)
五、浏览器(推荐使用谷歌)
六、html知识
1.认识界面上的标签
2.书写规范
3.标题标签:h1~h6
(1)独占一行
(2)字体加粗
(3)1->6字体越来越小
(4)具有语义
4.段落标签:p
(1)独占一行
(2)具有语义
5.格式化标签:br(换行)、hr(横线)
6.div和span标签
(1)不具备语义、用来占空标签
(2)div独占一行
(3)span非独占一行
7.图像标签：img
(1)src:指向图片位置
(2)alt:图片没有加载出来的提示语句
(3)title:鼠标放到图片上提示的文字
(4)非独占一行的
8.超链接：a
(1)href:指向要跳转的位置
(2)target:跳转的方式，_self在自身跳转，_blank打开一个页面跳转
(3)分类:外部链接、内部链接、空链接、下载链接、图片等多媒体资源、锚点
9.特殊字符：大于(>)、小于(<)、空格( )
10.表格：table
(1)行：tr
(2)列：td
(3)表格属性(写在table中)：align、border、cellspacing、cellpadding
(4)合并单元格，colspan(列合并)、rowspan(行合并)
(5)th、thead、tbody
11.列表
(1)有序列表：ol(order)
(2)无序列表：ul
(3)列表项：li，li里面可以存放a等标签
(4)自定义标签，dl、dt、dd
12.表单