html介绍
html是一种标记语言,主要用于开发网页,使用html可以展现文字,图片,视频,声音,,,
html是我们网站开发的基础
html可以编写静态网页,不能编写动态的,动态是指能与网站进行交互
一、Html的运行原理
html文件 使用 浏览器(软件)打开
2.远程访问运行
你的电脑(浏览器) 另一台电脑 远程服务器(hello.html)
在基本情况,除了自己测试外,基本都是远程访问html文件
将html文件放在tomcat下
二.html的基本结构
<html>
<head>
<title>第一个网页</title>
</head>
<body>hello</body>
</html>
<元素名 [属性]>元素内容</元素名>
1.不管这html文件有多复杂,它的基本结构是
<元素名 [属性]>元素内容</元素名> 元素也叫标记
<font size=2 color=red>举头望明月</font></br>
2.案例
<p>段落标记</p> 跳转到下一行的下一行
<fontsize=””>字体标记</font>size取值1到7
<h#>标题字体</h#> #=1,2,3,4,5,6
<b></b>:字体加粗
</br>换到下一行
将html的内容放在</body>体内
<html>
<head>
<title>第一个网页</title> 文件的头部,此处可以略去不写
</head>
<body>
<!==我们的内容放在这部分中==> 注释这样写
<h3>静夜思</h3>
<p><b>床前明月光</b></p>
疑是地上霜</br>
<font size=2color=red>举头望明月</font></br>
低头思故乡</br>
</body>
</html>
三、html符号实体
<fontsize=7>© £ ®</font>
四、html超链接
使用超链接,可以使网页链接到另外一个页面
<br/>*******************超链接案例********************<br/>
<ahref='a.html' target="_blank">hello hello</a>
<!-- target 常用属性值 _blank(开新的页面) _self(替换当前页面)-->
<ahref='a.html' target="_blank">hello hello</a><br/>
<ahref='a.html' >hello hello</a><br/>什么也不写,默认是_self(替换当前页面)
<br/><ahref='http://www.baidu.com' target="_blank">百度首页</a><br/>
<br/><ahref='http://www.sohu.com' target="_blank">搜狐首页</a>
五、html图片元素(标记)
Html文件不区分大小写
指定宽度之后高度不用再指示,会自动按比例计算
<imgsrc="d://1.jpg" width=300 ></img>
可以盗连别人的图片
方法:复制要盗连的图片的网址
<imgsrc="http://www.baidu.com/img/baidu_jgylogo3.gif" ></img>
<imgsrc="d://1.jpg" width=300 border=1 ></img> 加边框
特别说明:url可以是外部网站的一个图片
六.html表格
表格的主要用途:显示数据和图片,布局
基本语法:
1.做出这样的一个表格的代码
<table border=5width=500 align="center" bgcolor="yellow" cellspacing=5bordercolor=red>
<tralign=center><td>1</td><td>2</td><td>5</td></tr>
<tralign=center><td>1</td><td>2</td><td>5</td></tr>
<tralign=center><td>1</td><td>2</td><td>5</td></tr>
</table>
表格元素名称是table
<tr>表示一行 <td>表示一列
cellspacing是指空隙大小:指列与列,行与行之间的空隙大小
cellpadding表示填充大小:表示各行各列中的内容的填充,这样就会在一定程度上撑大格子
2.练习
<html>
<head>
<title></title>
</head>
<body>
<table border=1bordercolor=red width=400 align="center" cellspacing=0>
<tr><tdalign="center" colspan=3 >星期一菜谱</td></tr>
<tr><tdrowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr>
<tr><td>小葱豆腐</td><td>炒白菜</td></tr>
<tr><tdrowspan=2>荤菜</td><td>油焖大虾</td><td>海参鱼翅</td></tr>
<tr><tdwidth=280 height=150>红烧肉 <img src="d://1.jpg"width=100></img></td><td>烤全羊</td></tr>
</table>
</body>
</html>
说明:colspan合并行,rowspan和并列 详见菜谱.html文件
七.无序列表ul/li
基本语法
默认的是实心的小圆点
<ul>
<li>传奇</li>
<li>三国</li>
<li>精英</li>
</ul>
八.有序列表
基本语法
默认的编号是1,2,3
代码如下:
<ol type=astart=2>
<li>传奇</li>
<li>三国</li>
<li>精英</li>
</ol>
九.html框架标记frameset/frame
基本语法:
1.
代码:
a1.html 文件
<bodybgcolor=yellow>
周杰伦</br>
齐秦
</body>
a2.html文件
<body >
歌词
</body>
all.html文件
<framesetcols="50%,*" frameborder=0>
<framesrc="a1.html" noresize>
<framesrc="a2.html" noresize>
</frameset>
注意:all.html文件中不能带body标记,norsize使中间不能拖拽
2.综合的小案例
代码如下:
top.html文件
<body>
<imgsrc="d://1.jpg"></img>
</body>
left.html文件
<bodybgcolor="yellow">
<ahref="right1.html" target="right">青花瓷</a></br>
<ahref="right2.html" target="right">当兵的人</a>
</body>
right1.html文件
<body>
青花瓷的歌词
</body>
right2.html文件
<body>
当兵的人的歌词
</body>
zong.html文件
<framesetrows="15%,*" frameborder=10 framespacing=5 bordercolor=red>
<framesrc="top.html" noresize scrolling="no">
<framesetcols="20%,*">
<framesrc="left.html" noresize>
<framesrc="" noresize name="right">
</frameset>
</frameset>
十.Html常用标记-form
介绍:html表单元素主要是让用户输入数据,提交给服务器
1.基本语法
默认的是get方法
2.案例
login.html文件
html>
<head>
<title>登陆界面</title>
</head>
<body>
<h1>登陆界面</h1>
<form action="OK.html" method="post">
用户名:<input type="text"name="username"></br>
密 码:<input type="password"name="pwd"></br>
<inputtype="submit" value="登陆"><input type="reset"value="重新填写">
</form>
</body>
</html>
OK.html文件
<body>
登陆OK!
</body>
从上面的案例,我们可以看出
(1) 表单元素的格式
<inputtype=* name=**/>
type= text(文本框) password(密码框) hidden(隐藏框)
checkbox(复选框) radio(单选框) submit(提交按钮)
reset(重置按钮) image(图片按钮)<input type=”image” src=””>
name 是给该表单元素取名
(2) action指定把请求提交给哪个页面
post不会在地址栏上显示,但是get会在地址栏上显示,这样很危险
input元素的举例
<body>
<formaction="" method="post">
您的姓名:<input type="text"name="username"></br>
密码:<input type="password"name="pwd"></br>
<inputtype="checkbox" name="水果">苹果</br>
<p><inputtype="checkbox" name="水果">香蕉</p>
<p><inputtype="radio" name="sex">男</p>
<p><inputtype="radio" name="sex">女</p>
<p><inputtype="hidden" name="sal" value="1000">这里有一个隐藏的表单元素</p>
<inputtype="image" src="d://1.jpg" name="图片"width=100>
</form>
</body>
注意:隐藏的作用是既可以提交数据,又不影响数据,不占有空间
单选框和复选框都要使用相同的名字。
Checked单选框复选框都可以使用,表示默认选项
<inputtype="checkbox" name="水果" checked>苹果</br>
<p><inputtype="checkbox" name="水果">香蕉</p>
select/option/texterea举例
select 默认选中selected
代码:select.html文件
<body>
<formaction="" method="post">
请选择你得爱好:<select name="like">
<optionvalue=xuanze >请选择</option> 提交的时候要提交value的值
<optionvalue=yumao>羽毛球</option>
<optionvalue=dianshi>看电视</option>
</select></br></br>
<textarea cols="30" rows="10">请在这里输入文本
</textarea></br></br>
<inputtype="file" name="文件"> 可以进行文件的选择
<input type="submit"value="提交"><input type="reset"value="重置">
</form>
</body>
十一.html的加强
1.语言字符集
您在浏览主页时,最好自己在浏览器的选项菜单内选择相应的语言。
但是如果 HTML 文件里写明了设置,浏览器就会自动设置语言选项。
<head>
<title>hello</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gbk">
</head>
2. 背景色彩和文字色彩
<body link=redtext=blue>你好
<ahref="http://www.baidu.com">百度</a>
</body>
文本是蓝色,链接是红色
3.页面空白
<body leftmargin=0 topmargin=0>你好
</body>
让文本靠近左上角
4.target
<a href=urltarget=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口
<a href=url target=指向frame的名字>
5.标识线
<hr color=”red”/>
6.字体大小
<fontstyle=”font-size:150px”>标题</font>
次句可以将字体无限放大,因为用<h1>最大此时满足不了需要
face=”华文新魏” 可以给字设置不同的字体
7.图像
<img src=”d://1.jpg” alt=”这是小狗”> </img>
鼠标点到图片时,显示文字
8.会移动的文字
<marquee>啦啦啦,我会移动耶!</marquee>