HTML
HTML特点与基本结构
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，其主要特点如下：
1、简易性
2、可扩展性
3、平台无关性。
标记语言语法：
1、<标签名>——>起始标签
标签体（可以有文本内容、子标签）
</标签名>——>结束标签
2、空标签：即没有标签体的标签
<标签名/>
3、一个html或者xml文件只能有一个根标签，其他内容都出现在根标签里。
4、标签可以有属性，一般属性要出现在起始标签里，属性值用””或者’’引起来，多个属性之间用空格隔开。
<标签名 属性名1=”属性值1” 属性名2=”属性值2” ……>
注：html标签定义的文件以.html或.htm为结尾，本质就是个文本文件，可以用任意编辑工具编写，打开时用浏览器查看。
HTML基本元素
head
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义是文档的标题。
<meta> 元素可提供有关页面的元信息（meta-information）
例：
<head>
<title>我的网页</title>
<meta name="author" content="Sunys"/>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
body
1、 文本相关
<h1></h1>
<h2></h2>
……
<h6></h6>
<center></center>：居中
<b></b>：加粗
<strong></strong>：加粗
<em></em>：斜体
<i></i>：斜体
<p></p>：段落（默认的段落格式）
<pre></pre>：段落（根据自己的样式不变，即保持写入的状态）
<hr/>：一条横线
<br></br>：换行
<ul>：无顺序排列
<li></li>
<li></li>
……
</ul>
<ol>：有顺序排列
<li></li>
<li></li>
……
</ol>
<dl>：定义列表，<dt>定义列表中的项目，<dd>是描述列表中的项目
<dt></dt> <dd></dd>
<dt></dt> <dd></dd>
……
</dl>
2、图片和超链接
图片：<img src=”图片路径” alt=”图片不正常显示” />
超链接：<a href=”资源路径” target=”_self（默认）/_blank”></a>
3、 表格和表单
<table>
<tbody>
<tr>
<td></td>
……
</tr>
……
</tbody>
</table>
border：边框的粗细
bordercolor：边框颜色
cellspacing：单元格间隙
colspan：占几列
rowspan：占几行
注：块级元素，块级元素里的内容会独占一行，例如<ul>、<p>、<div>
行内元素，例如<font>、<span>
表单：<form action=”表单将被提交给哪一个程序处理” method=”get（默认）/post”>
表单体
</form>
在表单里，文本输入框的名必须是唯一的。
4、 文本域
<textarea cols=”多少列” rows=”多少行”></textarea>
5、 文件
<input type=”file”/>
6、 按钮
提交按钮：<input type=”submit”/>
重置按钮：<input type=”reset”/>
普通按钮：<input type=”button”/>
HTML与属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
例：<a href="https://www.baidu.com">This is a link</a>
HTML框架与iframe
什么是布局？
布局就如同建筑的结构，在建高楼大厦时都是先把钢筋搭建好，有一个具体的结构之后，建筑工人再接着盖楼。
制作网页就如同盖大楼，布局就如同搭建钢筋，布局的结果直接影响到网页的外观，合理的布局才能令网页显得更加大气、紧凑、美观。
例：
<html>
<frameset rows="15%,60%,15%" border="5">
<frame name="top" src="top.html"></frame>
<frameset cols="20%,*" >
<frame name="left" src="left.html"></frame>
<frame name="main" src="main.html"></frame>
</frameset>
<frame name="bottom" src="bottom.html"></frame>
</frameset>
</html>
注：跳转时，可使用target。
CSS
css功能与特点
CSS(Cascading Stype Sheets)：层叠样式表，主要用来控制视觉效果。
在html里引入CSS代码的方法：
1、 将CSS脚本内嵌在需要定义风格的标签里
<标签名 style=”属性名1：属性值1;属性名2:属性值2;……”>
2、 在head标签里统一用<style>标签定义
<head>
<style type=”text/css’>
标签名{属性名1:属性值1;属性名2:属性值2;……}
</style>
</head>
3、 将css脚本代码单独定义成一个.css文件，在需要使用该文件的html网页里通过link标签引入。
<link type=”text/css” rel=”stylesheet” href=”XXX.css” />
CSS脚本常用的语句：
1、 标签名{属性名:属性值;属性名:属性值;……}
2、 标签名1，标签名2，……{属性名:属性值;属性名:属性值;……}
3、 标签名.风格名{属性名:属性值;属性名:属性值;……}
4、 .风格名{属性名:属性值;属性名:属性值;……}——>在标签里使用时class=”风格名”
5、 #风格名{属性名:属性值;属性名:属性值;……}——>在标签里使用时id=”风格名”
6、 a:状态名{属性名:属性值;属性名:属性值;……}——>控制超链接不同状态下的显示格式
例：a{……}
a:hover{……}——>鼠标悬停在超链接上时的状态。
常用的css属性
1、 文本相关
text-align(对齐方式)：left/center/right
color：指定文字颜色
text-indent：缩进距离（例：text-indent:10px;）
2、 字体相关
font-family：字体
font-weight(字体宽度)：normal/bold/lighter/bolder
font-size：字体大小
3、 颜色背景
background-color：背景颜色
background：url(图片路径)——>背景图片
background-size：背景大小
4、 边框相关
boder
5、 超链接相关
a:hover——>是把鼠标放上去时悬停的状况
6、 常用属性
display：显示方式
block——>块级元素
inline——>内联的，行内元素
none——>隐藏，不显示且不在网页占任何位置
float：浮动方式
left——>允许接下来的元素与某列成一行并向左挤我
right——>允许接下来的元素与某列成一行并向右挤我
补白
padding：内补白(padding、padding-top/left/right/bottom)
padding：上 下 左 右
padding：上下 右左
margin：外补白
css选择器
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
比如要控制某个DIV下的某个TABLE的偶数行的样式时，就可以用CSS选择器。
基础选择器
复合选择器
属性选择器
伪类选择器
结构性伪类选择器
css定位
相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在
它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它
的起点进行移动。
例：
<div style="border: 1px solid red;
200px;
height: 200px;position:relative;
left:100px;
top:100px">
</div>
绝对定位
绝对定位是布局定位中相当重要且最难控制的定位类型。
首先绝对定位是不占空间的，运用了绝对定位的DIV会脱离原来的Z轴，浮动起来，因此视觉上会与其他的元素重叠。
绝对定位是以body的左上点为原点进行位移。
代码为：absolute
浮动定位
浮动定位一般用于使标签横向排列。
使用方式为float：left
例：
<div style="background-color: red; 100px;height: 100px;float: left;"></div>
<div style="background-color: black; 100px;height: 100px;float: left;"></div>
<div style="background-color: yellow; 100px;height: 100px;float: left;"></div>