第1次课后练习

wangcancan6

已于 2023-11-11 17:07:37 修改

阅读量76

点赞数

文章标签：前端 javascript 笔记

于 2023-11-05 19:33:10 首次发布

本文链接：https://blog.csdn.net/wangcancan6/article/details/134233540

版权

2023.11.03日今天安装和练习了html的结构和head标签

HTML结构：

<!DOCTYPE html>
<html>
    <head>
        <title>这是网页的标题</title>
    </head>
    <body>
        <p>这是网页的内容</p>
    </body>
</html>

title标签

<!DOCTYPE html>
<html>
    <head>
        <title>绿叶学习网</title>
    </head>
    <body>
        <p>绿叶学习网,给你初恋般的前端教程</p>
    </body>
</html>

meta标签

<!DOCTYPE html>
<html>
    <head>
        <!--网页关键字-->
        <meta name="keywords" content="绿叶学习网,前端开发,后端开发"/>
        <!--网页描述-->
        <meta name="description" content="绿叶学习网是一个富有活力的Web技术学习网站"/>
        <!--本页作者-->
        <meta name="author" content="helicopter">
        <!--版权声明-->
        <meta name="copyright" content="本站所有教程均为原创,版权所有,禁止转载。否则必将追究法律责任。"/>
        <meta http-equiv="refresh" content="6;url=http://www.lvyestudy.com"/>
    </head>
    <body>
        <p>这个页面在6秒后会自动跳转到绿叶学习网首页</p>
    </body>
</html>

style标签

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        </style>
    </head>
</html>

script标签

<!DOCTYPE html>
<html>
    <head>
        <script>
            /*这里写JavaScript代码*/
        </script>
    </head>
    <body>
    </body>
</html>

link标签

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="css/index.css">
    </head>
    <body>
    </body>
</html>

知识点：

1、HTML的结构包括在<html>中，有<head><body>的内容

2、head标签包括：title标签（给页面命名）、meta标签（name属性，http-equiv属性）、style标签（定义元素的CSS样式）、script标签（定义和引用JavaScript代码）、link标签（引入CSS文件）、base标签。

2023.11.04日今天学习了body标签和HTML注释以及文本的相关内容

body标签：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/><!--防止乱码-->
        <title>body标签</title>
    </head>
    <body>
        <h3>静夜思</h3>
        <p>床前明月光，疑是地上霜。</p>
        <p>举头望明月，低头思故乡。</p>
    </body>
</html>

HTML注释：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>注释</title>
    </head>
    <body>
        <h3>静夜思</h3>                <!--标题标签-->
        <p>床前明月光，疑是地上霜。</p>  <!--文本标签-->
        <p>举头望明月，低头思故乡。</p>  <!--文本标签-->
    </body>
</html>

标题标签h：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标题标签</title>
    </head>
    <body>
        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>
    </body>
</html>

段落标签p ：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>段落标签</title>
    </head>
    <body>
        <h3>爱莲说</h3>
        <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
        <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p>
    </body>
</html>

换行标签<br/> :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>换行标签</title>
    </head>
    <body>
        <h3>静夜思</h3>
        <p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
    </body>
</html>

知识点：

1、 body标签是文章的“身体”。

2、是注释标签，不会显示在页面上，是给程序员看的。

3、用h来表示标题标签，共有一到六级标题；用p来表示段落标签，会自动分段，但首行不缩进；用<br/>来表示换行标签，是自闭合标签。

2023.11.05日今天练习了文本内容中剩下的部分

文本标签：1、粗体标签strong：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>粗体标签</title>
    </head>
    <body>
        <p>这是普通文本</p>
        <strong>这是粗体文本</strong><br/>
        <b>这是粗体文本</b>
    </body>
</html>

2、斜体标签 em：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>斜体标签</title>
    </head>
    <body>
        <i>斜体文本</i><br/>
        <em>斜体文本</em><br/>
        <cite>斜体文本</cite>
    </body>
</html>

3、上标标签sup：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>上标标签</title>
    </head>
    <body>
        <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
    </body>
</html>

4、下标标签sub：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>下标标签</title>
    </head>
    <body>
        <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
    </body>
</html>

5、删除线标签s：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>删除线标签</title>
    </head>
    <body>
        <p>新鲜的新西兰奇异果</p>
        <p><s>原价:$6.50/kg</s></p>
        <p><strong>现价:$4.00/kg</strong></p>
    </body>
</html>

6、下划线标签u：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>下划线标签</title>
    </head>
    <body>
        <p><u>绿叶学习网</u>是一个精品的技术分享网站</p>
    </body>
</html>

7、大字号标签big和小字号标签small：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>大字号标签和小字号标签</title>
    </head>
    <body>
        <p>普通字体文本</p><br/>
        <big>大字号文本</big><br/>
        <small>小字号文本</small>
    </body>
</html>

