HTML&CSS学习总结

最新推荐文章于 2025-03-12 23:28:03 发布

日常脱发的小迈

最新推荐文章于 2025-03-12 23:28:03 发布

阅读量1.1k

点赞数 1

文章标签： html css 学习

本文链接：https://blog.youkuaiyun.com/apple_52030329/article/details/125399887

版权

本文档详细介绍了HTML和CSS的基础知识，包括HTML的基本结构、语法规范、常用标签，如标题、段落、图像和表格；CSS的语法、选择器、常用属性，如字体、文本和背景。内容涵盖网页布局、样式控制和元素定位，是学习网页制作的入门指南。

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

第一章 HTML

一、 HTML初识

HTML是超文本标记语言（HyperText Markup Language）的缩写。是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。

二、 HTML语法

2.1 基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

2.2 语法规范

不区分大小写，但一般以大写为主
标签必须结构完整，成对出现
HTML标签可以嵌套，但不能交叉嵌套
单标签

<标签名 [属性名=属性值,...]>

成对标签

<标签名 [属性名=属性值,...]></标签名>

2.3 lang语言种类

用来定义当前文档显示的语言

en 英语
zh-CN 中文

其主要作用提示浏览器，用哪个都能显示

2.4 HTML常用标签

标题标签

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

段落标签

<p>这是一个段落</p>

文本根据浏览器窗口大小自动换行，段落段落之间有空隙

换行标签

<br />

该标签为单标签，换行不会有空隙

文本格式化标签

<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

每个标签都推荐使用前者

图像标签和路径

图像标签（单标签）

<img src="图像URL"/>

src是该标签必须属性，用于指定图像文件的路径和文件名，图片与html文件放在一个文件夹

图像标签的其他属性（属性之间加空格）

src 图片路径
alt 文本替换文本，图像不能显示的文字
title 文本提示文本，鼠标放到图像上，显示的文字
width 像素设置图像宽度
height 像素设置图像高度
border 像素设置图像的边框粗细

同级路径
下一级路径 /
上一级路径 …/

表格标签

<table border="1px" cellpadding="0px" cellspacing="0px">
    <tr>
        <th>表头一</th>
        <th>表头二</th>
        <th>表头三</th>
        <th>表头四</th>
    </tr>
    <tr>
        <td>单元格一</td>
        <td>单元格二</td>
        <td>单元格三</td>
        <td>单元格四</td>
    </tr>
</table>

列表标签

无序列表

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

有序列表

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

自定义列表

<dl>
    <dt>+</dt><dd>列表项</dd>
    <dt>+</dt><dd>列表项</dd>
    <dt>+</dt><dd>列表项</dd>
</dl>

表单标签

常见标签

标签	描述
<form>	供用户输入的表单。
<input>	输入域
<label>	<input>元素的标签，一般为输入标题。
<textarea>	文本域 (一个多行的输入控件)。
<select>	下拉选项列表。
<optgroup>	选项组。
<option>	下拉列表中的选项。
<button>	点击按钮。

超链接标签

语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像 </a>

target _self不打开新窗口（默认） _blank打开新窗口

链接分类
- 外部链接
- 内部链接直接写.html文件名
- 空连接 <a href=“#” >
- 下载链接
- 网页元素链接
- 锚点链接

注释标签

<!--  我是注释  -->

快捷键 ctrl+/

第二章 CSS

一、 css初识

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

二、基本用法

2.1 CSS语法

每个样式属性之间用分号连接，例：
color:red; 字体颜色
background-color:yellow; 背景颜色
font-size: 50px; 字号大小

1. 行内样式（内联样式）
在元素中，写style属性，在style属性中编写样式

<p style="color:red;background-color:yellow;font-size: 50px;">

只对当前元素生效，代码没有可重用性，内联样式默认优先级最高

2. 内部样式
在head标签中，编写style标签，在style标签内部，编写属性
选择器{样式声明;样式声明…}
选择器：定义页面中使用这个样式的元素条件

<head>
	<style>
		p {
			color:purple;
 			background-color: pink;
		}
	</style>
</head>

3. 外部样式
使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入

使用link标签链接

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

@import指令导入外部样式文件

<style>
	@import "CSS样式文件路径";
	@import url(CSS样式文件路径);
</style>

2.2 CSS特性

继承性
文本样式和字体样式的继承
绝大多数文本字体样式，可以被继承
a标签不会继承字体颜色
堆叠性
为一个标签定义多个样式规则
如果样式属性不冲突，都会作用到这个标签上
优先级
默认优先级
高内联样式
中内部样式，外部样式-------就近原则
低浏览器默认样式

三、选择器

3.1 基础选择器

标签选择器

使用HTML标签作为选择器的名称

以标签名作为样式应用的依据

类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据，一对一的关系

#sky{
  color: blue;
}

<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>

3.2 复杂选择器

复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

组合选择器

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注意：使用 空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行

3.3 伪类选择器

根据不同的状态显示不同的样式，一般多用于标签

四种状态：

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬浮到连接上，即移动在连接上
:active 选定的链接，被激活

3.4 伪元素选择器

:first-letter 为第一个字符的样式
:first-line 为第一行添加样式
:before 在元素内容的最前面添加的内容，需要配合content属性使用
:after 在元素内容的最后面添加的内容，需要配合content属性使用

3.5 选择器优先级

行内样式>ID选择器>类选择器>标签选择器

四、常用CSS属性

4.1 字体属性

设置字体的相关属性

属性	含义
font-size	大小、尺寸
font-weight	粗细
font-family	字体
font-style	样式
font	简写

4.2 文本属性

属性	含义	说明
color	颜色
line-height	行高	行之间的高度
text-align	水平对齐方式	取值：left、center、right
vertical-align	垂直对齐方式	取值：top、middle、bottom可以用于图片和文字的对齐方式
text-indent	首行缩进
text-decoration	文本修饰	取值：underline、overline、line-through
text-transform	字母大小写转换	取值：lowercase、uppercase、capitalize
letter-spacing	字符间距
word-spacing	单词间距	只对英文有效
white-space	空白的处理方式	文本超出后是否换行，取值：nowrap

4.3 背景属性

属性	含义
background-color	背景颜色
background-image	背景图片
background-repeat	背景图片的重复方式
background-position	背景图片的显示位置
background-attachment	背景图片是否跟随滚动
background	简写

五、盒子模型

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：

width 宽度
height 高度
border 边框
padding 内边距
margin 外边距

六、定位方式

通过position属性实现对元素的定位，有四种定位方式

常用取值：

取值	含义	说明
static	默认值	按照常规文档流进行显示
relative	相对定位	相对于标签原来的位置进行的定位
absolute	绝对定位	相对于第一个非static定位的父标签的定位
fixed	固定定位	相对于浏览器窗品进行定位