<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html用法</title>
</head>
<body>
<h1>标题h1</h1>
<h2>标题h2</h2>
<h3>标题h3</h3>
<h4>标题h4</h4>
<h5>标题h5</h5>
<h6>标题h6</h6>
<hr/>
<p>这是个段落</p>
<hr/>
<h3>文本格式化标签</h3>
<b>粗体文本</b>
<big>大号字体</big>
<em>着重文字</em>
<i>斜体字</i>
<small>小号字</small>
<strong>加重语气</strong>
<sub>下标字</sub>
<sup>上标字</sup>
<ins>插入字</ins>
<del>删除字</del>
<hr/>
<h3>计算机输出标签</h3>
<pre>预定义
格式标签
</pre>
<var>定义变量</var>
<tt>打字机代码</tt>
<code>计算机代码</code>
<br/>
<kbd>键盘码</kbd>
<br/>
<samp>计算机代码样本</samp>
<br/>
<hr/>
<h3>引用和术语标签</h3>
<p>用的太少，自己去看API</p>
<hr/>
<h3>超链接</h3>
<!--请注意<a>标签的href和target还有锚点的定义-->
<a href="#" target="_blank">普通超链接-新的选项卡</a>
<a href="#" target="_parent">普通超链接-???</a>
<a href="#" target="_self">普通超链接-???</a>
<a href="#" target="_top">普通超链接-???</a>
<a href="html.rar">下载html.rar</a>
<a href="mailto:someone@microsoft.com">打开邮箱(不好用)</a>
<!--id或者name都可以-->
<a href="#maoji1">点我到锚点处</a>
<p id="maoji1">锚点</p>
<hr/>
<h3>插入图片</h3>
<img src="img/1.jpg" alt=""/>
<hr/>
<h3>表格</h3>
<table border="1px">
<caption>普通表格</caption>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<br/>
<table border="1px">
<caption>水平表头的表格</caption>
<tr>
<th>表头1.1</th>
<th>表头1.2</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<br/>
<table border="1">
<caption>垂直表头的表格</caption>
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>
<br/>
<table border="1px">
<caption>跨行</caption>
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.2</td>
</tr>
</table>
<br/>
<table border="1px">
<caption>跨列</caption>
<tr>
<td colspan="2">1.1</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<br/>
<table border="1px" cellpadding="10px">
<caption>单元格边距</caption>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<br/>
<table border="1px" cellspacing="10px">
<caption>单元格间距</caption>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<hr/>
<h3>列表</h3>
<p>无序列表：</p>
<ul>
<li>新闻</li>
<li>动态</li>
<li>招商</li>
</ul>
<p>有序列表：</p>
<ol>
<li>新闻</li>
<li>动态</li>
<li>招商</li>
</ol>
<p>自定义列表</p>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<hr/>
<h3>html布局</h3>
<p>页面布局使用div+css(table布局现在已经很少使用了)，将在后面的css内容中详细介绍</p>
<hr/>
<h3>表单--这是重点</h3>
<p>传统的表单提交：form标签要设置action属性指定提交到什么地方，method属性指定使用什么方式提交</p>
<p>表单元素要设置name属性</p>
<form action="1.php" method="get">
<!--文本框-->
<p>姓名： <input type="text" name="name" required/></p>
<!--文本域-->
<p>内容：<textarea name="contents" id="" cols="30" rows="10"></textarea></p>
<!--复选框-->
我喜欢自行车：<input type="checkbox" name="Bike">
我喜欢汽车：<input type="checkbox" name="Car"><br/><br/>
<!--单选框-->
男性：<input type="radio" checked="checked" name="Sex" value="man"/>
女性：<input type="radio" name="Sex" value="woman"/><br/><br/>
<!--下拉列表-->
<select name="city" id="">
<option value="bj">北京</option>
<option value="sjz">石家庄</option>
<option value="sz">深圳</option>
<option value="hn">河南</option>
</select>
<br/>
<br/>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text"/>
体重：<input type="text"/>
</fieldset>
<br/> <br/>
<!--提交按钮-->
<input type="submit" value="提交">
<!--重置按钮-->
<input type="reset" value="重置">
</form>
<hr/>
<h3>框架在网页中使用较少，作用是将外部页面直接嵌入到页面中，给出源码自己做实验咯</h3>
<p>垂直框架，请审查元素看</p>
<frameset cols="25%,50%,25%">
<frame src="url">
<frame src="url">
<frame src="url">
</frameset>
<p>水平框架，请审查元素看</p>
<frameset rows="25%,50%,25%">
<frame src="url">
<frame src="url">
<frame src="url">
</frameset>
<hr/>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html用法</title>
</head>
<body>
<h1>标题h1</h1>
<h2>标题h2</h2>
<h3>标题h3</h3>
<h4>标题h4</h4>
<h5>标题h5</h5>
<h6>标题h6</h6>
<hr/>
<p>这是个段落</p>
<hr/>
<h3>文本格式化标签</h3>
<b>粗体文本</b>
<big>大号字体</big>
<em>着重文字</em>
<i>斜体字</i>
<small>小号字</small>
<strong>加重语气</strong>
<sub>下标字</sub>
<sup>上标字</sup>
<ins>插入字</ins>
<del>删除字</del>
<hr/>
<h3>计算机输出标签</h3>
<pre>预定义
格式标签
</pre>
<var>定义变量</var>
<tt>打字机代码</tt>
<code>计算机代码</code>
<br/>
<kbd>键盘码</kbd>
<br/>
<samp>计算机代码样本</samp>
<br/>
<hr/>
<h3>引用和术语标签</h3>
<p>用的太少，自己去看API</p>
<hr/>
<h3>超链接</h3>
<!--请注意<a>标签的href和target还有锚点的定义-->
<a href="#" target="_blank">普通超链接-新的选项卡</a>
<a href="#" target="_parent">普通超链接-???</a>
<a href="#" target="_self">普通超链接-???</a>
<a href="#" target="_top">普通超链接-???</a>
<a href="html.rar">下载html.rar</a>
<a href="mailto:someone@microsoft.com">打开邮箱(不好用)</a>
<!--id或者name都可以-->
<a href="#maoji1">点我到锚点处</a>
<p id="maoji1">锚点</p>
<hr/>
<h3>插入图片</h3>
<img src="img/1.jpg" alt=""/>
<hr/>
<h3>表格</h3>
<table border="1px">
<caption>普通表格</caption>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<br/>
<table border="1px">
<caption>水平表头的表格</caption>
<tr>
<th>表头1.1</th>
<th>表头1.2</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<br/>
<table border="1">
<caption>垂直表头的表格</caption>
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>
<br/>
<table border="1px">
<caption>跨行</caption>
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.2</td>
</tr>
</table>
<br/>
<table border="1px">
<caption>跨列</caption>
<tr>
<td colspan="2">1.1</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<br/>
<table border="1px" cellpadding="10px">
<caption>单元格边距</caption>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<br/>
<table border="1px" cellspacing="10px">
<caption>单元格间距</caption>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<hr/>
<h3>列表</h3>
<p>无序列表：</p>
<ul>
<li>新闻</li>
<li>动态</li>
<li>招商</li>
</ul>
<p>有序列表：</p>
<ol>
<li>新闻</li>
<li>动态</li>
<li>招商</li>
</ol>
<p>自定义列表</p>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<hr/>
<h3>html布局</h3>
<p>页面布局使用div+css(table布局现在已经很少使用了)，将在后面的css内容中详细介绍</p>
<hr/>
<h3>表单--这是重点</h3>
<p>传统的表单提交：form标签要设置action属性指定提交到什么地方，method属性指定使用什么方式提交</p>
<p>表单元素要设置name属性</p>
<form action="1.php" method="get">
<!--文本框-->
<p>姓名： <input type="text" name="name" required/></p>
<!--文本域-->
<p>内容：<textarea name="contents" id="" cols="30" rows="10"></textarea></p>
<!--复选框-->
我喜欢自行车：<input type="checkbox" name="Bike">
我喜欢汽车：<input type="checkbox" name="Car"><br/><br/>
<!--单选框-->
男性：<input type="radio" checked="checked" name="Sex" value="man"/>
女性：<input type="radio" name="Sex" value="woman"/><br/><br/>
<!--下拉列表-->
<select name="city" id="">
<option value="bj">北京</option>
<option value="sjz">石家庄</option>
<option value="sz">深圳</option>
<option value="hn">河南</option>
</select>
<br/>
<br/>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text"/>
体重：<input type="text"/>
</fieldset>
<br/> <br/>
<!--提交按钮-->
<input type="submit" value="提交">
<!--重置按钮-->
<input type="reset" value="重置">
</form>
<hr/>
<h3>框架在网页中使用较少，作用是将外部页面直接嵌入到页面中，给出源码自己做实验咯</h3>
<p>垂直框架，请审查元素看</p>
<frameset cols="25%,50%,25%">
<frame src="url">
<frame src="url">
<frame src="url">
</frameset>
<p>水平框架，请审查元素看</p>
<frameset rows="25%,50%,25%">
<frame src="url">
<frame src="url">
<frame src="url">
</frameset>
<hr/>
</body>
</html>
扫一扫
2669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
