html是什么？
Hyper Text Markup Language,超文本标记语言。
html的Demo
1.<head>标签
<title>：设置标题，设置完成后显示到IE窗口的标题上
<style>:引入css文件
<script>:引入JavaScript文件
<meta>：用于设置一些头信息
demo1:
<html> <head> <title>我们的标题</title> </head> <body> 我们的内容！ </body> </html>
2.<body>标签
bgcolor：背景颜色
background：背景图片
demo2:
<html> <head> <title> </title> </head> <body bgcolor="red"> </body> </html>
demo3:
<html> <head> <title>设置背景为图片</title> </head> <body background=".\images\a.jpg"> </body> </html>
3.横线<hr>
size:长度
width:宽度
color:颜色
demo4:
<html> <head> <title>横线</title> </head> <body> <hr size="12" color="red" width="400"> <hr size="12" color="yellow" width="400"> </body> </html>
4.超级链接<a>
href：url
target:目标窗口
demo5:
<html> <head> <title>演示超级链接</title> </head> <body> <!--默认在本窗口打开--> <a href="http://www.baidu.com" >百度1</a> <!--在本窗口打开--> <a href="http://www.baidu.com" target="_self">百度2</a> <!--弹出窗口--> <a href="http://www.baidu.com" target="_blank">百度3</a> </body> </html>
5.字体设置<font>
size:大小
color:颜色
demo6：
<html> <head> <title>бнЪОh1-h6</title> </head> <body> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> </body> </html>
demo7:
<html> <head> <title>演示font</title> </head> <body> <font color="red" size="20">字体</font> <p> <font color="#996633" size="20">字体</font> </body> </html>
6.文字设置
<b>：黑体
<i>：斜体
<u>：下划线
<s>：中划线
<sup>：上标
<sub>：下标
demo8:
<html> <head> <title>特殊标签</title> </head> <body> <b>粗</b> <p> <i>斜体</i> <u>下划线</u> <s>中线</s> <sup>上标</sub>    <sub>下标 </sub> </body> </html>
7.特殊字符
< <
> >
& &
&nbps; 空格
" "
8.文字布局
<div><span> ：文字的分区显示，块级，行内
<ul><li>...</ul>：无序列表
<ol><li>...</ol>：有序列表
<p>：回车换行
<br>：换行
<pre>：保留原始格式
demo10:
<html> <head> <title>演示布局</title> </head> <body> <div> 123 <p> 345 </div> <div align="center"> 123 <p> 345 </div> <span> sfsdf </span> <span align="center"> sfsdf </span> <p> <li>无序号</li> <li>无序号</li> <ol> <li>有序号</li> <li>有序号</li> </ol> <p> <pre> dfdfds </pre> </body> </html>
9. 表单<form>
action:提交给服务器的程序来处理
method:取值get或post,get取值有限制（256byte），表单数据会出现在url后面；post取值无限制，表单数据不会显示在表单后
<input type="" name="">
type取值：text/password/checkbox/radio/select/textarea/submit/button/image/hidden
name:输入域的名字
demo13:
<html> <head> <title>演示password入域</title> </head> <body> <h1>演示password输入域</h1> <hr> <form action="12.html" method="post"> 登录名：<input type="text" name="username" value="lisi" ><br> 密码：<input name="password" type="password"><br> <input type="submit" value="登录"> </form> </body> </html>
文字输入text:
id-唯一标识 name-名称 value-值 size-长度 maxlength-最大长度
demo12:
<html> <head> <title>演示text输入域</title> </head> <body> <h1>演示text输入域</h1> <hr> <!--get提交,会把信息放到url的后面 <form action="12.html" method="get"> --> <form action="12.html" method="post"> 姓名：<input type="text" name="username" size="60" maxlength="10" id="a"><br> 年龄：<input name="age" id="ab"><br> <input type="submit" value="保存"> </form> </body> </html>
复选框-checkbox
id-唯一标识 name-名称，多个时名称相同 value-值 checked-选中的checkbox
demo14:
<html> <head> <title>演示checkbox输入域</title> </head> <body> <h1>演示checkbox输入域</h1> <hr> <form action="12.html" method="post"> 姓名：<input type="text" name="username" ><br> 计算机语言： <input type="checkbox" name="language" checked="true">C语言 <input type="checkbox" name="language">Fox <input type="checkbox" name="language">VB <input type="checkbox" name="language">delphi <p> <input type="submit" value="保存"> </form> </body> </html>
单选框-radio
id-唯一标识 name-名称，多个时相同 value-值 checked-选中的radio
demo15:
<html> <head> <title>演示radio输入域</title> </head> <body> <h1>演示radio输入域</h1> <hr> <form action="12.html" method="post"> 姓名：<input type="text" name="username" ><br> 计算机语言： <input type="radio" name="language" checked="true" >C语言 <input type="radio" name="language">Fox <input type="radio" name="language">VB <input type="radio" name="language">delphi <p> <input type="submit" value="保存"> </form> </body> </html>
列表框-select
id--唯一标识 name--名称 size--列表框的长度 multiple--可以实现多选的列表框 value--列表框中的值 selected--制定哪一项被选中
demo16:
<html> <head> <title>演示select输入域</title> </head> <body> <h1>演示select输入域</h1> <hr> <form action="12.html" method="post"> 姓名：<input type="text" name="username" ><br> 计算机语言： <select name="language"> <option value="01">VB</option> <option value="02">C</option> <option value="03" selected="true">C#</option> <option value="04">Java</option> </select> <p> <input type="submit" value="保存"> </form> </body> </html>
文本区域 -textarea
id--唯一标识 name--名称 rows--行数 cols--列数
demo17:
<html> <head> <title>演示textarea输入域(多选)</title> </head> <body> <h1>演示textarea输入域(多选)</h1> <hr> <form action="12.html" method="post"> 姓名：<input type="text" name="username" ><br> 描述： <textarea name="desc" rows="5" cols="30"></textarea> <p> <input type="submit" value="保存"> </form> </body> </html>
按钮
type:button--点击按钮，提交数据，不提交form submit--单击按钮，提交form信息 reset--点击按钮重置form信息 image--点击图片提交（默认get）
demo18:
<html> <head> <title>演示button,submit,reset,image输入域(多选)</title> </head> <body> <h1>演示button,submit,reset,image输入域(多选)</h1> <hr> <form action="18.html" > 姓名：<input type="text" name="username" ><br> 描述： <textarea name="desc" rows="5" cols="30"></textarea> <p> <input type="submit" value="保存(submit)"><br> <input type="button" value="保存(button)"><br> <input type="reset" value="保存(reset)"><br> <input type="image" src="http://i6.topit.me/6/5d/45/1131907198420455d6o.jpg"><br> </form> </body> </html>
隐含域--demo19:
<html> <head> <title>演示隐含域</title> </head> <body> <h1>演示隐含域</h1> <hr> <form action="19.html"> <!-- 班级代码：<input type="text" name="classesId" value="123456" readonly="true"><br> --> <input type="hidden" name="classesId" value="123456"> 班级名称：<input type="text" name="classesName" value="java 603班"><br> <p> <input type="submit" value="修改"><br> </form> </body> </html>
表格：
border--表格边框尺寸 width--表格宽度，可用百分比 align--对齐方式，left/right/center <tr>--行 <td>--列 align--对齐方式，left/right/center colspan--跨多列
demo20：
<html> <head> <title>演示table</title> </head> <body> <h1>演示table</h1> <hr> <table border="1" width="50%" > <tr align="center" bgcolor="red"> <td>姓名</td> <td>科目</td> <td>成绩</td> </tr> <tr> <td>张三</td> <td>汇编语言</td> <td>90分</td> </tr> <tr> <td colspan="2" align="center">合计</td> <td>190分</td> </tr> </table> </body> </html>
框架
demo21:
21.hml
<html> <head> <title>演示frame</title> </head> <!--不能把frameset放到body里面--> <frameset cols="30%,*"> <frame name="left" src="21_1.html"> <frame name="right" src="21_2.html"> </frameset> </html>
21_1.hml
<html> <head> <title>演示frame</title> </head> <body> left </body> </html>
21_2.html
<html> <head> <title>演示frame</title> </head> <body> right </body> </html>
html中的target
_blank，开启一个新的浏览器窗口 _self,当前窗口 _parent,在当前窗口的直接父帧窗口，显示 _top,在最顶层窗口显示（覆盖）
22.html
<html> <head> <title>演示frame</title> </head> <!--不能把frameset放到body里面--> <frameset rows="10%,*"> <frame name="top" src="22_1.html"> <frameset cols="15%,*"> <frame name="left" src="22_2.html"> <frame name="right" src="22_3.html"> </frameset> </frameset> </html>
22_1.html
<html> <head> <title>成绩管理系统</title> </head> <body> <div align="center"> <h1>成绩管理系统</h1> </div> </body> </html>
22_2.html
<html> <head> <title>演示frame</title> </head> <body> <h1>菜单</h1> <a href="student_add.html" target="_self">添加学生</a><br> <a href="student_del.html">删除学生</a><br> <a href="student_modify.html" target="_blank">修改学生</a><br> <a href="student_query.html" target="_top">添加学生</a><br> </body> </html>
22_3.html
<html> <head> <title>演示frame</title> </head> <body> <h1>欢迎使用成绩管理系统</h1> </body> </html>
iframe
23.html
<html> <head> <title>演示iframe</title> </head> <body> <h1>演示iframe</h1> <hr> <iframe src="23_1.html"> </body> </html>
23_1.html
<html> <body> <table border="1" width="1000"> <tr> <td width="30%">helloworld</td> <td width="30%">helloworld</td> <td width="40%">helloworld</td> </tr> <tr> <td width="30%">helloworld</td> <td width="30%">helloworld</td> <td width="40%">helloworld</td> </tr> <tr> <td width="30%">helloworld</td> <td width="30%">helloworld</td> <td width="40%">helloworld</td> </tr> <tr> <td width="30%">helloworld</td> <td width="30%">helloworld</td> <td width="40%">helloworld</td> </tr> </table> </body> </html>
时间： 2024-11-01 07:45:26