HTML5+CSS3+移动端布局+flex布局rem布局响应式布局摹客蓝湖使用教程笔记

• 基础班学习路线
• HTML简介
• • 页
  • • 什么是 页
  • 什么是HTML
  • 常用浏览器
  • • 常用浏览器
    • 浏览器内核
  • ***Web标准（重点）***
  • • *Web标准的构成*
• HTML标签（上）
• • HTML语法规范
  • • 基本语法概述
    • 标签关系
  • HTML基本结构标签
  • 开发工具
  • • 页开发工具
  • HTML常用标签
  • • 标签语义
    • 标题标签
    • 段落和换行标签
    • 文本格式化标签
    • < div>和< span>标签
    • 图像标签和路径
    • • 图像标签:
      • 路径:
    • *超链接标签*
    • 注释标签和特殊字符
    • • 注释标签
      • 特殊字符
• HTML标签（下）
• • 表格标签
  • • 表格的主要作用
    • 表格的属性：（了解，CSS会使用）
    • 表格结构标签
  • 列表标签
  • • 无序列表
    • 有序列表
    • *自定义列表*
  • 表单标签
  • • 表单域
    • 表单元素
    • • < input>表单元素
    • label标签
    • select下拉表单
    • < textarea>表单元素
• CSS层叠样式表
• • CSS简介
  • • HTML的局限性
    • CSS- 页的美容师
    • CSS组成
    • CSS代码风格
  • CSS基础选择器
  • • 标签选择器
    • 类选择器
    • 类选择器-多类名
    • ID选择器
    • 通配符选择器
  • CSS字体属性
  • • 字体系列
    • 字体大小
    • 文字粗细
    • 字体样式
    • 字体复合属性
  • CSS文本属性
  • CSS的引入方式
  • • 内部样式表
    • 行内样式表
    • 外部样式表
  • 综合案例
  • Chrome调试工具的使用
  • Emmet语法
  • • 快速生成HTML结构语法
    • 快速生成CSS
    • 快速格式化代码
  • CSS的复合选择器
  • • *后代选择器（重要）*
    • *子选择器（重）*
    • 并集选择器（重要）
    • 链接伪类选择器
    • focus伪类选择器
  • CSS的元素显示模式
  • • 块元素
    • 行内元素
    • 行内块元素
    • 元素显示模式的转换
    • 单行文字垂直居中的原理
  • CSS的背景
  • • 背景颜色
    • 背景图片
    • **背景图片位置**
    • 背景图像固定（背景附着）
    • 背景复合写法
    • 背景颜色半透明
  • CSS三大特性
  • • 层叠性
    • 继承性
    • • 行高的继承
    • CSS优先级
  • 盒子模型
  • • 盒子模型的组成（Box Model)
    • 边框（border)
    • 边框为影响盒子的实际大小
    • 内边距
    • 盒子的内边距也影响其大小
    • padding不影响盒子的长宽的情况
    • 外边距（margin)
    • 外边距的典型应用（块级盒子水平居中）
    • 外边距合并
    • • 相邻块元素垂直外边距的合并
      • 嵌套块元素垂直外边距合并
    • 清除内外边距

基础班学习路线

主要学习内容：PC端 站布局
最终检验：创建一静态 站
目标：精通 络布局，为JavaScript打下基础
学习路线：HTML5基础→CSS3基础→H5C3提高→开发电商 站

HTML简介

学习内容： 页、HTML概念、常用浏览器、Web标准三大组成部分

页

什么是 页

站是 页的集合， 页是构成 站的基本元素， 页包括的元素：图片、文字、声音、视频、链接…， 页常见.htm或.html后缀，又称为HTML文件。

什么是HTML

HTML指的是超文本标记语言，是一种标记语言，标记语言是一套标记标签。

常用浏览器

常用浏览器

浏览器是 页显示、运行的平台。常用的：IE、火狐、谷歌、Safari、Opera等。（五大浏览器）

浏览器内核

又称为渲染引擎，负责读取 页内容整理讯息，计算 页的显示方式并显示页面。
IE：Trident
firefox：Gecko
Safari：Webkit
chrome/Opera：Blink（Webkit的分支）
国产浏览器：Webkit、Blink

Web标准（重点）

Web标准由W3C（万维 联盟）组织和其他标准化组织指定的一系列标准的集合。

Web标准的构成

结构（Structure）、表现（Presentation）、行为（Behavior）
结构：对 页元素进行整理分类，主要是学习HTML
表现：设置 页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为：行为指的是 页模型的定义和交互的编写，主要学JavaScript
Web标准提出的最佳体验方案：结构、表现、行为相分离。

HTML标签（上）

HTML语法规范

基本语法概述

1.HTML标签由尖括 包围的关键词
2.一般成对出现，如 < head>< /head>，称为双标签；但特殊的但标签，如
< br />称为单标签

标签关系

包含关系和并列关系
< html>
< head>< /head>
< body>< /body>
< /html>
如< html>< head>之间为包含关系，而< head>< body>之间为并列关系。

