使用HTML和CSS创建简单的主页简介： HTML1.1常见元素介绍1.2工具、浏览器开发工具2、个人名片实现1 .基本框架2 .使用CSS美化位置1.CSS书写1、元素stts
前言HTML说明了网页的整体骨架
CSS负责页面样式的说明
利用它完成简单的个人制作页面。
另一方面，HTML HTML不是编程语言，而是用于通知浏览器组织页面的标记语言，构建浏览器的骨架。
HTML由元素组成，元素存在于各种标记中。 HTML注释格式如下：
！ -这里是评论-- 1.1常见元素介绍1 .标题
！ -h1到h6--h1字体大小示例/h1h2字体大小示例/h2h3字体大小示例/h3h4字体大小示例/h4h5字体大小示例/h5h6字体大小示例/h6表示不同大小的字体，其中hh
但是，也可以在CSS中修改字体大小，然后用字体大小进行修改
h6 style='font-size:50px '字体大小示例/h6
2 .段落和清单
段落
p/p每段独占一行
列表：
无序列表用表示
u1/u1订单列表标签编号
o1/o1无序列表和有序列表中有列表项目
沥/沥示例无序列表
h1今天的菜单/h1ulli西红柿炒蛋/li li辣椒炒肉/li li水煮鱼/li li鱼香肉丝/li/ul
有序列表示例
h1今天的菜单/h1olli西红柿炒蛋/li li辣椒炒肉/li li水煮鱼/li li鱼香肉丝/li/ol
3 .超链接
a href=' https://www.csdn.net/' csdn/a 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 .实现基本框架！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title myid/title/headbodyh 1陈东升/h1h3基本信息/h3img src=' pyy.jpet h4h 41104248983 @ QQ.com/h4a href=' http://www.csdn.net '我的博客/ah3教育背景/h3ol li1.2004~2010的小高科技/line
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书写的位置：
主要有三种
示例：
<h1 style="background-color: #80cbff" >陈东升</h1> 2、以style 标签包裹 （内部样式）先指定针对那些元素应用属性，选中元素后再给指定的元素设置CSS属性
<style> p{ } </style>p为选择器，先选中页面中的一个或者多个元素
括号内是针对这些被选中的元素来设置CSS属性。
使用键值对格式，键值之间使用：分割，键值对之间使用；分割
通过link来显示引用，并且一个HTML标签可以引用多个link 标签，即多个CSS文件
<link rel="stylesheet" rel="external nofollow" href="（样式表地址）">语法是和内部样式是相同的
2.CSS中的选择器介绍几种常用选择器
1.标签选择器直接写标签名，表示选中该页面中所有的对应名字的元素。
但是很多时候同一个标签我们希望其拥有不同的功能~~，这时候就可以使用id选择器了
先给HTML标签指定一个id的值，在通过该id 选择器选中这个元素
通过指定一个id 去选择同一标签 不同的属性
格式 #+id名 id是唯一的不能重复
由于id选择器，要求元素只能有唯一的id，如果需要一次选中多个元素，此时不能使用id选择器了，就用使用类选择器了
格式：.+类名
在标签中加上 class=“类名”
类选择器可以给任意多的元素引用对应的类
内外选择，选择加空格 能选择到内部中，搭配其他选择器使用
基本命令：
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 rel="external nofollow" 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>
做的也不是太美观，但是终于使做成了。