目录
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 {
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;
}
.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>
4172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