HTML基本结构标签

title标签显示在 页最上方：
body标签则是 页主要内容。
基本结构标签总结：
< html>
< head>
< title>
< /title>
< /head>
< body>
< /body>
< /html>

其中html为最大标签，根标签。

段落和换行标签

< p>我是一个段落< /p>
标签语义：可以把html文档分割为若干段落
< br />换行标签
标签语义：强制换行，并没有行间那么大的缝隙。

文本格式化标签

在 页中，有时需要文字设置粗体、斜体或下划线等效果，需要用到HTML中的文本格式化标签。（更重要）
加粗：< strong>或< b>
倾斜：< em>或< i>
下划线：< ins>或< u>
删除线：< del>或< s>

< div>和< span>标签

没有语义，就是一个盒子用来装内容。
特点：< div>标签用来布局，但一行只能放一个< div>可以理解为一个大盒子
< span>标签用来布局，可以理解为小盒子

图像标签和路径

图像标签:

< img>用于定义HTML页面中的图像
< img src=’‘图像URL’’ />
src是< img>标签的必须属性 ，用于指定图像文件的路径和文件民
属性：属于图像标签的特性
图片和html文件放在一个文件夹，图片的后缀名也需要

路径:

（1）目录文件夹和根目录
目录文件夹：就是普通文件夹，存放与所作页面需要的素材，如html文件、图片等
根目录：打开目录文件夹的第一层就是根目录
（2）路径
相对路径：以引用文件所在位置为参考基础
图片相对于HTML页面的位置

6.锚点链接：点击链接后可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为*#名字* 的形式，如< a href=”#live”>生活< /a>
目标位置标签在里面添加一个id=刚才的名字，如< h3 id=“live”>生活介绍< /h3>

注释标签和特殊字符

注释标签

是给程序员看的，不执行也不显示到页面当中
ctrl +/ 就可以注释
< !– 文本 – >

特殊字符

空格 & nbsp;
小于 & lt;
大于 & gt;

列表标签

无序列表

< ul >标签代表无序列表，而列表项用< li >，< ul >中间只能嵌套 < li >
< li >中可以放任何元素
无序列表的各个列表项之间没有顺序级别之分，是并列的。
无序列表自带样式属性，但实际使用时我们会用CSS来设置。
有时候需要清除li的前面的小圆点，用CSS设置：
li {
list-style:none;}
在前面给所有的li设置哦~

自定义列表

表单域

定义：一个包含表单元素的区域
< form>标签定义，一定要先写！！！！！
会把它范围内的表单元素信息提交给服务器

select下拉表单

当有很多选择时为节约空间，可使用下拉表单元素

< textarea>表单元素

当用户输入内容较多时，可以用文本域标签

CSS代码风格

1.样式格式书写
紧凑格式
展开格式，如：
p {
color:red;
font-size: 12px;
/* 修改字体大小为12像素 */
}
2.样式大小写
习惯小写
3.空格规范

1. 在属性值的前面，冒 的后面保留一个空格
2. 在选择器和大括 之间保留空格

CSS基础选择器

选择器的作用：选择标签用的
选择器可分为：基础选择器和复合选择器

标签选择器

标签选择器时HTML的标签名称作为选择器，可以把某一类标签全部选择出来， 不能设计差异化样式。

类选择器

差异化选择不同标签，可以单独选择一个或某几个标签

.类名 {
属性1： 属性值；
…
}
结构需要用class属性
类名是我们自己取的，但不能和标签重名，同样尽量不要使用数字中文等，尽量用英文字母。详细可见：类命名规范

通配符选择器

使用“*”定义
他表示选择页面中所有的元素（标签）
不需要再标签后再写什么

CSS字体属性

字体系列

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）
各个字体之间要用英文逗 “,” 隔开；
一般使用英文来写字体，中文写的和多个英文单词组成的字体最好加上双引 ；
一般直接给body标签改字体系列样式；

文字粗细

CSS使用font-weight设置字体的粗细。

字体样式

CSS使用font-style属性设置文本的风格

CSS文本属性

CSS Text(文本）属性可定义文本的外观，如颜色、缩进、对其、装饰（下划线…)、行间距等。
代码如下：
color text-align text-decoration

外部样式表

分为两步：
1.新建一个后缀名为.css的文件
2.在HTML页面中，使用< link >标签引入文件。
（注意写完后要保存哦）

快速生成CSS

CSS的复合选择器

复合选择器建立在基础选择器之上，对基本选择器进行组合形成的。
常用的复合选择器包括：后代选择器、子元素选择器、并集选择器、链接伪类选择器、focus伪类选择器。

后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面子元素，即把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
元素1 元素2 {样式声明}
表示选择元素1里面所有元素2（2必须是1的后代元素）
元素1、2之间需要空格隔开；
改变的样式只有元素2的；
元素2可以是儿子、孙子。。。
如图：