前端开发入门:HTML、CSS、JavaScript基础
发布时间: 2023-12-17 11:51:19 阅读量: 14 订阅数: 14
## 章节一:HTML基础
### 1.1 什么是HTML
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。它由一系列的元素(tag)组成,这些元素可以结构化文档的内容,并为其添加语义和样式。
### 1.2 HTML基本结构
一个HTML文档的基本结构通常包含以下几个部分:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
```
- `<!DOCTYPE html>`:指定文档的类型,这是HTML5的标准声明。
- `<html>`:定义HTML文档的根元素。
- `<head>`:包含了关于文档的元数据和其他资源的引用。
- `<title>`:设置网页的标题,将显示在浏览器的标题栏中。
- `<body>`:包含了实际的网页内容。
### 1.3 HTML标签和元素
HTML标签是在尖括号中的名称,如`<p>`表示段落,`<h1>`表示一级标题等。标签通常成对出现,有一个起始标签和一个结束标签。
```html
<p>这是一个段落。</p>
<h1>这是一级标题</h1>
```
在一些情况下,一些标签是没有结束标签的,这些标签被称为**自闭合标签**。例如,`<img>`标签用于插入图像,没有结束标签。
```html
<img src="image.jpg" alt="图像">
```
HTML标签与元素的区别在于,元素是一个标签及其内容的组合。
### 1.4 HTML常用标签介绍
HTML标签有很多种类,其中一些常用的标签包括:
- `<h1>` - `<h6>`:定义标题,从一级标题到六级标题。
- `<p>`:定义段落。
- `<a>`:定义超链接。
- `<img>`:用于插入图像。
- `<ul>`和`<li>`:分别定义无序列表和列表项。
- `<table>`、`<tr>`和`<td>`:用于创建表格。
- `<div>`和`<span>`:用于分组和样式化其他元素。
以上只是一些常用的HTML标签,实际上HTML标签很多,不同的标签具有不同的功能和属性。在后续的学习中,还会进一步了解和应用其他标签。
### 章节二:CSS基础
在前端开发中,CSS(层叠样式表)用于控制网页的样式和布局,使网页更加美观和易于理解。本章将介绍CSS的基础知识和常见应用。
#### 2.1 什么是CSS
CSS是一种样式表语言,用于描述和定义网页上的元素样式。通过CSS,我们可以控制网页的字体、颜色、边距、布局等各种样式属性。
#### 2.2 CSS样式的三种应用方式
CSS样式有三种应用方式:内联样式、内部样式表和外部样式表。
- 内联样式:直接在HTML标签的"style"属性中指定样式。例如:
```html
<p style="color: red; font-size: 18px;">这是一段红色的文字。</p>
```
- 内部样式表:在HTML文件内部使用`<style>`标签定义样式。例如:
```html
<style>
p {
color: red;
font-size: 18px;
}
</style>
```
- 外部样式表:将CSS代码写在一个独立的外部文件中,通过在HTML文件中使用`<link>`标签引入。例如:
```html
<link rel="stylesheet" href="styles.css">
```
其中,"styles.css"为外部样式表文件的路径。
#### 2.3 CSS选择器
在CSS中,我们使用选择器来选择要应用样式的HTML元素。常见的选择器有以下几种:
- 元素选择器:通过元素名称选择HTML元素。例如:
```css
p {
color: red;
}
```
- 类选择器:通过类名选择HTML元素。首先,在HTML标签的"class"属性中指定类名,然后使用"."加类名作为选择器。例如:
```html
<p class="highlight">这是一个有高亮效果的段落。</p>
```
```css
.highlight {
background-color: yellow;
}
```
- ID选择器:通过ID选择HTML元素。在HTML标签中指定"id"属性,然后使用"#"加ID名作为选择器。例如:
```html
<p id="myParagraph">这是一个有特殊样式的段落。</p>
```
```css
#myParagraph {
font-weight: bold;
}
```
#### 2.4 布局与盒模型概述
在网页设计中,布局是一项重要的任务。CSS提供了各种布局和定位技术,可以实现不同的页面布局效果。
在CSS中,每个元素都可以看作是一个盒子,这种盒子模型决定了元素在页面中的布局和定位。盒模型包含内容区域、填充区域、边框区域和外边距区域。
- 内容区域:盒子内部显示的内容,如文本、图片等。
- 填充区域:内容区域与边框之间的空白区域,用于控制内容与边框之间的距离。
- 边框区域:填充区域与外边距之间的区域,用于显示元素的边框样式。
- 外边距区域:盒子与其他元素之间的空白区域,用于控制盒子与其他元素的距离。
通过设置这些属性,我们可以控制元素的大小、边距、背景颜色等。
这是一个简单的例子,演示了如何使用CSS样式控制元素的布局和外观:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS样式示例</title>
<style>
/* 元素选择器 */
p {
color: red;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#myParagraph {
font-weight: bold;
}
/* 盒模型样式 */
.box {
width: 200px;
height: 100px;
padding: 20px;
border:
```
0
0