1 HTML
1 HTML
基础知识
软件的结构：
C/S(Client Server)结构的软件： 比如： QQ、 极品飞车、 飞信 、 迅雷
cs结构的软件的缺点：更新的时候需要用户下载更新包然后再安装，程序员则需要开发客户端与服务端。
cs结构软件的优点： 减轻服务端的压力，而且可以大量保存数据在客户端。
B/S（Browser Server）结构的软件：比如： 微博 、 webQQ 、 web飞信、 web迅雷
优点：软件版本升级的时候不需要用户下载更新包，直接更新服务器的程序即可。程序员则只需要开发服务端而已。
缺点：增加了服务端的压力，bs结构的软件不能保存大量的 数据在用户机上。
网站的类别:
静态网站: 静态网页中的数据都是写死的，如果需要修改网页的内容是需要直接修改网页的代码。 是没有数据库提供数据给它。
动态网站: 动态网站的数据是来自于数据库的，背后是有一个后台程序管理页面中数据的
HTML语言
html 语言就是开发网页的基础语言
html(超文本标记语言)
标记 : 该门语言是有标签来构成的。 学习html不用怎么去理解，只要需要记住标签的作用即可。
html语言的特点：
1.html语言是与平台无关的，任何平台只需要安装了浏览器都可以运行。
2.html 是不区分大小写的。
html语言的结构：
<html> html语言的根标签.
<head></head> 网页的头信息
<body></body> 网页的体部
</html>
html的注释： <!-- 注释的内容 -->
Code1
<FONT size="40" color="red">这个是我的第一个网页</FONT> <img src="file:\\\C:\Users\Administrator\Desktop\Code\1.jpg" />
头信息的作用
1. 可以设置网页的标题。
2. 可以通知浏览使用指定的码表解释html页面.
3. 设置关键字
Code2
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>这个是我的第一个网页</title>
<meta name="keywords" content="java培训,php培训,C#培训"/>
<!--一个网页的关键字最好是3-4个。 seo(搜索引擎优化)-->
</head>
<!-- 网页的内容应该写在body标签体内的。 -->
<body>
今天天气不错...
</body>
</html>
HTML常用的标签
html的标签作用：用于描述一个网页的结构的。如果需要操作数据的样式：通过标签的属性操作的。
标签的类型：
1. 有开始标签与结束标签。 <p> </p> 需要把网页的数据内容封装到标签中。
2. 开始标签与结束标签都是在一个标签体内的。 比如： <hr/> 功能单一不需要封装数据到标签中。
html常用的标签：
<h1>~<h6> 表示是一个标题
<p> 段落标签
<hr/> 水平线标签
<br/> 换行标签
<sub> 下标
<sup> 上标
<pre> 原样标签： 原样标签会保留空格和换行符。
<ol> <li> 有序的列表标签、
<ul> <li> 无序的列表标签。
(dl dt dd) 项目列表标签
(span) 行内标签
<div> 块标签 div标签的内容会独立占一行。
Code3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html常用的标签</title>
</head>
<body>
<h1 align="center">开班了</h1>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p> 今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错。</p>
我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了。
<hr/>
水的化学式：H<sub>2</sub>O
<br/>
2的16次方：2<sup>16</sup>
<hr/>
<pre>
静夜思
床前明月光，疑是地上霜。
举头看屏幕，低头写代码。
</pre>
<hr/>
今晚吃啥好呢？
<ol type="a">
<li>火锅</li>
<li>烤鸭</li>
<li>烤鱼</li>
</ol>
中午吃啥好呢？
<ul type="square">
<li>木桶饭</li>
<li>猪脚饭</li>
<li>白切鸡</li>
</ul>
公司的组织结构：
<dl>
<dt>技术总监</dt>
<dd>码农1号</dd>
<dd>码农2号</dd>
<dd>码农3号</dd>
<dd>码农4号</dd>
<dt>人事总监</dt>
<dd>妹子1号</dd>
<dd>妹子2号</dd>
</dl>
<span>我现在在学习html，</span><div>后天学习css+javascript</div>
</body>
</html>
实体标签
因为> < 等一些符号在html页面中是有着特殊含义，这些字符如果需要在页面中显示，这时候就应该使用实体标签
常用的实体字符:
空格
小于号 <
大于号 >
人民币 ¥；
版权 ©
商标 ®
Code4
</head> <body> 段落标签是使用<p>标"签"<br/> 该毛衣的价格：¥298<br/> <<深入javaweb>>该书版权归属于：©123 <hr/> 本次活动最后的解释器归属于：®123 </body>
媒体标签
<embed></embed>
hidden ： 设置隐藏插件是否隐藏。
src ：用于指定音乐的路径
<marquee> 飘动标签
direction : 指定飘动的方向
scrollamount : 指定飘动的速度。
loop :指定飘动的次数
Code5
<embed src="1.mp3" ></embed> <marquee loop="-1" scrollamount="30" direction="right"><font size="+6" color="red"> 我飞起来了...</font></marquee>
超链接标签<a>
a标签常用的属性：
href : 用于指定链接的资源
target: 设置打开新资源的目标。 _Blank 在独立的窗口上打开新资源 _self 在当前窗口打开新资源
file: file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的。
格式：
file:\\\f:\美女\1.jpg
a标签的原理：
1. a标签的href属性值如果是以http开头的，那么浏览器会马上启动http解释器去解释该网址，首先
会在本地机器去找一个hosts文件， 如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的
dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机。
2. 如果a标签的href属性值没有以任何协议开头，那么浏览就会启动file协议解释器去解释该资源路径。
3. 如果a标签的href属性值并不是以http开始，而且其他 的一些协议，那么这时候浏览器就回去到我们本地的注册
表中去查找是否有处理这种协议 的应用程序，如果有，那么马上启动该应用程序处理该协议。
邮件 的协议： mailTo
迅雷的协议： thunder
超链接标签的作用：
1. 可以用于链接资源。
2. 锚点点位.
1. 首先编写一个锚点 锚点的格式： <a name="锚点名字"> 数据</a>
2. 使用a标签 的herf属性连接到锚点出。 href=”#锚点的名字“ Code6
<a href="www.baidu.com">百度</a>
<a target="_blank" href="2常用的标签.html">带你去看1.html</a><br/>
<a href="mailTo:123456@qq.com">123456@qq.com</a>
<a href="thunder://abc/aa一个人的武林.avi">一个人的武林(高清枪版).avi</a>
<!--锚点 -->
123
<a href="#top">回到顶部</a>
图像标签
img标签常用的属性:
width： 设置图片宽度
height 设置图片高度
alt: 如果图片资源无法找到，那么就显示对应的文字对图片进行说明。
<img src="img/11.jpg" alt="这个是路飞" width="400" height="300" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="171,178,304,227" href="http:\\www.baidu.com" target="_blank" />
<area shape="circle" coords="189,135,27" href="2常用的标签.html" target="_blank" />
</map>
表格标签
表格使用到的标签：
<table> 表格
<tr> 行
<td> 单元格
<th> 表头 默认的样式是居中，加粗。
<caption> 表格的标题
表格常用的属性：
border 设置表格的边框
width : 设置表格的宽度
height: 设置表格的高度的。
colspan: 设置单元格占据指定的列数。
rowspan : 设置单元格占据指定的行数。
表格分为三部分
<thread> 表头 可以没有
<tbody> 表体 至少一个
<tfoot> 表尾 可以没有
Code 简单的表格
<table align="center" border="1px" bordercolor="#0066CC" width="400px" height="300px">
<tr>
<th>姓名</th>
<th>分数</th>
<th>人品</th>
</tr>
<tr>
<td>姓名1</td>
<td>分数1</td>
<td>人品1</td>
</tr>
<tr>
<td>姓名2</td>
<td>分数2</td>
<td>人品2</td>
</tr>
<tr>
<td>姓名3</td>
<td>分数3</td>
<td>人品3</td>
</tr>
<tr>
<td>姓名4</td>
<td>分数4</td>
<td>人品4</td>
</tr>
</table>
Code 复杂的表格
<table align="center" border="1px" bordercolor="#0066CC" width="400px" height="300px">
<caption>期末考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>分数</th>
<th>人品</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">凡江</td>
<td>98</td>
<td>优</td>
</tr>
<tr>
<td>100</td>
<td>优</td>
</tr>
<tr>
<td>居东东</td>
<td>99</td>
<td>非常好</td>
</tr>
<tr align="center">
<td>综合测评</td>
<td colspan="2">非常好</td>
</tr>
</tbody>
</table>
框架标签
frameSet ： 一个frameSet可以把一个页面切割成多份。
只能按照行或者列切割。
frame 不能被切割的。 frame是位于frameSet中。
iframe: 在一个网页中分隔一部分的位置显示另外一个网页的的信息。
注意： frameSet标签不能用于body标签体内容。
Code 多个HTML文件
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<frameset rows="20%,70%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="center" src="center.html" />
</frameset>
<frame src="foot.html" />
</frameset>
<noframes></noframes>
</html>
top
<div align="center"><font color="#FF0000" size="30px">公司的logo</font></div>
left
<dl>
<dt>功能介绍</dt>
<dd><a href="../2常用的标签.html" target="center">公司简介</a></dd>
<dd><a href="#">产品介绍</a></dd>
<dd><a href="#">公司荣耀</a></dd>
<dd><a href="#">招聘英才</a></dd>
<dd><a href="#">联系我们</a></dd>
</dl>
center
公司创建于2006年
foot
<div align="center">
合作伙伴：百度、 腾讯、 微软、甲骨文....
<br/> 友情链接：
<br/> 联系方式：020-123456 版权归属于于： ®123
</div>
表单标签
表单标签的作用是用于提交数据给服务器的。
表单标签的根标签是<form>标签
常用的属性：
action: 该属性是用于指定提交数据的地址。
method： 指定表单的提交方式。
get : 默认使用的提交方式。 提交的数据会显示在地址栏上。
post ： 提交的数据不会显示在地址栏上。
get与post的其它区别
get
会将提交的内容显示在浏览器地址栏
提交的数据的大小会受地址栏的限制数据不能超过1kb
提交敏感数据时不安全
post
不会将提交的内容显示在浏览器地址栏
提交的数据不会受地址栏限制
提交敏感数据时更安全Code
<body>
<form action="http://www.baidu.com" method="post">
<!-- 文本输入框 单行-->
用户名：<input name="userName" type="text"/><br/>
<!-- 密码框 -->
密码：<input name="password" type="password"/><br/>
<!-- 单选框 -->
性别： 男<input checked="true" value="man" name="sex" type="radio"/> 女<input name="sex" value="woman" type="radio"/><br/>
<!-- 下拉框 -->
来自的城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">广州</option>
<option value="SZ">深圳</option>
</select><br/>
<!-- 复选框 同一组的复选框name的属性值要一致 -->
兴趣爱好：java <input value="java" name="hobit" checked="checked" type="checkbox" />javascript <input type="checkbox" value="javascript" name="hobit" />android <input value="android" name="hobit" type="checkbox" /><br/>
<!-- 文件上传框-->
大头照：<input name="image" type="file" /><br/>
个人简介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按钮 -->
<input type="submit" value="注册"/>
<!-- 重置按钮 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>
随机推荐
- [C++]C++标准里 string和wstring
typedef basic_string<char> string; typedef basic_string<wchar_t> wstring; 前者string是常用类型, ...
- 更改printk打印级别
1.查看当前控制台的打印级别 cat /proc/sys/kernel/printk 4 4 1 7 其中第一个"4"表示内核打印函数printk的打印级别,只有 ...
- 【转】Tomcat中部署java web应用程序
http://www.blogjava.net/jiafang83/archive/2009/06/02/279644.html 转载:今天给大家介绍怎样在Tomcat5.5.9中部署Java Web ...
- xUtils框架
我要为大家推荐的是一个Android基于快速开发的一个框架——xUtils,它是在aFinal基础上进行重构和扩展的框架,相比aFinal有很大的改善.同时,如果如果你的应用是基于网络的,那么只要处理 ...
- JDBC的批量处理数据
主要用到的方法有: preparedStatement.executeBatch();//积攒的数据执行 preparedStatement.clearBatch();//积攒的清除掉 prepare ...
- HTML,javaScript,DOM详解
HTML DOM 教程 DOM 教程 DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构. HTML DOM 树 HTML DOM 简 ...
- mipi协议中文详解
一.MIPI MIPI(移动行业处理器接口)是Mobile Industry Processor Interface的缩写.MIPI(移动行业处理器接口)是MIPI联盟发起的为移动应用处理器制定的开放 ...
- Failed to start component [StandardEngine[Catalina].StandardHost[localhost....
今天我用了近一天的时间研究一个错误,早上写代码是遇到一个 错误严重错误代码如下: 严重: ContainerBase.addChild: start: org.apache.catalina.Life ...
- byte,bitmap,image互转
/// <summary> /// 将图片Image转换成Byte[] /// </summary> /// <param name="Image"& ...
- 2016年12月6日 星期二 --出埃及记 Exodus 21:1
2016年12月6日 星期二 --出埃及记 Exodus 21:1 "These are the laws you are to set before them:你在百姓面前所要立的典章是这 ...