网页设计第一周第三-八章学习-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_81537535/article/details/143268704

2024.10.21 学习基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是网页的标题</title>
</head>
<body>
    这是网页的内容
    <p>绿叶学习网，给你初恋般的前端教程。</p>
    <h3>静夜思</h3>                     <!--标题标签-->
    <p>床前明月光，疑是地上霜。</p>       <!--文本标签-->
    <p>举头望明月，低头思故乡。</p>       <!--文本标签-->
</body>
</html>

知识点：

1.html结构：

2.head标签:title、meta、link、style、script标签、base标签。

3.body标签：(<meta charset="utf-8" />的作用是为了防止页面出现乱码,<meta charset="utf-8" />这一句必须放在title标签以及其他meta标签前面。)

4.HTML注释：

2024.10.22 学习文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <h3>这是三级标题</h3>
    <h6>这是六级标题</h6>
    <h3>爱莲说</h3>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水陆草木之花，<br/>可爱....</p>
    <strong>1111粗体</strong>
    <i>22222斜体</i><br/>
    <em>3333斜体</em><br/>
    <cite>斜体44444</cite>
    <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
    <p>a<sup>2</sup>+b<sup>2</sup>=9</p>
    <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
    <p>HNO<sub>3</sub>是硝酸</p>
    <p>一张ehp专辑</p>
    <p><s>原价:99rmb</s></p>
    <p><strong>现在仅售：9.9rmb</strong></p>
    <p><u>hjy</u>是我的好朋友</p>
    <p>侯 </p>
    <big>侯</big><br/>
    <small>侯</small>
    <h3>WayV</h3>                  
    <p>WayV</p>
    <!--这是第一首诗-->
    <h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</body>
</html>

知识点：

1.标题标签：<h1></h1>......<h6></h6>

2.段落标签：<p></p>

3.换行标签：<br/>

4.文本标签：

（1）粗体标签：strong、b（2）斜体标签：i、em、cite（3）上标标签：sup（4）下标标签：sub（5）中划线标签：s（6）下划线标签：u（7）大字号标签：big（8）小字号标签：small

5.水平线标签：<hr/>

6.div标签：（划分区域）
7.自闭和标签：（没有结束符号）

8.块元素与行内元素

9.特殊符号：缩进：&nbsp；（1个汉字约等于3个 )

`2024.10.23 学习列表`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="a">
        <li>dog</li>
        <li>cat</li>
        <li>pig</li>
    </ol>
    <ul type="square">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <dl>
        <dt>HTML</dt>
        <dd>制作网页的标准语言，控制网页的结构</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，控制网页的样式</dd>
        <dt>JavaScript</dt>
        <dd>脚本语言，控制网页的行为</dd>
    </dl>
</body>
</html>

知识点：

1.有序列表：<ol>和</ol>，<li>和</li>表示这是一个列表项。

(type属性：<ol type="属性值">）

2.无序列表：<ul></ul>，<li></li>表示这是一个列表项。

（type属性：<ul type="属性值">）

3.定义表格：<dl></dl>，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。

2024.10.24 学习表格

<!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>
        <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>
    <table>
        <tr>
            <td>姓名:</td>
            <td>董书畅</td>
        </tr>
        <tr>
            <td rowspan="2">喜欢的水果:</td>
            <td>柚子</td>
        </tr>
        <tr>
            <td>香蕉</td>
        </tr>
    </table>
    <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、表行：td

4.<thead><tbody><tfoot>表示表头、身、脚。（tfoot统计数据）

5.合并行：rowspan（纵向）、合并列：colspan（横向）

2024.10.25 学习图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="C:\Users\1\OneDrive\图片\QQ图片20231106111816.jpg"/>
</body>
</html>

知识点

1.图片标签：<img src="" alt="" title="">

src(指定路径）alt（指定文字，给搜索引擎看）title（指定文字，给用户看）

title是可选属性，其它是必选属性。

2.图片路径：

绝对路径（图片在计算机中的完整路径）

相对路径（图片相对当前页面的位置）

3.图片格式：

①位图（放大缩小都会失真)：jpg(色彩丰富）、png（一般或透明效果）、gif（动画）

②矢量图（难以表现色彩的丰富）：.ai、 .cdr 、.fh、 .swf（常见）

2024.10.26 学习超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.lvyestudy.com">绿叶学习网</a>
    <a href="http://www.lvyestudy.com"><img src="img/lvye.png" alt="绿叶学习网"/></a>
    <a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
    <a href="page2.html">跳转到页面2</a>
    <a href="test/page3.html">跳转到页面3</a>
    <div>
        <a href="#article">推荐文章</a><br />
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
    </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>