一、HTML总结
1 概念
HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的
标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。
2 HTML 标题
标题（Heading）是通过 < h1> - < h6> 等标签进行定义的。
< h1> 定义最大的标题。< h6 > 定义最小的标题。
<h1>This is a heading</h1>3 HTML文本
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
如下代码：
<p>TThis text is normal</p>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
4 HTML超链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
超链接标签：<a>一个链接到另一个链接 【Anchor 锚】
<a href="跳转目标- target="目标窗口的弹出方式">文本或图像</a>5 HTML 图片
我们可以用<img>元素来把图片放到网页上。它是一个空元素（它不需要包含文本内容或闭合标签），最少只需要一个 src （一般读作其全称 source）来使其生效。src 属性包含了指向我们想要引入的图片的路径。我们也可以对图片的长宽进行限制
<img src="picture.png" width="300" height="300">6 HTML表格
<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构；其中： <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
<table border="边框宽度">
<tr>
<th> 编号 </th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>黄某</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>胡某</td>
<td>女</td>
</tr>
</table>7 HTML列表
有序列表
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>无序列表
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>定义列表
<dl>
<dt>结构</dt>
<dd>这里是对结构的解释说明</dd>
</dl>8 HTML表单
表单是网页交互的基本工具， 一般网站都借助表单实现用户与服务器之间的信息交流，但是web页面也可以自己拦截它并使用它。
HTML表单是由一个或多个小部件组成的，这些小部件可以是输入框、选择框和按钮。而且为了更好地实现无障碍HTML与更好的交互，大多数情况下，这些小部件还需要与描述其目的的标签配对。
<form action="/formhandle" post="post">
...
</form>
<div>
<label for="name">Name:</label>
<input type="text" id="name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>二、CSS总结
1 概念
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
2 CSS语法
<head>
<style>
选择器{
属性名：属性值;
属性名：属性值;
}
</style>
</head>
3 CSS应用
内联样式
<p style="color:red;font-size:30px">这里是红色的大字</p>内部样式
p{
color:purple;
background-color: pink;
}外部样式
<link rel="stylesheet" href="my.css"/>4 CSS颜色、尺寸
4.1 颜色
可以使用rgb值、颜色名称、rgb函数、rgba函数
rgb(255,0,0)----->红
rgb(0,255,0)----->绿
rgba(255,0,0,1)----->纯红
rgba(255,0,0,0.5)---->红色半透明4.2 尺寸
可以调节尺寸
width: 111
height: 2225 CSS盒子模型
盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
6 CSS边框与边距
border : border-width || border-style || border-color 边框样式用于自定义风格
one：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线边距
.header{ width:960px; margin:0 auto;}7 CSS定位
7.1 静态定位
一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。
7.2 绝对定位
绝对定位的元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。
7.3 相对定位
相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。
7.4 固定定位
固定定位与绝对定位类似，但它是相对于浏览器窗口定位，不会随着滚动条进行滚动，并且最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，如此则不需使用margin、border、padding。
8 CSS 溢出
CSS定义中的overflow属性，封装了溢出处理的这个概念。在盒子模型中的代表标签的矩形对象，可以通过CSS样式来定义内容区域的高度与宽度，当这个内容无法容纳子矩形对象时，对于这些子矩形对象必须决定怎么显示，显示什么，这样的处理规则就称为溢出处理。浏览器在做显示运算的时候，会依照溢出处理，来计算内容区域无法容纳的子矩形对象在浏览器上的显示方式。
9 CSS浮动
9.1 浮动元素有左浮动(float:left)和右浮动(float:right)两种
9.2 浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
9.3 相邻浮动的块元素可以并在一行，超出父级宽度就换行
9.4 浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
9.5 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
9.6 父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
9.7 浮动元素之间没有垂直margin的合并
10 CSS 组合选择器
CSS有三种选择器：元素、id 和 class 。我们也可以对这三种选择器进行组合，靠此得到简洁精确的选择。
11 伪类和伪元素
1、伪类
概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。它可以用于：设置鼠标悬停在元素上时的样式、为已访问和未访问链接设置不同的样式、设置元素获得焦点时的样式。
2、伪元素
概念：创建一些不在文档树中的元素，并为其添加样式。它可以用于：设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容。
3724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
