。

它由各种标签组成#xff0c;这些标签定义了网页的结构和内容。

HTML的早期形式诞生于1989年#xff0c;由CERN的物理学家Tim

Berners-Lee发明#xff0c;最初用于在科学家之…前言

HTMLHyperText

Language是一种用于创建网页的标准标记语言。

它由各种标签组成这些标签定义了网页的结构和内容。

HTML的早期形式诞生于1989年由CERN的物理学家Tim

Berners-Lee发明最初用于在科学家之间共享研究成果。

1996年HTML

4.0发布引入了样式表、框架、表单等新特性这个版本被广泛使用了很多年。

这个HTML4.0就是我们经常说的HTML语言而2014年HTML5发布这是自HTML

4.01以来最大的一次更新。

HTML5引入了新的结构元素、表单控件、媒体播放功能以及对图形和交互性的支持。

这个就是我们常说的H5。

HTML不是编程语言而是一种用于创建网页内容的标记语言。

用通俗的语言来讲HTML是一个可以被浏览器程序渲染展示界面的语言。

这里还有一个概念就是CSSCSS层叠样式表Cascading

Style

为了方便大家理解我们可以将HTML语言比作一个房屋HTML里的标签元素就是房屋里的房间、大门、窗户、水管、电线、煤气管道。

而CSS语言就是将这个毛坯房装修漂亮的工具你可以设置房间墙壁的颜色、是否挂壁画、屋顶吊顶。

HTML和CSS组合起来就可以构造一个非常漂亮网页了。

接下来我们先整体介绍一下html语言中有哪些常用的标签元素以及CSS中有哪些常用的属性以及这些属性如何与常用标签的匹配。

1.1标签元素分类

按照html标签元素的特性我们将它们分为三类块级元素Block-level

Elements、行内元素Inline

textarea宽度宽度默认填满其父元素宽度由内容决定宽度可以自定义设置高度可以设置高度高度由内容决定可以设置高度外边距和内边距可以设置外边距和内边距可以设置外边距和内边距可以设置外边距和内边距定位可以被绝对定位或相对定位可以被相对定位但绝对定位和固定定位受限可以被绝对定位或相对定位浮动可以设置浮动不能设置浮动可以设置浮动块级格式化上下文创建BFC不创建BFC根据CSS

display

属性可能创建BFC可包含的子元素可以包含块级和行内元素只能包含行内元素根据元素自身特性可以包含行内元素或特定类型的子元素布局适合布局和结构化内容适合文本和图片等小元素的排版根据元素类型和CSS

display

属性可以用于特定布局或表单控件换行元素前后会自动换行元素前后不会自动换行根据

display

属性决定是否换行CSS布局可以使用所有CSS布局方式如Flexbox和Grid主要用于文本和图片的布局布局选项有限根据

display

做为初学者以上这些特性你可能还不太明白这些特性会在后面继续讲解。

1.2HTML元素介绍

下图是一个web页面中各种标签存在的包含关系我们可以大致了解html各个标签的包含关系。

我们浏览的网页至少包含这三个标签。

还有一个表示文件类型的标签!doctype

html

/html上图可见.head元素可以包含四种元素:metalinkstyletitle。

1.2.2常用meta标签

type“image/x-icon”触摸图标用于iOS设备为iOS设备定义触摸图标。

link

href“previous-page.html”授权用于CORS

link

href“https://example.com/page.html”短链接

link

href“https://example.com/s”canonical

link

href“https://example.com/”Apple

Safari主题颜色

/headtitle主要作用是指定网页的标题这个标题就是浏览器里这个网页的tab头显示的名字。

如下图所示。

1.2.5块级元素Block-level

p【第一章】道可道也非恒道也。

名可名也非恒名也。

无名也天地之始也。

有名也万物之母也。

故恒无谷也以观其眇恒有谷也以观其皦。

两者同出异名同谓。

