HTML+CSS基础

任务一：课程简介

任务二：学习内容简介

我们主要学习哪些内容？

根据W3C标准，一个网页主要由三部分组成：结构、表现还有行为。

W3C标准：

1. 结构 HTML。HTML用于描述页面的结构。
2. 表现 CSS。CSS用于控制页面中元素的样式。
3. 行为 JavaScript。JavaScript用于响应用户操作。

这一阶段我们学什么？

主要内容有：

1. HTML
2. CSS
3. 网页布局

万维网联盟（W3C）

万维网联盟World Wide Web Consortium。

1. W3C专门为了定义网页相关的标准而成立。
2. W3C定义了网页中的HTML、CSS、DOM、 HTTP、XML等标准。

任务三：HTML简介

HTML

1. HTML（Hypertext Markup Language） 超文本标记语言。
2. 它负责网页的三个要素之中的结构。
3. HTML使用标签的的形式来标识网页中的不同组成部分。
4. 所谓超文本指的是超链接，使用超链接可 以让我们从一个页面跳转到另一个页面。

任务四：HTML注释

注释

1. HTML注释中的内容不会在网页中显示。
2. 格式:
3. 合理的使用注释可以帮助开发人员理解网页的代码，注释一定要简单明了。
4. 注释不能嵌套！

最基本的HTML页面

    
    


    
网页正文

标签

1. HTML中的标记指的就是标签。

2. HTML使用标签来描述网页。

3. 结构：

   ​ <标签名>标签内容

   ​ <标签名 />

元素

1. 我们还将一个完整的标签称为元素。标签=元素

2. 这里我们可以将元素和标签认为是一个同义词。

3. 一级标题
    
   

4. 上边的h1我们就称为元素

5. 我是一个段落
    
   

6. p也是一个元素。em是p的子元素，p是em的父元素。

7.  
       
   内容
    
   
   

8. body也是一个元素。body是p和em的祖先元素，p和em是body的后代元素。

任务5：标签的属性

属性

1. 可以为HTML标签设置属性。
2. 通过属性为HTML元素提供附加信息。
3. 属性需要设置在开始标签或自结束标签中。
4. 属性总是以名值对的形式出现。
5. 比如：name=“value”
6. 有些属性可以是任意值，有些则必须是指定值。
7. 属性名 = "属性值"，一个标签中可以同时设置多个属性，属性之间需要使用空格隔开

标题
 

常见属性

id

id属性作为标签的唯一标识，在同一个网页中不能 出现相同的id属性值。

class

class属性用来为标签分组，拥有相同class属性的 标签我们认为就是一组，可以出现相同的class属 性，可以为一个元素指定多个class。

title

title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

任务6：文档声明

HTML的发展历史

1. 1993年6月：HTML第一个版本发布。
2. 1995年11月：HTML2.0
3. 1997年1月：HTML3.2（W3C推荐）
4. 1999年12月：HTML4.01（W3C推荐）
5. 2000年底：XHTML1.0（W3C推荐）
6. 2014年10月：HTML5（W3C推荐）

DOCTYPE

1. HTML总共有那么多的版本，而且这其中至 少有三个版本在广泛使用，那么浏览器怎 么知道我们在使用哪个版本呢？
2. 为了让浏览器知道我们使用的HTML版本我 们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本

H5

我们会发现html4.01和xhtml的文档声明十 分的麻烦。不过不用担心，以上的内容都 不是我们使用的，我们使用的是html5的文档声明，而且非常简单：

怪异模式

1. 为了兼容一些旧的页面，浏览器中设置了 两种解析模式：
   1. 标准模式（Standards Mode）
   2. 怪异模式（Quirks Mode）
2. 怪异模式解析网页时会产生一些不可预期 的行为，所以我们应该避免怪异模式的出 现。
3. 避免的最好方法就是在页面中编写正确的 doctype。

任务7：进制的简介

简介

几进制就是满几进一

二进制

0 1

10 11 100 101 110 111

十六进制

满16进1

0 1 2 3 4 5 6...9 a b c d e f

10 11 12 ... 19 1a 1b 1c 1d 1e 1f

16进制由于是满16进1，所以必须设置几个特殊的字符来表示10 11 12 13 14 15，使用a b c d e f分别表示10 11 12 13 14 15

八进制

满8进1

0 1 2 3 4 5 6 7

10 11 12 13 14 15 16 17 20 21 22

任务8：乱码问题

编码问题

1. 在计算机的内部，文件都是以二进制编码保存的。
2. 所谓的二进制编码就是指 1 和 0 ，也就是我们的所有内容都需要转换为 1 和 0 。
3. 中国 两个字在计算机的底层保存的可能要转换为 10100101 这种二进制码，这一过程称为 编码 。
4. 计算机在读取文件时需要将 10100101 在转换为中国给我们显示这一过程称为 解码 。

字符集

1. 这就带来一个问题，中国到底是 10100101还是 01011010 到底由谁说了算。
2. 所以我们还需要一个东西称为 字符集 ，字符集规定了如何将文本转换为二进制编码。
3. 常见的字符集： ASKII 、 ISO8859-1 、 GBK 、GB2312 、 UTF 8

乱码

1. 如果我们保存文件时使用的是utf-8进行编码，而浏览器读取页面时使用gb2312，这样就会导致页面中的内容不能正常显示，也就是我们所说的乱码。
2. 所以我们只需要统一两者使用的字符集就可以解决乱码问题。
3. 这里为了页面有更好的使用性，我们一般使用utf-8。

解决

1. 保存文件的编码我们直接通过编辑器即可指定，接下来就是要告诉浏览器使用什么字符集去解析文件。

2. 在html5中只需要使用meta标签即可完成这个任务：

meta

• 作用：
  • 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
  • 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

meta的用法

• 设置页面的字符集

• 设置网页的描述

• 设置网页的关键字

• 请求的重定向

任务9：常用的标签

html

• 作用：
  • 标签用于告诉浏览器这个文档中包含的信息是用HTML编写的。
• 用法：
  • 所有的网页的内容都需要编写到html标签中，一个页面中html标签只能有一个。
  • html标签中有两个子标签head和body。

head

• 作用：
  • 标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。
• 用法：
  • head标签作为html标签的子元素的出现，一个网页中只能有一个head。

title

• 作用：