HTML和CSS简介
一、HTML
1.1 介绍
- HTML(Hypertext Markup Language)超文本标记语言
- 它负责网页的三个严肃之中的结构
- HTML使用标签的形式来标识网页中的不同组成部分
- 所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面
1.2 标准结构
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
解释:<></>结构体
<html></html>根标签,一个页面中只能有一个跟标签
<head></head>子标签,设置一些信息给浏览器看,帮助浏览器解析网页,不会在网页中直接显示
<title><title>网页标题标签,默认显示在浏览器标题栏中,搜索引擎在检索页面时,会首先检索title标签中的内容。有专门的人写这个东西。
<body></body>子标签,页面可见的内容写在这里
1.3 标签简单介绍
-
HTML中标记指的就是标签
-
HTML使用标记标签来描述网页
-
结构:
<标签名>标签内容</标签名>
<标签名/>
-
我们还可以将一个完整的标签称为元素。
这里我们可以将元素和标签认为是一个同义词
<h1>一级标题</h1> 上边的h1我们就称为元素 <p>我是一个<em>段落</em></p> p也是一个元素,em是p的子元素,p是em的父元素。
1.3.1 注释标签
<!-- 注释标签,只在代码中显示,不会在网址页面中显示 -->
1.3.2 font标签
<html>
<head>
<title></title>
</head>
<body>
<h1>
<!--
color和size分别是font标签的属性
属性:
可以通过属性来设置标签如果处理标签中的内容
可以在开始标中添加属性
属性需要写在开始标签中,实际上就是一个名值对的结构
属性名 = “属性值"
-->
这是一个<font color="red" size="7">font标签</font>的例子
</h1>
</body>
</html>
↓这是上方代码在网页中显示的效果↓
这是一个font标签的例子
注:font标签目前已经不推荐使用了,因为装饰是CSS的功能,现在font标签已经被弃用了
1.4 HTML的发展
1.4.1 历史版本
- 1993年6月:HTML第一个版本发布(不够仅内部交流使用的)
- 1995年11月:HTML2.0发布(但严格意义上来说没有1.0版本)
- 1997年1月:HTML3.2(W3C推荐)
- 1999年12月:HTML1.0(W3C推荐)
- 2000年底:XHTML1.0(W3C推荐)
- 2014年10月:HTML(W3C推荐)
1.4.2 解决HTML版本多的方法
- 通过在网页的最上边添加一个doctype声明,来告诉浏览器网页的版本。
<!-- 这是HTML5的文档声明 -->
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
-
HTML各个版本的文档声明
- html4
【过渡bai定义类型】:HTML4.01文档过渡定义类型,此类型定义的文档,对于标记和属性的语法要求并不是很严格,可以使用HTML中的标签与元素包括一些修饰性标签(例如:u、b等标签),不可以使用框架。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
【严格定义类型】:HTML4.01文档严格定义类型,此类型定义的文档,对于文档内的代码要求比较严格,不允许使用任何表现层的标记和属性(例如:u、b等标签),不可以使用框架。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
【框架定义类型】:HTML4.01文档框架定义类型,除 frameset 元素取代了 body 元素之外,此类型等同于HTML4.01文档过渡定义类型,但可以使用框架。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- xhtml1.0
【过渡板】
【严格版】
【框架集】
- html5
<!doctype html>
1.4.3 怪异模式
- 为了兼容一些旧的页面,浏览器中设置了两种解析模式
- -标准模式
- -怪异模式
- 怪异模式解析网页时会产生一些不可预期的行为,所以我们应该避免怪异模式的出现。
- 避免的最好方式就是在页面中编写正确的doctype。
二、CSS
2.1 CSS介绍
-
什么是CSS?
CSS用来控制网页的标新
-
CSS怎么使用
- 写在标签的style属性中
<!-- 可以将CSS样式编写到元素的sytle属性当中 将样式直接编写到style属性中,这种样式我们称为内敛样式 内联样式只对当前的元素中的内容起作用,内联样式不方便复用 内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用的 --> <p style="color:red;font-size:40px"> 锄禾日当午,汗滴禾下土。 </p> <p style="color:red;font-size:40px"> 谁之盘中餐,粒粒皆辛苦。 </p>
- 写在head标签中
<!doctype html> <head> <meta charset="utf-8"> <title>CSS使用</title> <!-- 也可以将CSS样式编写到head的style标签里 将样式表编写的style标签中,然后通过CSS选择器选中指定元素 然后可以同时为这些元素一起设置样式,这样可以使样式进一步复用 将样式表编写到style标签中,也可以使表现和结构进一步分离它也是我们推荐的使用方式 --> <style type="text/css"> p{ color:red; font-size:40px; } </style> </head> <body> <p> 这是一个p标签 </p> </body>
- 写在CSS文件中
<!-- 还可以将样式表编写到外部的CSS文件中,然后通过link标签来将外部的CSS文件引入当前页面中,这样外部文件中的CSS样式表会应用到当前页面中。 将CSS样式统一编写到外部的样式表中,完全使结构和表现分离,可以使样式表在不同的页面中使用,最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存加快用户访问的速度提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的CSS文件 --> <!doctype html> <head> <meta charset="utf-8"> <title>CSS使用</title> <!-- 在CSS文件中直接写style标签中的内容就行,不用写<style></style> --> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <p> 这是一个p标签 </p> </body>
-
CSS语法
-
CSS的注释
作用和HTML注释类似,只不过它必须编写在style标签中,或者是CSS文件中
-
CSS的语法:
选择器 声明块
-
选择器:通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上
p{
}
-
声明块:声明块在选择器的后边,使用一对{}括起来,声明块中实际上就是一组一组的名值对结构,这一组一组的名值对我们称为声明,在一个声明块中可以写多个声明,多个声明之间使用;隔开
color:red;
font-size:40px;
-
-