网站综合案例期末学习笔记

2025-06-19 学习笔记

一、HTML-网页基本信息

<!DOCTYPE html>
<!--DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<html lang="en">
<!--语言 zh中文 en英文-->
<head>
    <!--head标签代表网页头部-->
    <meta charset="UTF-8">
    <meta name="subeiLY" content="一起学HTML5">
    <meta name="some" content="一起学前端">
    <!--meta 描述性标签，表示用来描述网站的一些信息-->
    <!--一般用来做SEO-->
    <title>Title</title>
    <!--网站标题-->
</head>
<!--body代表主体-->
<body>
Hello HTML5!
</body>
</html>

1.我的第一个网页.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="some" content="learn html">
    <title>HTML-网页基本信息</title>
</head>
<body>
helloworld
</body>
</html>

二、HTML-网页基本标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>第一个段落</p>
<p>第二个段落</p>
<p>这个比较重要 以后会大量重要</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
第一段<br>第二段<br/>第三段

<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体:<strong>i love you</strong>
斜体: <em>i love you </em>

<!--特殊符号-->
空格:1&nbsp;2&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;4<br/>
大于号:&gt;<br/>
小于号:&lt;<br/>
版权符号:&copy;<br/>

&lt;&copy;版权所有HY<br/>
<!--特殊符号：'&'开头;结尾，只要在&敲出后就有提示-->

2.基本标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML-网页基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>第一个段落</p>
<p>第二个段落</p>
<p>这个比较重要 以后会大量重要</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
第一段<br>第二段<br/>第三段

<!--粗体，斜体-->
<h2>字体样式标签</h2>
粗体:<strong>i love you</strong>
斜体: <em>i love you </em>

<br/>
<!--特殊符号-->
<h2>特殊符号标签</h2>
空格:1&nbsp;2&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;4<br/>
大于号:&gt;<br/>
小于号:&lt;<br/>
版权符号:&copy;<br/>
&lt;&copy;版权所有HY<br/>
<!--特殊符号：'&'开头;结尾，只要在&敲出后就有提示-->
</body>
</html>

三、HTML-图像标签

  • 图像标签
<img src="path" alt="text" title="text" width="x" height="y">
 <!-- 图像标签 -->
 <!--
     src:资源地址(必填项)
        相对地址(推荐使用)，绝对地址   ../上级地址
     alt：在图片加载失败的时候，就会用文字代替(必填项)
     title:鼠标悬停在图片上时，所显示的名字
     width:  图片的高
     height: 图片的宽
 -->
    <img src="../resources/image/img.jpg" alt="img标签" title="悬停文字" width="500" height="300">

3.图像标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML-图像标签</title>
</head>
<body>
 <!-- 图像标签 -->
 <!--
     src:资源地址(必填项)
        相对地址(推荐使用)，绝对地址   ../上级地址
     alt：在图片加载失败的时候，就会用文字代替(必填项)
     title:鼠标悬停在图片上时，所显示的名字
     width:  图片的高
     height: 图片的宽
 -->
    <img src="../resources/image/img.jpg" alt="img标签" title="悬停文字" width="500" height="300">
</body>
</html>

四、HTML-链接标签

页面间链接

<!--a标签
    herf:必填，表示要跳转到哪个页面
    a标签内文字：即显示的文字
    可以把图片放在a标签内，点击图片跳转网页
    target:表示在哪打开新网页
    _self:当前标签打开 （默认）
    _blank:新的页面中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击跳转到第一个网页</a>
<a href="https://baidu.com" target="_blank">点击跳转到百度</a>
<a href="3.图像标签.html" target="_self"><img src="../resources/image/img.jpg" alt="img标签" title="悬停文字" width="500" height="300"></a>

锚链接

<!--锚链接--页面间跳转
    1.需要一个标记锚 
    2.跳转到标记
    使用name作为标记,#加上标记页面跳转(跨网页 网页名+# 【4.链接标签.html#down】)
    -->
    <a name="top">顶部</a>
    <a href="#top">回到顶部</a>
    <a name="down">底部</a>
    <a href="4.链接标签.html#down">回到链接标签网页底部</a>

功能性链接

<!--功能性链接
    邮件链接:"mailto:..."
    QQ链接 嵌入a标签
    http://wpa.qq.com/msgrd?v=3&uin=【qq号】&site=qq&menu=yes
    mqqapi://card/show_pslcard?src_type=internal&version=1&uin=【群号】&card_type=group&source=qrcode
-->
    <a href="mailto:hhyweb@outlook.com">点击联系我</a>
    <a href="http://wpa.qq.com/msgrd?v=3&uin=1098526142&site=qq&menu=yes">打开qq聊天框</a>
    <a href="mqqapi://card/show_pslcard?src_type=internal&version=1&uin=884901696&card_type=group&source=qrcode">打开qq群</a>

4.链接标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML-链接标签</title>
</head>
<body>
<!--a标签
    herf:必填，表示要跳转到哪个页面
    a标签内文字：即显示的文字
    可以把图片放在a标签内，点击图片跳转网页
    target:表示在哪打开新网页
    _self:当前标签打开 （默认）
    _blank:新的页面中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击跳转到第一个网页</a>
