第一次网页设计作业

已于 2023-11-17 12:05:13 修改
阅读量114 收藏
点赞数
文章标签： html
于 2023-11-05 20:14:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_79707932/article/details/134234052
版权

2023.11.3。 今天新建了第一个html页面

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

 知识点：html的结构、html,head,body title,p标签的使用

2023.11.4。 练习使用了head和body标签内的标签以及html注释

<!DOCTYPE html>
<html>
<head>
      <!-- 网页关键字 -->
      <meta name="keywords" content="gwt，网页设计作业">
      <!-- 网页内容 -->
      <meta name="description" content="这是gwt的网页设计作业">
      <!-- 定义编码 -->
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <!-- 跳转网页 -->
      <meta http-equiv="refresh" content="6; url=https://blog.csdn.net/2303_79707932?spm=1011.2480.3001.5343">
      <title>gwt网页设计作业</title>   
<head>
<body>
      <p>网页将在6秒后跳转到gwt的CSDN主页<p>
</body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>古诗网页</title>
    </head>
    <body>
        <h3> 静夜思</h3>                  <!-- 标题 -->
        <p>窗前明月光，疑是地上霜。</p>    <!--文本内容-->
        <p>举头望明月，低头思故乡</p>      <!--文本内容-->
        <p>或者</p>
        <h3> 静夜思</h3>
        <p>床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。</p>
    </body>
</html>

