欢迎来到尧图网

客户服务关于我们

您的位置：首页 > 新闻 > 焦点 > HTML常用标签和CSS的运用，以及使用HTML做一个简历

HTML常用标签和CSS的运用，以及使用HTML做一个简历

2024/11/5 15:59:27 来源：https://blog.csdn.net/FHY26828/article/details/141005274 浏览: 次关键词：HTML常用标签和CSS的运用，以及使用HTML做一个简历

目录

1.HTML标签

1.1 文档结构标签

1.2 文本格式标签

1.3 列表标签

1.4 链接和媒体标签

1.5 表格标签

1.6 表单标签

1.7 分区和布局标签

1.8 元数据标签

2.css样式

2.1 字体样式

2.2 文本样式

2.3 背景样式

2.4 边框样式

2.5 间距样式

2.6 宽度和高度

2.7 显示和定位

2.8 浮动和清除

2.9 弹性盒模型

2.10过渡和动画

3.项目实战

3.1 html写简历

3.1.1 设计思路

3.1.2 效果图

3.1.3 代码

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。以下是一些常用的HTML标签及其用途：

1.HTML标签

1.1 文档结构标签

<html>: 定义HTML文档的根元素。
<head>: 包含文档的元数据，如标题、样式、链接等。
<title>: 定义文档的标题，在浏览器标签中显示。
<body>: 定义文档的主体内容。

<!DOCTYPE html>
<html>
<head><title>My First HTML Page</title>
</head>
<body><!-- 页面内容在这里 -->
</body>
</html>

1.2 文本格式标签

<h1> 到 <h6>: 定义HTML标题，<h1> 是最高级别标题，<h6> 是最低级别标题。
<p>: 定义段落。
<br>: 插入换行符。
<hr>: 插入水平线。
<strong>: 定义加粗文本。
<em>: 定义斜体文本。
<small>: 定义小号文本。
<blockquote>: 定义块引用。
<pre>: 定义预格式化文本。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<p>这是一个段落。</p>
<strong>这是加粗文本。</strong>
<em>这是斜体文本。</em>
<small>这是小号文本。</small>
<blockquote>这是一个块引用。</blockquote>
<pre>这是预格式化文本。保留换行和空格。
</pre>
<br>
<hr>

1.3 列表标签

<ul>: 定义无序列表。
<ol>: 定义有序列表。
<li>: 定义列表项。

<ul><li>无序列表项 1</li><li>无序列表项 2</li>
</ul>
<ol><li>有序列表项 1</li><li>有序列表项 2</li>
</ol>

1.4 链接和媒体标签

<a>: 定义超链接。
<img>: 定义图像。
<audio>: 定义音频内容。
<video>: 定义视频内容。

<a href="https://www.example.com">这是一个链接</a>
<img src="image.jpg" alt="描述图像">
<audio controls><source src="audio.mp3" type="audio/mpeg">您的浏览器不支持音频标签。
</audio>
<video controls><source src="video.mp4" type="video/mp4">您的浏览器不支持视频标签。
</video>

1.5 表格标签

<table>: 定义表格。
<tr>: 定义表格行。
<td>: 定义表格单元格。
<th>: 定义表格头单元格。
<thead>: 定义表格头部。
<tbody>: 定义表格主体。
<tfoot>: 定义表格底部。

<table><thead><tr><th>表头1</th><th>表头2</th></tr></thead><tbody><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></tbody><tfoot><tr><td>表尾1</td><td>表尾2</td></tr></tfoot>
</table>

1.6 表单标签

<form>: 定义表单。
<input>: 定义输入字段。
<textarea>: 定义多行文本输入区域。
<button>: 定义按钮。
<select>: 定义下拉列表。
<option>: 定义下拉列表中的选项。
<label>: 定义表单控件的标签。