<a href="https://baidu.com" target="_blank">点击跳转到百度</a>
<br>
<a href="3.图像标签.html" target="_self"><img src="../resources/image/img.jpg" alt="img标签" title="悬停文字" width="500" height="300"></a>


<!--锚链接--页面间跳转
    1.需要一个标记锚 
    2.跳转到标记
    使用name作为标记,#加上标记页面跳转(跨网页 网页名+# 【4.链接标签.html#down】)
    -->
    <a name="top">顶部</a>
    <a href="#top">回到顶部</a>
    <a name="down">底部</a>
    <a href="4.链接标签.html#down">回到链接标签网页底部</a>


<!--功能性链接
    邮件链接:"mailto:..."
    QQ链接 嵌入a标签
    http://wpa.qq.com/msgrd?v=3&uin=【qq号】&site=qq&menu=yes
    mqqapi://card/show_pslcard?src_type=internal&version=1&uin=【群号】&card_type=group&source=qrcode
-->
    <a href="mailto:hhyweb@outlook.com">点击联系我</a>
    <a href="http://wpa.qq.com/msgrd?v=3&uin=1098526142&site=qq&menu=yes">打开qq聊天框</a>
    <a href="mqqapi://card/show_pslcard?src_type=internal&version=1&uin=884901696&card_type=group&source=qrcode">打开qq群</a>


</body>
</html>

五、行内元素和块元素

块元素

  • 无论内容多少，该元素独占一行

  • （p,h1-h6…）

行内元素

  • 内容撑开宽度，左右都是行内元素的可以在排在一行
  • （a.strong . em…）

六、列表

有序列表

    <!--有序列表 Ordered lists
    应用范围：试卷，问答...
    按顺序默认1234.排列显示
    -->
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>C/C++</li>
        <li>前端</li>
    </ol>

无序列表

    <!--无序列表 unordered lists
    应用范围：导航，侧边栏...
    一个个圆点排列显示
    -->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>C/C++</li>
        <li>前端</li>
    </ul>

定义列表

    <!--定义列表 define  list
    dl:标签
    dt:列表名称
    dd:列表名称
    应用范围：网站底部...
    -->
    <dl>
        <dt>编程语言</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>C/C++</dd>
        <dd>前端</dd>

        <dt>位置</dt>
        <dd>广州</dd>
        <dd>深圳</dd>
        <dd>北京</dd>
        <dd>上海</dd>
    </dl>

5.列表.html

<!DOCTYPE hmtl>
<html>
<head>
    <meta lang="EN">
    <meta charset="UTF-8">
    <title>HTML-列表</title>
</head>
<body>
    <!--有序列表 Ordered lists
    应用范围：试卷，问答...
    按顺序默认1234.排列显示
    -->
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>C/C++</li>
        <li>前端</li>
    </ol>

    <!--无序列表 unordered lists
    应用范围：导航，侧边栏...
    一个个圆点排列显示
    -->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>C/C++</li>
        <li>前端</li>
    </ul>

    <!--定义列表 define  list
    dl:标签
    dt:列表名称
    dd:列表名称
    应用范围：网站底部...
    -->
    <dl>
        <dt>编程语言</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>C/C++</dd>
        <dd>前端</dd>

        <dt>位置</dt>
        <dd>广州</dd>
        <dd>深圳</dd>
        <dd>北京</dd>
        <dd>上海</dd>
    </dl>
</body>
</html>

七、表格

基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
<!--表格table
    行tr，列td
    在table标签中包括tr行标签，内包括td列标签
    table属性 边框粗细 border＝"1px"
    跨列 td属性 colspan="列数";
    跨行 td属性 rowspan="行数"
-->
<table border="1px">
    <tr>
        <td colspan="4">1-1
        </td>
    </tr>
    <tr>
        <td rowspan="3">1-1</td>
        <td>1-2</td>
        <td>1-3</td>    
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>    
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>    
    </tr>
</table>

案例 学生成绩

<h3>练习案例：学生成绩</h3>
<table border="1px">
    <tr>
    <td colspan="3" align="center">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

八、媒体元素

<!--音频和视频audio和video
    src:资源路径
    controls:控制条
    outoplay:自动播放
-->s

视频元素

  • video
 <video src="../resources/video/video1.mp4" controls autoplay></video>s

音乐元素

  • audio
    <audio src="../resources/audio/audio1.mp3" controls autoplay></audio>

九、页面结构

| 元素名 | 描述 | | :---: | :---: | | header | 标题头部区域的内容（用于页面或页面中的一块区域） | | footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） | | section | Web页面中的一块独立区域 | | article | 独立的文章内容 | | aside | 相关内容或应用（常用于侧边栏） | | nav | 导航类辅助内容 |

8页面结构分析.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <header><h2>网页头部</h2></header>
        <section><<h2>网页主体</h2></section>
        <footer><h2>网页底部</h2></footer>
    </body>
</html>

十、iframe内联框架

<iframe src="path" name="main Frame">

</iframe>