目录
一、HTML基础
1.什么是HTML？HTML构成结构
HTML是超文本标记语言（HyperText Markup Language）的缩写。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。它定义了网页内容的含义和结构。
HTML构成结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type=" ./XXX">
<title>页面标题</title>
</head>
<body>
<h1>一个Web页面</h1>
<p>丑陋的页面</p>
</body>
</html>2.HTML元素、标签
<html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head>元素。 这个元素是一个容器，包含页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标
<title>: 设置页面标题，出现在浏览器标签上。
<body>元素。 包含你能在页面看到的所有内容。
预设格式<pre> 保持文本特殊格式
标题元素<h1>到<h6>
段落元素<p></p> ，超链接<a href=" "></a>,
空元素（没有结束标签）：<br>空格, <hr>换行, <input>输入框, <img src=" ">图片, 等等。
文本格式控制：<mark>高亮、<del>已删除、<s>不准确、<ins>补充、<u>下划线 ，<small><strong><em>小字体、大字体、斜字体。
区块元素 : 在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等
内联元素:总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等
空元素（没有结束标签）：<br>空格, <hr>换行, <input>输入框, <img src=" ">图片, 等等。
3.HTML元素的属性
常用属性
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
| type | 定义类型 |
例子<p title=" XX" class="XX1 XX2 XXn " id="X" style=" XX" ></p> ,<input type='' password''>
4.表格、列表、表单
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data）
<table >
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
</tr>
</table>列表list
无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
<ul type="square">
<li>Alice</li>
<li>Can</li>
<li>Fail</li>
</ul>有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等
<ol type="A">
<li>a1</li>
<li>h8</li>
<li>e5</li>
<li>f6</li>
</ol>自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。
二、CSS基础
1.什么是CSS
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页上的元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等由CSS决定。
2.CSS语法和选择器
语法格式
选择器{
属性一： 值1；
属性二： 值2；
...........
}元素选择器
如h1 ,p,body等等；
h1{
color: blue;
text-align: center;
}类选择器
在CSS文件中定义类的样式，然后在html中调用。如<h1 class="blueclass">。可以重复使用
id选择器
对标签定义id：<p id="">，然后在CSS中定义该id的样式。不能重复使用。
在实际使用中更多会使用类选择器。
组合选择器：后代选择器 如.box p,就是对选择box类的元素中的p元素进行样式控制；
子选择器也称为直接后代选择器，.box > p，相当于后代选择器只选他的直接后代。
3.CSS中常用的属性
颜色：一般有3种方式实现。1.颜色名称 -如Tomato。2.十六进制 - 如："#ff0000"。
3.RGB - 如："rgb(255,0,0)"。
尺寸：用wight和height实现，有相对 - 如80%和绝对 -68px 的两种写法
对齐：
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right；
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
垂直居中对齐 - 使用 padding如padding :70px 0;
盒子模型：一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，用CSS可以对他们进行控制就能实现边距控制，如
.box{
border: 10px solid red;
padding: 25px;
margin: 25px;
}定位：position，有4种方式，static 静态（系统默认）relative 相对静态位置的移动。fixed 固定位置（相对浏览器屏幕不动）absolute 相对于其最近设置了定位属性（非static）的父元素进行偏移
浮点布局：float让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。如将4个图片在一行显示flost :right; 。
不透明度：opacity对元素进行透明度设置[0.0]~[1.0],越低越透明。
总结
html是网页构成的基础，对网页的内容进行解释并展示，CSS则是对html中的属性进行美化和布局优化。
2793
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
