HTML+CSS基础教程与常用技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/Angletank/article/details/108287204

这篇笔记详细介绍了HTML的基础语法，包括标签、整体结构和常见标签的使用，如标题、段落、图片和表格等。同时，还涵盖了CSS的基本使用，包括选择器、属性设置，如背景、文本和字体样式，以及浮动、定位等概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML（超文本标记语言）

可以显示除文字以外的内容元素，图片、链接、音乐、视频等。

1 基础语法

1.1标签

1.1.1单标签

<br/><hr/>

1.1.2单标签属性

<hr width="800" />

1.1.3双标签

…

1.1.4双标签属性

<body bgcolor="red">…</body> 

<font size="7"></font>

2 整体结构

通常⼀个HTML⽹⻚⽂件包含3个部分：

标记头区 <HEAD>......</HEAD> 

内容区 <BODY>......</BODY> 

⽹⻚区 <HTML>......</HTML>

DOCTYPE ⽂档中超⽂本标记语⾔的类型，可告知浏览器怎么解析该⽂档。（必须声明）

<html> 

<head></head> 

<body></body>

</html>

<DOCTYPE html> 

<html>

 <head>

 <meta charset="UTF-8">

 <title>HTML⽂档的基本结构</title>

 <script></script>

 <link rel="stylesheet" type="text/css" href=""/>

 <style></style>

 </head>

 <body>

 </body>

</html>

3 常⽤标签

标题、⽔平线、段落、换⾏、图⽚、表格、

超链接、列表、表单、下拉列表、div 和 span

3.1 标题

<h1></h1>

3.2 ⽔平线

<hr />

在这里插入图片描述

3.3段落和换⾏

段落

<p></p>

在这里插入图片描述

换⾏

<br/>

3.4列表

无序标签

<ul>

 <li></li>

 <li></li>

 ......

</ul>

在这里插入图片描述

有序列表

<ol>

 <li></li>

 <li></li>

 ......

</ol>

在这里插入图片描述

3.5div和span

div

<div>content</div>

在这里插入图片描述

span

签

2.2.5.1. font

规定⽂本的字体、字体尺⼨、字体颜⾊

2.2.5.2. pre

定义预格式化的⽂本。被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽

字体

2.2.5.3. ⽂本标签

<div>content</div>

span标签被⽤来组合⽂档中的⾏内元素

<span>content</span>

3.6 格式化标签

font 规定⽂本的字体、字体尺⼨、字体颜⾊

pre 定义预格式化的⽂本

⽂本标签

b（粗⽂本）、i（斜体⽂本）、u（下划线⽂本）、

del （中划线⽂本）、sub（下标⽂本）、sup（上标⽂本）

3.7 a标签

a标签定义超链接，⽤于从⼀张⻚⾯链接到另⼀张⻚⾯。

<a href="http://www.baidu.com">百度</a>

在这里插入图片描述

3.8 锚点的实现

利⽤a标签的name属性：

⼀般标签的id属性：div id=""、a id="" 等：

锚点定位

<a href="http://www.baidu.com">百度</a>

<a name="top"></a>

<div id="top"></div>、<a id="top"></a>

<a href="#top">返回⾸部</a>

3.9图⽚

img 元素向⽹⻚中嵌⼊⼀幅图像。

<img src="" alt="" >

在这里插入图片描述

3.10表格

table 标签定义 HTML表格。

tr 标签定义表格的⾏。tr元素包含⼀个或多个th或td元素

td 标签定义 HTML 表格中的标准单元格。

在这里插入图片描述

td 的colspan和rowspan分别规定单元格横跨的列数和⾏数

3.11表单

form 标签⽤于为⽤户输⼊创建 HTML 表单。

表单能够包含 input 元素，⽐如⽂本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。

表单⽤于向服务器传输数据。form 元素是块级元素，其前后会产⽣折⾏。
在这里插入图片描述

method：表单提交⽅式：get、post

get：默认，主动的获取⽅式，数据放在url上，数据的容量有限，安全性差，有缓存

