前端（HTML，CSS）篇-优快云博客

本文链接：https://blog.youkuaiyun.com/shiyi52530403/article/details/143324739

前端（HTML，CSS）篇

#本文是针对初学前端快速上手掌握前段知识篇章，对各类知识点包容完善

文章目录

前端（HTML，CSS）篇

1.安装软件（HBuilder X）

#一款好的开发软件必不可少，所以我们要选择对的开发软件
#HBuilder X针对于初学者十分友好。并且免费，可以快速上手使用
#安装地址：https://www.dcloud.io/hbuilderx.html
#针对于vue，我们会切换开发软件，但是vue也适合使用HBuilder X

2.入门创建项目

#我们搭建一个简单的项目进行操作
#点击创建项目，选择基本HTML项目
#基本常识 css文件夹用来存放css文件。js文件夹用来存放js文件。img文件夹用来存放图片文件。你自己写的界面应该放在你自己创建的包下
#点击展开项目，在index.html中body标签内部书写什么都会去运行界面显示（运行快捷键 crtl+R）

在这里插入图片描述

3.基本HTML标签

## 根元素和头部信息
- **`<html>`** - 定义了整个HTML文档。
- **`<head>`** - 包含文档的元数据，如字符集声明、样式表链接等。
- **`<title>`** - 设置浏览器标签页上显示的标题。

## 文档主体
- **`<body>`** - 包含所有可见的内容，比如文本、图片等。

## 文本格式化
- **`<h1>` 到 `<h6>`** - 从最重要的到最不重要的六个级别的标题。
- **`<p>`** - 定义一个段落。
- **`<strong>` 或 `<b>`** - 渲染为粗体文本，用于强调。
- **`<em>` 或 `<i>`** - 渲染为斜体文本，用于强调。
- **`<br>`** - 插入一个换行符。
- **`<hr>`** - 创建水平线以分隔内容。

## 超链接与图像
- **`<a>`** - 创建一个超链接到另一个页面或当前页面内的位置。
- **`<img>`** - 嵌入图像。

## 列表
- **`<ul>`** - 创建无序列表（项目符号）。
- **`<ol>`** - 创建有序列表（编号）。
- **`<li>`** - 列表中的每一个项目。

## 表格
- **`<table>`** - 定义表格。
- **`<tr>`** - 定义表格中的一行。
- **`<td>`** - 定义表格中的一个单元格。
- **`<th>`** - 定义表格中的表头单元格。

## 表单
- **`<form>`** - 定义一个表单，用于收集用户输入。
- **`<input>`** - 定义一个输入字段，可以是多种类型如文本、密码、复选框等。
- **`<button>`** - 创建一个按钮。
- **`<select>` 和 `<option>`** - 创建下拉列表。
- **`<textarea>`** - 创建多行文本输入控件。

## 按钮
- **`<button>`** - 创建一个可点击的按钮。可以在`<button>`标签内添加文本或者HTML内容。

4.基本的CSS声明

#css可以在HTML里面直接书写，但为了便于管理，以及编码冗余代码，所以我们可以把css相关的单独写一个文件。这就是CSS文件
#css可以内嵌式，也可以外联式

## 基本概念
- **选择器**：用于选择需要应用样式的HTML元素。
- **声明**：由一个属性和一个值组成，定义了如何显示被选中的元素。
- **规则集**：一组或多组声明，应用于通过选择器指定的一个或多个元素。

### 选择器类型
- **元素选择器**：直接使用HTML标签名作为选择器。
- **类选择器**：以`.`开始，后面跟着类名，应用于具有特定`class`属性的元素。
- **ID选择器**：以`#`开始，后面跟着ID名，应用于具有特定`id`属性的元素。
- **通用选择器**：使用`*`，应用于所有元素。
- **后代选择器**：两个选择器之间用空格隔开，表示选择某个元素内部的所有符合条件的后代元素。
- **子选择器**：两个选择器之间用`>`连接，表示选择某个元素的所有直接子元素。

### 声明
- 属性: 值;

5.基本的CSS标签

文本样式

color - 设置文本的颜色。

p {
  color: #333; /* 十六进制颜色值 */
}

font-family - 设置文本的字体系列。
```
h1 {
  font-family: Arial, sans-serif;
}
```
font-size - 设置文本的大小。
```
p {
  font-size: 16px;
}
```
font-weight - 设置文本的粗细。
```
strong {
  font-weight: bold;
}
```
text-align - 设置文本的对齐方式。
```
h1 {
  text-align: center;
}
```
line-height - 设置行高。
```
p {
  line-height: 1.5;
}
```

text-decoration - 添加或删除文本装饰。

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

背景样式

background-color - 设置元素的背景颜色。
```
body {
  background-color: #f0f0f0;
}
```

background-image - 设置元素的背景图像。

.hero {
  background-image: url('hero.jpg');
}

background-repeat - 控制背景图像是否重复及如何重复。
```
.hero {
  background-repeat: no-repeat;
}
```
background-position - 设置背景图像的位置。
```
.hero {
  background-position: center;
}
```

盒模型

width 和 height - 设置元素的宽度和高度。
```
.box {
  width: 200px;
  height: 200px;
}
```
padding - 设置内边距。
```
.box {
  padding: 10px;
}
```
border - 设置边框。
```
.box {
  border: 1px solid #000;
}
```
margin - 设置外边距。
```
.box {
  margin: 10px;
}
```

显示与定位

display - 控制元素的显示类型。

.block {
  display: block;
}
.inline {
  display: inline;
}
.none {
  display: none;
}

position - 控制元素的定位方式。

.relative {
  position: relative;
  top: 10px;
  left: 10px;
}
.absolute {
  position: absolute;
  top: 10px;
  right: 10px;
}
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

z-index - 控制元素的堆叠顺序。
```
.overlay {
  z-index: 10;
}
```

其他常用属性

opacity - 设置元素的透明度。
```
.fade {
  opacity: 0.5;
}
```

transition - 设置过渡效果。

.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #ff0000;
}

box-shadow - 设置阴影效果。

.card {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

border-radius - 设置圆角边框。
```
.rounded {
  border-radius: 5px;
}
```

6.示例代码

#这是基本的一个html标签页，放入了外嵌式的css文件，有兴趣的可以改成内入式。（图片没有，所以你需要自己在img文件放入一个图片，并命名为demo.png)

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的网站</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
<a href="#">链接</a>
<img src="./img/demo.png" alt="图片">  
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>
<form>
  <input type="text" placeholder="输入文字...">
  <button type="submit">提交</button>
</form>
</body>
</html>

/* 根元素 */
html {
  font-family: Arial, sans-serif;
}

/* 文档标题 */
h1 {
  color: #333;
  text-align: center;
}

/* 段落 */
p {
  line-height: 1.6;
  color: #555;
}

/* 链接 */
a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* 图像 */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 列表 */
ul {
  list-style-type: square;
}

/* 表格 */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f4f4f4;
}

/* 表单 */
input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}