HTML & CSS 学习总结

本文介绍了HTML的基本结构和常用标签,包括字体、标题、超链接、列表、图片和表格等,还详细讲解了CSS的语法、选择器、样式以及布局技术,如浮动、定位和弹性盒模型。此外,还提到了响应式布局的概念和媒体查询的使用。

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

一、HTML标签介绍

HTML基本结构

<html>表示整个html页面的开始,<head></head>表示头信息,<title></title>表示网页的标题,<body></body>表示网页的主体内容,</html>表示整个html页面的结束。我们大部分时间都在<body></body>里面写内容,偶然会在<head></head>写内容。

标签简介

1.标签的格式为<标签名>文本</标签名>,如

 

 2.标签名大小写都可以,如下,把h1改成H!,仍然能显示

 

 3.标签属性

基本属性:设置简单的样式效果

如下,可以给标签加上一个style,设置其字体颜色为红色

 

事件属性:设置事件响应后的代码

如下,为标签设置一个点击事件,点击或触发弹窗提示

 点击效果:

 4.标签分类

单标签:<标签名/>                            如:<br/>  <hr/>

双标签:<标签名>文本<标签名/>             上图展示的皆为双标签

标签语法规则:

1.标签不能交叉嵌套,如<div><p></div></p>是错误的,正确的形式为<div><p></p></div>

2.标签应正确关闭:如“<div>我是文本 ”是错误的,因为div为双标签,有结束标签,正确示范为“<div>我是文本</div>”

3.标签的属性须有值,且要加引号

图中, 第一个有值、有引号,是正确的。第二个没有值,是错误的。第三个没有引号,也是错误的。

4.注释不能嵌套

 图中第二个注释嵌套使用,不是正确的,编译器也提示错误。

注:有时候不符规则的书写格式不会产生问题,这是html不严谨之处。

常用标签介绍

font字体标签

作用:修改文本的颜色、字体、大小等

属性及其作用:color设置字体颜色,face设置字体,size设置文本大小

 如下,设置文本的字体为蓝色、黑体、大小为5:

效果如下:

 特殊字符

有时候,我们需要在文本放<>等特殊字符。如果直接输入到文本中,会导致错误,如下:

这是不规范的。

这时可以使用"&lt;"代替"<","&gt;"代替">"

显示效果如下:

其它特殊字符:

&nbsp; 空格

&amp; 和号

&quot; 引号

 在HTMl中,有些特殊字符是不能直接输入的,需要用转义字符代替输入。

标题标签

从h1到h6字体大小是递减的, 即h1的字体大小最大,h6的字体大小最小。效果如下:

标题标签有属性align,用于设置对齐方式。

左对齐:align="left"

右对齐:align="right"

居中:align="center"

样例:

 效果如下:

 超链接

<a></a>标签是超链接,可用于点击跳转到其他网址。

属性:

href:跳转的地址

target:根据其值的不同,在当前页面跳转或者打开一个新页面跳转。

        _self:在当前页面跳转

        _blank:打开一个新页面跳转

示例:

 没有target属性和target="_self"的效果是一样的,都是在当前页面跳转。

列表标签

分类:无序列表、有序列表、定义列表

无序列表

用ul标签创建无序列表,li标签表示列表项

效果:

type属性可以设置列表项前的符号

 

type="none"把符号取消了, 效果:

 有序列表

 用ol标签创建有序列表,li标签表示列表项

效果:

定义列表

 用dl标签创建定义列表,dt表示定义的内容,dd表示对内容的解释

 效果:

 img标签

作用:展示图片

属性:

src:设置图片路径

width:设置图片宽度

height:设置图片高度

alt:当图片显示不正常时,会显示的文字内容

上图src的地址是本地的地址,显示效果:

 

当src地址不正确时,会显示alt中的内容

 

 下图的src的地址是网络地址,一样可以显示

显示效果:

表格标签

table标签是表格标签,tr是行标签,th是表头标签,td是单元格标签

属性:

        border设置表格边框

        width设置表格宽度

        height设置表格高度

        align设置表格对齐方式

        cellspacing设置单元格间隙

        colspan设置跨列

        rowspan设置跨行

 没有加样式的效果:

 

添加如下样式:

 

 align="center"是表格居中,border="1"是表格显示边框,width设置表格宽度为200,cellspacing设置单元格间隙为0

跨行跨列表格

 利用colspan、rowspan实现

效果:

表单标签

用form标签来创建一个表单

 作用:用于收集用户信息,提交给服务器

属性:

action指出提交信息的服务器地址,

method指出请求方式

        method="get"表示GET请求,它提交的数据长度有限制,安全性较差

        method="post"表示POST请求,无提交数据长度限制,安全性比GET高

input标签根据其type属性的值不同,有不同的功能分类

        type="text"表示文本框

        type="password"表示密码框

        type="radio"表示单选框,可以通过属性cheched="checked"设置默认选中

        type="checkbox"表示复选框,可以通过属性cheched="checked"设置默认选中

        type="button"表示按钮

        type="reset"表示重置按钮

        type="submit"表示提交按钮

