HTML

一般不区分大小写建议小写（比较规范容易看）

基本语法

基本语句

结束符为’ / ’ 。
部分语句不需要结束符。

最基本的HTML文档：
<HTML></HTML>  HTML标记符
<HEAD></HEAD> 位于开头，不包括WEB页的任何实际内容，而是提供与WEB有关的特定信息。
         - <TITLE></TITLE> 定义标题
         - <bgsound src="soundfilrURL">添加声音

<BODY></BODY>正文标记符 空格回车等在显示时不起作用，如要使其起作用，应使用与格式化标签<PRE></PRE>
或者使用特定标签（参考数字历史实验）。 如空格 &nbsp；
   BGCOLOR设置背景颜色
   TEXT设置正文颜色
   或通过格式#RRGGBB设置颜色
	- <body background="xxxxx.jpg">添加背景图片


<!--这是一个注释，注释在浏览器中不会显示--> 里面内容不会被执行。

显示特殊字符<和>等等不能直接输入：以“&”开始，“；”结束，需要输入其编号。如小于号为 &lt ;
大于号为 &gt ;

设置字符格式


 - FONT标记符
 	<font xxxx=" ">   </font>
 	常用属性size color face
 	size一般从1-7取值 3是默认值 也可以用+和——号作为相对值指定。
 	color指定颜色
 	face指定字体样式（若系统未安装 则指定无法启用）
 -物理特殊样式字符表达
	<B></B>黑体标记
	<I></I>斜体标记
	<U></U>下划线标记
 -逻辑字符表达 标记符本身说明了所修饰效果的逻辑含义。
 -分段标记符<p></p>  结束标记符可以省略
 -<br>强制换行（某些情景更加便捷） 多个<p></p>无法产生空行（需要加空格）。

基本演示


 - 标题添加
通过Hn来标识标题和副标题，n是1至6的数字；1到6依次减小，使用时必须用结束标记符。


 - 水平线添加
 <HR> 默认水平线
 <HR SIZE="5">粗为5像素
 width="90" 长度为90像素
 width="50%" 长度为 屏幕长度百分之50
  NOSHADE  属性使水平线以实线显示
  color控制其颜色
 - ALIGH 属性：右对齐right 左对齐left 居中对齐center 两端对齐justify
   应用于P Hn（标题标记符） HR等
   example：左对齐的水平线 <HR aligh="left">
 -div 标记符     用于文档分节 以便为文档的不同部分分为不同的段落。位于其中的多段文本被认为是一个节，可为它们设置一致的格式。( 注意使用方式 )
 -center标记符 居中 <></>

格式嵌套
（1）相容取叠加效果
（2）冲突取最近样式符的效果

无序列表
<UL type="square"> </UL>
默认为圆点
UL 标记符最常用的属性type，用来设置项目符号样式。取值为：disc、circle、square。
注意：在 IE 中，type 属性的取值是区分大小写的。
<LI><LI>选项
有序列表
type设置数字序列样式 取值为1 A a I i
<OL type="1" START="3">列表名 
<LI><LI><LI>选项
 有序无序列表可嵌套
 LI置于Ol或UL与其结束符之间

超链接基础

绝对URL 指资源的完整地址。
相对URL资源相对于当前页面的地址。（便于维护）
可分类型为：文本 图像 对象 （超链接）  也可按其它方式分类。
 一个 URL 包括 3 部分：协议、计算机地址、文件路径。

使用相对URL时，经常使用两个与DOS类似的符号：
句点（.）表示当前目录
双重句点（..）表示当前目录的上一级目录


-如何引入超链接：<A href=" ">XXXXXX</A> 则此文字附带超链接。

A 标记符用于创建超链接（结束标记符不能省略），href 属性用于指定超链接的目标文件。
如：
内部网页超链接：<a href=test.htm>link</a>
 外部网页超链接：
 <a href=http://www.microsoft.com>link</a>

-锚点超链接<A href="#AMAZON">XXXXX</A>
需要创建锚点<A name="AMAZON">xxxxx</A>

-文件下载
<a href=xxx.zip（文件地址）>下载</a>
-Email链接
a href=mailto:i@email.com>Email</a>

控制命令：
?subject= 设置信件主题
?cc=  设置抄送人
?bcc=  设置密件抄送人
&  组合多个控制命令

