注:参考W3cSchool
HTML
-
什么是HTML
HTML是用来描述网页的一种语言。
HTML指的是超文本标记语言 (Hyper Text Markup Language)
HTML不是一种编程语言,而是一种标记语言(markup language)
标记语言是一套标记标签 (markup tag)
HTML使用标记标签来描述网页
-
标签
HTML标签是由尖括号包围的关键词,如<html>,并且HTML标签通常成对出现,其中第一个标签为开始标签,第二个标签为结束标签。并且标签可以进行嵌套,可以将它们想象成括号,每个括号会进行配对,括号里面依旧可以加括号。
如:
常见的标签有:<h>标题 、<img>图像、 <div>定义文档中的分区或节(俗称盒子)、 <span>用来组合文档中的行内元素、<p> 定义段落、<button>定义按钮、<a> 定义锚点链接、 <intput>定义输入控件等等。
这些标签不需要背,也不用背,遇到不会的可以直接查阅文档。
-
HTML文档
HTML文档包含HTML标签和纯文本,它是用来描述网页的,因此HTML文档也被称为网页。
其实,Web浏览器的作用就是读取HTML文档,并以网页的形式显示出它们。浏览器不会显示HTML标签,而是使用标签来解释页面的内容。
-
元素
HTML 元素指的是从开始标签到结束标签的所有代码。当然,某些 HTML 元素具有空内容,空元素在开始标签中进行关闭(在开始标签中添加斜杠)。大多数 HTML 元素可拥有属性。
如
上图 高达机体就为元素
-
属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现,并且属性总是在 HTML 元素的开始标签中规定。最后,属性值应该始终被包括在引号内。
如:
-
块
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。比如<div>标签就为一个块元素,当它在浏览器中展示时,一个div就会占一行。
如:
内联元素在显示时通常不会以新行开始。比如<a>标签就为一个内联元素,我们可以在一行中放置多个链接。
如:
-
类
对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。
-
Id
id属性指定 HTML 元素的唯一 ID。id属性的值在 HTML 文档中必须是唯一的。id属性用于指向样式表中的特定样式声明。
ID与类的区别就是,ID只能与一个(同一HTML文档中),而同一个类名可以加在不同HTML标签上。
-
文档类型
Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
-
文件路径
文件路径描述了网站文件夹结构中某个文件的位置。文件路径会在链接外部文件时被用到。文件路径包括绝对路径和相对路径。
绝对文件路径是指向一个因特网文件的完整 URL,比如www.baidu.com。
相对路径指向了相对于当前页面的文件。其写法与Linux指令类似,“./”表示在前文件夹“../”表示上一级文件夹。
-
字符实体
在 HTML 中,某些字符是预留的,比如,在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签,如果想要正确地显示预留字符,则必须在 HTML 源代码中使用字符实体。字符实体形式为&+实体名字或&#+实体编号。如显示小于符号,可以写成 < 或 <
不间断空格。HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。比如如果我在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如果需要在页面中增加空格的数量,这时就需要使用 字符实体。
-
URL
URL 也被称为网址。URL 可以由单词组成,比如 “www.baidu.com”,或者是因特网协议(IP)地址:192.168.1.253。
统一资源定位器(URL)用于定位万维网上的文档(或其他数据)。网址,遵守以下的语法规则:
scheme://host.domain:port/path/filename
其中scheme 为定义因特网服务的类型(最常见的类型是 http);host为定义域主机(http 的默认主机是 www);domain为定义因特网域名,比如 “baidu.com”;:port为定义主机上的端口号(http 的默认端口号是 80);path 为定义服务器上的路径(如果省略,则文档必须位于网站的根目录中);filename为定义文档/资源的名称。
-
一个HTML代码基本格式
<html>标签:是HTML文档的根标签,页面中的所有内容都必须包含在<html>与</html>之间。
<head>标签:一个网页文档从总体上可以分为头和主体两部分。<head>和</head>定义HTML文档的头部部分,它包含标题,文件MIME类型,样式表,脚本等。
<meta>标签:使用该标签描述网页的具体摘要信息,包括文档内容类型,字符编码信息,搜索关键字,网站提供的功能和服务的相关描述等。<meta>标签描述的内容并不显示在浏览器的窗口中,其目的是方便浏览器解析或利用搜索引擎搜索,它采用的是“名/值”对的方式进行设置。
<title>标签:用于设置HTML标题。当使用浏览器查看页面时,在浏览器的标题栏中将显示<title>标签中的内容。
<body>标签:<body>与</body>标签定义了文档的主体部分,用于设置页面实际需要呈现给用户的内容,如文字,图片,视频等。
值得一提的是,我们并不能记住HTML所有格式,标签以及提供的操作等,因此我们因该学会翻阅HTML文档。
CSS
-
什么是CSS
CSS是一种用于描述网页样式的语言。CSS主要用于控制网页的呈现样式,如网页中元素的大小、颜色、字体、布局等方面。与HTML和JavaScript一样,CSS是Web开发中最常用的技术之一,它为开发者提供了更精准、更灵活的网页排版和设计方式,让网页的视觉效果更加优美和易于理解。CSS可以与HTML结合使用,开发者可以使用CSS来控制网页的外观,而不需要改变网页的内容。CSS 节省了大量工作。它可以同时控制多张网页的布局。CSS可以通过内联样式、内部样式和外部样式表等方式来应用到网页中。
-
CSS语法
CSS的语法基本上遵循以下几种规则:
1. 选择器:选择器指的是要应用样式的HTML元素。可以使用元素的名称、类名、ID、属性、伪类等方式来定义选择器。
2. 属性:属性定义HTML元素的外观,如颜色、尺寸、字体等等。每个属性都有一个值,指定了这个属性的取值范围。
3. 值:属性的值可以是任何有效的CSS值,如颜色、大小、位置,以及其他简单或复杂的值。
4. 声明块:声明块是由一系列声明组成的,每个声明包括一个属性和一个值,用冒号隔开。多个声明块用花括号包围。
下面是一个CSS规则的示例:
其中,
1. 选择器以元素名称、ID、类名或其他属性定义。
2. 冒号(:)用于分隔属性和属性值。
3. 分号(;)用于分隔每个属性。
4. 花括号({})用于包裹声明块。
CSS支持大量的属性和值,可以灵活地控制网页的样式和排版。
-
CSS选择器
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
CSS 选择器分为五类:
简单选择器(根据名称、id、类来选取元素)
如:
元素选择器
类选择器
Id选择器
通用选择器
组合选择器(根据它们之间的特定关系来选取元素)
如:
伪类选择器(根据特定状态选取元素)
例如,它可以用于:
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
如:当鼠标移动到a标签上时,颜色变为灰色
伪元素选择器(选取元素的一部分并设置其样式)
例如,它可用于:
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
如:为所有 <p> 元素中的首行添加样式
属性选择器(根据属性或属性值来选取元素)
如:选择所有带有 target 属性的 <a> 元素
-
CSS的使用
CSS有三种使用方式,分别为内联样式、内部样式表和外部样式表。
内联样式:将CSS样式直接应用到HTML元素中,使用style属性来定义样式。例如:
内部样式是在 head 部分的 <style> 元素中进行定义。例如:
外部样式表:将CSS样式保存到独立的外部文件中,然后在HTML文档的<head>标签中使用<link>标签引用外部样式表。例如:
其中,href指向CSS文件的路径和文件名,rel属性指定链接的类型为样式表。
-
CSS属性
CSS属性有很多,它们用于控制HTML元素的外观和布局。
下面是一些常用的CSS属性:
background:指定网页元素的背景颜色或背景图案。
color:指定文本的颜色。
font-family:指定文本的字体。
font-size:指定文本的大小。
font-weight:指定文本的粗细程度。
text-align:指定文本的对齐方式。
text-decoration:指定文本是否加上下划线、删除线或其他修饰。
margin:指定网页元素外边距的大小。
padding:指定网页元素内边距的大小。
border:指定网页元素的边框样式。
display:指定CSS元素的显示方式。
float:指定元素的浮动方式。
position:指定元素的定位方式。
z-index:指定元素的层叠顺序。
width和height:指定元素的宽度和高度。
CSS属性与HTML标签一样,不需要背,只需要在需要使用时查询文档即可。
-
CSS盒子模型
CSS盒子模型是网页布局的基础概念,指的是把HTML元素看作是一个矩形的盒子,由内容、内边距、边框和外边距四个部分组成。
具体可看为:
内容:HTML元素所包含的文本、图像等内容即为盒子模型中的内容。内容的大小由width和height属性来指定。
内边距:指的是内容与边框之间的空间,是一个可选的属性,由padding-top、padding-right、padding-bottom、padding-left四个属性来指定内边距的大小。
边框(Border):包围着内容和内边距,并为HTML元素提供了一个边缘的框架。边框的大小和颜色由border-width、border-style、border-color三个属性来指定。
外边距:位于边框和相邻元素之间的空白区域,是盒模型周围的空白区域,由margin-top、margin-right、margin-bottom、margin-left四个属性来指定外边距的大小。
总的来说,盒子模型的大小由内容、内边距、边框和外边距四个部分决定。盒子的实际大小就是width+padding+border+margin,其中width指定了内容的宽度,padding指定了内容和边框之间的间隔,border指定了边框的大小,margin指定了盒模型周围的空白区域。
-
弹性布局
CSS弹性布局也称为Flexbox布局,是一种用于创建灵活和自适应的布局模型。它可以方便地控制网页元素的位置、大小和对齐,而不需要使用复杂的CSS 代码。
在Flexbox布局中,我们可以将父元素设置为一个Flex容器,然后通过对Flex容器设置不同的flex属性和flex子元素的属性来实现灵活的布局:
display:flex:将容器设置为Flex布局。
flex-direction:设置子元素的排列方向,可以是行方向(row)或列方向(column)。
justify-content:设置子元素的主轴对齐方式(flex-start, flex-end, center, space-between, space-around等)。
align-items:设置子元素的交叉轴对齐方式(flex-start, flex-end, center, stretch, baseline等)。
flex-wrap:控制子元素是否换行(wrap, nowrap, wrap-reverse)。
flex-grow:控制子元素占据剩余空间的比例。
flex-shrink:控制子元素收缩宽度的比例。
align-self:在单个元素上设置交叉轴对齐方式。
Flexbox布局是一种非常强大和灵活的CSS布局方法,它可以轻松地实现按比例分配空间、动态布局、弹性对齐等复杂端效果的布局。但是,在使用Flexbox布局时需要注意一些兼容性问题。
-
转换
CSS转换是指通过对HTML元素应用CSS属性来改变元素的外观或布局。在CSS中,有多种类型的转换,包括:
位移转换(Translate):通过位移转换可以让元素沿着X和Y轴方向移动。
旋转转换(Rotate):通过旋转转换可以让元素绕着中心点旋转。
缩放转换(Scale):通过缩放转换可以让元素的大小变化,可以放大或缩小元素。
扭曲转换(Skew):通过扭曲转换可以让元素沿着X或Y轴扭曲变形。
比如:
上图就为按钮添加了一个转换,当鼠标经过按钮时,按钮将会放大大1.05倍
-
过渡
CSS过渡(transition)是一种控制CSS属性变化的动画效果,它可以使CSS属性发生变化时,从初始值变化到最终值,产生流畅的渐变过渡效果。过渡可以用于任何CSS属性,包括颜色、大小、位置、透明度等。
使用CSS过渡需要指定一些属性,包括:
transition-property:指定需要产生过渡效果的CSS属性。
transition-duration:指定过渡效果的持续时间,通常使用秒(s)或毫秒(ms)为单位。
transition-timing-function:指定过渡效果的时间函数,控制过渡的加速度。
transition-delay:指定过渡效果的延迟时间,例如在某个事件触发后等待一段时间再开始过渡。
例如下图代码就为一个当鼠标指针悬停在盒子上时,背景颜色会从红色渐变到蓝色,过渡效果持续一秒钟的过渡。
-
动画
CSS动画(animation)也是一种可以在浏览器中创建动画的技术。与CSS过渡不同,CSS动画可以使用多个关键帧来定义动画效果,可以在动画过程中控制元素的属性,并且可以使用循环、反向、延迟等选项来更精细地控制动画效果。
使用CSS动画需要定义以下属性:
animation-name:指定动画的名称(必需)。
animation-duration:指定动画的持续时间(可选)。
animation-timing-function:指定动画的时间函数(可选)。
animation-delay:指定动画的延迟时间(可选)。
animation-iteration-count:指定动画的循环次数(可选)。
animation-direction:指定动画的播放方向(可选)。
animation-fill-mode:指定动画完成后元素的最终状态(可选)。
例如:
上图代码会让一个红色的盒子在3秒钟内从红色变成蓝色,再变回红色。
上图代码就给li标签定义了一个动画效果,li标签会从屏幕底部一直运动到屏幕顶部,并会在运动过程中进行旋转,而且运动会一直持续下去。
总结:
HTML负责网页的结构和内容,标记文本、图片、视频等内容,并定义网页中的各种元素和语义。CSS负责网页的样式和布局,为网页添加颜色、字体、布局样式、动画效果等高级视觉效果,并控制网页的响应式布局。就像画画一样,我们先用HTML进行网页大体框架的编写,再用CSS为其美化上色。
HTML | CSS | |
---|---|---|
角色 | 页面结构和内容 | 页面样式和布局 |
功能 | 标记文本、定义元素和语义 | 添加颜色、字体、布局样式、动画效果 |
作用 | 负责网页结构、内容和语义 | 控制网页的外观和布局 |
实现 | 使用标签、属性和内容来创建网页 | 使用选择器和属性来控制样式 |
目标 | 创建可读性和可访问性强的网页 | 创建具有高级视觉效果的网页 |