HTML和CSS基础
学习一些基本的前端知识
一些背景知识
- HTML — Huper Text Markup Language
- 不是编程语言，不包含逻辑
- 首页HTML文件一般是index.html
页面语法与页面结构
- 基础语法
<tagname>content</tagname>- 页面结构
VScode里惊叹号+Tab补全自动生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>各标签的使用示例
<!DOCTYPE html>
<!-- 指定文档类型为 HTML5 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 入门示例</title>
<!-- 页面标题 -->
</head>
<body>
<!-- 页面主体内容 -->
<!-- 标题标签，从 h1 到 h6，字体大小依次减小 -->
<h1>这是一个 h1 标题</h1>
<h2>这是一个 h2 标题</h2>
<h3>这是一个 h3 标题</h3>
<h4>这是一个 h4 标题</h4>
<h5>这是一个 h5 标题</h5>
<h6>这是一个 h6 标题</h6>
<!-- 段落标签 -->
<p>这是一个段落，它包含了一些文本内容。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus laudantium a id nihil
accusantium doloremque perspiciatis? Modi asperiores quos, voluptatum provident a error ducimus nobis, neque,
iste nisi reprehenderit consequuntur?</p>
<!-- 强调文本 -->
<p><strong>这段文本被加粗显示。</strong></p>
<p><em>这段文本以斜体显示。</em></p>
<!-- 水平线 -->
<hr>
<!-- 链接标签 -->
<a href="https://www.baidu.com" target="_blank">访问百度</a>
<!-- 图片标签 -->
<img src="https://cdn.jsdelivr.net/gh/ShiHantian/image_host@main/blog/index-2024-01-08-02-00-01.jpg"
alt="示例图片"
width="150"
height="150">
<!-- 无序列表 -->
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<!-- 表格 -->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>zhangsan@example.com</td>
<td>22</td>
</tr>
<tr>
<td>李四</td>
<td>lisi@example.com</td>
<td>33</td>
</tr>
</tbody>
</table>
<br>
<!-- 表单 -->
<form>
<label>姓名：</label>
<input type="text" id="name" name="name">
<br>
<br>
<label>邮箱：</label>
<input type="email" id="email" name="email">
<br>
<br>
<label>信息：</label>
<textarea></textarea>
<br>
<br>
<label>性别：</label>
<select>
<option value="male">男</option>
<option value="female">女</option>
</select>
<br>
<br>
<input type="submit" value="提交">
</form>
<br>
<!-- 按钮 -->
<button type="button" onclick="alert('你点击了按钮！')">点我</button>
</body>
</html>效果：
![[CS]HTML基础-2024-01-08-02-19-55](https://cdn.jsdelivr.net/gh/ShiHantian/image_host@main/blog/[CS]HTML基础-2024-01-08-02-19-55.png)
![[CS]HTML基础-2024-01-08-02-07-55](https://cdn.jsdelivr.net/gh/ShiHantian/image_host@main/blog/[CS]HTML基础-2024-01-08-02-07-55.png)
![[CS]HTML基础-2024-01-08-02-08-33](https://cdn.jsdelivr.net/gh/ShiHantian/image_host@main/blog/[CS]HTML基础-2024-01-08-02-08-33.png)
CSS基础
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage Layout</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
width: 100%;
display: flex;
height: 100%;
}
.sidebar {
width: 50%;
display: flex;
flex-direction: column;
padding-top: 150px;
padding-bottom: 15px;
padding-left: 200px;
padding-right: 50px;
height: 100vh;
}
.content-area {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
margin-top: 5cm;
}
.buttons-container {
display: flex;
justify-content: flex-start;
margin: 20px 0;
}
.button {
margin: 0 10px;
padding: 10px 20px;
background-color: #431ec6;
border: none;
border-radius: 10px;
color: white;
text-decoration: none;
}
.logo-placeholder {
width: 100px;
height: 50px;
background-color: #f0f0f0;
margin-bottom: 20px;
}
.header {
text-align: left;
margin-bottom: 20px;
font-size: 50px;
}
.color-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 15vh;
background-color: #431ec6;
}
.rounded-image {
width: 100%;
border-radius: 20px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="logo-placeholder"></div>
<h1 class="header">基于 Unreal Engine和大语言模型的<br>老年人陪伴监护系统</h1>
<div class="buttons-container">
<a class="button" href="page-1.html">老人状态</a>
<a class="button" href="#">历史信息</a>
<a class="button" href="#">设置</a>
</div>
</div>
<div class="content-area">
<video width="600" height="400" controls autoplay loop>
<source src="./images/metahuman_movement.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="color-bar"></div>
</body>
</html>References
- Archimesons【二十分钟HTML快速入门 | 无废话且清晰流畅 | 手敲键盘 | WEB前端必备语言~】https://www.bilibili.com/video/BV1jf4y1J7Ms?p=11&vd_source=f671f1b6833c9583d743a34ae84c4110
- W3school HTML/CSS