<!DOCTYPE htm>
<head>
<title>我的第一个网页</title>
<meta http-equiv="content-type" charset="utf-8" content="">
head头信息:页面的辅助信息，声明页面的基本信息
</head>
<body>
<h1>
body体信息：当前页面要展示的内容
</h1>
<font color="yellow" size="200px" >
标签上可以配置属性，控制标签效果
</font>
<hr>
<!-- 这是HTML的注释-->
<font color="rgb(0,0,0)" size="5"100px" face="宋体">
1.Font标签 color颜色 face字体 size大小
</font>
<hr>
<font color=red >
2.标题标签 h1->h6(align排列):left,right,center,justify自适应
</font>
<h1 align="left">一级标签</h1>
<h2 align="center">二级标签</h2>
<h3 align="right">三级标签</h3>
<h4 align="justify">四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<hr>
<font color=red >
3.特殊字符
<p>" " ' '
<p>< < > >
<p>空格 & &
<p>® ® © ©
<p>注意:不管是打多少个空格/制表符，都是一个空格/制表符
</font>
<hr>
<font color=red >
4.颜色
<p>color rgb(x,x,x) #xxxxxx colorname
</font>
<hr>
<font color=red >
5.1定义列表
<p>dl/dl
<p>dt：上层项目
<p>dd：下层项目
</font>
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>红色警戒</dd>
<dt>部门名称</dt>
<dd>技术部</dd>
<dd>培训部</dd>
</dl>
<hr>
<font color=red >
5.2有序列表
<p>ol /ol
<p>li /li
</font>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<hr>
<font color=red >
5.3无序列表
<p>ul /ul
<p>li /li
</font>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<hr>
<font color=red >
6.图像
<p> algin 对齐 border边框 height高度 wigth宽度 hspace左右侧空白 vspace上下侧空白 alt点击事件
</font>
<img src="绿叶.jpg" height="50%" wight="50%"alt="夏天到了">
</img>
<hr>
7.超链接
<p>7.1通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
<p>href属性值可以是url，也可以是本地文件，也可使用其他协议如mailto、thunder等等。
<p>target属性是指定在哪个窗口或者帧中打开
<xmp>
<p><a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>
</xmp>
<p><a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>
<p>7.2通过使用 name 或 id 属性，创建一个文档内部的书签
<xmp>
<p><a name=”end”>标记位置</a>
......文本内容........<br>
<p><a href=”#end”>返回标记位置</a>
</xmp>
<a name="begin"></a>
杨过和小龙女。。。。
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
小龙女.....<a name="middle"></a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
都去了古墓。。。小说结束
<a name="end"></a>
<a href="#begin">顶部</a>
<a href="#middle">中部</a>
<a href="#end">尾部</a>
<br>
8.html原样输出文本不转义 下面三个都要加<><BR>
一、如果是有空格和回车这样的特殊字符的简单文本 在文本外加pre /pre标签<BR>
二、如果是html内容、javascript、xml或其他特殊内容，使用xmp /xmp<BR>
三、如果是在代码中执行时要显示或打印等可以使用![cdata[]]<BR>
</body>
</html>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
1.表格
1.1.table
<P>table标签定义 HTML 表格。
<P>tr元素定义表格行，td 元素定义表格单元，th 元素定义表头
<p>thead,tbody,tfoot ，没写就将其加载到隐藏的tbody，一个网页可以多个tbody，相互独立<br>
<p> align:对齐方式 border:边框宽度 bgcolor:背景颜色 width:宽度 cellpadding:单元格沿其内容之间的空白 cellspacing:单元格之间的空白
<p> rowspan：td单元格的属性标签 单元格跨几行
<p> colspan: td单元格的属性标签 单元格跨几列
<TABLE border="1" bgcolor="lightgray" width="250px" cellpadding="0px" cellspacing="0px">
<tr align="center"> <!--tr表行-->
<th>国家</th> <!--th表头-->
<th>省份</th>
<th>姓名</th>
</tr>
<tr align="center">
<td>中国</td> <!--td表格单元-->
<td>浙江</td>
<td rowspan="2">wuyun</td> <!-- rowspan单元格跨两行 所以从这个tr表行开始起的下面tr表行一个少了一个td单元格-->
</tr>
<tr align="center">
<td >外国</td>
<td> tk</td>
</tr>
<tr align="center">
<td >俄罗斯</td>
<td colspan="2" >未知</td> <!-- colspan单元格跨两列 所以这个tr表行一个td单元格-->
</tr>
</TABLE>
<hr>
1.2 captian 表格标题
<table border="3">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<!--frameset框架属性 cols 值：pixels % * 定义框架集中列的数目和尺寸。
rows 值：pixels % * 定义框架集中行的数目和尺寸。
frame每个框架属性 src：来源
framespacing="0"表示框架与框架间保留的空白的距离
frameborder:设定框架的边框,取值为(1|0),缺省值为1 1 -- 在每个页面之间都显示边框 0 -- 不显示边框
border="0" 设定框架的边框厚度，以 pixels 为单位。
noresize： 在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。
查看演示http://www.w3school.com.cn/tags/tag_frameset.asp
-->
<!-- 垂直框架
<frameset cols="25%,50%,25%"> 按列，每列占用比例分别是25,50,25
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
-->
<!-- 水平框架
<frameset rows="25%,50%,25%"> 按行，每行占用比例分别是25,50,25
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
-->
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- 混合框架-->
<frameset rows="50%,50%"> <!-- 先将整个框架分为两个分框架，第一个框架行占50%,第二个框架行占50%-->
<frame src="/example/html/frame_a.html" >
<frameset cols="25%,75%"> <!-- 再将第二个框架分为两个小框架，第一个小架列占25%,第二个小框架行占75%-->
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html" frameborder=0 noresize="noresize">
</frameset>
</frameset>
</html>
<!DOCTYP HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<!--iframe 一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
src: URL 规定在 <iframe> 中显示的文档的 URL。
frameborder: 1 0。 规定是否显示 <iframe> 周围的边框。
scrolling:yes no auto。规定是否在 <iframe> 中显示滚动条。
height: pixels 规定 <iframe> 的高度。
width: pixels 规定 <iframe> 的宽度。
-->
<body>
<iframe src="http://www.baidu.com" frameborder=0 scrolling=no width="800px" height="500px">这里有个iframe内嵌页面，很遗憾你的浏览器无法展示</iframe>
</body>
</html>
<!DOCTYP HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<!-- marquee滚动内容
direction 表示滚动的方向，值可以是left，right，up，down，默认为left
behavior 表示滚动的方式，值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
loop 表示循环的次数，值是正整数，默认为无限循环
scrollamount 表示运动速度，值是正整数，默认为6
scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
align 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width 表示运动区域的高度和宽度，值是正整数(单位是像素)或百分数，默认width=100% height为标签内元素的高度。
hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
onmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。
-->
<body>
<marquee direction="right" behavior="slide">
<font scrolldelay="0.1" color="RED" size="7">我来了。。。。</font>
</marquee>
</body>
</html>
<!DOCTYP HTML>
<HTML>
<head>
<meta http-equiv="content-type" charset="utf-8" content="">
<title>表单</title>
</head>
<body>
<h1>表单标签<h1>
HTTP协议
规定了浏览器和服务器之间通信的方式<br>
1.基于请求响应的模型<br>
2.一次请求对应一次响应<br>
3.只能由客户端发起请求，服务端被动等待请求做出响应<br><br>
HTTP只支持7种请求方式 GET POST...<br>
HTTP请求<br>
请求行<br>
GET /index.html HTTP/1.1<br>
请求头<br>
...<br>
空行<br>
实体内容<br><br>
HTTP响应<br>
状态行<br>
HTTP/1.1 200 OK<br>
响应头<br>
空行<br>
实体内容<br><br>
(1)get提交将数据显示在地址栏，对于敏感信息不安全。<br>
post提交不显示在地址栏，对于敏感信息安全<br>
(2)地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。<br>
post可以提交大体积数据。<br>
(3)对提交数据的封装方式不同：<br>
get：将提交数据封装到了http消息头的第一行，请求行中。<br>
post：将提交的数据封装到消息头后，在请求数据体中。<br><br>
<form action="https://www.baidu.com" method="GET">
<textarea name="wenben" rows="5" col="5" >
文本域textarea
</textarea>
<br><br>
地区：选择标签select/option size：显示项目个数。 multipe:是否可以选择多项 selected:默认选中
<select name="province" size="5" multiple="multiple">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="zj" selected="selected">浙江</option>
</select>
<br><br><br>
fieldset标签将表单内容的一部分打包，生成一组相关表单的字段。<br>
legend标签为fieldset 元素定义标题。<br>
<fieldset>
<legend>基本信息</legend>
用户名<input type="text" name="userId" value="WuYun" readonly="readonly" disabled="disabled"/> text文本框 readonly只读可提交 disabled不可改不可提交</br>
密码 <input type="password" name="userPassword"/> password密码框<br>
</fieldset>
<br><br><br>
<fieldset>
<legend>扩展信息</legend>
性别<input type="radio" name="gender" value="man">男
<input type="radio" name="gender" value="wen">女 <br>
radio单选框 如想单选就让name一致<br><br>
爱好<input type="checkbox" name="like" value="football">足球
<input type="checkbox" name="like" value="basketball">篮球
<input type="checkbox" name="like" value="cf">cf<br>
checkbox复选框，其name必须保持一致<br><br>
</fieldset>
<fieldset>
<legend>其他操作</legend>
选择上传的文件
<input type="file" name="file"><br>
file文件上传后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
<br><br><br>
点击按钮清除
<input type="button" value="点击清除内容" onclick="alert('被点了 正在清除内容')"><br>
button 按钮 value显示在按钮上的字， 触发点击事件onclick="alert(' ')"<br><br>
<input type="hidden" name="money" value="500"><br>
hidden隐藏域，在用户看不到的情况下但会提交数据<br><br>
重置
<input type="reset"><br>
reset重置,将表单中填写的内容设置为初始值。
</fieldset>
<br><br>
图片提交<input type="image" src="资料.png" width="200px" height="200px" alt="点我就提交"><br>
image图像 它可以点击图片提交<br><br>
提交<input type="submit" /><br>
submit提交，用于提交表单中的内容。
</form>
</body>
</HTML>