网页三兄弟：HTML、CSS、JavaScript
由上图可以发现 HTML 负责把网页的结构构建出来，所以看起来都方方正正的不是很美观，而 CSS 负责把外貌给显示出来，让网页的外貌看起来美观一些，最后 JavaScript 负责去控制网页里面的内容以及使用者的操作行为。
HTML
HTML语法
什么是 HTML
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- -标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
-
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
-
HTML 标签是由尖括号包围的关键词，比如
<html> -
HTML 标签通常是成对出现的，比如
<b>和</b> -
标签对中的第一个标签是开始标签，第二个标签是结束标签
-
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML元素
HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
<p> 元素：
<p>This is my first paragraph.</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：This is my first paragraph。
思考问题1：标签和元素的区别
常用标签
<h1>这是一个标题。</h1>
<p>这是一个段落 </p>
<a href="https://www.baidu.com/">百度</a>
<img src="url" alt="some_text">
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
元素的分类：块级元素和内联元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用
<table>元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span>元素也没有特定的含义。
当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。
CSS
CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
思考问题1：已经有了HTML为什么还要在创造样式？
思考问题2：怎么理解层叠的意思？
CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; … declarationN }
选择器通常是我们需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {
color:red;
font-size:14px;
}
下面的示意图为您展示了上面这段代码的结构：
常用属性
body {
background-color:#b0c4de;
}
.one {
border-style:solid;
border-width:5px;
}
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.center {
text-align: center;
border: 3px solid green;
}
CSS基本选择器
选择器允许以一种独立于文档元素的方式来指定样式。常见的主要有3中基本选择器，主要为：id选择器、类选择器、元素选择器，属性选择器和通用选择器这里不再讲解，大家自己下去看。
元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
id选择器
id选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 # 来定义。
以下的样式规则应用于元素属性 id=“title”:
#title {
text-align:center;
color:red;
}
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {
text-align:center;
}
思考问题1：类选择器和id选择器分别在什么情况下使用？
CSS高级选择器
高级选择器就是用组合选择符把基本选择器组合起来使用。
组合选择符说明了两个选择器直接的关系。
注意区分后代、儿子、兄弟的关系；
伪类和伪元素选择器这里不再说明，大家下去自己了解。
后代选择器
后代选择器（descendant selector）又称为包含选择器。
后代选择器用于选取某元素的后代元素（可以选择作为某元素后代的元素）。
后代选择器，描述的是祖先结构。
以下实例选取所有 <p> 元素插入到 <div> 元素中:
div p {
background-color:yellow;
}
子选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {
color:red;
}
注意：子结合符两边可以有空白符，这是可选的。
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {
margin-top:50px;
}
交集选择器
h3.special{
color:red;
}
选择的元素要求同时满足两个条件：必须是h3标签，然后必须是special标签。
在HTML中使用:
<h3 class="special">css</h3>
注意，交集选择器没有空格。所以，没有空格的
div.red（交集选择器）和有空格的div .red（后代选择器）不是一个意思。
交集选择器一般都是以标签名开头，比如div.top , p.special。
并集选择器(分组选择器)
三种基本选择器都可以放进来。
p,h1,#mytitle,.one {
color:red;
}
定义了一个并集选择器，带有p,h1,id="mytitle",class="one"的标签都内容会显示红色;
组合选择符号表
| 项目 | Value |
|---|---|
| 后代选择器 | 空格 |
| 子选择器 | > |
| 相邻兄弟选择器 | + |
| 后续兄弟选择器 | ~ |
| 交集选择器 | . |
| 组合选择器 | , |
| 串联选择器 | & |
文档流
何为文档流？我们以作业本来举例
什么是文档流(normal flow)，下面是 www.w3.org 的描述：
Normal flow
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
- normal flow直译为常规流、正常流，国内不知何原因大多译为文档流；
- 窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素；
- 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端，若当前行容不下，则另起新行再浮动；
- 内联元素也不会独占一行，几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素；
- 有三种情况将使得元素脱离normal flow而存在，分别是 float，absolute ，fixed。
盒模型
所谓盒模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。
所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素再网页布局中所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
盒子模型特性：
- 每个盒子都有：边界、边框、填充、内容 4个属性；
- 每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。
传统布局（display、position、float）
无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
CSS display(显示)属性
display属性设置一个元素应如何显示
CSS position(定位)属性
CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。
position: static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。
position的默认值是static。
position: relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
position: absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margin），且不会与其他边距合并。
position: fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
CSS float(浮动)属性
float
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
重要结论：
假如某个div元素A是浮动的，如果A元素的上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；
如果A元素的上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。
经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
clear
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
清除浮动可以理解为打破横向排列。
语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
扫一扫
5308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