玄之有玄众眇之门。

/p3.ul和li元素

ul和li:

ulli天/lili人/lili地/li/ul4.table、th、tr、td元素

table:

tabletrth水/thth木/thth火/thth土/thth金/th/trtrtd志/tdtd魂/tdtd神/tdtd意/tdtd魄/td/tr

Elements类型标签

元素你可以链接到另一个资源这可以是另一个网页、同一网页的不同部分、图像、文件或任何其他URL可访问的资源。

关键属性

描述当前文档与被链接文档之间的关系。

例如rel“nofollow”

download

元素创建一个下拉列表允许用户从多个选项中选择一个或多个选项取决于

multiple

元素的唯一标识符常用于CSS样式或JavaScript操作。

multiple

如果存在允许用户选择多个选项。

用户可以使用键盘通常是Ctrl或Cmd键选择多个选项。

size

定义下拉列表中可见选项的数量。

对于多选下拉列表这个属性可以提供更好的用户体验。

disabled

select

如果存在文本区域是只读的用户可以看到文本但不能编辑。

required

textarea

Sheets的基本语法包括选择符Selectors和声明块Declaration

一个完整的CSS规则由选择器和声明块组成。

声明块包含一个或多个声明每个声明由属性和值对组成并用大括号

selector

CSS属性用于定义元素的样式。

每个属性都有对应的值。

常见的属性和值包括

颜色和背景

注释用于在CSS代码中添加说明浏览器会忽略注释内容。

注释的语法是使用