<form action="/submit" method="post"><label for="name">姓名:</label><input type="text" id="name" name="name"><br><label for="message">消息:</label><textarea id="message" name="message"></textarea><br><label for="colors">选择颜色:</label><select id="colors" name="colors"><option value="red">红色</option><option value="green">绿色</option><option value="blue">蓝色</option></select><br><button type="submit">提交</button>
</form>

1.7 分区和布局标签

<div>: 定义文档中的分区或区域。
<span>: 定义行内区域。
<header>: 定义页面或节的头部。
<footer>: 定义页面或节的底部。
<nav>: 定义导航链接。
<article>: 定义独立的内容区域。
<section>: 定义文档中的节。
<aside>: 定义侧边栏内容。
<main>: 定义文档的主要内容。

<div><span>这是一个行内区域。</span>
</div>
<header><h1>这是头部</h1>
</header>
<footer><p>这是底部</p>
</footer>
<nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于</a></li></ul>
</nav>
<article><h2>文章标题</h2><p>文章内容。</p>
</article>
<section><h2>章节标题</h2><p>章节内容。</p>
</section>
<aside><h2>侧边栏</h2><p>侧边栏内容。</p>
</aside>
<main><h2>主要内容</h2><p>这里是主要内容。</p>
</main>

1.8 元数据标签

<meta>: 定义元数据。
<link>: 定义文档与外部资源的关系。
<style>: 定义内部样式表。
<script>: 定义客户端脚本。

<!DOCTYPE html>
<html>
<head><title>示例页面</title><meta charset="UTF-8"><meta name="description" content="这是一个HTML示例页面。"><meta name="keywords" content="HTML,示例,网页"><meta name="author" content="您的名字"><link rel="stylesheet" href="styles.css"><style>body { font-family: Arial, sans-serif; }</style><script>function greet() {alert("Hello, world!");}</script>
</head>
<body><button onclick="greet()">点击我</button>
</body>
</html>

这些标签是HTML中最常用的标签，能够满足大部分网页设计和开发的需求。不同标签有不同的属性，可以进一步自定义和控制其行为和样式。

2.css样式

用来美化html，相当于给html化妆。

2.1 字体样式

font-family: 设置字体系列。
font-size: 设置字体大小。
font-weight: 设置字体粗细。
font-style: 设置字体样式（如斜体）。

body {font-family: Arial, sans-serif;font-size: 16px;font-weight: normal;font-style: normal;
}

2.2 文本样式

color: 设置文本颜色。
text-align: 设置文本对齐方式。
text-decoration: 设置文本修饰（如下划线）。
text-transform: 设置文本转换（如大写）。

h1 {color: #333;text-align: center;text-decoration: underline;text-transform: uppercase;
}

2.3 背景样式

background-color: 设置背景颜色。
background-image: 设置背景图像。
background-repeat: 设置背景图像重复方式。
background-position: 设置背景图像位置。

body {background-color: #f0f0f0;background-image: url('background.jpg');background-repeat: no-repeat;background-position: center;
}

2.4 边框样式

border-width: 设置边框宽度。
border-style: 设置边框样式（如实线、虚线）。
border-color: 设置边框颜色。

.box {border: 2px solid #000;border-width: 1px;border-style: solid;border-color: #ccc;
}

2.5 间距样式

margin: 设置外边距。
padding: 设置内边距。

.container {margin: 20px;padding: 10px;
}

2.6 宽度和高度

width: 设置元素宽度。
height: 设置元素高度。
max-width: 设置元素最大宽度。
max-height: 设置元素最大高度。

.image {width: 100px;height: 100px;max-width: 100%;max-height: 100%;
}

2.7 显示和定位

display: 设置元素的显示类型（如块、内联）。
position: 设置元素的定位方式（如绝对定位、相对定位）。
top, right, bottom, left: 设置元素的偏移位置。

.hidden {display: none;
}
.relative {position: relative;top: 10px;left: 20px;
}
.absolute {position: absolute;top: 0;right: 0;
}

2.8 浮动和清除