-超链接显示效果
超链接颜色
在BODY标记符中使用LINK 属性设置未被访问的链接的颜色；VLINK 设置已被访问过的链接的颜色；ALINK 设置活动链接（即当前选定的链接）的颜色。
下划线效果
动态效果（悬停效果、鼠标指针形状、鼠标指针跟随效果）
- 插入图片
	<img src=" ">
	     alt   表示图像的简单文本说明
		width和height 指定图像的大小


使用 <img> 标签插入图片：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML插入图片</title>
</head>
<body>
    <!-- 使用绝对路径插入网络图片 -->
    <img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994" alt="C语言中文网Logo"> <br>
    <!-- 在当前 HTML 文档的上层目录中有一个 images 文件夹，该文件夹下有一张图片 html5.png -->
    <img src="../images/html5.png" alt="HTML5 Logo">
    如果在同一文件夹，可以直接写成 <img src="xxx.jpg">
</body>
</html>
tips：
在 <img> 标签中可以使用 width 和 height 属性来指定图片的宽度和高度。默认情况下，这些属性的值都是以像素为单位的。
<img src="./logo.gif" alt="C语言中文网Logo" width="150" height="150">
<img src="./html5.png" alt="HTML5 Logo" width="100" height="100">
除此之外，您也可以使用 style 属性指定图片的宽度和高度，如下所示：
<img src="./logo.gif" alt="C语言中文网Logo" style="width: 100px; height: 100px;">
<img src="./html5.png" alt="HTML5 Logo" style="width: 150px; height: 150px;">
注意，width 和 height 属性只是临时修改图片的尺寸，并不会改变图片原始文件的大小。

关于 width 和 height 属性的两点建议：
一般建议为图片设置 width 和 height 属性，以便浏览器可以在加载图片之前为其分配足够的空间，否则图片加载过程中可能会导致您的网站布局失真或闪烁。
如果您的页面使用响应式布局（自适应布局），建议在上传图片之前裁剪好尺寸，而不要设置 width 和 height 属性，这样图片能够跟随屏幕宽度自动改变尺寸，从而不会变形，或者超出屏幕宽度。

  图片映射
  <a href=""><img src=""></a>
区域链接

eg：
<AREA href="file1.htm" shape="rect" coord="30,123,366,218">
假如定义一个矩形的可点击区域，示例代码如下：
<area shape="rect" coords="x1, y1, x2, y2" href="http://c.biancheng.net/" alt="">

其中 x1、y1 代表矩形的左上角坐标，x2、y2 代表矩形的右下角坐标。

假如定义一个圆形的可点击区域，示例代码如下：
<area shape="circle" coords="x, y, radius" href="" alt="">

其中 x、y 代表圆心的坐标，而 radius 则是圆的半径。

假如定义一个多边形的可点击区域，示例代码如下：
<area shape="poly" coords="x1, y1, x2, y2, x3, y3, ..., xn, yn" href="http://c.biancheng.net/" alt="">

其中每对 x 和 y 的值都代表一个多边形的顶点坐标。
注意：所有坐标都是相对于图片的左上角来计算的。

图片插入详情可参考链接

-滚动字幕
<marquee>滚动字幕内容</marquee>

① 默认情况下，在标签中输入的文字是从右向左滚动的。但是可以通过marquee标签的属性direction来控制滚动的方向。

direction="right" ：从左向右滚动

direction="up"  ：从下向上滚动

direction="left"  ：从右向左滚动（默认情况）

direction= "down" ：从上向下滚动

②  marquee标签中的属性scrollamount可以控制文字滚动的速度。

例如：scrollamount="100" 。其中值越大，滚动的速度就越快。

③marquee标签中的属性loop可以控制文字滚动的次数，但是默认的值是-1.也就是无限次滚动

loop="1",就可以让文字仅仅滚动一次。

④marquee标签中的属性behavior可以设置滚动的类型。

behavior="slide"，文字滚动到边界后就会停止，不会再继续滚动。

behavior="alternate" 文字滚动到边界后会反方向弹回来，并且来回滚动。

marquee 参数总结：
BGColor：滚动文本框的背景颜色。
Direction：滚动方向设置，可选择Left、Right、up和down。
scrolldelay：每轮滚动之间的延迟时间，越大越慢。
scrollamount：一次滚动总的时间量，数字越小滚动越慢。
Behaviour：滚动的方式设置，三种取值：Scroll（循环滚动） lide（单次滚动）、Alternate（来回滚动）。
Align：文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width：滚动文本框的宽度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Height：滚动文本框的高度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
loop：滚动次数。默认为infinite
hspace、vspace：前后、上下的空行。