post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存

input 标签⽤于搜集⽤户信息。

根据不同的 type 属性值，输⼊字段拥有很多种形式。输⼊字段可以是⽂本字段、复选框、单选按钮、按钮等等。
在这里插入图片描述

若上传⽂件，请求⽅式为post，且表单添加⼀个属性:enctype=“multipart/form-data”

注意：

\1. 没有name属性的属性是⽆法提交到后台的！！！！

\2. Radio单选按钮以name相同为⼀组。

\3. Checkbox复选按钮以name相同为⼀组。

3.12textarea

该标签定义多⾏的⽂本输⼊控件。⽂本区中可容纳⽆限数量的⽂本，可以通过 cols 和 rows 属性来规定 textarea 的尺⼨。cols规定⽂本区内的可⻅宽度。rows规定⽂本区内的可⻅⾏数。

<textarea>content</textarea>

3.13label

<label for="username">⽤户名：</label> <input type="text" id="username" name="username"/>

3.14button

<button>按钮</button>

3.15select

<select name="color" >
 <option value="red">红⾊</option>
 <option value="green">绿⾊</option>
 <option value="blue">蓝⾊</option>
</select>

3.16常⽤字符实体

3.17标签的分类

块级元素

⾏内元素

⾏内块状元素

CSS

CSS（英⽂全称：Cascading Style Sheets）层叠样式表, 是⼀种⽤来表现HTML（标准通⽤标记语⾔的⼀个应⽤）或XML（标准通⽤标记语⾔的⼀个⼦集）等⽂件样式的计算机语⾔。

CSS是⽤来美化⽹⻚⽤的，没有⽹⻚则CSS毫⽆⽤处，所以CSS需要依赖HTML展示其功能。

3.1CSS的基本使⽤；

3.1.1 CSS基本语法

选择器名 {
 属性 : 属性值;
 ......
}
div {
 background-color : red; }

注意：

\1. css声明要以分号;结束，声明以{}括起来

\2. 建议⼀⾏书写⼀个属性

\3. 若值为若⼲单词，则要给值加引号，如 font-family: “agency fb”;

3.1.2注释

/* 这⾥的内容就是注释 */

3.1.3CSS的使⽤

⾏内式

<p style="color:red;font-size:50px;">这是⼀段⽂本</p>

在当前元素使⽤ style 属性的声明⽅式。

style 是⾏内样式属性；

font-size是字体⼤⼩属性；50px 是字体⼤⼩属性值

3.1.4 嵌⼊式

嵌⼊式通过在html⻚⾯内容开辟⼀段属于css的代码区域，通常做法为在 head 标签中嵌套 style标签，在 style 中通过选择器的⽅式调⽤指定的元素并设置相关 CSS。

<style type="text/css">p {color: blue;font-size: 40px;}</style>

3.1.5引⼊外联样式⽂件

在实际开发当中，很多时候都使⽤引⼊外联样式⽂件，这种形式可以使html⻚⾯更加清晰，⽽且可以达到更好的重⽤效果。

style.css

p {
 color: green;
 font-size: 30px; }

test.html

<link rel="stylesheet" type="text/css" href="style.css">

rel:rel 属性规定当前⽂档与被链接⽂档之间的关系。

stylesheet:⽂档的外部样式表。

很多时候，⼤量的 HTML ⻚⾯使⽤了同⼀个CSS。那么就可以将这些 CSS 样式保存在⼀个单独的.css ⽂件中，然后通过 link 元素去引⼊它。

注意：当有多重样式时，记住前提规则，越精确越优先。

3.2CSS选择器

3.2.1基本选择器

3.2.1.1. 通⽤选择器

* {
 ......
}

3.2.1.2元素选择器

p {
 color: red;
 font-size: 20px; }

3.2.1.3ID选择器

选择设置过指定id属性值的元素 #

#id属性值 {
 ......
}

3.2.1.4. 类选择器

.class属性值 {
 ......
}

