HTML+CSS初学者练习项目1：利用HTML简单标签制作《我的自我介绍》网页

最新推荐文章于 2024-08-08 15:58:05 发布
最新推荐文章于 2024-08-08 15:58:05 发布
阅读量3.7w 收藏 139
点赞数 31
分类专栏： HTML+CSS网页设计
版权声明：王迪
本文链接：https://blog.csdn.net/dnruanjian/article/details/89011238
版权
这篇博客适合HTML初学者，通过学习HTML基础标签，如图像、段落、标题和链接，制作一个简单的《自我介绍》网页。教程涵盖了使用Dreamweaver工具、<center>标签实现页面居中、<marquee>标签制作滚动文字、<hr>标签设置水平线及<a>标签制作锚点。同时强调了图像路径引用和页面元素间距的处理。在实践基础上，鼓励进一步利用<ul>或<ol>标签丰富自我介绍内容。
摘要由CSDN通过智能技术生成

适合初学者练习的HTML项目：制作一个《自我介绍》网页。

需要掌握内容：

HTML+CSS第一课：初识HTML-3个步骤创建自己的第一个html网页

HTML+CSS第二课：格式标签、图像标签、链接标签的使用

HTML+CSS第五课：使用Dreamweaver工具制作网页

 

知识点：

HTML文档基本结构、图像标签<img /> 、段落标签<p></p> 、强制换行<br />、水平线<hr />、标题标签<h1>—<h6>、更改字体样式标签<font></font>、链接标签<a></a>制作锚点

 

