<!-- 声明网页的版本 -->
<!DOCTYPE HTML>
<!-- 唯一的根元素 -->
<html>
<!-- 只有两个子元素 -->
<!-- 对网页进行声明 -->
<head>
<!-- 声明网页的编码 -->
<meta charset="utf-8" />
<link>
<!-- 声明网页的标题 -->
<title>我是title，放标题</title>
<style>样式</style>
<script>js</script>
</head>
<!-- 写出网页的内容 -->
<!-- 注释的快捷键ctrl+shift+？ -->
<body>
<p><a href="#bottom">到底部</a>我是瞄点，链接上面的瞄点标签。</p>
<div><h1 style="color:#fba098">HTML基本标签演示</h1></div>
<br/>
<br/>
<br/>
<div><!--有个颜色挺好看的 style="background-color:#fba098;" -->
<h2>成为<span style="color:blue">java</span>工程师学习指南</h2>
<ul>
<li>前端需要学习的内容：</li>
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
<li>后端需要学习的内容：</li>
<ol>
<li>JavaSE</li>
<li>JDBC</li>
<li>Servlet</li>
</ol>
<li>数据库需要学习的内容：</li>
<ol>
<li>oracle</li>
<li>mysql</li>
</ol>
</ul>
</div>
<div style="background-color:#5ca098">
<p>
<h3>演示不同的行内元素的效果：</h3>
<ul>
<li><span style="color:blue">我是span,划块</span></li>
<li><i>我是i标签，斜体</i> <br/></li>
<li><e>我是e标签，斜体</e> <br/></li>
<li><b>我是b标签，加粗</b> <br/></li>
<li><strong>我是strong,着重</strong> <br/></li>
<li><del>我是del标签，删除</del> <br/></li>
<li><u>我是b标签，下划线</u> <br/></li>
<li>我是 空格 标签，html空格自行折叠，要空格需要写& nbsp;</li>
</ul>
</p>
</div>
<div>
<p>
<h2>演示图片和超链接的效果：</h2>
<ul>
<li>我是img标签，加载图片
<p>
<!-- 图片与网页平级 -->
<img src="01.jpg" />
<!-- 图片在网页下级 -->
<img src="i/02.jpg" />
<!-- 图片在网页上级 -->
<img src="../03.jpg" />
<img src="../images/04.jpg" />
</p>
</li>
<li>我是a标签，是一个链接,默认本页打开。<a href="http://www.163.com">网易</a></li>
<li>我是href属性，是a的链接地址，例如：a href="www.163.com" 。</li>
<li>我是target属性，是a网址的目标打开方式，可以用_self在本页打开，或者_blank新建一页。</li>
<ol>
<li>演示本页打开target="_self"：<a href="http://www.163.com" target="_self">网易</a></li>
<li>演示新页打开target="_blank"：<a href="http://www.163.com" target="_blank">网易</a></li>
</ol>
</ul>
</p>
</div>
<div style="background-color:#5ca098">
<p>
<h2>演示表格的效果：</h2>
<ol>
<li>
<table>
<h4>无边框表格</h4>
<tr>
<td>我是td标签</td>
<td>我是td标签</td>
</tr>
<tr>
<td>我是td标签</td>
<td>我是td标签</td>
</tr>
</table>
</li>
<li>
<table border="1">
<h4>有边框表格</h4>
<tr>
<td rowspan="2">td属性rowspan是跨行，也就是竖着合并单元格</td>
<td>我是td标签</td>
</tr>
<tr>
<td>我是td标签</td>
</tr>
<tr>
<td colspan="2">td属性colspan是跨列，也就是横着合并单元格</td>
</tr>
<tr>
<td>我是td标签</td>
<td>我是td标签</td>
</tr>
</table>
</li>
<li>
<table border="1" height="300" width="500" cellpadding="1" cellspacing="2">
<h4>有边框表格</h4>
<p><em>注意：定义了宽高了的表格，表格的宽度不会随着内容的长短改变。</em></p>
<p>常用的table属性。例如：属性border="1"</p>
<ul>
<li>border定义边框</li>
<li>height定义格高</li>
<li>width定义格宽</li>
<li>align定义位置</li>
<li>cellpadding定义单元格边框与内容之间的距离</li>
<li>cellspacing定义单元格之间的间距</li>
</ul>
<br/>
<tr>
<td>tr属性常用的有align，valign</td>
<td>tr是行，td是列</td>
</tr>
<tr>
<td>我是td标签</td>
<td>我是td标签</td>
</tr>
</table>
</li>
<li>
<!-- 行分组 -->
<table border="1" width="30%">
<h4>行分组</h4>
<p>行分组分为thead，tbody，tfoot表头，表体，表尾；方便分别做不同的样式。</p>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody style="color:red;">
<tr>
<td>001</td>
<td>张三</td>
<td>98</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">总分</td>
<td>198</td>
</tr>
</tfoot>
</table>
</li>
</ol>
</p>
</div>
<div>
<p>
<h2>演示表单效果：</h2>
<h4>form表单</h4>
<p>主要属性：action是表单提交的url</p>
<p>主要属性：method是表单数据提交的方式</p>
<p>主要属性：enctype是表单数据编码的方式</p>
<ul>
<li>
<p>帐号密码输入文本框</p>
<p>主要属性：</p>
<p>type属性定义文本框类型</p>
<p>maxlength属性定义最大输入长度</p>
<p>readonly属性定义只读</p>
<form action="" method="get">
username:<input type="text" maxlength="10" name="帐号：" />
<br/>
password:<input type="password" name="密码："/>
</form>
</li>
<li>
<p>单选框，input的属性type="radio"</p>
<form action="">
性别：
<input type="radio" name="sex" value="male"/>male
<input type="radio" name="sex" value="female"/>female
</form>
</li>
<li>
<p>复选框，input的属性type="checkbox"</p>
<form action="">
兴趣爱好：
<input type="checkbox" />阅读
<input type="checkbox" />画画
</form>
</li>
<li>
<p>按钮</p>
<form action="">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="取消"/>
</form>
</li>
<li>
<p>隐藏域，文件选择框</p>
<form action="">
<input type="hidden" value="9"/>
<label for="file">上传：</label>
<input type="file" id="file"/>
</form>
</li>
<li>
<p>文本域</p>
<label for="address">地址：</label>
<textarea cols="30" rows="5" id="address">厦门市湖里区禾山街道观日西二里</textarea>
</li>
<!--下拉选 -->
<li>
<p>下拉选框</p>
<label for="course">课程：</label> <select id="course">
<option value="1">Java</option>
<option value="2">php</option>
<option value="3">.net</option>
</select>
</li>
</ul>
</p>
</div>
<p><a name="bottom">我是锚点a标签，属性name，</a></p>
<!-- 3)顶部默认是瞄点，没有名字 -->
<p>
<a href="#">顶部</a>
</p>
</body>
</html>
05-24
3844
05-25
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
