01. HTML和CSS
一、网页的组成部分
- 页面由三部分内容组成！ 分别是内容（结构）、表现、行为。
- 内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 html 技术来展示。
- 表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现
- 行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。
二、HTML
2.1、HTML简介
??Hyper Text Markup Language（超文本标记语言）简写：HTML；HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画 面如何安排，图片如何显示等）。
2.2、HTML文件的书写规范
Title
2.3、HTML标签介绍
- 标签的格式: <标签名>封装的数据
- 标签名大小写不敏感。
- 标签拥有自己的属性。
- 基本属性：可以修改简单的样式效果
- 事件属性：可以直接设置事件响应后的代码。
- 标签又分为，单标签和双标签。
- 单标签格式： <标签名 /> （HTML5规范单标签可以不加斜杠）
- 双标签格式: <标签名> ...封装的数据...
- 标签不能交叉嵌套
- 标签必须正确关闭
- 属性必须有值，属性值必须加引号
- 注释不能嵌套
2.4、常用标签
2.4.1、特殊字符
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |
|
|
| < | 小于号 | < |
< |
| > | 大于号 | > |
> |
| & | 与符号 | & |
& |
| " | 双引号 | " |
" |
| ' | 单引号 | ' |
' |
| ￠ | 分 | ¢ |
¢ |
| ￡ | 镑 | £ |
£ |
| ￥ | 人民币或日元 | ¥ |
¥ |
| § | 节 | § |
§ |
| ? | 版权 | © |
© |
| ? | 注册商标 | ® |
® |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
2.4.2、标题标签
Title
标题一
标题二
标题三
标题四
标题五
标题六
2.4.3、font字体标签
Title
我是字体标签
2.4.4、超链接
Title
百度
百度_self
百度_blank
2.4.5、列表标签
Title
- Sakura
- Mikoto
- Misaka
- Sakura
- Mikoto
- Misaka
2.4.6、img标签
Title
2.4.7、表格标签
Title
1.1
1.2
1.3
2.1
2.2
3.1
3.2
2.4.8、iframe框架标签（内嵌窗口）
Title
sakura
2.4.9、表单标签
Title
2.4.10、其它标签
Title
div_1
div_2
span_1
span_2
段落1
段落2
三、CSS
3.1、CSS概述
??CSS是层叠样式表单,是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
3.1.1、语法规则：
选择器{属性:值;}
- 选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）
- 属性（property）是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）
- 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号）
一般每行只描述一个属性
3.2、CSS和HTML的结合方式
- 在标签的style属性上设置“key:value value;”，修改标签样式。
- 如果标签多了。样式多了。代码量非常庞大。
- 可读性非常差。
- CSS代码没什么复用性可方言。
- 在head标签中，使用style标签来定义各种自己需要的CSS样式。
- 只能在同一页面内复用代码，不能在多个页面中复用CSS代码。
- 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
- 把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用。
Title
div_1
div_2
span_1
span_2
段落1
段落2
??template.css位于该html文件的下一级目录【css】，内容如下：
p{
border: 1px solid palegreen;
}
3.3、CSS选择器
3.3.1、标签名选择器
/* 标签名选择器，可以决定哪些标签被动的使用这个样式。 */
标签名{
属性：值;
}
template：
Title
div_1
div_2
span_1
span_2
3.3.2、id选择器
/*
id选择器，可以让我们通过id属性选择性的去使用这个样式。
id属性值不能以数字开头。
*/
#id属性值{
属性：值;
}
template：
Title
div_1
div_2
span_1
span_2
3.3.3、class选择器（类选择器）
/*
class类型选择器，可以通过class属性有效的选择性地去使用这个样式。
class属性值不能为数字开头
*/
.class属性值{
属性：值;
}
template：
Title
div_1
div_2
span_1
span_2
3.3.4、组合选择器
/* 组合选择器可以让多个选择器共用同一个css样式代码。 */
选择器1,选择器2,选择器n{
属性：值;
}
template：
Title
div_1
div_2
span_1
span_2