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>
随机推荐
- Android 读取Assets中资源
//读取文件 private static String getFromAssets(Context context, String fileName) { String result = " ...
- YTU 2344: 先序遍历二叉树
原文链接:https://www.dreamwings.cn/ytu2344/2603.html 2344: 先序遍历二叉树 时间限制: 1 Sec 内存限制: 128 MB 提交: 4 解决: ...
- inux awk命令详解
http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858470.html 简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编 ...
- python-day7 python内置模块 面向对象
1.configparser模块 configparser用于处理特定格式的文件,其本质上是利用open来操作文件 # 注释1 ; 注释2 [section1] # 节点 k1 = v1 # 值 k2 ...
- Python学习笔记-Day3-python关键字
1.and 逻辑与 2.assert 判断某个条件是否为真,如果为假,抛出错误 3.break跳出for,while循环 4.class 类定义 5.continue 跳出本次循环,执行下次循环 6. ...
- java中的动态代理机制
java中的动态代理机制 在java的动态代理机制中,有两个重要的类或接口,一个是 InvocationHandler(Interface).另一个则是 Proxy(Class),这一个类和接口是实现 ...
- web前端职业规划
关于一个WEB前端的职业规划,其实是有各种的答案,没有哪种答案是完全正确的,全凭自己的选择,只要是自己选定了, 坚持去认真走,就好.在这里,我只是简要说一下自己对于这块儿内容的理解.有一个观点想要分享 ...
- Android开发之获取相册照片和获取拍照照片
在Android的开发过程中,我们可能会读取手机里面的照片或者通过相机拍摄获取照片,这是两种常用的获取图片的方式,在做项目过程中也会经常遇到,下面来介绍一下这两种获取方式.. 1.从本地相册获取照片: ...
- qbxt十一系列一
希望[题目描述]网页浏览器者有后退与前进按钮,一种实现这两个功能的方式是用两个栈,“前进栈”.“后退栈”.这里你需要实现以下几个功能:BACK: 如果“后退栈”为空则忽略此命令. 否则将当前两面压入“ ...
- zookeeper系列之六—zookeeper之应用
http://www.cnblogs.com/sharpxiajun/archive/2013/06/02/3113923.html Zookeeper是hadoop的一个子项目,虽然源自hadoop ...