float: 设置元素的浮动。
clear: 清除元素的浮动。

.left {float: left;
}
.right {float: right;
}
.clearfix::after {content: "";clear: both;display: table;
}

2.9 弹性盒模型

display: flex: 设置为弹性盒容器。
justify-content: 设置主轴对齐方式。
align-items: 设置交叉轴对齐方式。

.flex-container {display: flex;justify-content: center;align-items: center;
}

2.10过渡和动画

transition: 设置过渡效果。
animation: 设置动画效果。

.box {transition: background-color 0.3s;
}
.box:hover {background-color: #333;
}@keyframes slide {from {transform: translateX(0);}to {transform: translateX(100px);}
}
.animated {animation: slide 2s infinite;
}

3.项目实战

3.1 html写简历

3.1.1 设计思路

1. 设计目标

设计一份美观、简洁、易于阅读的个人简历网页，内容包括个人信息、求职意向、教育经历、荣誉证书、相关技能和自我评价、项目经验等等。网页应使用HTML和CSS进行布局和样式设计，并确保在各种设备上具有良好的兼容性（建议使用谷歌浏览器）。

2. 页面结构

Header 部分：包括个人照片、姓名、性别、年龄、电话和邮箱。
Section 部分：分别包含求职意向、教育经历、荣誉证书、相关技能和自我评价。

3. 主要布局与样式

布局：使用Flexbox布局来实现Header部分的水平对齐，Section部分使用常规的块级布局，每个Section之间使用虚线的水平线 (<hr>) 进行分隔。
颜色与背景：
- 整体背景使用淡灰色（#f0f0f0）来使页面更加柔和。
- Header部分背景使用绿色（#4CAF50）以突出显示重要信息，并配以白色文本。
边框与阴影：
- 外层容器 .resume 使用圆角（border-radius: 10px）和阴影（box-shadow）来提升视觉效果。
- 虚线的水平线使用CSS的 border-top: 1px dashed #ccc 实现。
字体与文本：
- 主要使用Arial字体，确保在各平台上的一致性。
- 使用不同的文本大小和颜色来区分各类信息的重要性。

4. CSS 详细设计

body：设置字体、背景颜色、外边距和内边距。
.resume：设置最大宽度、居中对齐、背景颜色、内边距、阴影和圆角。
.header：使用Flexbox布局，设置背景颜色、文本颜色、内边距和底部边框。
.header img：设置圆形头像、宽度、高度、对象适应和外边距。
.header div：使其在Flexbox布局中伸展。
.header h1 和 .header p：设置字体大小和外边距。
.section：设置外边距和字体大小。
.section h2：设置字体大小和颜色。
.section ul 和 .section ul li：设置列表样式和外边距。
.info-group：使用Flexbox布局，实现信息左右对齐。
hr：使用虚线风格的顶边框。

3.1.2 效果图

