HTML 、CSS 、 JavaScript区别（css精灵图/滑动门）

最新推荐文章于 2022-12-18 15:48:32 发布

403_ss

最新推荐文章于 2022-12-18 15:48:32 发布

阅读量400

点赞数 2

分类专栏： html CSS JavaScript 文章标签：网页

本文链接：https://blog.csdn.net/weixin_40980087/article/details/81393689

版权

JavaScript 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

HTML CSS JavaScript 区别

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. 。CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

HTML标签

<head>头部标签。描述文档的各种属性和信息，包括文档的标题等。

头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>.

2.<title>...</title> 标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。

3.<base> 作为HTML文档中所有的链接标签的默认链接（html中无结束标签）

4.<link> 标签定义了当前文档与引入的外部资源之间的关系。通常用于链接到外部样式表

此外rel =alternate（替代） /shortcut icon（站点图标） /next（下一个） /help（帮助文档）/bookmark（相关文档）

5.<meta>描述了一些基本的元数据，通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。例

http-equiv：将 content 属性关联到 HTTP 头部。值：content-type、default-style、refresh

CSS高级应用：

一、元素的显示与隐藏（三个）：

1. display （显示）：设置或检索对象是否是否显示以及如何显示；

：none；隐藏对象

：block； 1.转换为块级元素 2.显示元素

特点：元素隐藏后，不占位置；

2. visibility（可见性）：设置或检索对象是否是否显示对象

：visible

：hidden

特点：元素隐藏后，保留位置；

3. overflow（溢出）：设置内容超过宽高后如何处理

：visible 默认的

：hidden 超出部分隐藏

：auto 超出自动显示滚动条

：scroll 不管超不超都显示滚动条

二、outline（轮廓线）：

：none；

三、resieze（textarea文本域防拖拽）

：none；

四、vertical-align（行内块元素（图片、表单）的垂直对齐）

：baseline 默认，图片与文字的基线对齐

：middle 图片与文字的中线对齐

：top 图片与文字的顶线对齐

：bottom 图片与文字的底线对齐

注意：图片、表单等行内块元素的底线会与父级盒子的基线对齐。这样会导致一个很严重的问题，图片底部会有一个留白。

解决办法：1. verical-align：bottom 使用底对齐。

2. display ：block；改成块级元素，使行内块元素的内容决定高度失效；

五、溢出文字处理：

1.white-space （设置文本显示方式，通常用于标题强制一行显示文本）

：normal 默认方式，自动换行

：nowrap 强制一行显示文本,不改变。遇到 br 标签时才会换行

2.text-overflow （是否用省略符号... 标记溢出内容）

：clip 不显示 ...

：ellipsis 显示 ...

注意：text-overflow 使用要与 white-space 强制一行显示再跟overflow ：hidden 搭配使用才有效果。

效果：

//发现一个问题 在a链接加上overflow hidden，内容会压下。目前没查原因
.mm_text {
    font-size: 12px;
    color: #999;
    margin: 15px 15px 0;
    overflow: hidden;
    text-overflow:ellipsis;
  
}
.mm_text a{
    display: inline-block;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    color: #333;
}

CSS精灵技术 / CSS Sprites / CSS 雪碧：

用户访问一个网站时，向服务器发送请求，网页的每一张图都会经过一次请求才会从服务器返回显示图片。当网页图片过多，服务器胡频繁的接受和发送请求，导致网页加载速度变慢。为了减少服务器接受和发送请求的次数，提高页面加载速度，应用CSS精灵技术。处理网页背景图的方式，将页面涉及的所有背景图集中到一张大图上，然后将大图应用到网页。

应用：设置background :url no-repeat position ;

position 一般为负值， -x -y；因为图片是以左上角为基点。

滑动门：使特殊形状的背景能够自适应文本元素内容的多少，能够自动拉伸滑动，如导航栏的滑动门。

原理：使用CSS精灵（background：position + padding-left / padding-right + 行内块元素span）

格式： <a href="#"> //a 设置左边的边框样式
<span>里面只放文字内容</span> //span设置右边的样式
</a>

403_ss

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML 、CSS 、 JavaScript区别（css精灵图/滑动门）

HTML CSS JavaScript 区别1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. 。CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。...
复制链接

扫一扫