3.2.1.5. 分组选择器

当⼏个元素样式属性⼀样时，可以共同调⽤⼀个声明，元素之间⽤逗号分隔

选择器1,选择器2,... {
 ......
}

CSS样式的优先级，是根据选择器的精确度/权重来决定的，常⻅的权重如下，权重越⼤，优先级越⾼

元素选择器：1

类选择器：10

id选择器：100

内联样式：1000

3.2.2. 组合选择器

CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合⽅式。

在 CSS 中包含了四种组合⽅式:

后代选取器(以空格分隔)，

⼦元素选择器(以⼤于号分隔），

相邻兄弟选择器（以加号分隔），

普通兄弟选择器（以波浪线分隔）。

3.2.2.1. 后代选择器（派⽣选择器）

选择器1 选择器2 {
 ......
}
.food li {
 border: 1px solid red;
 }

3.2.2.2. ⼦元素选择器

选择器1 + 选择器2 {
 ......
}
#d + div {
 border: 1px solid red;
 }

3.2.2.3. 相邻兄弟选择器

可选择紧接在另⼀元素后的元素，且⼆者有相同⽗元素。以加号分隔

选择器1 + 选择器2 {
 ......
}
#d + div {
 border: 1px solid red; 
}

3.2.2.4. 普通兄弟选择器

选择紧接在另⼀个元素后的所有元素，⽽且⼆者有相同的⽗元素，以波浪线分隔

选择器1 ~ 选择器2 {
 ......
}
li ~ li {
 background-color : yellow;
}

3.3. CSS常⽤属性设置

3.3.1. 背景

3.3.1.1. background-color设置元素的背景颜⾊

3.3.1.2. background-image设置元素的背景图像，默认情况下，背景图像进⾏平铺重复显示，以覆盖整个元素实体。

3.3.1.3. background-repeat设置是否及如何重复背景图像

3.3.2. ⽂本

3.3.2.1. color

3.3.2.2. text-align设置⽂本对⻬⽅式，center（居中），left（左对⻬），right（右对⻬）

3.3.2.3. text-decoration规定添加到⽂本的修饰，属性值：none、underline、overline、line-through

3.3.3. 字体

3.3.3.1. font-family⽂本字体，该属性设置⽂本的字体。

3.3.3.2. font-size⽂本⼤⼩

3.3.3.3. font-style字体⻛格，该属性最常⽤于规定斜体⽂本。属性值：normal、italic、oblique

3.3.3.4. font-weight 字体加粗，该属性设置⽂本的粗细 100 ~ 900

3.3.4. 对⻬⽅式

3.3.4.1. text-align规定元素中的⽂本的⽔平对⻬⽅式

3.3.5. display属性

display 属性规定元素应该⽣成的框的类型。这个属性⽤于定义建⽴布局时元素⽣成的显示框类型。

3.3.6. 浮动

float的属性值有none、left、right。

3.3.7. 盒⼦模型

border、padding、margin三个属性构成了盒⼦模型。

3.3.7.1. border设置所有的边框属性。

3.3.7.2. padding设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

3.3.7.3. margin设置⼀个元素所有外边距的宽度，或者设置各边上外边距的宽度。

3.3.8 CSS的position之absolute、fixed和relative区别

static 默认值

默认值，没有定位，元素出现在正常的流中，即忽略 top, bottom, left, right 或者 z-index 声明

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

特征：脱离正常流

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

特征：脱离正常流

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，“left: 20” 会向元素的 left 位置添加 20 像素。

特征：不会脱离正常流

absolute与fixed

共同点	1、都会改变行内元素（inline）的呈现方式，display会被设置为block2、都会让元素脱离正常流，不占据空间3、默认都会覆盖在非定位元素之上，也可通过z-index声明调整覆盖顺序
不同点	1、absolute的根元素是可以设置的；而fixed的根元素固定为当前窗口（应用）2、（常用）当你滚动时，fixed元素与窗口（应用）之间的距离是不变的