目标:
认识什么是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也必须有时间锻炼和学习--->坚持学习---->
今天的学习不够理想的,主要的地方就是理解不好--->坚持了这个.就必须要奋斗..
休息好-->身体好..
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
