使用HTML和CSS来制作一个简单的网页
- 前言
- 一、HTML
- 1.1常见元素介绍
- 1.2借助工具，浏览器开发者工具
- 二、实现个人名片
- 1.基本框架
- 2.使用CSS美化
- 1.CSS书写位置
- 1、以元素的style 属性来指定 （内联样式）
- 2、以style 标签包裹 （内部样式）
- 3、以外部文件的方式 （外部样式）
- 2.CSS中的选择器
- 1.标签选择器
- 2.id选择器
- 3.类选择器
- 4.子元素选择器
前言
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>
做的也不是太美观，但是终于使做成了。
