韩顺平html笔记(10页).doc
-韩顺平html笔记-第 10 页html介绍html是一种标记语言，主要用于开发网页，使用html可以展现文字，图片，视频，声音，html是我们网站开发的基础html可以编写静态网页，不能编写动态的，动态是指能与网站进行交互Ø 一、Html的运行原理1.本地运行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> 跳转到下一行的下一行<font size=”>字体标记</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=2 color=red>举头望明月</font></br>低头思故乡</br></body></html>Ø 三、html符号实体<font size=7>© £ ®</font>Ø 四、html超链接使用超链接，可以使网页链接到另外一个页面<br/>*超链接案例*<br/><a href='a.html' target="_blank">hello hello</a><!- target 常用属性值 _blank（开新的页面） _self（替换当前页面）-><a href='a.html' target="_blank">hello hello</a><br/><a href='a.html' >hello hello</a><br/>什么也不写，默认是_self（替换当前页面）<br/><a href='' target="_blank">百度首页</a><br/><br/><a href='' target="_blank">搜狐首页</a>Ø 五、html图片元素（标记）Html文件不区分大小写指定宽度之后高度不用再指示，会自动按比例计算<img src="d:/1.jpg" width=300 ></img>可以盗连别人的图片方法：复制要盗连的图片的网址<img src=" ></img><img src="d:/1.jpg" width=300 border=1 ></img> 加边框特别说明：url可以是外部网站的一个图片Ø 六html表格表格的主要用途：显示数据和图片，布局基本语法：1.做出这样的一个表格的代码<table border=5 width=500 align="center" bgcolor="yellow" cellspacing=5 bordercolor=red> <tr align=center><td>1</td><td>2</td><td>5</td></tr> <tr align=center><td>1</td><td>2</td><td>5</td></tr><tr align=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=1 bordercolor=red width=400 align="center" cellspacing=0><tr><td align="center" colspan=3 >星期一菜谱</td></tr><tr><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr><tr><td>小葱豆腐</td><td>炒白菜</td></tr><tr><td rowspan=2>荤菜</td><td>油焖大虾</td><td>海参鱼翅</td></tr><tr><td width=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=a start=2><li>传奇</li><li>三国</li><li>精英</li></ol>Ø 九html框架标记frameset/frame基本语法：1.代码： a1.html 文件<body bgcolor=yellow>周杰伦</br>齐秦</body>a2.html文件<body >歌词</body>all.html文件<frameset cols="50%,*" frameborder=0><frame src="a1.html" noresize><frame src="a2.html" noresize></frameset>注意：all.html文件中不能带body标记，norsize使中间不能拖拽2.综合的小案例代码如下：top.html文件<body><img src="d:/1.jpg"></img></body>left.html文件<body bgcolor="yellow"><a href="right1.html" target="right">青花瓷</a></br><a href="right2.html" target="right">当兵的人</a></body>right1.html文件<body>青花瓷的歌词</body>right2.html文件<body>当兵的人的歌词</body>zong.html文件<frameset rows="15%,*" frameborder=10 framespacing=5 bordercolor=red><frame src="top.html" noresize scrolling="no"><frameset cols="20%,*"><frame src="left.html" noresize><frame src="" 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><input type="submit" value="登陆"><input type="reset" value="重新填写"></form></body></html>OK.html文件<body>登陆OK！</body>从上面的案例，我们可以看出（1） 表单元素的格式<input type=* name=*/>type= text（文本框） password（密码框） hidden（隐藏框） checkbox（复选框） radio（单选框） submit（提交按钮） reset（重置按钮） image（图片按钮）<input type=”image” src=”>name 是给该表单元素取名（2） action指定把请求提交给哪个页面post不会在地址栏上显示，但是get会在地址栏上显示，这样很危险input元素的举例<body><form action="" method="post">您的姓名：<input type="text" name="username"></br>密码：<input type="password" name="pwd"></br><input type="checkbox" name="水果" >苹果</br><p><input type="checkbox" name="水果" >香蕉</p><p><input type="radio" name="sex">男</p><p><input type="radio" name="sex">女</p><p><input type="hidden" name="sal" value="1000">这里有一个隐藏的表单元素</p><input type="image" src="d:/1.jpg" name="图片" width=100></form></body>注意：隐藏的作用是既可以提交数据，又不影响数据，不占有空间 单选框和复选框都要使用相同的名字。Checked单选框复选框都可以使用，表示默认选项<input type="checkbox" name="水果" checked>苹果</br><p><input type="checkbox" name="水果" >香蕉</p>select/option/texterea举例select 默认选中selected代码：select.html文件<body><form action="" method="post">请选择你得爱好：<select name="like"><option value=xuanze >请选择</option> 提交的时候要提交value的值<option value=yumao>羽毛球</option><option value=dianshi>看电视</option></select></br></br><textarea cols="30" rows="10">请在这里输入文本</textarea></br></br><input type="file" name="文件"> 可以进行文件的选择<input type="submit" value="提交"><input type="reset" value="重置"></form></body>Ø 十一.html的加强Ø 1.语言字符集 您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言。但是如果 HTML 文件里写明了设置，浏览器就会自动设置语言选项。<head><title>hello</title><meta http-equiv="Content-Type" content="text/html;charset=gbk"> </head>Ø 2. 背景色彩和文字色彩<body link=red text=blue>你好<a href="">百度</a></body>文本是蓝色，链接是红色Ø 3.页面空白<body leftmargin=0 topmargin=0>你好</body>让文本靠近左上角Ø 4.target<a href=url target=_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.字体大小<font style=”font-size:150px”>标题</font>次句可以将字体无限放大，因为用<h1>最大此时满足不了需要face=”华文新魏” 可以给字设置不同的字体Ø 7.图像<img src=”d:/1.jpg” alt=”这是小狗”> </img>鼠标点到图片时，显示文字Ø 8.会移动的文字<marquee>啦啦啦，我会移动耶！</marquee>
