第1次课后练习

编程入门行业动态更新时间:2024-10-22 14:40:22

第1次<a href=https://www.elefans.com/category/jswz/34/1769768.html style= 课后练习"/>

第1次课后练习

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="/></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次课后练习

本文发布于:2024-03-23 21:16:14，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1742911.html