8、水平线标签hr：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>水平线标签</title>
    </head>
    <body>
        <h3>静夜思</h3>
        <p>床前明月光，疑是地上霜</p>
        <p>举头望明月，低头思故乡</p>
        <hr/>
        <h3>春晓</h3>
        <p>春眠不觉晓，处处闻啼鸟</p>
        <p>夜来风雨声，花落知多少</p>
    </body>
</html>

9、div标签：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>div标签</title>
    </head>
    <body>
        <!--这是第一首诗-->
        <div>
            <h3>静夜思</h3>
            <p>床前明月光，疑是地上霜</p>
            <p>举头望明月，低头思故乡</p>
        </div>
        <hr/>
        <!--这是第二首诗-->
            <h3>春晓</h3>
            <p>春眠不觉晓，处处闻啼鸟</p>
            <p>夜来风雨声，花落知多少</p>
        </div>
    </body>
</html>

10、自闭合标签<br/><hr/><meta/><link><img><input/>:

<!DOCTYPE html>
<html>
    <head>
        <meta  charset="utf-8"/>
        <title>自闭合标签</title>
    </head>
    <body>
        <div>
            <h3>绿叶学习网</h3>
            <hr/>
            <p>绿叶，给你初恋般的感觉</p>
        </div>
    </body>
</html>

11、块元素和行内元素：

块元素（独占一行，排斥其他元素，内容可容纳其他元素）：h1-h6、p、div、hr、ol、ul

行内元素（和相邻行内元素在一行上，不能容纳文本以外其他元素）：strong、em、a、span

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>块元素和行内元素</title>
    </head>
    <body>
        <div>
            <h3>绿叶学习网</h3>
            <p>绿叶，给你初恋般的感觉</p>
            <strong>绿叶学习网</strong>
            <em>绿叶，给你初恋般的感觉</em>
        </div>
    </body>
</html>

12、特殊符号空格&nbsp:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>特殊符号</title>
    </head>
    <body>
        <h3></h3>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p>
    </body>
</html>

知识点：

1、标题标签title命名网页名称

2、段落标签p：自动换行，首行不自动缩进，需要加入六个空格键&nbsp（一个汉字占三个字节）

3、换行标签<br/>和水平线标签<hr/>都是自闭合标签

4、文本标签：strong（粗体）、em（斜体）、sup（上标标签）、sub（下标标签）、s（删除线标签）、u（下划线标签）、big（大字号标签）、small（小字号标签）

5、div标签：可以让代码段落更加清晰

6、块元素和行内元素的区别：能否容纳除文本以外的元素、是否排斥于其他元素一行

7、特殊符号在HTML中的输入方法

2023.11.06日今天练习了列表的相关知识

1、有序列表ol：

ol要和li标签配合一起使用，不可单独使用，且子标签也只能是li标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>有序列表</title>
    </head>
    <body>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>Vue.js</li>
        </ol>
    </body>
</html>

2、type属性：

type=“a/1/A/i/I”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>type属性</title>
    </head>
    <body>
        <ol type="a">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>Vue.js</li>
        </ol>
    </body>
</html>

3、无序列表ul：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>无序列表</title>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>Vue.js</li>
        </ul>
    </body>
</html>

4、type属性：

disc--实心圆、circle--空心圆、square--正方形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>type属性</title>
    </head>
    <body>
        <ul type="circle">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>Vue.js</li>
        </ul>
    </body>
</html>

5、定义列表dl：

<dl></dl>定义列表的开始和结束、<dt></dt>添加要解释的名词、<dd></dd>添加该名词的具体解释

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>定义列表</title>
    </head>
    <body>
        <dl>
            <dt>HTML</dt>
            <dd>制作网页的标准语言，控制网页的结构</dd>
            <dt>CSS</dt>
            <dd>层叠样式表，控制网页样式</dd>
            <dt>JavaScript</dt>
            <dd>脚本语言，控制网页的行为</dd>
        </dl>
    </body>
</html>

知识点：

1、有序列表ol：要配合li标签使用，不可单独使用，可以用type属性改变列表项符号

2、无序列表ul：与有序列表相同，也可以用type属性修改列表项符号

3、定义列表dl：dt用来添加要解释的名词，dd用来解释添加的名词

2023.11.07日今天练习了表格的相关知识

1、表格的基本结构：

表格：table

行：tr

