web前端实训day01
目录
- web前端实训day01——html部分知识回顾
- 骨架介绍
- 标题标签:h1~h6
- 段落标签:p
- 格式化标签:br(换行)、hr(横线)
- 案例一
- div和span标签
- 图像标签：img图片标签：
- 超链接：a
- 锚点
- 案例二
- 特殊字符：大于(>)、小于(<)、空格( )
- 表格：table
- 列表
- 案例三
- 今日总结
- 一、什么是前端
- 二、前端的重要性
- 三、前端的主要结构
- 四、开发工具(顺手就行)
- 五、浏览器(推荐使用谷歌)
- 六、html知识
web前端实训day01——html部分知识回顾
骨架介绍
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body用于展示页面内容
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
段落标签:
内容
总结：
1.p标签展示的内容就是普通的文字
2.p标签是自占一行的
<p>我是p标签p>
<p>我是p标签2p>
格式化标签: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="images/image1.jpg" title="圣诞老人">
<img src="E:\coursewareAndHome\2020_2\webqianduan\day01\images\image1.jpg" title="圣诞老人">
超链接：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">跳转11a>
<a href="#22">跳转22a>
<a href="#33">跳转33a>
<a href="#44">跳转44a>
<h1 id="11">111111111h1>
<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">222222222h1>
<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">333333333h1>
<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">444444444h1>
<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>111111p>
<p>111111<p>
<p>xxxxxx xxxxxxxp>
<p>xxxxxx xxxxxxp>
表格：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>13td>
tr>
<tr>
<td>小红td>
<td>女td>
<td>12td>
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)：
、
无序列表：
、
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-06th>
<th>2019-06th>
<th>改变th>
<th>编程语言th>
<th>使用率th>
<th>改变率th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>2td>
<td><img src="images/up.png" alt="上升">td>
<td>Ctd>
<td>17.19%td>
<td>+3.89%td>
tr>
<tr>
<td>2td>
<td>1td>
<td><img src="images/down.png" alt="下降">td>
<td>Javatd>
<td>16.10%td>
<td>+1.10%td>
tr>
<tr>
<td>3td>
<td>3td>
<td>td>
<td>Pythontd>
<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.表单