HTML整理
常用标签
1.注释< !–xxxx–>
2.换行< br >
3.段落< p >< /p>
4.水平分隔线< hr >
5.h标签< h1 >< /h1>
6.图片标签< img src=" " height=" " width=" " alt=" " border=" ">
7.超链接< a title=" " target=" ">xxxxx< /a>
| target | 描述 |
|---|---|
| _blank | 新窗口打开 |
| _self | 默认，本框架中打开,别的数据还存在，相当于在一个页面里中又打开一个页面 |
| _parent | 父框架中打开 |
| _top | 在整个窗口中大开 |
8.锚点< a href=" #锚点名"> < /a >
设置锚点 < h2 id=“锚点名”>< /h2 >
9.无序列表(list-style: none;)
< ul >
< li >条目一< /li >
< li >条目二< /li >
< /ul >
- 有序列表
< ol >
< li >条目一< /li >
< li >条目二< /li >
< /ol >
11.定义列表
< dl >
< dt >定义一< /dt >
< dd >解释< /dd >
< dt >定义二< /dt >
< dd >解释< /dd >
< /dl >
例题一：制作网页介绍我的学校
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>介绍到的学校</title>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
<h1>我的学校</h1>
<ul>
<li><a href="# intro">学校简介</a></li>
<li><a href="# spirit">大学精神</a></li>
<li><a href="# view">校园风光</a></li>
</ul>
<h2 id="intro">学校简介</h2>
<p>该校坐落于美丽的海滨，学校空气清新环境优美，拥有全国最大的图书馆，被称为金陵学院</p>
<h2 id="spririt">大学精神</h2>
<p>求真务实   爱党敬业</p>
<h3 id="view">校园风光</h3>
<p>椰子树，橡胶树，万紫千红鸟语花香</p>
<script type="text/javascript" src="" >
</script>
</body>
</html>
表格与表单
表格
< table align=" " bgcolor=" " border=" " width=" " cellspacing=" 外边距" cellpadding=“内边距”>
< tr align=" " valign="">#行标签
< th >表头，默认加粗居中对齐 < /th>
< td width=" " align=" " valign="" colspan=2 rowspan=2> xxxxx< /td>#单元格标签
< /tr >
< /table>
例题二 统计图书表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图书</title>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
<table border="1" cellspacing="" cellpadding="">
<tr>
<th>分类</th>
<th>书名</th>
<th>数量</th>
</tr>
<tr><td rowspan="3">数据库</td><td>《数据库原理》</td><td>1</td></tr>
<tr><td>《mysql数据库管理》</td><td>2</td></tr>
<tr><td>《Java时间开发》</td><td>2</td></tr>
<tr><td>Java</td><td>《时间飞行》</td><td>4</td></tr>
<tr><td colspan="2">总计</td><td>9</td></tr>
</table>
<script type="text/javascript" src="" >
</script>
</body>
</html>
表单
< form name=’ ’ action=’ 表单传送目的界面的地址’ method=’ get’ >< /form >
输入：
<input type"text" name=''><!--明文输入框-->
<input type"passward" name=''><!--密码输入框-->
<input type"radio" name='' value=''><!--单选按钮，name值相同-->
<input type"checkbox" name='' value='' checked='checked'>
<!--多选按钮 ,name相同-->
<input type"button" name='' value=""><!--一般按钮-->
<input type"submit" name='' value=""><!--提交按钮-->
<input type"reset" name='' value=""><!--重置按钮-->
点击文字文本框聚焦
<lable for="aa">
账号：<input type="text" id="aa"></input>
</lable>
下拉列表：
<select name="">
<option value="0">--请选择--</option>
<option value="1">本科</option>
<option value="2">硕士</option>
<option value="3">博士</option>
<select>
<select name="">
<optgroup label="咖啡">
<option value="1">白咖啡</option>
<option value="2">黑咖啡</option>
</optgroup>
<optgroup label="茶">
<option value="1">红茶</option>
<option value="2">绿茶</option>
</optgroup>
<select>
文本域：
<textarea name=" " rows="" cols=""></textarea>
例三：个人信息统计表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人信息统计</title>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
<form action="" method="post">
<table border="1" cellspacing="" cellpadding="">
<tr>
<th colspan="2">个人信息统计表</th>
</tr>
<tr><td >姓名：</td><td ><input type="text" name="name" id="" value="" /></td></tr>
<tr><td >年龄</td><td ><input type="text" name="age" id="" value="" /></td></tr>
<tr><td >性别</td><td ><input type="radio" name="gender" id="" value="man" />男<input type="radio" name="gender" id="" value="felmale" />女</td></tr>
<tr><td >爱好：</td><td ><input type="checkbox" name="hobby" id="" value="1" />旅游<input type="checkbox" name="hobby" id="" value="2" />登山
<input type="checkbox" name="hobby" id="" value="3" />健身<input type="checkbox" name="hobby" id="" value="4" />上网</td></tr>
<tr><td >学历</td><td >
<select name="school">
<option value="0">--请选择--</option>
<option value="1">本科</option>
<option value="2">硕士</option>
<option value="3">博士</option>
<select>
</td></tr>
<tr><td >自我介绍</td><td ><textarea rows="20" cols="50" value=""></textarea></td></tr>
<tr><td></td><td><input type="submit" name="submit" id="" value="提交" /><input type="reset" name="reset" id="" value="重置" /></td></tr>
</table>
</form>
<script type="text/javascript" src="" >
</script>
</body>
</html>
例四：网站注册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人信息统计</title>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
<form action="" method="post">
<table border="0" cellspacing="" cellpadding="">
<tr>
<td align="right">密码 <span style="color: red;">*</span></td>
<td><input type="password" name="" /></td>
<td></td>
</tr>
<tr>
<td align="right">密码确认 <span style="color: red;">*</span></td>
<td><input type="password" name="" id="" value="" /></td>
<td></td>
</tr>
<tr>
<td align="right">姓名 <span style="color: red;">*</span></td>
<td><input type="text" name="" id="" value="" /></td>
<td></td>
</tr>
<tr>
<td align="right">证件类型 <span style="color: red;">*</span></td>
<td><select name="" >
<option value="">居民身份证</option>
</select></td>
<td></td>
</tr>
<tr>
<td align="right">证件号码 <span style="color: red;">*</span></td>
<td><input type="text" name="" id="" value="" /></td>
<td></td>
</tr>
<tr>
<td align="right">安全邮箱 <span style="color: red;">*</span></td>
<td><input type="email" name="" id="" value="" /></td>
<td><span style="font-size: small;">sohu邮箱无法接受请填写其他邮箱</span></td>
</tr>
<tr>
<td align="right">密保问题1 <span style="color: red;">*</span></td>
<td><input type="text" name="" id="" value="你爸爸的名字" /></td>
<td>答案：<input type="text" name="" id="" value="" /></td>
</tr>
<tr>
<td>密保问题2 <span style="color: red;">*</span></td>
<td><input type="text" name="" id="" value="你的生日" /></td>
<td>答案：<input type="text" name="" id="" value="" /></td>
</tr>
<tr>
<td align="right">密保问题3 <span style="color: red;">*</span></td>
<td><input type="text" name="" id="" value="你的电话" /></td>
<td>答案：<input type="text" name="" id="" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="term" checked="checked"/>我已经同意条款</td>
<td></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="" id="" value="立即注册" /></td>
<td><a href="">忘记密码</a>|<a href="">忘记用户名</a></td>
</tr>
</table>
</form>
<script type="text/javascript" src="" >
</script>
</body>
</html>
HTML5新增
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新闻评论页面</title>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
<!-- header -->
<header>
<h1>360新闻网</h1>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">帮助</a></li>
</ul>
</nav>
</header>
<!-- 文章正文-->
<article>
<hgroup>
<h2>美国航天局发现第二个地球</h2>
<p>
<small>
<time datetime="2015-07-25 T09:11">2015-07-25 T09:11</time>来源：咸宁日报 我有话说
</small>
</p>
</hgroup>
<p> 据新华社报道，美国航天局于7月25日当地时间晚上7点整，在首都华盛顿卫星观测态<br>
发现在限女性西，距离太阳250亿光年的地方有一颗小星星。</p>
<section>
<h3>评论</h3>
<article>
<p>匿名</p>
<p>就算每秒30万千米的速度，要需要1400年，我们是到不了的。</p>
</article>
</section>
</article>
<!-- footer -->
<footer>
<small>版权所有，360新闻网</small>
</footer>
<script type="text/javascript" src="" >
</script>
</body>
</html>
表单新增：
email
url
date
time
datetime
number
range
search
tel
color
属性：
placeholder
required
autofocus
multiple(可选择多个)
list
如< input list=“cars”/>
< datalist id=“cars”>
< option value=“bmw”>
< option value=“baoma”>
< /datalist>
例订货人个人信息页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户注册页面</title>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
<form action="" method="">
<table border="1">
<tr>
<td>用户名</td><td><input type="text" name="name" required="required" /></td>
</tr>
<tr>
<td>密码</td><td><input type="password" name="pwd" required="required" /></td>
</tr>
<tr>
<td>密码确认</td><td><input type="password" name="" /></td>
</tr>
<tr>
<td>年龄</td><td><input type="number" name="" min="1" max="100"/></td>
</tr>
<tr>
<td>性别</td><td><input type="radio" name="gender" id="" value="nan" />男<input type="radio" name="gender" value="nv" />女</td>
</tr>
<tr>
<td>出生日期</td><td><input type="date" name="birthday" /></td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="degree">
<option value="1">大学</option>
<option value="2">硕士</option>
<option value="3">博士</option>
</select>
</td>
</tr>
<tr>
<td>email</td><td><input type="email" required="required" /></td>
</tr>
<tr>
<td>个人网站</td><td><input type="url" /></td>
</tr>
<tr>
<td>客户头像</td><td><input type="file"multiple="multiple" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册" /></td>
</tr>
</table>
</form>
<script type="text/javascript" src="" >
</script>
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
