目录
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>