我的HTML笔记一917

最新推荐文章于 2025-08-20 14:01:41 发布

转载最新推荐文章于 2025-08-20 14:01:41 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/GodLin/p/3978087.html

文章标签：

#人工智能

本文介绍了HTML和CSS的基础知识，包括HTML的结构、CSS的基本功能、容器标签的使用、样式设置的方法、样式优先级规则、常见选择器及样式应用，以及CSS经典边框样式和盒子模型的概念。

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

HTML笔记

HTML超文本标记语言(HyperText Markup Language)

<html>

<head>

这是第一个网站

</tiltle>

</head>

<body>

</body>

</html>

CSS(cascading style sheets)层叠样式表

功能：为页面元素提供颜色大小布局等效果的支持

可以设置的样式：

文本样式图片样式背景样式列表与表格样式布局样式

容器标签

div标签 (块级元素）影响布局

span标签（行级元素）不影响布局

容器设置数据样式的分类

1、行内样式直接写在标签中，使用style属性注意样式也是键值对，使用：分隔，各个样式用；分开样式语法样式属性：值

2、内嵌样式一般页面中使用样式的地方非常多，如果希望通过一个统一的设定，然后让所有具有某个特征的元素都具有该样式，那么就可以使用内嵌样式语法如下

样式如

Border:1px;

}

</style>

3、外部样式

一般一个页面需要统一的页面风格，可以考虑使用同一个CSS样式，那么可以单独写一个CSS文件，然后使用link标签将其引入到页面中

经典的边框的样式是边框

Bodrder:1px solid red;

使用1个像素宽度的红色实线

实线： solid

虚线：dashed

电线：dotted

样式的优先级

就近原则和专一原则（HTML是从上之下从左至右执行）

常用的选择器

基本选择器

ID选择器

#id

{

样式

}

类选择器

.class

{

样式

}

标签选择器

{

样式

}

通用选择器

{

样式

}

复合选择器

子代选择器

父代>子代

{

样式

}

后代选择器

祖代后代

{

样式

}

标签类选择器

标签名.类名

{

样式注意：带有该类样式的标签才能使用该样式，其他的带有该样式的标签不具备该样式

}

组合选择器

选择器，选择器，选择器

{

样式

}

常用样式

文本样式

Font-size:10px;

Font-weight:bold;

Font-family:华文行楷;

Color:#ff0000;

Text-decoration:underline | overline | line-through

Text-align:left |cemter| right

Line- height: 标准行高的倍数|像素

盒子模型

在页面中的所有内容都是盒子

页面上的元素就是盒子堆砌的结果

图片样式

边框与宽度

图片元素是一个行级元素（span）

display样式可以切换元素的块级显示或者行级显示，以及隐藏

Block

Inline

None

背景样式

Backfround-image:url(地址)

Background-repeat:no-repeat | repeat-X |repeat-Y

Background-position:xy坐标|left,center,right,top,bottom,center

转载于:https://www.cnblogs.com/GodLin/p/3978087.html