1.HTML简述：
概念： (HyperText Marked Language) 超文本标记语言
本质： 用HTML书写的一种纯文本文件
工具： Dreamweaver 网页编辑器 视觉化网页开发工具 ； Hbuilder 等
HTML文档的结构：
<html>
<head>
<title>第一个网页</title>
</head>
<body>
欢迎学习网页设计
</body>
</html>
2.HTML标记
分类： 单标记/空元素、配对标记/有内容的元素 ； 行内元素、块元素；
2.1 文本格式标记
#使用段落标记<p>...</p>格式化文本
<p>第一段</p>
<p>第二段</p>
#使用标题标记<hn>...</hn>格式化文本
<h1>一号标题（最大）</h1>
<h6>六号标题（最小）</h6>
#文本换行标记<br/>
第一行<br/>第二行
#水平线标记<hr/>
<hr size="3" widt="85" noshade="noshade" align="center" color="red" />
#文本中的字符实体
##转义字符
“<” : <
“>” : >
##空格符
要输入多个空格，可以交替使用“ ”和“ ”（空格）
##特殊字符
//在dw编辑器中执行操作：插入--> HTML -->“特殊字符” ； 详细对照表见下图。
# HTML特殊字符编码对照表
符号 命名实体 十进制编码 符号 命名实体 十进制编码 符号 命名实体 十进制编码
Α Α Α Β Β Β Γ Γ Γ
Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ
Η Η Η Θ Θ Θ Ι Ι Ι
Κ Κ Κ Λ Λ Λ Μ Μ Μ
Ν Ν Ν Ξ Ξ Ξ Ο Ο Ο
Π Π Π Ρ Ρ Ρ Σ Σ Σ
Τ Τ Τ Υ Υ Υ Φ Φ Φ
Χ Χ Χ Ψ Ψ Ψ Ω Ω Ω
α α α β β β γ γ γ
δ δ δ ε ε ε ζ ζ ζ
η η η θ θ θ ι ι ι
κ κ κ λ λ λ μ μ μ
ν ν ν ξ ξ ξ ο ο ο
π π π ρ ρ ρ ς ς ς
σ σ σ τ τ τ υ υ υ
φ φ φ χ χ χ ψ ψ ψ
ω ω ω ϑ ϑ ϑ ϒ ϒ ϒ
ϖ ϖ ϖ • • • … … …
′ ′ ′ ″ ″ ″ ‾ ‾ ‾
⁄ ⁄ ⁄ ℘ ℘ ℘ ℑ ℑ ℑ
ℜ ℜ ℜ ™ ™ ™ ℵ ℵ ℵ
← ← ← ↑ ↑ ↑ → → →
↓ ↓ ↓ ↔ ↔ ↔ ↵ ↵ ↵
⇐ ⇐ ⇐ ⇑ ⇑ ⇑ ⇒ ⇒ ⇒
⇓ ⇓ ⇓ ⇔ ⇔ ⇔ ∀ ∀ ∀
∂ ∂ ∂ ∃ ∃ ∃ ∅ ∅ ∅
∇ ∇ ∇ ∈ ∈ ∈ ∉ ∉ ∉
∋ ∋ ∋ ∏ ∏ ∏ ∑ ∑ −
− − − ∗ ∗ ∗ √ √ √
∝ ∝ ∝ ∞ ∞ ∞ ∠ ∠ ∠
∧ ∧ ⊥ ∨ ∨ ⊦ ∩ ∩ ∩
∪ ∪ ∪ ∫ ∫ ∫ ∴ ∴ ∴
∼ ∼ ∼ ≅ ≅ ≅ ≈ ≈ ≅
≠ ≠ ≠ ≡ ≡ ≡ ≤ ≤ ≤
≥ ≥ ≥ ⊂ ⊂ ⊂ ⊃ ⊃ ⊃
⊄ ⊄ ⊄ ⊆ ⊆ ⊆ ⊇ ⊇ ⊇
⊕ ⊕ ⊕ ⊗ ⊗ ⊗ ⊥ ⊥ ⊥
⋅ ⋅ ⋅ ⌈ ⌈ ⌈ ⌉ ⌉ ⌉
⌊ ⌊ ⌊ ⌋ ⌋ ⌋ ◊ ◊ ◊
♠ ♠ ♠ ♣ ♣ ♣ ♥ ♥ ♥
♦ ♦ ♦   ¡ ¡ ¡
¢ ¢ ¢ £ £ £ ¤ ¤ ¤
¥ ¥ ¥ ¦ ¦ ¦ § § §
¨ ¨ ¨ © © © ª ª ª
« « « ¬ ¬ ¬ ­ ­
® ® ® ¯ ¯ ¯ ° ° °
± ± ± ² ² ² ³ ³ ³
´ ´ ´ µ µ µ " " "
< < < > > > ' '
2.2 列表标记
#无序列表
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
无序列表 代码效果如下：
- 第一行
- 第二行
- 第三行
#有序列表
<ol>
<li>第一行<li>
<li>第二行</li>
<li>第三行</li>
</ol>
有序列表 代码效果如下：
- 第一行
- 第二行
- 第三行
#定义列表
<dl>
<dt>第一部分</dt>
<dd>第一行</dd>
<dd>第二行</dd>
</dl>
<dl>
<dt>第二部分</dt>
<dd>第一行</dd>
<dd>第二行</dd>
</dl>
定义列表 代码效果如下：
-
第一部分
- 第一行
- 第二行
-
第二部分
- 第一行
- 第二行
2.3 图像标记 <img>
<img src="image/kabu.gif" width="150" height="50" align="left"
title="鼠标停留时显示的文字" alt="文本说明" />
# src可以使JPEG、gif、PNG文件；
#height、width单位可以是像素或百分点 如果宽度和高度只给出一个 则按比例缩放
# img标签中的align属性不是定义图像的位置，而是定义图像与周围文字的位置，不推荐使用
图片居中方法：
1. 在图片的父级元素中定义： align = "center"
2. CSS代码设置图片为块级元素，设置左右margin为auto：style="display:block;margin:0 auto;"
2.4 超链接标记<a>
<a href="http://www.baidu.com" target="_blank" title="百度网站">......</a>
//打开方式target: _blank:新窗口； _self:当前窗口； _parent：当前窗口的父窗口；
// _top:整个浏览器窗口；窗口或框架名：在指定名字的窗口或框架中打开
// title：可选项 用于指定鼠标移到超级链接所显示的标题文字
#用文本做超链接
<a href="http://www.baidu.com">百度</a>
#用图像做超链接
<a href="index.html"> <img src="img/kabu.gif" /> </a>
#用文本、图像做链接
<a href="index.html"> <img src="img/kabu.gif"><br/> 卡布叻</a>
#热区链接
<img src="img/kabu.jpg" usemap="#Map" border="0">
<map name="Map" id="Map">
<area shape="poly" coords="105,170,115,290,148,318,176,318,263" href="index.html" />
<area shape="rect" coords="21,105,74,173" href="img/kabu.jpg" />
<area shape="circle" coords="61,248,43" href="#h5" />
</map>
//<map> 在图像上定义了一个地图
//<area> 定义每个热区，与<map>成对出现
//shape热区形状：poly多边形；rect矩形；circle圆形
//coords热区坐标点
2.5 表格标记
<table border="2" bordercolor="#0000FF" bgcolor="#CCCCCC" background="img/ss.jpg" rules="cols"
cellspacing="0" cellpadding="7" width="300px" height="300px" align="center">
<caption>标题</caption>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
<tr>
<td>第1行1列</td>
<td>第1行2列</td>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
</tr>
</table>
//table属性 >
//border：边框宽度，默认为0; bordercolor:边框颜色； bgcolor:表格背景色；background:表格背景图像；
//cellspacing:表格间距，默认为1； cellpadding:表格填充，默认为0；
//width、height:宽、高； align:对齐方式; rules:显示表格的行边框rows或列边框cols、不显示none
//tr td 属性 >
//align: 水平对齐方式：left(默认值)、center、right
//valign：垂直对齐方式： middle(morenzhi)、top、bottom
//colspan：跨多列合并； rowspan:跨多行合并 （不好设置单元格宽高，不推荐使用）
表格 代码示例简单显示效果：
| 列1 | 列2 |
|---|---|
| 第1行1列 | 第1行2列 |
| 第2行1列 | 第2行2列 |
2.6 表单标记
#<form>标记
<form method="post" enctype="application/x-www-form-urlencoded" name="fame1" target="_blank" action=" ">
<input type="..." name="..." />
<select>......</select>
</form>
//enctype编码方式: application/x-www-form-urlencoded（默认 与post协同使用）；
// multipart/form-data （创建文件上传域时使用）
#<input>标记：十种类型 (必备属性:type、name)
## 1.文本域 text
<input type="text" name="username" size="27" value="默认显示值"
maxlength="200" disabled="disabled" onfocus="this.value=''" />
//maxlength:可输入的最大字符数
//disabled: 存在此属性时，用户不能获取焦点
//js代码：οnfοcus="this.value=''"单击文本框是清空value值
## 2. 密码域 password
<input type="password" name="pw" size="15" />
## 3. 单选按钮 radio
选项1 <input type="radio" name="select" value="1" checked="checked" />
选项2 <input type="radio" name="select" value="2" />
## 4. 复选框 checkbox
<input type="checkbox" value="1" checked="checked"/>选择1
<input type="checkbox" value="2" />选择2
<input type="checkbox" value="2" />选择3
## 5. 文件域
<form method="post" enctype="multipart/form-data" >
<input type="file" />
</form>
## 6. 隐藏域
<input type="hidden" name="hidden" value="kabule"/>
//浏览器不会显示这个表单字段元素，但提交表单时会将隐藏域的name属性和value属性组成的信息对发送给服务器
//例如：有两个网页，在第二个网页提交表单时，要将第一个网页中收集到的数据也发送给服务器，
//就需要在第二个网页的表单中加入隐藏域，让它的value值等于第一个网页中收集到的数据
## 7. 提交按钮 submit
## 8. 重置按钮 reset
## 9. 普通按钮 button
## 10.图像按钮 image
# <select>标记：下拉列表框/列表框
<select name="songs" size="5" multiple="multiple">
<option value="1">过尽千帆</option>
<option value="2">荒城渡</option>
<option value="3">大鱼</option>
<option value="4">雪落下的声音</option>
</select>
//size：设置size则为列表框
//multiple: 在列表框上设置 可多选
## <textarea>标记 多行文本域
<textarea name="comments" cols="40" rows="4" wrap="virtual">value</textarea>
//将输入的内容作为value值传给服务器
//cols：一行字符数；rows:行数
//wrap换行方式 > 关off：不换行、虚拟virtual：自动换行（默认）、实体physical: 自动换行 提交时自动添加<br/>标记
body属性的设置
body标记作为网页的主体部分 有很多内置设置
|HTML特殊字符编码对照表
特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码
这些属性用于设置网页的总体风格
background : 指定文档背景图像的url地址
bgcolor : 指定文档的背景颜色
text : 指定文档中文本的颜色
link : 指定文档中未访问的超链接的颜色
vlink : 指定文档中已访问的超链接的颜色
alink : 指定文档中正在被选中的超链接的颜色
leftmargin : 设置网页左边留出空白间距的像素个数
topmargin : 设置网页上方留出空白间距的像素个数
字体属性的应用
标题字体: <h#>文字</h#> （# 为1 - 6）
字体大小: <font size = #> 文字 </font>
字体大小：<font color = #> 文字 </font>
字体修饰
粗体： <b></b>
斜体： <i></i>
下划线： <u></u>
删除线： <strike></strike>
闪烁 ： <blink></blink>
增强 ： <strong></strong>
强调 ： <em></em>
框架的使用
分割窗口
通过一个或多个FRAMESET和FRAME标记来定义
FRAMESET表示框自集 FRAME代表一个框架
在框架网页中将FRAMESET标记置于head 之后 以取代body的位置 还可以使用noframes标记给出框架不能被显示时的替换内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>框架</title>
</head>
<frameset cols="500,*">
<frame src="web.html" name="1" />
<frame src="http://www.baidu.com" name="2" />
</frameset>
</html>
示例解释：
cols=“500,*” ：垂直切割成两个画面 一个为500像素 另一个为余下的宽度 也可以切割为三个 如：cols=“300, * , 100”
src = “http://www.baidu.com” 设定框架中显示的网页
name = “1” 设定框架的名称 这样才能指定框架来做连结
常见的框架结构包括：上方固定 下方固定 右侧固定 左侧固定
例：（上方固定）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>框架</title>
</head>
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="web.html" name="topFrame" scrolling="no" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="http://www.baidu.com" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</html>
其他诸如上方右侧嵌套 右侧固定上方嵌套等都是由这四个基本型构成
网页大体效果：
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
