HTML CSS 简要-优快云博客

本文链接：https://blog.youkuaiyun.com/Ggwhite/article/details/122893180

本文介绍了HTML和CSS的基础知识，包括网页的构成、HTML标签的分类和常见用途，如标题、段落、图像和链接。同时阐述了CSS在美化和布局页面中的作用，以及选择器、字体属性、文本属性等基本概念。还提及了盒子模型和CSS引入方式，强调了遵循Web标准的重要性。

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

前言

1、什么是网页？

网站是在符合因特网的规则的基础上，使用html展示内容的网页集合。

网页是一个网站的展示，通常是html格式的文件，他需要浏览器来展示

网页是构成网站的基本元素，它通常由视频，链接，文字声音视频等元素构成组成。通常看到的网页的文件，常常以.HTML/. html为后缀结尾。因此俗称HTML文件。

2、什么是HTML？

（1）H5是一门技术的总称。

（2）H5是HTML的第5个版本。

3、Web标准？

是由W3C组织和其他标准化组织制定的一系列标准的总和。W3C（万维网联盟）是国际最著名的标准化组织。

构成主要包括结构、表现、行为三个方面

主要指的是html、css、javascript.

4、为什么要遵循Web标准？

（1）是由最权威的组织制定的

（2）浏览器不同，展示的页面排版也会不同。所以我们需要遵循Web标准达到统一，实现一样的展示页面。

（3）因为他有很多优点。比如提高效率，易于维护、提高浏览速度等等。

一、HTML标签

1、HTML标签分为单标签和双标签

双标签可以分为两类：包含关系和并列关系

举例：

(1)单标签<br/>

(2)双标签<div></div>

<head>

</head>

(3)包含关系<head></head>包含<title></title>

<div>

<p></p>

</div>

(4)并列关系

<p></p>和<span></span>并列

2、常用标签

（1）

<h1>-<h6>标题标签

<p></p>段落标签

</br>换行标签

（2）文本格式化标签

<strong></stong>或<b></b>加粗

<em></em>或<i></I>倾斜

<del></del>或<s></s>删除

<ins></ins>或<u></u>下划线

注：strong\ em\del\ins 更加强烈

(3）特殊标签

<div></div>竖着排放，独占一行“大盒子”

<span></span>横着布局，一行可以放多个“小盒子”

zhu：用来布局网页，当“盒子”用，表示“分割，无具体意义”

（4）图像标签和路径

<img src="图片名称+扩展名"> 同级

<img src="所在文件夹+图片名称+扩展名> 下级

<img src="../+图片名称＋扩展名"> 上级

注：

🙂一级一个../

🙂路径相对路径和绝对路径

相对路径分为上级、同级和下级

绝对路径直接复制文件的所在地址

🙂图像标签后面可以跟的属性：

src 路径*必须的属性

alt图片不显示时出现的提示文字

title鼠标悬停在图片出现的提示文字

width图片的宽度

height图片的高度

（5）超链接标签

分为内部链接和外部链接

从一个页面跳转到另一个页面

<a href="#">空链接

后面可以跟的属性：target：-self默认值，-blank新窗口打开

（6）注释标签

ctrl+斜杠/

（6）特殊标签

空格 &nbsp；

版权&copy；

商标&reg；

（7）表格标签

<table>

<tr> 行的意思

<td>单元格中的文字

</tr>

</table>

（8）列表标签

无序列表：

<ul>

</ul>

type后面可以跟的属性：disc默认、square前面的小方点、circle前面的小圆点、none前面没有（没有符号去除符号

有序列表：

<ol>

</ol>

后面可以跟的属性：start 后面跟的数字 type后面跟的数字

自定义标签：

<dl>

</dl>

（9）表单标签

<form> 后面可以家的属性是action提交地址 name 名字 method 提交方式默认get 还有post

</form>

placeholder 文本框的文字说明

value 请输入文本

二、CSS

1、什么是css

css是层叠样式表的简称，是美化、布局页面的，美化html

2、选择器分类

基础选择器和复合选择器两类

基础选择器分为标签选择器（标签名）、类选择器（clss）、id选择器（id）、通配符选择器（*{}）

复合选择器：后代选择器（空格）、子选择器（>)、并集选择器（，）、伪类选择器（：）

3、字体属性

<font-famliy>字体

<font-size>字体大小

<font-weight>字体加粗加粗是bold/700，不加粗是normal/400 不加danwei

<font-style>字体样式 italic 倾斜 normal 不倾斜

4、文本属性

color 颜色

text aline 对齐文本 center居中 left 左边 right 右边

text decoration 文本修饰 none默认 underline 下划线 overline上划线 line-through删除线

text indent 文本缩进通常是首行缩进

line-height 行间距也叫行高

5、引入方式

行内式

内部式

外部式<link rel="stylesheet " href=“文件路径”>

6、元素分为块元素和行内元素

块元素：一行一个

行内元素：一行多个

互相转化：

display：block 行内转化为块

display:inline 块转成行内

display:inline-block 转化成行内块

7、背景属性

background-color颜色 transparent 透明的

background-image背景图片 url（图片地址）；

background-repeat背景平铺

background-position 背景位置后面可以跟两个属性（center top）

background-attachment背景固定 fixed 固定 scroll默认滚动

8、背景半透明

rgba 取值范围0-1

9、css的三大特性：

层叠性、继承性、优先性

优先级权重

10、盒子模型

包括：边框、外边距、内边距、实际内容

边框（border）

border-width

border-color

border-style solid 实线 dashed虚线

边框的复合写法：border：1px solid red（不分顺序）

分开写边框

border-top：border-left：border-right：border-bottom：

表格的细线边框

border-collapse 表示相邻的边框会合并在一起

内边距（padding）

padding-top上内边距

padding-bottom下内边距

padding-right右内边距

padding-left左内边距

外边距（margin）

margin-top

margin-bottom

margin-left

margin-right

属性auto