整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

论HTML和CSS之间的关系-硬核解答！



站分静态网站和动态网站，相信小伙伴们对这两个词略有耳闻或者已经了解，那么小编还是啰嗦一下这两种网站有什么区别。

01

网页上的内容是随着数据库读取出来的内容不一样或者用户操作不一样而改变的，举个例子，比如网页上的用户登录，刚访问网页的时候用户登录状态是无登录状态，当用户点击登录，弹出输入账号密码的窗口的时候，这还不算是动态，还属于静态，那么接下来，用户点击登录按钮，网页将账号密码提交到服务器后台，服务器把账户密码拿去跟数据库里面存的做比较，如果一样，则登录成功，网页显示登录成功状态，如果核对没有完全一致，则登录失败，网页保持无登录状态。

像这种随着用户操作而改变内容的网站，才称之为动态网页。

02

看了上面的动态网站，其实对静态网站也能有一定理解了，不理解也没关系，这里再详细说明下！静态网站是指网站无论用户操作什么，都是一模一样的，不会有任何改变，那么有小伙伴可能又要问了，有些网站上有导航栏，我点击首页，会跳转到首页，点击关于我们，又换了一个页面，这难道不是动态吗？不是的，这是静态，你无论怎么操作，你会发现你跳转来跳转去的网页长得一摸一样，没有任何改变。

其实除了看网页变化来判断是静态网页还是动态网页之外，还有个方法，看网页地址栏的扩展名，如果.html就是静态网页，如果是.asp或者.php那就是动态网页。但是这种说法并不完全正确，现在可以动静分离，可以理解为有没有数据库支持！


如图所示是我在网络上找到的一个asp动态网站。Html网站网上非常多一抓一大把，php也不少，有兴趣的小伙伴可以自己上网搜索下！

接下来进入主题，我们先来看看我们今天要实现的效果是什么？

鼠标经过有效果对吧。

我们先看看效果图：


这是一个网站的导航栏

接下来我们把鼠标放上去看看会发生什么？


这种神奇的效果要如何设计呢？大家都知道网页设计的三大利器是什么？

答案：HTML+CSS+JavaScript

本章的这个案例我们只需要用到HTML+CSS，还是很简单的，我们先来看看导航栏怎么写：

<!DOCTYPE html>

<html>

<head>

<title>August精彩编程</title>

</head>

<body>

<div class="header">

<a href="#"><img src="logo.png"></a>

<div class="header-word">

<ul>

<a href="#"><li>CONTACT</li></a>

<a href="#"><li>EVENTS</li></a>

<a href="#"><li>FACULTY</li></a>

<a href="#"><li>GALLERY</li></a>

<a href="#"><li>ABOUT</li></a>

<a href="#"><li>HOME</li></a>

</ul>

</div>

</div>

<div class="clear"></div>

</body>

</html>


这样写我们的导航栏就写出来了，但是效果是什么样的呢？

我们需要对这个页面加上CSS（层叠样式表）。代码如下：


<!DOCTYPE html>

<html>

<head>

<title>August精彩编程</title>

<style type="text/css">

*{

padding: 0;

margin: 0;

}

body{

width: 100%;

}

html{

height: 2400px;

}

.header{

width: 100%;

height: 100px;

background:#07cbc9;

}

.header img{

height: 48px;

width: 260px;

padding: 26px 26px;

padding-left: 10%;

float: left;

}

a{

color: #fff;

text-decoration: none;

}

.header .header-word{

padding-right:75px;

}

.header .header-word ul li{

float: right;

font-size: 16px;

font-family: "微软雅黑";

padding-right: 10px;

padding-left: 10px;

list-style: none;

line-height: 100px;

color: #fff;

}

</style>

</head>

<body>

<div class="header">

<a href="#"><img src="logo.png"></a>

<div class="header-word">

<ul>

<a href="#"><li>CONTACT</li></a>

<a href="#"><li>EVENTS</li></a>

<a href="#"><li>FACULTY</li></a>

<a href="#"><li>GALLERY</li></a>

<a href="#"><li>ABOUT</li></a>

<a href="#"><li>HOME</li></a>

</ul>

</div>

</div>

<div class="clear"></div>

</body>

</html>


然后效果就出来啦，如图所示：

接下来就是今天我们所学内容最核心的内容，涉及到4个CSS的链接伪类。

链接伪类，是指链接的四个状态：激活状态（active）、已访问状态（visited）、未访问状态（link）、鼠标经过状态（hover）。

那么我们今天要使用的就是鼠标经过状态（hover），怎么使用呢？看已下这段CSS：


.header .header-word ul li:hover{

float: right;

font-size: 16px;

font-family: "Microsoft YaHei UI";

padding-right: 10px;

padding-left: 10px;

list-style: none;

line-height: 100px;

background: #000;

color: #fff;

}


是哒，这样就完成了我们今天要制作的效果。

接下来附上完整代码：


<!DOCTYPE html>

<html>

<head>

<title>August精彩编程</title>

<style type="text/css">

*{

padding: 0;

margin: 0;

}

body{

width: 100%;

}

html{

height: 2400px;

}

.header{

width: 100%;

height: 100px;

background:#07cbc9;

}

.header img{

height: 48px;

width: 260px;

padding: 26px 26px;

padding-left: 10%;

float: left;

}

a{

color: #fff;

text-decoration: none;

}

.header .header-word{

padding-right:75px;

}

