需要一份html教程的网页制作，主题是我的个人网页，
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了需要一份html教程的网页制作，主题是我的个人网页，相关的知识，希望对你有一定的参考价值。
大学选修课作业，求帮助！谢谢！
这是我在大学学的知识给你借鉴一下 ，希望对你有帮助
网页设计教程
<html>文字操作（一）
1、段落 <p>……</p>
在dreamweaver设计界面中，enter（回车）即为另起一段。
2、换行 <br/>
在dreamweaver设计界面中，shift+enter即为另起一段。
3、标题1~6 <h1>……</h1>
标题1最大，依次变小。
4、空格:
Dreamweaver 只允许一次空格，如果需要使用连续空格，则需要设置，或使用 ；
或使用快捷键：ctrl+shift+space（空格键）
5、水平线 <hr>
size:水平线的粗细
width:长度
align:对齐方式
<htlm>文字操作（二）
一、几个文字特殊效果
1、加粗<b></b> <strong></strong>
2、倾斜<i></i> <em></em>
3、上标<sup></sup>（适合用代码来实现，设计中无法完成）
4、下标<sub></sub>（适合用代码来实现，设计中无法完成）
随着css的逐渐普及，文字的效果都更多的通过css来实现，以上的几个标签作为了解即可。
二、文字列表
1、无序列表
无序列表有两个标签<ul>和<li>
<ul>
<li>CSS教程</li>
<li>DOM教程</li>
<li>XML教程</li>
<li>Flash教程</li>
</ul>
2、有序列表
有序列表有两个标签<ol>和<li>
<ol>
<li>CSS教程</li>
<li>DOM教程</li>
<li>XML教程</li>
<li>Flash教程</li>
</ol>
图片
一、如何获取图像
最好的途径是通过互联网
二、使用设计界面插入图像
1、菜单（一个图片属性：替换文字）
2、工具栏
3、拖曳
三、图像格式扩展阅读：
http://blog.sina.com.cn/s/blog_45ac0d0a010005d8.html
JPEG图像、GIF图像、PNG图像
四、代码
<img src=" " width=" " height=" " alt=" "/>
一、超级链接的基本知识
1、含义：实现网页之间的跳转和联系
2、分类：
绝对链接 http://www.baidu.com
相对链接 在同一站点不同位置之间的链接
二、三种常见的超级链接
1、文字链接<a href="http://www.baidu.com">百度</a>
2、图像链接
3、图像热点链接
===============
还有不是太常用的链接
1、空连接 <a href="#">空连接</a>
2、锚链接:在同一页面的不同位置跳转
三、链接的属性
链接目标 <a href="http://www.baidu.com" target="_blank">百度</a>
表单设计
一、设计界面
1、单元格间距
2、单元格边距
二、代码
1、从属关系：表格由行组成，行由单元格组成。
表格：<table>……</table>
行：<tr>……</tr>
单元格：<td>……</td>
2、<table>标签的属性
bgcolor:背景色
cellspacing:表格的单元格间距（间距）
cellpadding:表格的单元格边距（填充）
文字占据一行<div></div>
文字不占据一行<span></span>
、html引入css的几种方法
1、链接式
将css代码写在一个独立的文件中，文件的扩展名为.css。然后在html网页中使用<link/>标签将外部css文件放在<head></head>之间。举例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="tp.css" rel="stylesheet" type="text/css">
</head>
2、嵌入式
将Css代码写在<head></head>之间，并且用<style></style>包含起来，如果考虑到兼容性，可以再使用<!-- --> 将css代码包含其中。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
p
font-family: "楷体_GB2312";
font-size: 18px;
-->
</style>
</head>
1．标签选择器：
就是网页元素本身，所有的XHTML框架中的标签都可以作为CSS样式的选择器，如定义段落样式，我们可以选择P标签的名称，即把P作为选择器。P/*定义段落属性*/。如果定义了标签样式，则整个网页中使用了该标签都会应用这个样式。一般应用在统一文档的某个元素的显示样式中。
2．ID选择器：
它是唯一的，网页中不同的元素它的ID是不一样的。而且一个元素它只能应用一个ID。因为如果我们使用javascript来控制网页元素的时候它是通过ID来实现的，在这种情况下就无法正常工作了。它在定义的时候用#开始，它在应用的时候用id=””。它的名称由设计者来确定。
3． 类选择：
它的名称也是由设计者来确定的，它在定义的时候用点号开始，应用的时候用class=“”；它与ID选择器所不同的是它具有一对多的特性而ID是一对一的特性。也就是说一个类选择器它可以应用到多个网页元素中而且一个元素可以应用多个类，一个元素也可以应用两个类样式，中间用空格分开，但不能是三个或者更多。在同等条件下，ID具有比class更高的优先权。
1、复杂类选择器
p.onecolor:red
实例：
<style>
.onecolor:red;
p.twocolor:blue;
</style>
.one可以用于各种标签；而。two只能用于p标签。
2、后代选择器
div pcolor:#00FF00
例子：
<div>
<h1>这是一个标题。</h1>
<p>我是一个兵。</p>
</div>
3、组合选择器（集体声明）
p，h1，.onecolor:red
4、通用选择器
对html文档的所有元素进行控制。
*color：red；
5、伪类选择器
a:link;hover;visited;active
或者：a.one:link;a#two:link
当用css定义链接的各种状态时，一定要注意其书写顺序，即：:link :visited :hover :active。
如果不按照该顺序书写可能无法达到自己希望的效果。
一、属性
1.大小 font-size
大小就是字号，可以直接填入数字，然后选择单位。
2.样式
font-style
设置文字的外观，包括正常、斜体、偏斜体。
3.行高 line-height
这项设置在网页制作种很常用。设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。需要注意的是，单位应该和文字的单位一致，行高的数值是包括字号数值在内的。例如，文字设置为12pt，如果要创建一倍行距，则行高应该为24pt。
4.修饰 font-decoration
文本的特殊样式：上下划线、删除线、闪烁（IE不支持此效果）
5.粗细 font-weight
设置文字的加粗还是变细的效果。
6.颜色 color
设置文字的色彩。
颜色的表示方法常见的有RGB模式、十六进制模式和名称模式。
7.字体 font-family
设置文字的字体，注意多个字体的选择。
8.文本对齐 text-align
设置文本的水平对齐方式。 这里也不仅仅局限于文字，泛指所包含的内容。
9.文字缩进 text-indent
这是最重要的项目。中文文字的首行缩进就是由它来实现的。首先填入具体的数值，然后选择单位。文字的缩进和字号要保持统一。如字号为12px，像创建两个中文自的缩进效果，文字缩进就应该为18px。
二、属性值：css中的单位
1、大小单位：px和em
2、颜色单位：red和#00ff00
三、css背景
1、背景色：background-color: （5-1）
2、背景图片：background-image:url(^);（5-3）
3、背景图片的重复方式：background-repeat：（5-5）
4、背景图片的位置：background-position：top right；（30% 70%;水平位置 垂直位置）(300px 30px;)（5-8）
5、背景图片的固定与否：background-attachment：scroll；（fixed；）背景是否与网页内容一起滚动。（5-10）
fixed：背景不动，内容动；scroll：背景和内容一起滚动
6、背景图片的综合样式：background：blue url(……) no-repeat fixed 5px 10px;
7、列表样式：list-style： 参考技术A 网络之间互连的协议（IP）是Internet Protocol的外语缩写，中文缩写为“网协”.网络之间互连的协议也就是为计算机 参考技术B 页设计教程
<html>文字操作（一）
1、段落 <p>……</p>
在dreamweaver设计界面中，enter（回车）即为另起一段。
2、换行 <br/>
在dreamweaver设计界面中，shift+enter即为另起一段。
3、标题1~6 <h1>……</h1>
标题1最大，依次变小。
4、空格: 参考技术C HTML的网页到是有个人和旅游等主题追问
可以发一份给我吗？ 谢谢！
参考技术D 1．标签选择器：就是网页元素本身，所有的XHTML框架中的标签都可以作为CSS样式的选择器，如定义段落样式，我们可以选择P标签的名称，即把P作为选择器。P/*定义段落属性*/。如果定义了标签样式，则整个网页中使用了该标签都会应用这个样式。一般应用在统一文档的某个元素的显示样式中。
2．ID选择器：
它是唯一的，网页中不同的元素它的ID是不一样的。而且一个元素它只能应用一个ID。因为如果我们使用Javascript来控制网页元素的时候它是通过ID来实现的，在这种情况下就无法正常工作了。它在定义的时候用#开始，它在应用的时候用id=””。它的名称由设计者来确定。
3． 类选择：
它的名称也是由设计者来确定的，它在定义的时候用点号开始，应用的时候用class=“”；它与ID选择器所不同的是它具有一对多的特性而ID是一对一的特性。也就是说一个类选择器它可以应用到多个网页元素中而且一个元素可以应用多个类，一个元素也可以应用两个类样式，中间用空格分开，但不能是三个或者更多。在同等条件下，ID具有比class更高的优先权。
html静态网站基于动漫主题网站网页设计与实现共计10个页面——二次元漫画
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 1.HTML代码
- 2.CSS代码
- 三、个人总结
- 四、更多干货
一、网页介绍
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>主页</title>
<link rel="stylesheet" href="./css/header_config.css"/>
<link rel="stylesheet" href="css/config.css"/>
<link rel="stylesheet" href="css/main_config.css"/>
<link rel="stylesheet" href="./css/footer_config.css"/>
<!--樱花特效在线引入-->
</head>
<body style="background-image: url(img/bg/bk.png);">
<header class="site_header">
<figure class="centerbg" style="background-image: url(./img/00.jpg);height: 1080px;">
<div class="header_info">
<h1 class="header_info_title">
Hi, Althumi
</h1>
<div class="header_info_content">
<p>
<i class="fa fa-quote-left"></i>
You got to put the past behind you before you can move on.
<i class="fa fa-quote-right"></i>
</p>
<div class="shar_list">
<li id="bg_pre">
<img class="flipx" src="./img/01.jpg" style="transform: rotate(180deg);">
</li>
<li id="qq">
<img class="qq" src="./img/02.jpg">
</li>
<li id="github">
<img class="github" src="./img/03.jpg">
</li>
<li id="bilibili">
<img class="bilibili" src="./img/04.jpg">
</li>
<li id="wangyiyun">
<img class="wangyiyun" src="./img/05.jpg">
</li>
<li id="jianshu">
<img class="jianshu" src="./img/06.jpg">
</li>
<li id="zhihu">
<img class="zhihu" src="./img/01.jpg">
</li>
<li id="csdn">
<img class="csdn" src="./img/02.jpg">
</li>
<li id="bg-next">
<img src="./img/03.jpg">
</li>
</div>
</div>
</div>
</figure>
<div class="headertop-down">
<span><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
</div>
</header>
<div class="main">
<header class="main_header">
<div class="site_top">
<div class="site_branding">
<h1><a href="#" target="_self">たかぎ</a></h1>
</div>
<div class="user_head_photo">
<img src="img/01.jpg" />
<div class="user_head_photo_menu">
<div class="user_head_photo_menu_name">
Althumi
</div>
</div>
</div>
<div class="searchbox">
<i class="fa fa-search fa-2x" aria-hidden="true" style="font-size: 26px"></i>
</div>
<div class="top_nav">
<div class="lower">
<nav class="navbar" style="display: block !important;">
<ul>
<li>
<a href="./index.html" target="_self">
<i class="fa fa-fort-awesome"></i>首页
</a>
</li>
<li>
<a href="./file.html" target="_self">
<i class="fa fa-archive faa-shake" aria-hidden="true"></i>归档
</a>
</li>
<li>
<a href="./detailed_list.html" target="_self">
<i class="fa fa-list-ul faa-vertical" aria-hidden="true"></i>清单
</a>
</li>
<li>
<a href="./mood.html" target="_self">
<i class="fa fa-calendar-o faa-tada" aria-hidden="true"></i>心情
</a>
</li>
<li>
<a href="./gallery.html" target="_self">
<i class="fa fa-camera faa-flash" aria-hidden="true"></i> 画廊
</a>
</li>
<li>
<a href="./Message_Board.html" target="_self">
<i class="fa fa-pencil-square-o faa-tada" aria-hidden="true"></i>留言板
</a>
</li>
<li>
<a href="./Friends_account.html" target="_self">
<i class="fa fa-link faa-shake" aria-hidden="true"></i>友人帐
</a>
</li>
<li>
<a href="./reward.html" target="_self">
<i class="fa fa-heart faa-pulse" aria-hidden="true"></i>赞赏
</a>
</li>
<li>
<a href="./about.html" target="_self">
<i class="fa fa-leaf faa-wrench" aria-hidden="true"></i>关于
</a>
</li>
<li>
<a href="#" target="_self">
<i class="fa fa-magic" aria-hidden="true" onclick="window.alert(未开发，敬请期待)"></i>实验室
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="main_content" style="background-color: rgba(255, 255, 255, 0.8);">
<div class="notice" style="margin-top: 20px;">
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<div class="notice-content">一盏灯，一台电脑，一个人，一个传奇！</div>
</div>
<div class="top_feature">
<h1 class="tf_title" style="font-family: Ubuntu, sans-serif;">
<i class="fa fa-anchor" aria-hidden="true"></i>
<span> START:DASH!!</span>
</h1>
<div class="tf_content">
<a href="#" target="_blank">
<div class="img">
<img src="img/02.jpg"/>
</div>
<div class="info">
<h3>
【大作业日志】
</h3>
<p>
入坑前端就在今天这一天！
</p>
</div>
</a>
</div>
<div class="tf_content">
<a href="#" target="_blank">
<div class="img">
<img src="./img/03.jpg" />
</div>
<div class="info">
<h3>
【ICPC】拿牌最重要！
</h3>
<p>
每天学习算法3小时，一年拿铜，两年拿银
</p>
</div>
</a>
</div>
<div class="tf_content">
<a href="#" target="_blank">
<div class="img">
<img src="./img/04.jpg" />
</div>
<div class="info">
<h3>
【四月是你的谎言】四月はあなたの嘘です。
</h3>
<p>
好好看。555！
</p>
</div>
</a>
</div>
</div>
<div class="content_area">
<main class="site_main">
<h1 class="main_title" style="font-family: Ubuntu, sans-serif;">
<i class="fa fa-envira" aria-hidden="true"></i>发现
</h1>
<article class="post_content">
<div class="post_content_img">
<a href="#">
<img src="https://api.lixingyong.com/api/images?type=url&itype=image&kind=random" />
</a>
</div>
<div class="post_content_text">
<div class="post_date">
<i class="fa fa-clock-o" aria-hidden="true"></i>发布于2021/6/19 <i class="fa fa-fire" aria-hidden="true"></i>
</div>
<a class="post_title" href="#" target="_self">
<h3>【网页设计】二次元网站制作方法</h3>
</a>
<div class="post_meta">
<span>
<i class="fa fa-eye" aria-hidden="true"></i> 1314w热度
</span>
<span class="mid_num">
<i class="fa fa-commenting-o" aria-hidden="true"></i> 520w评论
</span>
<span>
<i class="fa fa-folder-open-o" aria-hidden="true"></i>开源项目
</span>
</div>
<div class="float_content">
<p>
学习博客框架体系Halo里的Sakura主题，能够轻松制作二次元博客网站。快人一步的体验到二次元与网页设计的结合更能充分个人对此项技能的兴趣！欧耶。
</p>
</div>
<div class="post_bottom">
<a href="#">
<i class="fa fa-ellipsis-h fa-2x" aria-hidden="true"></i>
</a>
</div>
</div>
</article>
<article class="post_content">
<div class="post_content_img">
<a href="#">
<img src="https://api.lixingyong.com/api/images?type=url&itype=image&kind=4565" />
</a>
</div>
<div class="post_content_text">
<div class="post_date">
<i class="fa fa-clock-o" aria-hidden="true"></i>发布于2021/6/19 <i class="fa fa-fire" aria-hidden="true"></i>
</div>
<a class="post_title" href="#" target="_self">
<h3>【算法】模拟退火算法的综合应用</h3>
</a>
<div class="post_meta">
<span>
<i class="fa fa-eye" aria-hidden="true"></i> 1314w热度
</span>
<span class="mid_num">
<i class="fa fa-commenting-o" aria-hidden="true"></i> 520w评论
</span>
<span>
<i class="fa fa-folder-open-o" aria-hidden="true"></i>开源项目
</span>
</div>
<div class="float_content">
<p>
模拟退火是在打OI或者是IOI赛制时，使用此算法可以骗到一点分。十分玄学。但是它本身被发现来应用其实并不是这么的局限，例如在最小圆覆盖问题中我们就要使用模拟退火才可以较高效的解决问题。当然更多应用还在文章里，快来看吧！
</p>
</div>
<div class="post_bottom">
<a href="#">
<i class="fa fa-ellipsis-h fa-2x" aria-hidden="true"></i>
</a>
</div>
</div>
</article>
<div class="pagination">
<a href="#">下一页</a>
</div>
</main>
</div>
</div>
</div>
<footer class="site_footer">
<div class="site_info">
<p class="footer_logo" style="background-image: url(img/06.jpg);"></p>
<p>此网页由Althumi花费24小时无休止的编码的做成的</p>
</div>
<div class="footer_device">
<p>感谢给与我力量的人 <i class="fa fa-vimeo animated" style="color: #e74c3c;"></i> by Kanoln <i class="fa fa-heart animated" style="color: #e74c3c;"></i> by LSNUXIAOTAO</p>
</div>
<p> </p>
</footer>
</body>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init(
"model":
jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
"scale": 1
,
"display":
"position": "left", //看板娘的表现位置
"width": 150, //小萝莉的宽度
"height": 300, //小萝莉的高度
"hOffset": 0,//小萝莉的X偏移量
"vOffset": -20//小萝莉的Y偏移量
,
"mobile":
"show": true,
"scale": 0.5
,
"react":
"opacityDefault": 0.7,//小萝莉的透明度
"opacityOnHover": 0.2
);
</script>
</html>
2.CSS代码
*
margin: 0;
padding: 0;
body
cursor: url(../img/01.jpg),auto;
font: 300 17px;
text-shadow: 0 0 1px rgb(0 0 0 / 10%);
font-size: 15px;
line-height: 1.5;
a
cursor: url(../img/02.jpg),auto;
background-color: transparent;
text-decoration: none;
a:link
color:black;
a:visited
color:black;
a:hover
color: darkorange;
a:active
color: darkorange;
img
height: auto;
max-width: 100%;
h3
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
p
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
cursor: url(../img/03.jpg),auto;
:after, :before
box-sizing: inherit;
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
以上是关于需要一份html教程的网页制作，主题是我的个人网页，的主要内容，如果未能解决你的问题，请参考以下文章
HTML5+CSS期末大作业：个人主页介绍主题——-我们的挚爱 (7页) 学生DW网页设计作业成品 大学生个人网站作业模板 简单个人网页制作
web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用