{color:

以下是一个完整的CSS示例展示了如何为不同的元素应用不同的样式

元素选择器

这里总结了最常用的几个CSS属性它们分别是font、background、border、visibility、display、width、height、min-width、max-width、line-hight、overflow、position、left、top、bottom、padding、marginfloat、clear。

本结会对这些属性做详细介绍尤其最重要的display、position、padding、margin、float。

2.2.1元素和属性关系表

以下表格对比了常用的标签元素和常用CSS的属性的对应关系这张表格可以清晰的看出CSS属性在哪些元素上有效哪些元素上无效。

属性/元素divpullispanatabletrtdimginputfont√√√√√√√√√√√background√√√√√√√√√√√border√√√√√√√√√√√visibility√√√√√√√√√√√display√√√√√√√√√√width√√√√√√√√√√√height√√xxx√√√√√√min-width/min-height√√√√√√√√√√√max-width/max-height√√√√√√√√√√√line-height√√√√√√√√√√√overflow√√√√√√√√√√√position√√xx√√√√√√√left/top/right/bottom√√xx√√√√√√√padding√√√√√√√√√√√margin√√√√√√√√√xxfloat√√√√√√√√√√√

font

rgba(0,0,0,0.5)background-image:

背景图像如

url(‘image.png’)background-repeat:

repeat默认|

no-repeatbackground-attachment:

scroll默认|

url(background.jpg);background-repeat:

no-repeat;background-attachment:

cover;

none元素不会被显示且不会占用任何空间。

block元素将显示为块级元素开始于新行并且它的宽度默认填满其父元素。

inline元素将显示为行内元素不开始新行周围没有块级元素的间距。

inline-block元素将内联显示但可以设置宽度和高度。

display还有一些其他属性值像table、table-row、table-cell等非常不常用就不在此列出。

CSS

属性不适用。

relative元素相对于其正常位置进行定位仍保留在文档流中top,

right,

元素即文档的根元素定位。

fixed元素相对于浏览器窗口进行定位即使滚动页面元素也会停留在视口中的固定位置top,

right,

属性决定偏移量。

sticky元素根据用户的滚动位置相对于其最近的已定位祖先元素或视口进行定位类似于

relative

classrelative-element相对定位元素/div

div

classabsolute-element绝对定位元素/div

div

classsticky-element粘性定位元素/div在这个示例中我们演示了不同的

position

会相对于其正常位置进行偏移。

.absolute-element

static

会相对于浏览器窗口进行定位页面滚动时它不会移动。

.sticky-element

left,

这些属性在CSS中用于控制元素的定位。

它们的生效与否以及具体表现依赖于元素的

position

使用相对定位相对于其正常位置在容器内向下和向左偏移。

.absolute-box

使用固定定位相对于浏览器窗口定位在视口底部。

.sticky-box

请注意left

同时使用除非有特殊的布局需求。

浏览器将根据元素的尺寸和布局环境决定如何应用这些值。

overfow

属性在CSS中用于控制元素内容溢出其指定大小时的显示方式。

以下是

overflow

的属性值及其含义visible溢出的内容不会被裁剪会显示在元素框之外。

hidden溢出的内容会被裁剪不显示超出部分。

scroll无论内容是否溢出都会提供滚动条。

auto如果内容溢出滚动条将根据需要显示或隐藏。

overlay溢出的内容会被裁剪滚动条总是显示在内容的上方不会占用元素的空间这是一个非标准值不是所有浏览器都支持。

float重点

属性在CSS中用于将元素放置在容器的左侧或右侧使其周围的内容环绕在元素的周围。

以下是

float

的属性值及其含义none默认值。

元素不浮动按照正常的文档流排列。

left元素浮动到其包含块的左侧。

right元素浮动到其包含块的右侧。

CSS

classclear-float这是清除浮动的元素确保下面的元素不会环绕在浮动元素周围。

/div在这个示例中

类的元素将向右浮动同样具有确定的尺寸。

.clear-float

clear:

浮动元素常用于创建多列布局但需要注意浮动元素脱离了正常的文档流可能会影响页面的布局。

因此经常需要使用清除浮动的技术如

clear

属性在CSS中用于控制元素与其周围元素之间的空间外边距和元素内容与边框之间的空间内边距。

下图演示padding和margin代表的含义

margin

相邻单元格的边框会合并为一个单一的边框这是默认值。

separate:

border-spacing

浏览器根据表格的行和列的尺寸自动计算表格的布局这可能导致行和列的尺寸根据内容动态变化。

fixed:

width

classcollapse-bordertrth标题1/thth标题2/th/trtrtd内容1/tdtd内容2/td/tr

/tabletable

classseparate-bordertrth标题1/thth标题2/th/trtrtd内容1/tdtd内容2/td/tr

/tabletable

属性在CSS中用于绘制元素轮廓它是一个简写属性允许你在一个声明中设置多个轮廓属性。

以下是

outline

solid实线、dotted点线、dashed虚线、double双线、groove、ridge、inset、outset

等。

outline-color:设置轮廓的颜色。

可以是颜色名称如

red、十六进制值如

0)等。

outline-offset:设置轮廓与元素边框之间的距离。

outline

outline:

类添加了红色轮廓并设置了轮廓偏移。

.custom-outline

:focus

中优先级Specificity决定了当多个规则应用于同一个元素时哪条规则会生效。

优先级是由选择器的类型和复杂度决定的。

CSS属性的优先级可以分为以下几种

重要性Importance

是一种特殊的优先级优先于所有其他规则。

即使其他规则的优先级更高带有

!important

类选择器、伪类选择器和属性选择器的优先级相同它们的权重为10。

.my-class

当多个选择器的优先级相同时离目标元素最近的规则将覆盖其他规则。

如果它们在同一个层次上后定义的规则将覆盖之前的规则。

stylep

/html在上述示例中不同选择器的优先级将决定每个段落的最终颜色

第一个段落颜色为

!important、内联样式、ID选择器、类选择器、伪类选择器、属性选择器、元素选择器和伪元素选择器的权重决定。

当多个规则作用于同一元素时优先级更高的规则将生效。

理解并正确运用CSS优先级有助于更有效地控制样式应用和解决样式冲突。

三、初学者常见错误