目标:
认识什么是html
HTML(Hyper Text Mark_up Language 超文本标记语言)的缩写, 标记:就是用来描述网页内容的一些特定的符号.Html不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,比如文字以什么颜色,大小来显示,这些都是利用了html标记来实现.
Html文档的创建方式:用Html语言创建的文档
手工直接编写(记事本)
通过图形化的Html开发软件DreamWeaver
由web服务器上的动态网页程序生成
标记的语法
Html是最基本的语法<标记符>内容</标记符>,标记符通常都是成对使用的,有一个开头标记和一个结束的标记.结束标记只是在开头的标记的前面加一个斜杠:"/"当浏览器打开html文件后,就会理解里面的标记符,然后把标记符所对应的功能表达出来.
例如:<font size ="7">htllo world</font>
2.HTML标记的语法:单标记与双标记
a)单标记
1)<标记名称>
单一型,无属性值
如:<br/>
<标记名称 属性 = "属性值">
单一型,有属性值
如:<ht width = "80%"/>
b)双标记
<标记名称>....</标记名称>
没有属性值.
如: <title>这是我的网页标题</titel>
<标记名称 属性= "属性值">....</标记名称>
有属性值
如:<body bgcolor = "red">网页的主体内容</body>
总结:
双标记:<开始标记>内容</结束标记>
单标记:<标记>(单标记也可以有属性)
标记的属性:<标记 属性1= 参数1 属性2 = 参数2...>内容</标记>.
说明:
标语与属性\属性之间以空格分隔
属性不区分先后顺序,并且属性不是必须的.
虽然在HTML中标记是不区分大小写的,但是在XHTML中所有的标记都是必须小写,所以建议我们写标记的时候--->写小写.
掌握常用的html标记的应用
Html文档的结构:
所有的网页文件,通过是由四个标记来完,文档的骨架
<html>
<head>
<titile>
头文件
<titile>
</head>
<body>
正文
</body>
</hrml>
<hrml>....</html>:标识网页的开始和结束,所有的html元素都需要放到这里的标记中
<head></head>表示网页中的文件的头部信息,如标题,搜索引擎关键字等.
<title>....</title>表示网页中的文件的标题
<body>....</body>标识网页中的主体部分
Meta标记用于定义文件的信息
Meta标记用于定义文件的信息,对网页文件进行说明,便于搜索引擎查找.放置于<head></head>之间
设置关键字:
<meta name="keyWords" content="value"> 多个关键字,内容之间可以用","分隔</meta>
设置描述:
<meta> name="description" content ="valie"</meta> 多个关键字可以使用,分开
设置作者:
<meta> name= "author" content="作者名"</meta>
设置字符集:
<meta http-equiv=”content-type” content=”text/html;charset=gb2312”>
设置页面定时跳转:
<meta http-equiv="Refresh" content="2;URL=http://www.javami.net" />
网页主题标记body
1.注释
<!--注释内容-->
2.body属性
<body bgcolor=“背景颜色” background=“背景图像” text=“文本颜色” link=“链接文本颜色” vlink=“访问过的文本颜色”
alink=“激活的链接文本颜色” leftmargin=“左边界” rightmargin=“右边界”topmargin=“上边界” bottommargin=“下边界”>
字体的修饰
<font>标签
语法:
<font color = "文本的颜色" size="子号(最多只能为7 face="字体")"> 文本内容</font>
注意:
网页中的文本字体,字号一般通过css修饰
颜色 | 英文名称 | 十六位进制 | 颜色 | 英文名称 | 十六位进制 |
白色 | White | #FFFFFF | 黑色 | Black | #000000 |
红色 | Red | #FF0000 | 绿色 | Green | #00FF00 |
蓝色 | Blue | #0000FF | 灰色 | Gray | #999999 |
<html>
<head>
<title>这是我的第一个网页</title>
<meta name = "keywords" content ="编程奋斗网">
<meta name = "description" content="自学编程,编程奋斗家园,javase">
<meta http-equiv = "content-type" content="text/html;charset=gbk">
</head>
<body>
<font color="Gray" size="6">美怡,我爱你</font>
</body>
</html>
2.字符的表格
<strong>这里面主要写语气加重的内容,表示了语气加重,重点内容</strong>
段落控制标记
段落标记:
格式:<p align = "对齐的方式">....</p>
属性名称 属性值 说明
align left 左对齐(默认)
Center居中
Right右对齐
段落标题
<hx align= ” 对齐方式 “ > … </hx>:段落标题
说明:
X取值[1~6] hx内的文本会自动加粗显示。
hx针对的对象是段落,而font针对的对象的任意文本。
<br />:换行(换行不换段)
水平直线<hr>
size :
像素 :绝对设置,以数字表示,属性值越大,线越粗,
百分比 :相对设置,以 % 表示,属性值越大,线越粗
Width:
像素 :绝对设置,长度不会应视窗的改变而改变
百分比 :相对设置,长度会随着视窗宽度而改变
noshade="noshade" 实体线
八/特殊标记
1.定义一个块引用:使用文本缩进
格式: <blockquote>...</blockquote>
属性名称 属性值 说明
Cite url 被引用的地址
2.居中标记 <center>内容</center>(被废弃的标签)
3./预格式化 <pre></pre>
4.显示已经格式化好的文字。不加此标记的话,HTML浏览器会忽略所有空格和制表符。
九在HTML文档中使用特殊字符
列表的标记
1、列表标记用途:
列表标记可以创建一般的无序列表、编号列表,以及定义列表三种方式。 还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。
[1]、无序列表 <ul>…</ul>
[2]、有序列表 <ol>…</ol>
[3]、定义列表 <dl>…</dl>
2、无序列表
语法:
<ul type=“项目符号类型”>
<li type=“项目符号类型”>内容1</li>
<li> 内容2</li>
…
</ul>
<li></li> 表示一个项目
3、有序列表
语法:
<ol start=“列表起点” type=“项目符号类型”>
<li >内容1</li>
<li >内容2</li>
…
</ol>
定义列表
语法:
<dl> <dt>标题1</dt> <dd>内容1</dd>
<dd>内容2</dd> <dt>标题1</dt> <dd>内容1</dd>
<dd>内容2</dd> </dl>
<dl></dl>定义列表
<dt></dt>表示一个项目
<dd></dd>表示一个项目下的更详细的内容的解释
图片:
Web上支持的图片格式
GIF(图形交换格式):GIF格式文件最多只能保存256种颜色。该格式支持透明色,支持动画效果。
JPEG(联合图像专家组):该格式不支持透明色及动画,颜色可达1670万种
PNG(网络可移植格式):该格式支持透明色,但不支持动画,颜色从几种至1670万种。
图片标记
<img src=“图片的路径” />
路径:
□ 绝对路径:提供目标文档的完整主机名称、路径信息、及文档全称
□ 相对路径:从当前文档开始的路径
如果当前文档和目标文档位置平行,则直接书写目标文档全称
如果当前文档和目标文档所在文件夹位置平行,则书写为 文件夹名称/目标文档全称
如果当前文档所在文件夹和目标文档位置平行,则书写为 ../目标文档全称
□ 根相对路径:从站点根目录开始的路径,以"/"开头
<html>
<head>
<title>这是我的第一个网页</title>
<meta name = "keywords" content ="编程奋斗网">
<meta name = "description" content="www.javami.com">
<meta http-equiv = "content-type" content="text/html;charset=gbk">
</head>
<body>
<img border ="1" src="img/1.gif"/>
<font color="#3300FF"size="2">体育> 国际足球-英格兰> 2014世界杯欧洲区预选赛> 正文</font>
<br/>
<br>
<h3><font color="#330066">霍奇森称找到英格兰的小法 杰拉德:曼联1新星可成大器</font></h1>
<hr width="80%"/>
<font size="2"><center>http://sports.sina.com.cn 2012年09月09日09:37 <font color="#FF0000">新浪体育微博</font></center></font>
<p> 新浪体育讯 英格兰主教练霍奇森认为,曼联中场新星克莱维利可以成为三狮军团“自<br/>己的法布雷加斯”,起到像小法为世界杯和欧洲杯冠军西班牙所发挥的作用。</p>
<p> 在今夏欧洲杯上,法布雷加斯在西班牙经常出任“假九号”,成为斗牛士军团攻击线的<br/>重要一员,霍奇森认为,克莱维利也有这样踢并且发挥出色的潜力。在5比0击败摩尔多瓦的<br/>比赛中,曼联新星的一次射门制造了首开纪录的点球,有不错的贡献。
</p>
<p>
霍奇森说:“我想你可以说克莱维利是一个攻击型中场,但他是一个和法布雷加斯一个<br/>类型的攻击中场。在曼联他踢得就是这个位置。”
</p>
<p>
“在需要的时候,他有能力跑回来,发挥一个中前卫的角色,拼抢赢回球权。而且,他<br/>可以承担更多角色,靠近锋线上的迪福,可以让杰拉德和兰帕德在更深的位置上更自如的拿<br/>球。”
</p>
<p> 克莱维利因伤错过了上赛季大部分比赛,也没有能够参加夏天的欧洲杯,不过霍奇森表<br/>示,今后可能会给他更多机会。“当他在沃特福德时我就知道他了,我看过他几场比赛,也<br/>看过他为曼联替补打的几场球。但他上赛季很早就受伤了,因此奥运会是我重点观察他的机<br/>会。”</p>
<p> 除了克莱维利,另一个得到霍奇森称赞的是阿森纳边锋张伯伦。“张伯伦上半时表现的<br/>非常好,不过我们之前告诉他,会在六十分钟后把他换下来,结果他下半时忘了怎么踢。这<br/>对他来说会是一个有趣的收获。”</p>
<p> 霍奇森表示,新一代的年轻球员对英格兰队很重要,他们正在接过老队员的班。“我们<br/>阵容里这么多关键成员缺席,阿什利-科尔、巴里、鲁尼,还有阿什利-扬、斯莫林和卡罗<br/>尔,所以每个人都发挥作用是很重要的。老队员们依然打出了在欧洲杯上的水准,不过看到<br/>一些新面孔进入,为位置发起挑战,这是好事。”</p>
<p> 英格兰队长杰拉德也认为,新一代的球员值得期待,他还表示,作为老队员,会尽力带<br/>领年轻人们一起向前。“我们感觉自己还像是小伙子一样,这就是我们发挥出这样水平的原<br/>因。”杰拉德说。</p>
<p> (马拉乔)</p>
<br/>
<br/>
<font size=3><strong>精彩高清图推荐:</strong></font>
<br/>
<br/>
<img border ="1" src="img/1.jpg"/>
<img border ="1" src="img/2.jpg"/>
<img border ="1" src="img/3.jpg"/>
<br/>
<font size="1" color="#663399">第一足球宝贝张馨予性感大片 </font>
<font size="1" color="#663399">王皓女友清纯靓照曝光 </font>
<font size="1" color="#663399">科比最美女球迷床照写真</font>
</body>
</html>
自己写的服务端:
import java.io.*;
import java.net.*;
class Demo3
{
public static void main(String[] args) throws Exception
{
ServerSocket ss = new ServerSocket(8888);
while(true)
{
Socket socket = ss.accept();
InputStream ips = socket.getInputStream();//读取内容
int len = ips.available();
byte[]buf = new byte[len];
ips.read(buf);
String info = new String(buf,0,len);
System.out.println(info);
OutputStream ops = socket.getOutputStream();
/*
ops.write("<font color = red>欢迎来到淘宝</font>".getBytes());
*/
Thread.sleep(100);
PrintWriter pw = new PrintWriter(ops,true);//把数据包装写入流里面
pw.print("<font color = red> 欢迎光临</font>");//把内容写入流里面
socket.close();
/*
尽量不要让它写数据在一起..如果写数据在一起,...那么就不给力啦..
*/
}
// ss.close();
}
}
表单的制作:
<!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>无标题文档</title>
</head>
<body>
<!--action 连接的方式-->
<form action="http://127.0.0.1:8888" method="get">
<table border="1" width="600" bordercolor="F2871F" align="center">
<!--th可以写上能居中的代码,并且加亮-->
<tr>
<th colspan="2">注册页面</th>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" id="usename" name="usename"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="pass" name="pass"/></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input tabindex="password" id="repas" name="repas"></td>
</tr>
<tr>
<!--当你点击的时候我们发什么内容过去-->
<td>性别:</td>
<td><input type="radio" id="sex" name="sex" value="man"/><img src="Male.gif"/>
<input type="radio" id="sex" name="sex" value="woman"/>女<img src="Female.gif">
</td>
</tr>
<tr>
<td>技术:</td>
<td><input type="checkbox" id="fun" name="fun" value="java"/>javase
<input type="checkbox"/id="fun" name="fun" value="jsp"/>jsp
<input type="checkbox" id="fun" name="fun" value="javaweb"/>javaweb
</td>
</tr>
<tr>
<td>国家</td>
<td>
<select name="country">
<option value="no">--请选择国家--</option>
<option value="cn">中国</option>
<option value="en">美国</option>
<option value="jb">萝卜头</option>
</select>
</td>
<tr>
<th colspan="2"><!--占了2行-->
<input type="submit" value="提交数据"/>
<input type="reset"/ value="清空数据"/>
</th>
</tr>
</tr>
</table>
</form>
</body>
</html>
个人心得:
眼下最主要的内容把英语学习好,javase也必须有时间锻炼和学习--->坚持学习---->
今天的学习不够理想的,主要的地方就是理解不好--->坚持了这个.就必须要奋斗..
休息好-->身体好..