Document

HTML常用标签和CSS的运用

2024-08-06
dfer
179
html css 前端 CSDN

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>

上一篇：毕业生跟踪调查反馈系

下一篇：魔方财务新版QRus