本文回顾了HTML的基本知识，包括文档类型声明、标记语言、标题、段落、列表、表格、表单、超链接和图片的使用。同时介绍了<form>、<input>、<select>、<textarea>等表单元素及其属性，并提供了多个示例代码。
Html简单标记语言
基本框架：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
简单标记语言：
1.换行符：<br> <b></b>:字体加粗
2.段落标记：<p></p>:段落标记在段前和段后各添加一个空行，而定义在段落标记中的内容，不受该标记的影响。
3.6个级别的标题：<h1>至<h6>,数字越小，级别越高，也就是字体越大。
4.<center></center>:居中标记
5.文字列表标记：将文字以列表的形式依次排列
无序列表是在每个列表项的前面添加一个圆点符号。
有序列表和无序列表的区别是，使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol>，每一个列表项前使用<li>。有序列表中项目项是有一定的顺序的。
6.定义表格：<table>,标题标记<caption>,他有align,valign等属性
表头标记<th></th>，也可以通过align,valign，background,colspan,valign等属性来设置表头
表格标记<tr>，一组<tr>标记表示表格中的一行，<tr>标记要嵌套在<table>标记中使用，该标记也具有align,background等属性
单元格标记<td>，又称为列标记，一个<tr>标记中要嵌套若干个<td>标记。也具有align（排列成一条线）,valign（垂直对其），background（背景）。属性
注：定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。
7.Html表单标记：
7.1<from></from>表单标记
<from action="url" method="get"|"post" name="name" onSubmit=""target=""></from>
action属性：用来指定处理表单数据的url地址，
method属性：用来指定数据传送到服务器的方式：get/post
name属性：用来设置表单的名称，
onSubmit属性：用于指定当用户单机提交按钮时触发的事件。
target属性：指定输入结果在哪个窗口显示，属性值可设置为：_blank:在新窗口中打开目标文件。_self:在同一个窗口打开。_parent::在上一级窗口打开。_top在整个窗口中打开
7.1<input>表单输入标记
<input type="image" disabled="disable" checked="checked" width="digit" height="digit" maxlength="digit"
readonly="" size="digit" src="uri" alt="" name="checkbox" value="checkbox"></input>
<input>标记中type属性的属性值
1.text：文本框。2.password:密码域。3.file:文件域 4.radio:单选按钮。5.CheckBox:复选框 6.submit:提交按钮 7.reset:重置按钮 8.:button普通按钮 9.hidden:隐藏域。 10.image:图像域
7.3<select>…</select>下拉菜单标记 <select name="name" size="digit" multiple="multiple" disabled="disabled"></select> <select>标记的属性：
1.name:用于指定列表框的名称。
2.size：用于指定列表框中显示的选项数量，超出该数量的选项可以通过拖动滚动条查看。
3.disabled:用于指定当前列表框不可使用(变成灰色)
4.multiple:用于让多行列表框支持多选
7.4<textarea>多行文本标记
<from name="from1" method="post" action="">
<textarea name="content" cols="30" rows="5" wrap="hard"></textarea>
</from>
8.1 超链接标记是页面中非常重要的元素，在网站中实现从一个页面跳转到另一个页面，这个功能就是通过超7接标记<a>来完成。
<a href=""></a>
8.2 在浏览网站中通常会看到各式各样的漂亮的图片，在页面中添加的图片是通过<img>标记来实现的。
<img src="url" width="value" height="value" border="value" alt="提示文字">
<img>的标记的属性：
src:用于指定图片的来源。
width:用于指定图片的宽度。
height:用于指定图片的高度。
border:用于指定图像外边框的宽度。默认值为0
alt:用于指定图片无法显示的文字。
练习代码：
eg1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单练习</title>
</head>
<body>
<b>
<center>
格言：只要步履不停，终会得偿所愿！<br></center>
黄鹤楼送孟浩然之广陵<br>
</b>
故人西辞黄鹤楼，烟花三月下扬州。<br>
孤帆远影碧空尽，唯见长江天际流。
<h2>Java基础学习</h2>
<h3>JavaSE</h3>
<p>它主要用于桌面程序的开发，越来越多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强企业。</p>
<h3>JavaEE</h3>
<p>主要用于网页程序的开发</p>
<h3>JavaME</h3>
<p>主要用于嵌入式是程序的开发</p>
</body>
</html>运行结果：
eg2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单练习</title>
</head>
<body>
<b>无序列表标记</b>
<p>
<ul>
<li>Java编程词典
<li>VB编程词典
<li>VC编程词典
<li>.NET编程词典
<li>c#编程词典
</ul>
</p>
<b>有序列表标记</b>
<p>
<ol>
<li>Java编程词典
<li>VB编程词典
<li>VC编程词典
<li>.NET编程词典
<li>c#编程词典
</ol>
</p>
<table width="310" height="167"border="1" align="center">
<caption>考试成绩单</caption>
<tr>
<td align="center"valign="middle">姓名</td>
<td align="center"valign="middle">语文</td>
<td align="center"valign="middle">数学</td>
<td align="center"valign="middle">英语</td>
</tr>
<tr>
<td align="center"valign="middle">张三</td>
<td align="center"valign="middle">87</td>
<td align="center"valign="middle">89.5</td>
<td align="center"valign="middle">101</td>
</tr>
<tr>
<td align="center"valign="middle">薛晋</td>
<td align="center"valign="middle">85</td>
<td align="center"valign="middle">85.5</td>
<td align="center"valign="middle">109</td>
</tr>
</table>
</body>
</html>运行结果：
表单标记练习代码：
eg3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标记input的使用</title>
</head>
<body>
<form action="" method="post" name="myform">
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
</table>
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="547" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%" height="29" align="center">用 户 名：</td>
<td colspan="2"><input name="username" type="text" id="UserName4" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">密 码：</td>
<td height="28" colspan="2"><input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">确认密码：</td>
<td height="28" colspan="2"><input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">性 别：</td>
<td colspan="2"><input name="sex" type="radio" class="noborder" value="男" checked>
男
<input name="sex" type="radio" class="noborder" value="女">
女</td>
</tr>
<tr>
<td height="28" align="center">爱 好：</td>
<td colspan="2" class="word_grey"><input name="like" type="checkbox" id="like" value="体育">
体育
<input name="like" type="checkbox" id="like" value="旅游">
旅游
<input name="like" type="checkbox" id="like" value="听音乐">
听音乐
<input name="like" type="checkbox" id="like" value="看书">
看书</td>
</tr>
<tr>
<td height="28" align="center" style="padding-left:10px">E-mail：</td>
<td colspan="2" class="word_grey"><input name="email" type="text" id="PWD224" size="50"> </td>
</tr>
<tr>
<td height="34"> </td>
<td width="30%" class="word_grey"><input name="Submit" type="submit" class="btn_grey" value="确定保存">
<input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填写"></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>0.运行结果图：
eg4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select标记和option标记添加下拉列表框和多行下拉列表框</title>
</head>
<body>
<select name="select">
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>u盘</option>
</select><br>
多行列表框(不可多选)
<select name="select2" size="2">
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>u盘</option>
</select><br>
多行列表框(可多选)
<select name="select3" size="3" multiple>
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>u盘</option>
</select>
</body>
</html>运行结果图：
eg5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea多行文本</title>
</head>
<body>
<from name="from1" method="post" action="">
<textarea name="content" cols="30" rows="5" wrap="hard"></textarea>
</from>
</body>
</html>运行结果图：
eg6.1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接及图片标记</title>
</head>
<body>
<table width="409" height="523" border="1 align="center">
<tr>
<td width="199" heijht="99">
<img src="E:/timg.jpg">
</td>
</tr>
<tr>
<td height="35" align="center" valign="middle"><a href="07.html">查看详情</a></td>
<tr>
</table>
</body>
</html>eg6.2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接及图片标记的超链接</title>
</head>
<body>
<p>
我是胡歌粉，
</p>
</body>
</html>运行结果图：
超链接运行结果图：
1.<section>元素表示页面中的一个区域，例如章节，页眉，页脚或者页面的其他部分与<h1>--<h4>电脑更元素联合起来使用
<article>:页面中定义一块与上下文不相关的内容
<header>页眉。<footer>:脚注
<aside>元素用来表示当前页面的附属信息部分
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增元素的使用</title>
</head>
<body>
<section>
<h2>section标记的使用</h2>
<p>完成百分比：100%</p>
<input type="button" value="请单击">
</section>
<article>
<!-- <header>是<article>的页眉 -->
<header>
<h1>所谓爱情</h1>
</header>
<p>我们还小，说爱太浮夸，但我知道，喜欢和在一起是俩件完全不同的事情。</p>
<footer><!-- 页脚 -->
<p>1996.10.14</p>
</footer>
</article>
<aside>
<nav>
<h3>侧栏</h3>
<ul>
<li><a href="#">大话西游</a></li>
</ul>
<ul>
<li><a href="#">周星驰</a></li>
</ul>
<ul>
<li><a href="#">至尊宝</a></li>
</ul>
</nav>
</aside>
</body>
</html>运行结果图：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
