<!-- 声明网页的版本 -->
<!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>
HTML基础标签笔记
最新推荐文章于 2024-08-04 20:38:28 发布