select标签是下拉列表,option标签是下拉列表中的选项,可以通过属性selected="selected"设置默认选中

input标签和select标签中可以通过value属性设置其值。

实例:

 效果:

 其他标签

 块元素:一般用于对网页的布局,如div标签

行内元素:一般用于存放文字,如span标签

段落标签:p标签,如其名放置一个段落,且段落标签中不能放块元素

实例:

 效果:

 二、CSS介绍

语法规则

选择器:用于指定受影响的html标签

属性:用于指定要修改的样式,一个属性有一个值,属性与值用冒号隔开,最后以分号结束(最后一个“属性:值”可以不加分号)。

使用方式

① 内联样式(行内样式)

直接在标签内部写一个style属性来设置元素的样式。

特点:只对一个标签生效,复用性差

如下实例

② 内部样式表

写在head标签的style标签中。

特点:通过css选择器来为元素设置样式,可以通过设置多个标签的样式,仅对当前页面生效,不能跨网页使用。

如下所示,设置h1标签字体颜色为红色:

③ 外部样式表(推荐使用)

写在一个外部的css文件中。

使用方式:在需要使用该样式的页面中,通过link标签引人该css文件

特点:多个页面都可以使用css文件,复用性好

创建并编写一个style.css文件

在head中通过link标签使用该样式

 效果:

 

 常用选择器

① id选择器

格式:

 特点:由于id是唯一的,id选择器用于给单个标签加特定的样式

实例:为一个div添加id,并利用id选择器添加样式

 效果:

② class选择器(类选择器)

 格式:

特点:class是可重复,往往用于为同一类的标签设置样式,复用性较高。

实例:为多个div添加class,并利用class选择器添加样式

效果:

 ③ 组合选择器

并集选择器格式:

 特点:可以同时为多个选择器设置同一个样式

实例:同时为两个class选择器和一个id选择器设置样式

 效果:

交集选择器格式:

特点:同时选择多个选择器对应的元素

效果:

④ 关系选择器

子类选择器

作用:选择父元素中指定的子元素

格式:父元素 > 子元素

实例:选择.text下的span

效果:

 后代元素选择器

作用:选择指定元素内的指定后代元素

格式:祖先 后代

 实例:

 如下效果,可以看到子元素选择器只选择子代,而不选择子代的子代:

⑤ 伪类选择器

使用:开头

作用:描述一个元素的特殊状态

        :first-child        第一个子元素

        :last-child        最后一个子元素

        :nth-child(n)        选择第n个子元素

        :only-child       选择唯一子元素

以上伪类按照所有的子元素数顺序

以下伪类按照同类的子元素数顺序 

        :first-of-type        同类型第一个子元素

        :last-of-type        同类型最后一个子元素

        :nth-of-type()        同类型选择第n个子元素

        :only-of-type        选择同类型唯一子元素

其它伪类:

        :empty                选择没有内容的元素

        :not()                去除符合条件的元素

实例:

⑥ 伪元素选择器

使用::开头

          ::first-letter         表示第一个字母

          ::first-line         表示第一行

          ::selection         表示选中的内容

          ::before         元素开始,结合conten使用

          :after         元素最后,结合content使用

实例:

效果:

常用样式

 ① 字体样式

颜色格式:color:颜色值

颜色值可以是blue、red等颜色名,还可以是rgb值和十六进制表示,如rgb(255,255,0),#00ADE8

字体大小格式:font-size:像素值;

实例:

 效果:

② 宽度、高度

宽度格式:width:值;

高度格式:height:值;

值可以为像素值,如200px,可以为百分比,如15%

实例:

效果:

 修改值为百分比格式:

效果:

③ 背景颜色

格式:background-color:颜色值;

颜色值可以是颜色名、rgb值和十六进制表示

实例:为文本设置蓝色的背景

由于div独占一行,会出现一个蓝色长条的效果:

 ④ 边框

边框宽度

格式:border-width:值;

其值可为“数字+px”或thin(1px)、medium(3px)、thick(4px)

边框样式

格式:border-style:值;

其值可为:none(无样式)、solid(实线)、dashed(虚线)、dotted(虚线圆点)

边框颜色

格式:border-color:值;

其值可为:像素值、rgb、十六进制格式

实例:

效果:

⑤  居中

div居中:为其样式添加 margin:0 auto; 

文本居中:为其样式添加 text-align:center; 

⑥去除修饰

超链接去下划线:text-decoration:none;

列表去修饰:list-style:none;

盒子模型

css将页面中的元素设置成为一个矩形的盒子,对页面的布局相当于盒子的摆放

组成部分:内容区、内边距、边框、外边距

内容区(content)

位于盒子最中间,包含元素中的文本内容及其子元素,其大小用width和height两个属性设置

边框(border)

边框线属于盒子边缘,边框内属于盒子,边框外不属于盒子,边框的大小会影响盒子的大小

设置边框的属性:

border-width:边框的宽度,可以用于指定四个方向的宽度

border-color:边框的颜色,可以用于指定四个方向的颜色

border-style:边框的样式

 设置边框和内容区样式实例:

效果:

内边距(padding)

位于内容区和边框之间,与内容区和边距一起绝对盒子的大小。

属性为四个方向的内边距:

 padding-top

padding-right

padding-bottom

padding-left

简写形式:

padding:上 右 下 左

padding:上 左右 下

padding:上下 左右

实例:

效果:

 

外边距(margin)

 作用:可用于设置盒子的位置,不会影响盒子可见框的大小,但会影响盒子的实际占用空间。

属性:

margin-top:上外边距

margin-left:左外边距

margin-right:右外边距

margin-bottom:下外边距

简写形式:

margin:上 右 下 左

margin:上 左右 下

margin:上下 左右

 使盒子位置移动实例:

盒子远离左上角,效果:

盒子的水平布局

         元素在其父元素中水平方向的位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right几个属性共同决定,即margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度。

实例:

 效果:


溢出 (overflow)

当子元素的大小超过父元素的时,会发生溢出,这时可以通过overflow设置溢出后的显示方式

属性:

visible:溢出内容在元素外部显示

hidden:隐藏溢出内容

scroll:通过滚动条查看溢出内容

auto:按需自动生成滚动条

可通过overflow-x设置x轴方向的显示方式,overflow-y设置y轴方向的显示方式

实例:

 visible显示效果:

hidden显示效果:

 scroll显示效果

auto显示效果;

浮动(float)

主要作用:使页面中的元素水平排序

特点:脱离文档流,块元素不再独占一行,行内元素会变成块元素,不区分块元素和行内元素

属性:

none:不浮动

left:向左浮动

right:向右浮动

实例:

效果:

 高度塌陷问题

 当一个元素由其子元素撑开而子元素设置浮动时,子元素脱离文档流,父元素会发生高度塌陷。

处理方式:

1.设置父元素浮动:float: left;

2.设置父元素为行内块元素:display: inline-block;

3.为设置父元素overflow: hidden;

问题实例及效果:

 

处理方式之一:

处理后的效果:

定位(position)

作用:将元素摆放到任意位置

属性:

static :静止的没有开启定位,默认值

relative:相对定位

absolute:绝对定位

fixed :固定定位

 sticky:粘滞定位

相对定位

开启方式:position: relative;

特点:设置偏移量后可改变元素位置,参照元素在文档流中位置进行定位,提示元素层级,不脱离文档流,不改变元素性质

偏移量(offset)

属性:

top:元素与定位位置上方向的距离

bottom:元素与定位位置下方向的距离

left:元素与定位位置左方向的距离

right:元素与定位位置右方向的距离

实例及效果:

绝对定位

开启方式:position: position;

特点:设置偏移量后可改变元素位置,参照其最近的开启了定位的祖先元素进行定位,提示元素层级,脱离文档流,改变元素性质

 实例及效果:

固定定位

开启方式:position: fixed;

特点:与绝对定位相似,不同的是固定定位参照浏览器视口进行定位,不随网页滚动条的滚动而动

 实例及效果:

 

 

 可以看到,滚动网页时,开启固定定位的div一直在左上角

粘滞定位

开启方式:position: sticky;

特点:与固定定位相似,不同的是粘滞定位可以在元素到达某个位置后固定,常用与导航条或广告位。

弹性盒(flex)

一种布局方式,可用来代替浮动来完成页面的布局,使元素随页面的大小而改变

开启方式:display: flex;

flex-direction

作用:指定容器中弹性元素的排序方式

属性

row:弹性元素在容器中从左到右水平排列,默认值

row-reverse:弹性元素在容器中从右到左水平排列

column:弹性元素自上向下纵向排列

column-reverse:弹性元素自下向上纵向排列

实例及效果:

 

 flex-wrap

作用:设置元素在弹性容器中是否自动换行

属性:

        nowrap 不自动换行,默认值

        wrap 元素自动换行

        wrap-reverse 元素沿着反方向换行

justify-content

作用:设置主轴上空白空间的分配方式

属性:

        flex-start 元素沿主轴起边排列

        flex-end 元素沿主轴终边排列

        center 居中排列

        space-around 空白分布到元素两侧

        space-between 空白均匀分布到元素间

        space-evenly 空白分布到元素的单侧

flex-grow

作用:指定弹性元素的伸展系数,当父元素由多余空间时生效

flex-shrink

作用:指定弹性元素的收缩系数,当父元素的空间不足以放下所有子元素时生效

响应式布局

作用:根据不同的设备展示不同的页面效果

通过媒体查询实现

媒体查询

类型:

all:所有设备

print:打印设备

screen:带屏幕的设备

speech:屏幕阅读器

媒体类型前加only可以解决一些老版浏览器的不兼容问题

属性:

        width:视口的宽度

        height:视口的高度

        min-witdh:视口最小宽度

        max-width:视口最大宽度

实例:

END

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值