如何制作一个简单的网页(二)_简单的个人网页
使用HTML和CSS来制作一个简单的网页
前言
HTML负责描述了网页的整体骨架 CSS负责描述了页面样式 利用其完成一个简单的个人建立网页。
一、HTML
HTML不是一门编程语言，而是用来告知浏览器如组织页面的标记语言，搭建浏览器骨架。
HTML是由元素组成的，元素存在于各种各样的标签中 HTML 注释格式为：
<!--这里是注释 -->1.1常见元素介绍
1.标题
<!--<h1>到<h6>-->
<h1>字体大小示例</h1>
<h2>字体大小示例</h2>
<h3>字体大小示例</h3>
<h4>字体大小示例</h4>
<h5>字体大小示例</h5>
<h6>字体大小示例</h6>代表着不同大小的字体，其中h1最大，h6最小
但是也能通过CSS修改字体大小，使用font-size+大小 来进行修改
<h6 style="font-size:50px">字体大小示例</h6>
2.段落和列表
段落
<p></p>每个段落都是独占一行
列表： 无序列表 用·表示
<u1></u1>有序列表 标序号
<o1></o1>无序列表和有序列表中有列表项目
<li></li>示例 无序列表
<h1>今日菜单</h1>
<ul><li>西红柿炒鸡蛋</li>
<li>辣椒炒肉</li>
<li>水煮鱼</li>
<li>鱼香肉丝</li>
</ul>
示例 有序列表
<h1>今日菜单</h1>
<ol><li>西红柿炒鸡蛋</li>
<li>辣椒炒肉</li>
<li>水煮鱼</li>
<li>鱼香肉丝</li>
</ol>
3.超链接
<a href="https://www.csdn.net/">CSDN</a>实现CSDN链接，如果显示404就说明路径没有输对，其中地址有两种 1.完整的域名 2.相对路径（以当前文件为基准位置，然后去找到另外一个文件）
4.图片
<img src="bizhi.jpg" alt="图片加载失败">
src 后＋图片路径 alt后+（如果图片没有显示出来所打印的文字）文字成功输入的话，就是你要插入的图片，路径错误的话，就显示你输入的文字
5.块级无语义元素 组织内容的
<div></div>6.内联无语义元素
<span></span>h1,ul,ol 都是称为块级元素，独占一行 而 a span 称为行内元素，不换行
1.2借助工具，浏览器开发者工具
打开方式F12或者右键点击检查，可以在浏览器界面进行调试
二、实现个人名片
1.基本框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myid</title>
</head>
<body>
<h1>陈东升</h1>
<h3>基本信息</h3>
<img src="pyy.jpeg" alt="图片加载失败">
<h4>求职意向：Java开发工程师</h4>
<h4>联系电话：13992759999</h4>
<h4>1104248983@qq.com</h4>
<a href="http://www.csdn.net">我的博客</a>
<h3>教育背景</h3>
<ol>
<li>1.2004~2010 高新一小</li>
<li>1.2010~2013 高新一中</li>
<li>1.20013~2016 高新二中</li>
<li>1.2016~2020 西安工业大学 计算机科学与技术 </li>
</ol>
<h3>专业技能</h3>
<ul>
<li>熟悉掌握c/java语言，有良好的学习能力</li>
<li>LeetCode 300+</li>
<li>熟悉数据结构，操作系统，计算机网络等</li>
</ul>
<h3>我的项目</h3>
<h4>智能停车场</h4>
<div>开发时间2008年9月到2008年11月</div>
<div>功能介绍:智能管理停车系统，完善的体系建设,无需人工处理</div>
<h3>个人评价</h3>
<div>有良好的学习能力，希望能够进大厂工作</div>
</body>
</html>
2.使用CSS美化
1.CSS书写位置
CSS书写的位置： 主要有三种
1、以元素的style 属性来指定 （内联样式）
示例：
<h1 style="background-color: #80cbff" >陈东升</h1>2、以style 标签包裹 （内部样式）
先指定针对那些元素应用属性，选中元素后再给指定的元素设置CSS属性
<style> p{
} </style>p为选择器，先选中页面中的一个或者多个元素 括号内是针对这些被选中的元素来设置CSS属性。 使用键值对格式，键值之间使用：分割，键值对之间使用；分割
3、以外部文件的方式 （外部样式）
通过link来显示引用，并且一个HTML标签可以引用多个link 标签，即多个CSS文件
<link rel="stylesheet" href="（样式表地址）">语法是和内部样式是相同的
2.CSS中的选择器
介绍几种常用选择器
1.标签选择器
直接写标签名，表示选中该页面中所有的对应名字的元素。 但是很多时候同一个标签我们希望其拥有不同的功能~~，这时候就可以使用id选择器了
2.id选择器
先给HTML标签指定一个id的值，在通过该id 选择器选中这个元素 通过指定一个id 去选择同一标签 不同的属性 格式 #+id名 id是唯一的不能重复 由于id选择器，要求元素只能有唯一的id，如果需要一次选中多个元素，此时不能使用id选择器了，就用使用类选择器了
3.类选择器
格式：.+类名 在标签中加上 class=“类名” 类选择器可以给任意多的元素引用对应的类
4.子元素选择器
内外选择，选择加空格 能选择到内部中，搭配其他选择器使用
基本命令：
width: 600px;//设置宽度
margin:0 auto; //上下外边距为0，左右外边距为自动
background-color: #F3F3F3;//设置背景颜色
/*颜色选择有多种模式 1.color : #FFFFFF 即# 红绿蓝三色 用十六进制表示 2.color :rgb(255,255,255); //白色 全是0为黑色 3.color :rgba(255,255,255,0) a为透明度选择。一般取值为0~1 */
text-align: center;//文本居中设置
padding: 20px 0; //上下间距
padding :0 20px //左右间距
display: flex; //水平放置 已经居中显示了 ，CSS有太多属性了，去查CSS帮助手册就好了，只是完成了一些基础的改变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myid</title> <style> .container{
width: 600px;
margin:0 auto;
background-color: rgba(200,200,255,0.5);
padding: 0 30px;
}
/**在CSS中是通配符，选中所有元素*/
h1{
text-align: center;
padding: 20px;
}
.left{
}
.right{
}
.box{
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<p>
</p>
<div class="container">
<h1 >个人简历</h1>
<h3>基本信息</h3> <h3>陈东升</h3>
<div class="box">
<div class="left">
<h4>求职意向：Java开发工程师</h4>
<h4>联系电话：13992759999</h4>
<h4>1104248983@qq.com</h4>
<a href="http://www.csdn.net">我的博客</a>
</div>
<div class="right">
<img src="pyy.jpeg" alt="图片加载失败">
</div>
</div>
<h3>教育背景</h3>
<ol>
<li>1.2004~2010 高新一小</li>
<li>1.2010~2013 高新一中</li>
<li>1.20013~2016 高新二中</li>
<li>1.2016~2020 西安工业大学 计算机科学与技术 </li>
</ol>
<h3>专业技能</h3>
<ul>
<li>熟悉掌握c/java语言，有良好的学习能力</li>
<li>LeetCode 300+</li>
<li>熟悉数据结构，操作系统，计算机网络等</li>
</ul>
<h3>我的项目</h3>
<h4>智能停车场</h4>
<div>开发时间2008年9月到2008年11月</div>
<div>功能介绍:智能管理停车系统，完善的体系建设,无需人工处理</div>
<h3>个人评价</h3>
<div>有良好的学习能力，希望能够进大厂工作</div>
</div>
</body>
</html>
做的也不是太美观，但是终于使做成了。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/183421.html原文链接：https://javaforall.cn
腾讯云开发者
