HTMl内容：
html（Hyper Text mark-up language）就是超文本标记语言的简写，是最基础的网页语言。
html是通过标签来定义的语言，代码都是由标签所组成。
html代码不用大小写区分。
html代码由<html>开始，</html>结束，里面由头部分<head></head>和题部分<body><body>两部分组成。
头部分是给html页面增加一些辅助或者属性的信息，它里面的内容会最先加载。
体部分是真正存放页面数据的部分。
具体的分析：
1.参数标签都是有开始标签和结束标签的，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
2.想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
3.属性与小户型之间用“=”连接，属性可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
4.格式：<标签名 属性名="属性值">数据内容</标签名>
<标签名 属性名="属性值"/>
5.操作思想：
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器
对容器中的数据进行操作，就是在不断的改变容器的属性值。
<html>
<head>
<title>这是一个页面</title>
</head>
<body>
<font color="#0000CC" size="3">这是第一个网页</font>
</body>
</html>常用标签的使用：
--字体标签--
1.字体标签：<font>
注;j简单的颜色可以直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000，两个数为一组，按照红，绿，蓝排列。
2.标题标签：<h1><h2>........<h6>
因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。
3.
1.特殊字符：
如果要在网页上显示一些特殊符号，比如<>&等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。
注：在Dreamweaver8中都具有联想功能。
<!--
标签：
font字体标签
属性：
color;颜色
设置方式：red #ff00ee rgb(0,0,255)
size：大小
face：字体
标题标签：<h1>........<h6>
h1最大
h6最小
换行符：<br />
表示空格
-->
<html>
<head>
<title>字体标签</title>
</head>
<body>
<font color="#00CC00" size="6" face="宋体">
演示font字体标签
</font>
<br />
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<br />
1<2<br />
3>1
<html><br />
</body>
</html>
1.列表标签：<dl>
<dt>：上层项目
<dd>：下层项目
例：
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>红色警戒</dd>
<dt>部门名称</dt>
<dd>技术部</dd>
<dd>培训部</dd>
</dl>
效果：
列表中项目符号对应的标签
<ol>：数字标签（aA1iI）
<ul>：符号标签（○●■）
<li>：具体项目内容标签。此标签只在<ol><ul>中有效。
通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。
<html>
<head>
<title>列表标签</title>
</head>
<body>
<dl>
<dt>
姓名
<dd>
小明
</dd>
</dt>
<dt>
年龄
<dd>
20
</dd>
</dt>
</dl>
<hr />
<ul type="circle"><!-- disc(实心圆) square（方块）-->
<li>无符号的列表</li>
<li>无符号的列表</li>
<li>无符号的列表</li>
</ul>
<hr />
<ol type="a" start="5"><!-- 1 a A i I-->
<li>有符号的列表</li>
<li>有符号的列表</li>
<li>有符号的列表</li>
</ol>
</body>
</html>--图像标签--
1.图像标签：<img>
例：<imgsrc=”1.jpg”align=”middle”border=”3”alt=”图片说明文字”/>
align:属性定义图片的排列方式，border用来设置图像的边框。Src连接一个文件
2.图像地图：<map>
应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。
map标签要和img标签联合使用。Href是超连接
<imgsrc="Sunset.jpg"alt="图片说明文字"usemap="#Map"/>
<map>
<areashape="rect"coords="50,59,116,104"href="1.html"/>
<areashape="circle"coords="118,203,40"href="2.html"/>
</map>
<!--
标签：
img: 图像标签
属性：
src 关联的图片
alt 图像提示信息
width 宽度
height 高度
border:边框
usemap: 关联一个图像地图(图像热点)
map: 图像地图
area: 区域
属性：
shape: 区域样式
coords: 区域范围
href: 点击区域时。 关联的资源信息
-->
<html>
<head>
<title>图像标签</title>
</head>
<body>
<img src="1.jpg" alt="这是一个大美女" width="640" height="400" usemap="#Map" border="5"/>
<map name="Map">
<area shape="circle" coords="322,208,32" href="2.gif">
</map>
</body>
</html>--表格标签--
1.表格标签：<table>
组成：标题标签：<caption>，给表格提供标题。
表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。
行标签：<tr>
单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。
格式：
<tableborder="1"width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
<caption>表格标题</caption>
<tr><!--第一行-->
<th>姓名</th>
<th>年龄</th>
</tr>
<tralgin=”center”><!--第二行-->
<td>张三</td>
<td>23</td>
</tr>
</table>
<tableborder="1"width="40%">
<tr>
<tr>
<thcolspan="2"><!--colspan：th标签占两列-->
个人信息
</th>
</tr>
<tralign="center">
<td>张三</td>
<td>23</td>
</tr>
</tr>
</table>
每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。
THEAD、TFOOT包含关于表格列的信息。
TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）
使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。
TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。
<!--
标签：
table： 表格
属性：
border: 边框线
bordercolor: 边框线颜色
cellpadding: 单元格中的数据与边框的距离
cellspacing: 单元格与单元格之间的距离
width: 宽度
标签：
tr: 行
td: 单元格
th: 表头标签 加粗 居中显示
属性：
行合并
rowspan
列合并
colspan
thead:表格头
tbody:表格体 可以使用多个
可以实现表格分段加载
tfoot:表格尾
hr: 水平分割线
使用格式：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
姓名 年龄
张三 20
-->
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="1" bordercolor="red" cellpadding="10" cellspacing="0" width="600">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
</table>
<hr />
<table border="1" bordercolor="red" cellpadding="10" cellspacing="0" width="600">
<tr>
<td colspan="2" align="center">个人信息</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
</table>
<hr />
<table border="1" bordercolor="red" cellpadding="10" cellspacing="0" width="600">
<tbody>
<tr>
<!-- td rowspan="2" align="center">个人信息</td -->
<th rowspan="2">个人信息</th>
<td>张三</td>
</tr>
<tr>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>--超链接标签--
1.超链接标签：<a>
两种用法：
一、链接资源<ahref=””>
例：
<ahref=”http://www.sina.com.cn”target=”_blank”>新浪</a>
<!--href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。-->
二、定位标记<aname=””>
一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。
注：定位标记要和超链接结合使用才有效。
例：
<aname=”标记”>标记位置</a>
<p>…….<!--很多空行以制造网页过长的效果-->
<ahref=”#标记”>返回标记位置</a>
注：使用定位标记时一定在href值的开始加入#标记名。
<!--
标签：
a： 超链接标签
属性：href 链接资源文件(网页)
在href属性值中，如果没有协议头信息，会采用默认的file引擎来解析
如果，使用了协议头，才有对应的解析引擎来解析
target: 打开资源的方式
_blank 在新的页面中打开资源
_parent
_self
_top
framename
锚标记：<a name="">
使用方式：
定义一个锚标记：<a name="标记名">
使用<a href="#标记名">属性来回到指定的锚标记位置
-->
<html>
<head>
<title>超链接标签</title>
</head>
<body>
<a name="top">页面顶端</a>
<a href="http://www.sina.com.cn" target="_blank">新浪</a>
<br />
<a href="www.sina.com.cn">新浪连接</a>
<br />
<a href="mailto:xxx@163.com">联系我们</a>
<br />
<a href="http://www.xunlei.com/dntg.rmvb">大闹天宫</a>
<br />
<a href="thunder:asdjsalfjfl124o0safsa=xxxasdsa">迅雷下载</a>
<br />
<img src="1.jpg">
<br />
<a href="#top">返回页顶</a>
</body>
</html>--框架标签--
1.框架标签：<frameset>
注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。
例：
<framesetrows="10%,*">
<framesrc="1.html"name="top"/>
<framesetcols="30%,*">
<framesrc="2.html"name="left"/>
<framesrc="3.html"name="right"/>
</frameset>
</frameset>
注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize”
2.画中画标签：<iframe>
<iframesrc=”1.html”>
很遗憾，画中画你没有看到，因为你的浏览器不支持iframe标签。
</iframe>
框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。
--画中画标签--<html>
<head>
<title>画中画标签</title>
</head>
<body>
<iframe src="04-图像标签.html" width="600" height="300">这是一个画中画标签</iframe>
</body>
</html>
--表单标签--
<!--
form
标签：
input： 输入标签
属性：
name: 指定标签的名字
当数据提交给服务器时，name属性作为提交数据的 键(key)
value:指定标签显示的数据
当数据提交给服务器时，value属性作为提交数据的 值(value)
type：指定输入标签的类型
值：text 文本输入框
password 密码框
radio 单选按钮
checkbox 复选按钮
submit 提交按钮
reset 重置按钮
button 按钮
image 图片
file 文件
hidden 隐藏
textarea 多行文本输入框
select 下列列表框
标签：option 列表项目
-->
<html>
<head>
<title>表单标签</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form>
用户名称：<input type="text" name="username" /><br />
用户密码：<input type="password" name="password" /><br />
用户性别：<input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv"/>女
<br />
技术爱好：<input type="checkbox" name="technology" value="java" />JAVA
<input type="checkbox" name="technology" value="android" />ANDROID
<input type="checkbox" name="technology" value="ios" />IOS
<input type="checkbox" name="technology" value="html" />HTML
<br />
<input type="button" value="这是一个按钮" οnclick="alert('haha')"/><br />
<input type="image" src="1.jpg" width="100" height="100" οnclick="alert('这是一个美女')"/><br />
上传文件：<input type="file" /><br />
隐藏的数据：<input type="hidden" name="hidden" value="time"/><br />
<textarea name="textarea"></textarea> <br />
<select name="city">
<option value="">--请选择城市--</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<br />
<input type="submit" value="提交"/>
<input type="reset" value="重填"/>
</form>
</body>
</html>
--头标签--
头标签都放在<head></head>头部分之间。包括：titlebasemetalink
1.<title>：指定浏览器的标题栏显示的内容。
2.<base>：
href属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。
target属性：指定打开超链接的方式。如_blank表示所有的超链接都用新窗口打开显示。
3.<meta>：
name属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
http-equiv属性：模拟HTTP协议的响应消息头。
例：
<metahttp-equiv="refresh"content="3;url=http://www.sina.com.cn"/>
表示打开此页面3秒后自动转到新浪页面。
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
表示内容类型为html文本，字符编码为utf-8。
4.<link>：
rel属性：描述目标文档与当前文档的关系。
type属性：文档类型。
media：指定目标文档在哪种设备上起作用。
例：
<linkrel="stylesheet"type="text/css"media="screen,print"href="a.css"/>
--其他标签--
1.<marquee>让内容动起来。
Direction(方向)属性：leftrightdownup
Behavior(行为)属性：scrollalternateslide
<pre>：可以将文本内容按在代码区的样子显示在页面上。
<html>
<head>
<title>Other</title>
</head>
<body>
<marquee direction="down" behavior="slide" >
嘿， 哥们，看看我 多牛
</marquee>
<pre>
class Demo
{
public static void main(String[] args)
{
System.out.println("hello");
}
}
</pre>
<b>今天</b>开学<i>第一天</i><u>上课</u>
<table width="100%" border="1">
<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#0000FF;"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
X<sup>2</sup>
Y<sub>3</sub>
</body>
</html>
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
