您的位置：首页 > Web前端 > HTML

HTML--【DRP】

2015-11-01 21:31 417 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航