CSS

类似于格式刷

样式定义的语法

Selector{property1:value1;property2:value2…}
eg：h1{text-align:center;color:red}

用户定义类.classname{property:value…}
表示任何class属性为classname的标记符都采用新定义的样式。

用户定义ID
#IDname{property：value}
表示id属性为Idname的标记符采用所定义的样式。
//id与class区别为：id在单个页面中应唯一（不同页面中应该唯一）它定义的是单个元素：class在页面中定义的是一组元素。

虚类SELECTOR
a:link 未访问过的超链接
a:visitied 访问过的超链接
a:active 活动超链接
a:hover 悬停状态的超链接

body {background-color:#ffffff;}
a {
font-family: arial, verdana, sans-serif;
font-size:12px;
font-weight:bold;}
a:link {
color:#0000ff;
text-decoration:none;}
a:visited {
color:#333399;
text-decoration:none;}
a:active {
color:#0033ff;
text-decoration:underline;}
a:link:hover {
background-color:#e9e9e9;
text-decoration:underline;}

CSS属性单位（长度）
相对值
em: 相关字体的’font-size’值
ex: 相关字体的’x-height’值
px: 像素值, 与设备相关
绝对值
in: 英寸 — 1 英寸= 2.54 厘米
cm: 厘米
mm: 毫米
pt: 点 —CSS 2.1 用的1点= 1/72英寸
pc: 皮卡 — 1 皮卡= 12 点

属性单位（颜色）使用的时候自己查
颜色名
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow
#RRGGBB
#RGB
rgb(rrr, ggg, bbb)
rgb(rrr%, ggg%, bbb%)

具有上下文关系选择器

如果选择器之间用空格分开，就表示具有上下文关系的选择器。
例如，p b {color:red} 表示位于p标记符中的b标记符采用相应格式。
又例如，.nav a{text-decoration:none}表示在class属性为nav的标记符中的a标记符采用相应格式。

CSS属性单位（其他）
百分比单位
p { font-size: 10px }
p { line-height: 120% } /* 120% of ’font-size’ */
URL
url(URL)
body { background: url(“http://www.example.com/pinkish.png”) }

CSS网页中的使用

直接在标记符中嵌套
-HTML标记符的style属性
HTML 标记符的 style 属性
例如：<P style=“text-align:center” >
   其中，style属性的取值形式为：
   “CSS属性:CSS属性值；...”
 -在style标记符定义样式
  <STYLE>样式定义</STYLE>
样式定义的方式为Selector{property1:value1;property2:value2;property3:value3;……}
eg：
<HTML>
<HEAD><TITLE>在标记符中直接嵌套样式信息</TITLE>
<STYLE>
<!--
P{ font-size:24px; text-align:center }
H1{ font-family:楷体_gb2312; text-align:center }
-->
</STYLE>
</HEAD>
<BODY>
  <H1>一代人</H1>
  <P>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P>
</BODY>
</HTML>


-链接外部样式表文件
LINK 标记符
<LINK rel=“stylesheet” type=“text/css” href=“stylesheet.css”>
样式表文件可以用文本编辑器编辑，也可以用FP或DW编辑，内容为样式定义。

-样式的优先级（基本）
样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。
样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。

常用CSS样式属性

-CSS属性：字体属性
font-family，取值为字体名称
font-style (normal/italic/oblique)
font-weight (normal/bold/bolder/lighter/100/…)
font-size (绝对大小/相对大小/长度值/百分比)
font (顺序：weight>variant>style>size/line-height>family)

-css属性：文本属性
line-height
text-align(left/right/center/justify)
text-decoration(none/underline/overline)
text-indent

-CSS属性：颜色与背景属性
color
background-color
background-image
background-attachment(scroll/fixed)
background-repeat(no-repeat/repeat/repeat_x…)

-CSS属性：定位属性
position
(static/relative/absolute)
top和left
width和height
z-index
-CSS过滤器
过滤器是CSS的扩充，它能将特定效果应用于文本容器、图片或其他对象。
只作用于HTML控件元素：body,button,div,img,input,marquee,span,table,td,textarea,th…
filter属性用于定义过滤器效果，格式如下：
filter:过滤器名称(参数)
例如，要为img标记符定义透明度，应使用img{filter:alpha(Opacity=80)}

CSS 应用1 ——页面的整体样式定义

body { font:small Verdana, Geneva, Arial, helvetica, sans-serif; color:black; background-color:white; margin: 0px 0px 30px 0px; border:none;
}
h1, h2, h3, p, li { line-height:150%; }
h2 {font-weight:bold; text-transform:capitalize; color:#666; font-size:medium;}
h2.red { color:#933; }
strong.heading {font-weight:bold; display:block;}
其他例子…

CSS 应用2——导航条
方便易用的导航是网站成功的关键。
导航条一般位于页面顶部或左部。
除了导航条以外，在网页底部和/或右部常常还包含辅助导航。
符合逻辑的、风格一致的鼠标悬停效果能使访问者对网站有合理的控制感。
例如…（有时间尝试实现）

表格的制作

表格标记符table
表格标题 caption
表格行 tr （table row）
表格数据 td （table data）
表格表头 th （table heading）

表格的构造（合并）
在 TH 或 TD 标记符中使用 rowspan 属性进行行合并。
在 TH 或 TD 标记符中使用 colspan 属性进行列合并。

边界与分隔线
Frame属性
Rules属性
Border属性可用于是否显示边框

表格对齐
表格的页面对齐

表格内容的对齐
水平对齐(align)
垂直对齐(valign)

控制单元格空白
Cellspacing属性（框）
Cellpadding属性（内容）

使用表格设置布局

作用：划分页面区域

背景颜色的设置
Bgcolor设置背景色
Background设置背景图像

复杂的网页布局可能需要借助嵌套表格。
但是，嵌套表格一般不推荐使用，因为它会导致页面的混乱，尤其会导致可用性问题。

要点：
只使用最基本的表格标记符（table, tr, td）。
保持简单和轻量级（尽量不使用嵌套表格）。
使用样式表进行格式设置。
保持布局表格简单明了的要点是只使用表格建立基本的框架，而用样式表进行所有的格式设置。

使用CSS设计布局

div 和 span元素

div 元素用于创建自定义的块元素（block element）
span 元素用于创建自定义的行内元素（inline element）
关键属性：id和class

CSS浮动布局

<div class=“masthead”>
 		Masthead and headline 
</div>
<div class=“main”> Main article </div>
<div class=“sidebar”> List of links </div>
<div class=“footer”>
		copyright information 
</div>

.masthead {
 	background: #CCC; padding: 15px; }
.main {
	float: left; width: 70%; margin-right:3%; margin-left:3%;}
.footer {
	clear: left; /*starts the footer below the floated content */
	padding: 15px; background:#666}

css的几种布局方式

固定（使用像素，例如）
弹性（基于文本大小，例如）
液态（基于浏览器窗口，例如）
混合（例如）

定位布局

四种定位方式
static
relative
absolute
fixed
还有更多布局方式可自己查找

定位和布局属性概括

Box model (margin, padding, border)
定位属性（ display、 position、top/right/bottom/right、float、clear、z-index、visibility）

使用框架设计版式

 框架集
定义框架的结构
<frameset></frameset>
 框架
具体定义每个页面
<frame>

 框架集的定义
Rows 定义行结构框架
Cols 定义列结构框架
Rows 和 cols 的取值：
像素数
%
N*

框架的初始化
 在 frame 标记符中使用 src 属性可以指定框架中最初显示的页面。

超链接的目标框架
 所谓目标框架，是指单击框架网页中的超链接时，对应的目标文件显示在哪个框架中。

设置目标框架
使用<FRAME name=“”>指定框架名称
特殊的框架名称
_blank 表示打开新的窗口
_top 表示返回顶层窗口
 在超链接标记符 A 中指定 target 属性，取值为具体的框架名称。

控制框架的显示效果
 <FRAME frameborder=“”>设置框架边框。
<FRAME scrolling=“”>设置框架滚动条。
<FRAME marginwidth=“” marginheight=“”>设置框架内容与框架边框之间的空白。

使用页内框架
 用 iframe 标记符可以设置页内框架
<iframe src=“”>不支持框架时显示的内容</iframe>
 也可以指定页内框架为目标框架

网站制作基础