单元格：td

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格基本结构</title>
        <!--这里使用CSS为表格加上边框-->
        <style type="text/css">
            table,tr,td{border:1px solid silver;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>HTML</td>
                <td>CSS</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>jQuery</td>
            </tr>
        </table>
    </body>
</html>

2、表格标题caption：

一个表格只能有一个caption标题，默认情况下，标题位于整个表格的第一行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格标题</title>
        <style type="text/css">
            table,tr,td{border:1px solid silver;}
        </style>
    </head>
    <body>
        <table>
            <caption>考试成绩表</caption>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </table>
    </body>
</html>

3、表头单元格th：

th中的内容会加粗、居中显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表头单元格</title>
        <style type="text/css">
            table,tr,th,td{border:1px solid silver;}
        </style>
    </head>
    <body>
        <table>
            <caption>考试成绩表</caption>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
              </tr>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </table>
    </body>
</html>

4、语义化:

<thead>表头、<tbody>表身、<tfoot>表脚

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格语义化</title>
        <style type="text/css">
            table,tr,th,td{border:1px solid silver;}
        </style>
    </head>
    <body>
        <table>
            <caption>考试成绩表</caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>英语</th>
                    <th>数学</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>小明</td>
                    <td>80</td>
                    <td>80</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td>小红</td>
                    <td>90</td>
                    <td>90</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>小杰</td>
                    <td>100</td>
                    <td>100</td>
                    <td>100</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>平均</td>
                    <td>90</td>
                    <td>90</td>
                    <td>90</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

5 、合并行rowspan：

将纵向的N个单元格合并<td rowspan="2"></td>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>rowspan属性</title>
        <style type="text/css">
            table,tr,th,td{border:1px solid silver;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>姓名</td>
                <td>小明</td>
            </tr>
            <tr>
                <td rowspan="2">喜欢的水果</td>
                <td>苹果</td>
            </tr>
            <tr>
                <td>香蕉</td>
            </tr>
        </table>
    </body>
</html>

6、合并列colspan：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>colspan属性</title>
        <style type="text/css">
            table,tr,th,td{border:1px solid silver;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td colspan="2">前端开发技术</td>
            </tr>
            <tr>
                <td>HTML</td>
                <td>CSS</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>jQuery</td>
            </tr>
        </table>
    </body>
</html>

知识点：

1、表格结构：表格由表格table、行tr、单元格td构成

2、表格标题caption：一个表格只能有一个caption标题

3、头单元格th：居中加粗显示

4、语义化：用<thead>、<tbody>、<tfoot> 来更清楚的显示表格结构，tfoot通常用来统计

5、合并行rowspan、合并列colspan：<td rowspan="x"></td>

2023.11.08日今天练习了图片的相关知识

1、src属性：

即图片路径

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>src属性</title>
    </head>
    <body>
        <img src="img/haizei.png">
    </body>
</html>

2、alt属性：

描述文字给搜索引擎看

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>alt属性</title>
    </head>
    <body>
        <img src="img/haizei.png" alt="海贼之王索隆"/>
    </body>
</html>

3、title属性：

描述图片，给用户看的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>title属性</title>
    </head>
    <body>
        <img src="img/haizei.png" title="海贼王索隆"/>
    </body>
</html>

知识点：

1、src属性：图片通过src属性引用

2、alt属性：介绍图片给搜索引擎看

3、title属性：介绍图片给用户看

4、图片的路径：绝对路径就是图片的原本位置，不能改动、相对路径就是图片相对于当前页面的位置../表示文件夹上一级

2023.11.09日今天练习了超链接的相关知识

1、a标签：

通过href属性将超链接链接到相对应的地址处(也可以通过图片来链接)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>a属性</title>
    </head>
    <body>
        <a href="http://www.lvyestudy.com">绿叶学习网</a>
    </body>
</html>

2、target属性：

定义超链接打开窗口的方式

_self(在原来窗口打开链接)、_blank(在新窗口打开链接)、_parent(在父窗口打开链接)、_top(在顶层窗口打开超链接)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>target属性</title>
    </head>
    <body>
        <a href="http://www.lvyestudy.com" target="_blanl">绿叶学习网</a>
    </body>
</html>

3、内部链接：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>内部链接</title>
    </head>
    <body>
        <a href="8_2_2.html">跳转到界面2</a>
        <a href="8_2/8_2_3.html">跳转到界面3</a>
    </body>
</html>

4、锚点链接：

跳转到当前页面的某一个部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>锚点链接</title>
    </head>
    <body>
        <div>
            <a href="#article">推荐文章</a>
            <a href="#music">推荐音乐</a>
            <a href="#movie">推荐电影</a>
        </div>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        <div id="article">
            <h3>推荐文章</h3>
            <ul>
                <li>朱自清-荷塘月色</li>
                <li>余光中-乡愁</li>
                <li>鲁迅-阿Q正传</li>
            </ul>
        </div>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        <div id="music">
            <h3>推荐音乐</h3>
            <ul>
                <li>林俊杰-被风吹过的夏天</li>
                <li>曲婉婷-我的歌声里</li>
                <li>许嵩-灰色头像</li>
            </ul>
        </div>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        <div id="movie">
            <h3>推荐电影</h3>
            <ul>
                <li>蜘蛛侠系列</li>
                <li>钢铁侠系列</li>
                <li>复仇者联盟</li>
            </ul>
        </div>
    </body>
</html>