.header .header-word ul li{

float: right;

font-size: 16px;

font-family: "微软雅黑";

padding-right: 10px;

padding-left: 10px;

list-style: none;

line-height: 100px;

color: #fff;

}

.header .header-word ul li:hover{

float: right;

font-size: 16px;

font-family: "Microsoft YaHei UI";

padding-right: 10px;

padding-left: 10px;

list-style: none;

line-height: 100px;

background: #000;

color: #fff;

}

</style>

</head>

<body>

<div class="header">

<a href="#"><img src="logo.png"></a>

<div class="header-word">

<ul>

<a href="#"><li>CONTACT</li></a>

<a href="#"><li>EVENTS</li></a>

<a href="#"><li>FACULTY</li></a>

<a href="#"><li>GALLERY</li></a>

<a href="#"><li>ABOUT</li></a>

<a href="#"><li>HOME</li></a>

</ul>

</div>

</div>

<div class="clear"></div>

</body>

</html>

04

那么小伙伴们可能有疑问了，如何才能学好HTML和CSS呢？

首先！

HTML是最容易让人坚持学下去的编程语言。


因为HTML写的网页随时可以看到效果。

首先，就拿C语言举例子，C语言学过的都知道，初学是在黑色的命令行窗口运行，除非掌握特别好，很精通那种，否则基本上只跟黑色窗口打交道了。

那有没有可能你也学到那个地步呢？

可能的，但是这让我想起某大学数据结构课程的老师的头顶光滑程度。


但是HTML和CSS就不一样了，哪怕只有10行代码，你都可以在浏览器看到你开发的网页！

差距就是这么大。

前端开发中HTML和CSS可以说是非常重要的内容了。

那如何学好HTML，为今后参与工作（或者说是防止挂科）打下基础呢？

这还用说，学习呗！


废话不多说，小编送你们HTML和CSS课程，有案例有答疑还不用钱，转发本文，然后私信小编，小编就发给你������

.行内式

直接在标签后面添加该标签的属性值

例如:

<table bgcolor="black" cellspacing="1px" width="600">

二.嵌入式

在title标签后添加<style type="text/css"></style>

注意：需要将样式放入<head></head>中

例如：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css样式使用</title>

<style type="text/css">

body{

background-color: antiquewhite;

}

p{

background-color: aqua;

}

</style>

</head>

<body>

<h1>CSS使用规则</h1>

<p>CSS使用规则/p>

</body>

三.导入式

创建css样式表如mystyle.css，再在HTML中链接此mystyle.css样式表。

<style type="text/css">


@import"mystyle.css"


</style>

四.链接式

创建css样式表如style.css，再在HTML中链接此style.css样式表。

<link rel="stylesheet" type="text/css" href="style.css">

例如：

HTML例子：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css样式使用</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<h1>CSS使用规则</h1>

<p>CSS使用规则/p>

</body>

</html>

CSS例子：

body{

background-color: antiquewhite;

font-size: 17px;

}

结果图：

五.采用导入式和链接式还是有不同的区别的：

1.使用链接式时，会在加载页面主体部分之前装载CSS文件，这样显示出来页面一开始就是带有样式效果的；

使用导入式时，会在整个页面装载完成后在装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件体积比较大的的时候，则会出现先显示无样式的页面，闪烁一下在出现设置样式后的效果，对于浏览者的感受，这是导入式的一个缺陷。

2.对于一些较大的网站，为了便于维护，可能会希望把所有的CSS样式分类别放到几个CSS文件中，如果这样使用链接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件。这对于维护工作来说，是一个巨大的缺陷。如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中在导入其他独立的CSS文件；而链接式则不具备这个功能。

因此，建议如果需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文化，在这个“目录”CSS文件中再使用导入式引入其他CSS文件。

但是，若是希望通过JavaScript来动态决定引入哪个CSS文件，则必须使用链接方式才能实现。

TML教程

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

HTML 很容易学习！相信您能很快学会它！

本教程包含了数百个 HTML 实例。

使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孙叫兽的博客</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

HTML 文档的后缀名

.html

.htm

都可以。

  • HTML 简介

实例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</header>
<body>
<h1>这是我的标题</h1>
<p>这是我的段落</p>
</body>
</html>

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset=“utf-8”> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

什么是HTML？

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面
  • HTML 标签
  • HTML 标记标签通常被称为 HTML

标签

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
    • <标签>内容</标签>

    html元素

    “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

    但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

    HTML 元素:

    <p>这是一个段落</p>

    web浏览器

    Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

    浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

    html网页结构

    <html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
        <p>这是另外一个段落。</p>
    </body>
</html>

    html的版本：

    <!DOCTYPE>声明

    <!DOCTYPE>声明有助于浏览器中正确显示网页。

    网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

    doctype 声明是不区分大小写的，以下方式均可：

    <!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

    html5

    <!DOCTYPE html>

    html4

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

    xhtml1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    中文编码

    目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。


    在线咨询
    上一篇：HTML 简单的&lt;li&gt; 标签
    下一篇：前端三大技术 HTML、CSS、JavaScript 快速入门手册

    您的项目需求

    *请认真填写需求信息，我们会在24小时内与您取得联系。

    推荐阅读
    友情链接 桦川县 砚山县 怀安县 忻州 舟曲县 沂水县 网站制作
    Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
    联系电话：   E-mail：279303980@qq.com  
    主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
    电话沟通
    在线客服