了解本专栏 订阅专栏 解锁全文 超级会员免费看
逍遥小丸子
关注
专栏目录
订阅专栏
HTML+CSS初学者练习项目5：利用DIV+CSS制作个人CPS网站《汽车坐垫点评网》——内容页
王迪
05-21 962
制作效果图： 制作思路： 1、页面的logo、导航条、底部版权信息，和网站首页一样，可以复制粘贴代码 2、网页内容布局拆分 3、编写html代码和css样式 制作《汽车坐垫点评网》——内容页 第一步：在DW中新建一个html文件和css，分别命名为neirong.html和neirong.css，并保存在站点文件夹中。 第二步：在neirong.html中的head标签里，链...
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
用html做自我介绍
hduugdh的博客
05-01 7386
话不多说上代码 顺便挑战一天爆肝三篇文章 <html> <head> <title>朱**</title> <mate name="keywords" content="个人简历"/> <mate name="description" content="朱**的个人简历"/> </head> <body> <table border=5 bordercolor=red align=center&g
一个简单的HTML网页 、个人主页网页设计(HTML+CSS)
最新发布
爱敲代码的卡拉米的博客
08-08 1455
计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；网页作品代码简单，可使用任意HTML编辑软件（如：D。
html自我介绍怎么弄,用html设计一个自我介绍的静态网页
weixin_39765339的博客
06-15 4245
无悔1级2016-01-11 回答 html,body{margin:0px;text-align:center;} .main{width:1000px;margin:0px auto;padding-top:30px;} .title{font-size:18px;text-decoration:underline;font-weight:bold;} .formtable{width:100...
自我介绍网页制作
a675829806的博客
03-15 8625
https://www.cnblogs.com/zhangyangguo-er/p/10539978.html 代码： 1 <!DOCTYPE html> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Smallc...
HTML结构：自我简介网页
qq_45823118的博客
03-15 1万+
自我简介网页任务描述相关知识声明文档格式：DOCTYPE根元素：HTML元素头元素：head元素网页标题元素：title元信息元素：meta编码格式：charset描述：description关键词：keywords主体元素：body元素编程要求测试说明 任务描述 本关任务是编写一个自我简介网页，你将通过本任务理解一个HTML网页的完整结构，并了解如何让搜索引擎更好的找到你的网页。 显示效果如下图所示： 为完成以上网页制作，请大家认真阅读以下相关知识。 相关知识 学习了基本的HTML网页相关概念和属性，你
html网页制作——基于HTML+CSS自我介绍网页设计与制作
12-14 5760
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
08-10
- **目标受众**: 主要是针对在校学生作为其学期末的网页设计作业使用，同时也适用于初学者或想要练习网页设计技能的人群。 #### 二、关键技术点与实现方法 ##### 1. DIV + CSS布局 - **布局概念**: DIV + CSS布局...
网页期末作业（纯html+css实现）.docx
04-26
网页设计是IT领域中一个重要的...对于初学者而言，这是一个很好的练习项目，可以帮助他们建立起网页设计的基础。同时，将作品上传至B站并分享链接，也能锻炼他们的自我表达和分享能力，以及适应互联网环境的思维方式。
自我介绍网页制作文档
08-24
运用网页制作自我介绍，适用于开始学习网页的学者，里面有训练要求，内容，课时安排，可以更好的测试自己学习的情况
个人简介的网页设计
05-27
这是一个可以改成个人简介或者是其他的多个串联网页设计 你可以试试看看能不能用上 用来交期末作业不错
html,css,javascript个人自我介绍总结网页.zip
10-31
html,css,javascript个人自我介绍总结网页.zip
html+css移动端布局，最新前端高级面试题汇总
fdsgdsgdfw的博客
04-03 616
数值越小，排列越靠前，默认为0。注意：和 z-index 不一样。十、携程网首页案例制作1. 技术选型方案：我们采取单独制作移动页面方案技术：布局采取flex布局2. 搭建相关文件夹结构3. 设置视口标签以及引入初始化样式… 与京东移动端首页制作类似。
用HTML做自我介绍
2401_82944012的博客
07-05 1730
按钮有点丑，没来的及设置，我有学会用HTML做3d立方体，不旋转，这篇结束了，敬请期待！
自我介绍的HTML 页面（入门）
omit250的博客
04-09 2936
姓名：、性别：、来自：、爱好：
设计一个自我介绍简单页面
jiangshifen的博客
02-22 3万+
1.在网页标题栏中显示“自我介绍”文本信息。 2.以1级标题的形式显示“自我介绍”文本信息。 3.以定义列表的形式介绍个人基本情况，包括姓名、性别、住址、兴趣或爱好。 4.在信息列表下面以图像的形式插入个人的头像，如果图像太大，使用width属性适当缩小图像大小。 5.以段落文本的形式显示个人简历，文本内容可酌情输入。 完整代码如下： &lt;html&gt;     &lt;head...
Html自我介绍模板
Chen_072_11的博客
03-09 7305
html自我介绍的模板
用html5 和css写一个个人介绍的网页
05-13
好的，以下是一个基础的个人介绍网页示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人介绍</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } h1 { margin: 0; font-size: 36px; } main { padding: 20px; max-width: 800px; margin: 0 auto; } img { max-width: 100%; height: auto; display: block; margin: 0 auto; margin-bottom: 20px; } h2 { font-size: 24px; margin-bottom: 10px; } p { margin: 0 0 20px; line-height: 1.5; } </style> </head> <body> <header> <h1>个人介绍</h1> </header> <main> <img src="your-image.jpg" alt="你的照片"> <h2>基本信息</h2> <p>姓名：Your Name</p> <p>性别：Male/Female</p> <p>年龄：18</p> <p>电话：+86 1234567890</p> <p>邮箱：your-email@example.com</p> <h2>个人简介</h2> <p>你可以在这里写一段简短的自我介绍，介绍你的兴趣爱好、特长、职业等等。</p> <h2>教育经历</h2> <p>你可以在这里列出你的教育经历，包括学校名称、所学专业、学位等等。</p> <h2>工作经历</h2> <p>你可以在这里列出你的工作经历，包括公司名称、职位、工作内容等等。</p> </main> </body> </html> ``` 你可以将上面的代码复制到一个文本编辑器中，将 `your-image.jpg` 替换为你的照片的文件名，然后将整个文件保存为 `.html` 文件，用浏览器打开即可看到效果。你可以根据自己的需要修改和添加内容，美化样式。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逍遥小丸子

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值