2023.11.5。学习了第四章文本内容

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>文本标签练习</title>
    </head>
    <body>
        <!-- 未用br/标签 -->
        <p>粗体标签:
        <strong>粗体标签</strong>
        <b>粗体标签</b>
        </p>
        <p>
       <!-- 使用br/标签 -->
       <strong>粗体标签</strong><br/>
       <b>粗体标签</b>
       </p>
       <p>斜体标签:
       <em>斜体标签</em><br/>
       <i>斜体标签</i><br/>
       <cite>斜体标签</cite><br/>
       <b><em>粗斜体</em></b>
       </p>
       <p>上标标签:
       (a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>
       </p>
       <p>下标标签:
       H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子
       </p>
       <p>
           中划线标签：
           原价:<s>600$/kg</s><br/>
           <strong>现价仅需:300$/kg</strong>
       </p>
       <p>
           下划线标签:
           <u>这是下划线标签</u>
       </p>
       <p>
           大小号标签<br>
           <big>大字号标签</big><br/>
           <small>小字号标签</small>
       </p>
       <p>
           水平线标签：<br/>
           这是上半部分
           <hr/>
           这是下半部分
       </p>
       <p>
           空格：空格前&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格后<br/>
           欧元符号:&euro;<br/>
           英镑符号:&pound;
       </p>
    </body>
</html>

知识点：文本标签，特殊符号

2023.11.6。学习列表内容 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;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>
    <hr/>
    <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>
    <hr>
    <ol type="I">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;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>
    <hr>
    <ul type="circle">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <hr>
    <div>前端最核心的三个技术:</div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>定义列表</title>
    </head>
    <body>
        <dl>
            <dt>HTML</dt>
            <dd>描述内容1</dd>
            <dt>CSS</dt>
            <dd>描述内容2</dd>
            <dt>Vue.js</dt>
            <dd>描述内容2</dd>
        </dl>
    </body>
</html>

知识点：有序列表，无序列表，定义列表

2023 11.8 表格

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>表格 </title>
        <!-- 这里使用CSS为表格添加边框 -->
        <style type="text/css">
            table,tr,td,th{border:1px solid silver;}
        </style>
    </head>
    <body>
       <div>
        <!-- 表格基本结构 -->
        <table>
            <tr>
                <td>HTML</td>
                <td>CSS</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>jQuery</td>
            </tr>
        </table>
       </div>
        <hr/>
        <div>
            <!-- 表格完整结构 -->
            <table>
                <caption>考试成绩表</caption>
                <tr>
                    <td>姓名</td>
                    <td>语文</td>
                    <td>数学</td>
                </tr>
                <tr>
                    <td>小明</td>
                    <td>80</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>小红</td>
                    <td>95</td>
                    <td>80</td>
                </tr>
            </table>
        </div>
        <hr/>
        <div>
            <!-- 表头单元格th的使用和语义化 -->
            <table>
                <caption>考试成绩表</caption>
                <!-- 表头 -->
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                    </tr>
                </thead>
                <!-- 表身 -->
                <tbody>
                    <tr>
                        <td>小明</td>
                        <td>80</td>
                        <td>90</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>小红</td>
                        <td>70</td>
                        <td>80</td>
                        <td>90</td>
                    </tr>
                    <tr>
                        <td>小白</td>
                        <td>80</td>
                        <td>90</td>
                        <td>90</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>平均</td>
                        <td>76</td>
                        <td>86</td>
                        <td>83</td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <hr/>
        <div>
            <!-- 合并行rowspan的练习 -->
            <table>
                <tr>
                    <td>姓名</td>
                    <td>小明</td>
                </tr>
                <tr>
                    <td rowspan="2">喜欢的水果：</td>
                    <td>香蕉</td>
                </tr>
                <tr>
                    <td>苹果</td>
                </tr>
            </table>
        </div>
        <hr/>
        <div>
            <!-- 合并列colspan的练习-->
            <table>
                <tr>
                    <td colspan="2">前端开发技术</td>
                </tr>
                <tr>
                    <td>HTML</td>
                    <td>CSS</td>
                </tr>
                <tr>
                    <td>JavaScript</td>
                    <td>jQuery</td>
                </tr>
            </table>
        </div>
    </body>
</html>

2023 11.10 第8章 图片

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>图片</title>
    </head>
    <body>
        <!-- 绝对路径 -->
        <img src="E:\html文件夹\photo\houzi.png" alt=""><br/>
        <!-- 相对路径 -->
        <img src="./photo/houzi.png" alt="">
    </body>
</html>

2023.11.12.。超链接

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>文本超链接</title>
    </head>
    <body>
        <a href="http://www.lvyestudy.com">绿叶学习网</a>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
    </head>
    <body>
        <!-- 在原窗口打开链接 -->
        <a href="http://www.lvyestudy.com" target="_self">绿叶学习网</a>
        <hr/>
        <!-- 在新窗口打开链接 -->
        <a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
        <hr/>
        <!-- 在父窗口打开链接 -->
        <a href="http://www.lvyestudy.com" target="_parent">绿叶学习网</a>
        <hr/>
        <!-- 在顶层窗口打开超链接 -->
        <a href="http://www.lvyestudy.com" target="_top">绿叶学习网</a>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>内部链接</title>
    </head>
    <body>
        <a href="6.表格.html">跳转到页面6.表格</a>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>锚点链接</title>
    </head>
    <body>
        <div>
            <a href="#article"> 推荐文章</a><br/>
           <a href="#music">推荐音乐</a><br/>
           <a href="#movie">推荐电影</a><br/>
           ......<br/>
           ......<br/>
           ......<br/>
           ......<br/>
           ......<br/>
           ......<br/>
           ......<br/>
           ......<br/>
        </div>
       
        <div id="article">
            <h3>推荐文章</h3>
            <ul>
                <li>朱自清-荷塘月色</li>
                <li>余光中-乡愁</li>
                <li>鲁迅-阿Q正传</li>
            </ul>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        </div>
        <div id="music">
            <h3>推荐音乐</h3>
            <ul>
                <li>林俊杰-被风吹过的夏天</li>
                <li>曲婉婷-我的歌声里</li>
                <li>许嵩-灰色头像</li>
            </ul>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        </div>
        <div id="movie">
            <h3>推荐电影</h3>
            <ul>
                <li>电影1</li>
                <li>电影2</li>
                <li>电影3</li>
            </ul>
         ......<br/>
         ......<br/>
         ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        </div>
    </body>
</html>

2023.11.12  表单的练习

顾文韬 202205403008
关注
网页设计期末大作业小结
weixin_45789334的博客
12-28 1万+
WY的网页设计第一次写网页设计作业 学校学的是基础的网页设计知识，对这次期末大作业作一个梳理用到html和css，涉及到少部分的js。 首页轮播图无箭头 /*图片轮播*/ *{ margin:0; /*清除默认边距*/ padding:0; } ul,li{ list-style: none;/*无修饰*/ } .banner-contaner{ width:100%; position:relative; z-index:-10;/*置于下层*/ } .banner-item + .ban.
纯HTML+CSS网页设计期末作业（个人网站）
weixin_47138646的博客
11-14 31万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
网页设计第一次作业
成龙大侠的博客
05-10 3770
第一次作业涉及了HTML5的部分基础语法 包括： 框架 如何声明HTML文件 如何设置网页原信息 如何插入空格 如何设置超链接 如何设置锚点链接 如何插入图片及图片属性设置 常用标签page1: <!DOCTYPE html> <html> <head> <meta charset=...
结对第一次作业--原型设计
weixin_67936980的博客
03-08 1653
因此在使用之前我们对墨刀先进行了一个简单学习，了解了其大概使用方式后再着手设计，但毕竟是第一次使用，故还是碰到了许多问题，比如没法很好的用墨刀展现出自己的想法，这部分问题通过上网查阅资料得以解决。界面设计：在两人一起讨论完大概方向后，由林璞先给出初版原型，包括页面大致布局及页面数量，在这之后利用墨刀的在线协同设计，一起完善这个初版原型，最后由林璞进行整合。设计理念的建立： 在页面样式设计中，学会开始建立起自己的设计审美，明白简洁明了、大众审美的重要性，以及用户体验的核心地位。掌握新工具和技能，不断进步。
第二次网页设计作业
成龙大侠的博客
05-21 2618
部分代码 page7 code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 0426张成龙 </title> <style type="text/css"> div{ width: 800px; ...
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
Android Studio第一次作业：APP门户界面设计
yxf43的博客
10-06 2483
目录 最终APP界面效果展示： 实现过程 一、界面框架设计思路 1.top.xml ​ 2.bottom.xml 3.整体框架activity_main.xml ​ 二、交互设计思路 1.FragmentManager的创建 2.创建不同的Fragment.java及layout 3.实现Fragment的隐藏和显示 4.完善底部导航 5.对控件进行监听实现交互 总结 项目源代码地址： 本次作业的内容为：根据课程实操实现APP门户界面框架设计，至少包含4个tab..
【网页设计】期末大作业html+css（个人网站）
qq_33837572的博客
12-31 2万+
【网页设计】期末大作业html+css（个人网站）写在前面代码 写在前面 这个作业呢使用的是html5+css3布局，用了一些jquery做交互效果。调用了百度地图的api。这是小萌新第一次发作业，请各位大佬凑合着看看哈。 先放几张图片凑合看看趴！ 代码 //轮播图 var autoLi = $(".auto ul li"); var autoImg = $(".auto ul li img"); var num = -1; var point = $(".point"); var pointDiv
WEB学生网页作业【HTML+CSS】静态网页期末大作业课程设计
有问必答，欢迎打扰，项目开发，网页设计
10-05 3862
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
网安第一次作业
qq_52074845的博客
01-10 2424
web入侵和渗透 官网 cnvd 漏洞类型 通用型漏洞 事件型漏洞 26中漏洞 登录成功的数字4624 审核成功 审核失败4625 url 用的协议为https 主机：域名或者ip 端口默认为80 路径 访问的路径 查询参数：类似于mysql中的查询 select 编码历史： ascll unicode(不可变) utf-8（可变长）掌握utf-8的编码转码规则 先选择范围，然后根据规则将其补全 HTML超文本标记语言 构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术
第二次网页设计作业.zip
05-21
在“第二次网页设计作业”的“hpuNews”子文件中，我们可以预见到一个新闻网站的实现，利用HTML5和CSS3的上述特性，可能包括了新闻列表、分页导航、文章详情页等功能。这些页面不仅注重信息的展示，还会关注用户体验...
家居网 网页期末大作业（JS + CSS + html）+设计报告
07-09
家居网 我这里有两个版本 一个是满足下面功能的期末大作业版本，另一个满足课程设计要求的版本， 课程设计是另一个资源大家可以，自己点我主页找那个...(5)使用Ajax或fetch获取第三方网站数据并更新本网页内容1次。
基于Python的南开大学暑期实训第一次作业设计源码
10-01
该南开大学暑期实训第一次作业项目为Python语言主导，辅以HTML、JavaScript和CSS进行前端开发，项目总文件量达112个，包括44个Python编译文件（pyc）、15个音频文件（wav）、14个Python源代码文件（py）、10个XML...
网页设计第一次作业答案.docx编程资料
04-07
根据提供的文档内容，我们可以总结出以下关键知识点，主要围绕Dreamweaver软件的使用及网页设计的基本概念展开： ### 1. 创建新文档 - **基本页类别中的“HTML”选项**：当创建一个完全空白的静态HTML页面时，应当...
第一次网页设计.zip
08-14
【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中...
Html/Vue浏览器下载并重命名文件
最新发布
NAN0808的博客
10-17 152
【代码】Html/Vue浏览器下载并重命名文件。
HTML 符号
lly202406的博客
10-12 454
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它使用一系列的标签来描述网页的结构和内容。HTML 符号，通常指的是 HTML 标签，是构成 HTML 文档的基础。本文将详细介绍 HTML 符号的概念、种类、用途以及如何在网页设计中正确使用它们。
HTML_文本标签
no15870678621的博客
10-15 454
html文本标签
html面试题总结
cx18333的博客
10-11 1080
在从事Web开发工作的过程中，我们常常会遇到这样的情况：尽管每天都在与HTML等前端技术打交道，但对于一些基础的概念性知识，却总是容易遗忘或混淆。为了帮助自己更好地巩固这些基础知识，我决定撰写一篇专门的博客文章，用来记录和整理那些在前端面试中常见的HTML相关问题及其答案。通过这种方式，不仅能够加深对这些概念的理解，还能为未来的面试和技术交流做好充分准备。希望这篇文章不仅能成为我个人的学习笔记，也能为其他正在努力提升自己的前端开发者提供一定的参考价值。
Dreamweaver引领的网页与网站设计教程
在教学内容的第一章中，主要介绍了Dreamweaver MX2004的基础知识，包括其作为网页设计领域主流软件的地位，以及它的主要功能和特点。Dreamweaver不仅提供可视化编辑，还支持高级HTML编码，能够处理服务器技术，生成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值