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

冷不防 2022-05-17 00:48 241阅读 0赞

HTML CSS  JavaScript 区别

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

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

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

--------------------

# HTML标签 #

1.  <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； 改成块级元素，使行内块元素的内容决定高度 失效；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70][]

五、溢出文字处理：

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

：normal    默认方式，自动换行

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

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

：clip          不显示 ...

：ellipsis     显示 ...

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

效果：![20190812133210457.png][]

//发现一个问题 在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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 1][]

[https_mp.csdn.net_postedit_81393689]: https://mp.csdn.net/postedit/81393689
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70]: /images/20220517/86fd26ad0ba14738b4fe898e18020c60.png
[20190812133210457.png]: /images/20220517/2c66f26ec75849a4ac2af1a1b444d480.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 1]: /images/20220517/25f36f2b19004dc097f00d733daedd28.png