3.1.3 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简历</title><style>/* 设置整个网页的字体和背景颜色 */body {font-family: 'Arial', sans-serif;background-color: #f0f0f0;margin: 0;padding: 20px;}/* 简历的容器，设置宽度、居中、背景颜色、内边距、阴影和圆角 */.resume {max-width: 800px;margin: 0 auto;background-color: #fff;padding: 20px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-radius: 10px;}/* 头部样式，包含个人信息和头像 */.header {display: flex;align-items: center;padding-bottom: 20px;border-bottom: 2px solid #e0e0e0;background-color: skyblue; /* 头部背景颜色 */color: white; /* 字体颜色 */padding: 20px;/* border-radius: 10px 10px 0 0; 圆角样式，可以选择性添加 */}/* 头像样式，设置大小和图片裁剪模式 */.header img {/* border-radius: 50%; 圆形头像，可以选择性添加 */width: 120px;height: 120px;object-fit: cover;margin-right: 20px; /* 头像与文字之间的间距 */}/* 头部文字部分，弹性布局使其占据剩余空间 */.header div {flex-grow: 1;}/* 姓名样式 */.header h1 {margin: 0;font-size: 2.5em;}/* 其他个人信息样式 */.header p {margin: 5px 0;font-size: 1.2em;}/* 各部分之间的间距 */.section {margin-bottom: 20px;}/* 各部分标题样式 */.section h2 {display: flex;align-items: center;font-size: 1.5em;color: deepskyblue;margin-bottom: 10px;}/* 各部分标题前面的图标样式 */.section h2::before {/* content: ''; 图标可以通过设置内容来添加 */display: inline-block;width: 24px;height: 24px;background-color: deepskyblue; /* 图标背景色 */mask: url('icon.png') no-repeat center / contain; /* 图标路径 *//* margin-right: 10px; 图标与文字之间的间距 */}/* 修改每个section的顶部间距 */.section {margin-top: 40px;}/* 段落和列表的样式 */.section p,.section ul {margin: 5px 0;font-size: 1.1em;color: #555; /* 字体颜色 */}/* 列表项样式，去掉默认的列表符号和内边距 */.section ul {list-style-type: none;padding: 0;}/* 每个列表项的间距 */.section ul li {margin: 5px 0;}/* 信息组样式，使用Flexbox布局使内容两端对齐 */.info-group {display: flex;justify-content: space-between;}/* 虚线分割线样式 */hr {border: none;border-top: 1px dashed #ccc;margin: 20px 0;}</style></head><body><div class="resume"><!-- 个人信息头部 --><div class="header"><img src="1.jpg" alt="张三"><div><h1>张三</h1><p>性别：男 | 年龄：22</p><p>电话：182xxx818 | 邮箱：xxx@163.com</p></div></div><!-- 求职意向部分 --><div class="section"><h2>求职意向</h2><div class="info-group"><p>意向岗位：云服务架构师</p><p>意向城市：云南</p></div></div><hr /><!-- 教育经历部分 --><div class="section"><h2>教育经历</h2><div class="info-group"><p><strong>2023 - 2025</strong></p><p><strong>西南林业大学</strong></p></div><p>计算机科学与技术 | 本科</p><p>主要课程：数据结构、办公软件Office、网络安全、HTML5、CSS3、JavaScript、Docker容器技术、PHP、OpenStack、MySQL、Linux操作系统、网页设计、图像处理基础、Python、数据结构、C语言</p></div><hr /><!-- 荣誉证书部分 --><div class="section"><h2>荣誉证书</h2><ul><li>HCIE-Cloud Service Solutions Architect（华为认证云服务专家解决方案架构师）</li><li>HCIP-Cloud Computing（云计算高级工程师）</li><li>HCIA-5G</li><li>C1驾照</li><li>大学英语四级</li></ul></div><hr /><!-- 相关技能部分 --><div class="section"><h2>相关技能</h2><ul><li>应用程序设计、系统架构设计、大数据处理与分析、人工智能与机器学习、数据挖掘与处理、数据库管理、网络安全、云计算与虚拟化技术</li></ul></div><hr /><!-- 自我评价部分 --><div class="section"><h2>自我评价</h2><ul><li>1.能够使用 shell、powershell 进行一些运维工作。</li><li>2.能够使用 python 进行一些数据挖掘、会 django 和 flask 开发。</li><li>3.熟悉 windows 和 linux 和 windows server，企业 windows 环境部署。</li><li>4.能够编写 Dockerfile 和使用 k8s 容器技术。</li><li>5.能够使用 OpenStack 和 kvm。</li></ul></div><hr /></div></body>
</html>

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

相关资讯

热文排行

最新新闻

推荐新闻

热搜词

动态IP与静态IP的区别 OSI参考模型谷歌CEO劈柴吹了个牛，被自家员工“反诈” JAVA设计模式之【建造者模式】 transformers 框架使用详解，bert-base-chinese 运动控制直流有刷电机