<!DOCTYPE html>
<html>
<head>
<!--作者： 日期：2017年9月18日-->
<!--元信息标记meta charset定义文档的字符编码
<meta charset="utf-8"/>
-->
<!--定时刷新页面
<meta charset="utf-8" http-equiv="refresh"content="秒;[url=网址]" />
-->
<style>
iframe {
width:600px;
height:600px;
}
</style>
<meta charset="utf-8" />
<title>标题</title>
</head>
<!--设置背景 background="背景.png -->
<body background="背景.png" >
<h1>特殊字符文本</h1>
<p>
半角大空白: <br />
全角大空白: <br />
不断行的空白格: <br />
小于:<<br />
大于:><br />
&符号:&<br />
双引号:"<br />
版权:©<br />
已注册商标:®<br />
商标美国:™<br />
乘号:×<br />
除号:÷<br />
</p>
<hr />
<a name="tswb"><h1>特殊文本</h1></a>
<p>
<b>b 粗体文字</b><br />
<em>em 强调文字</em><br />
<strong>strong 加强调文字</strong><br />
<i>i 斜体文字</i><br />
sub设置下标<sub>文字</sub><br />
sup设置上标<sup>文字</sup><br />
small设置旁注<small>大小</small><br />
<del>del设置删除文本</del><br />
<bdo dir="rtl">bdo定义文字方向配合dir属性一起使用</bdo><br />
</p>
<hr />
<h1>网页排版</h1>
<p>
br换行标记<br />
p段落标记<br />
h1-h6段落标记从小到大，文字依次递减<br />
hr设置水平线<br />
</p>
<hr />
<h1>文字列表</h1>
<p>
<h2>无序列表</h2>
<!--导航菜单的结构一般用无序列表实现-->
<ul>
<li>
ul定义无序列表
</li>
<li>
li定义列表项
</li>
<li>
li嵌套ul
<ul>
<li>li中可以嵌套ul标记</li>
<li>嵌套的标记</li>
<li>
第三层嵌套
<ul>
<li>第三层嵌套1</li>
<li>第三层嵌套2</li>
<li>
第四层嵌套
<ul>
<li>第四层嵌套1</li>
<li>第四层嵌套2</li>
<li>
嵌套有序列表
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>
有序列表嵌套有序列表
<ol>
<li>有序列表嵌套有序列表1</li>
<li>有序列表嵌套有序列表2</li>
<li>有序列表嵌套有序列表3</li>
</ol>
</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>
ol定义有序列表
</li>
<li>
li定义列表项
</li>
</ol>
<h2>不同类型的无序列表</h2>
<ul type="disc">
<li>disc项目符号</li>
</ul>
<ul type="circle">
<li>circle项目符号</li>
</ul>
<ul type="square">
<li>square项目符号</li>
</ul>
<h2>不同类型的有序列表</h2>
<ol>
<li>数字列表</li>
</ol>
<ol type="A">
<li>字母列表</li>
</ol>
<ol type="a">
<li>字母列表</li>
</ol>
<h2>自定义列表</h2>
<dl> 自定义列表以dl标签开始
<dt>
自定义列表项以dt开始
</dt>
<dd>
每个自定义列表项的定义以dd开始
</dd>
</dl>
</p>
<hr />
<h1>图像</h1>
<p>
插入图像用img标签<br />
<img src="头像.jpg" alt="头像图片"/><br />
设置图像大小，当为一个尺寸属性赋值时，另外一个尺寸就以图片原始的长宽比例来显示<br />
在 HTML 4.01 中，宽度应该被定义为以像素为单位或者以包含元素的百分比为单位。在 HTML5 中，宽度值必须以像素为单位。<br />
使用base64 <img src="https://img-blog.csdnimg.cn/2022010709071667114.jpg"height="50"align="top" />对图像进行编码，并设置对齐方式 bootom为居中（默认）middle 底部对齐 top 顶部对齐 <br />
</p>
<hr />
<h1>超链接</h1>
<a href="http://域名/目录/文件">链接http://域名/目录/文件</a><br />
<a href="http://域名/目录/文件#片段">片段链接http://域名/目录/文件#片段</a><br />
<a href="http://域名/目录/文件?变量名=参数">带参数链接http://域名/目录/文件?变量名=参数</a><br />
<a href="ftp://账号:密码@主机:端口/路径/文件" target="_blank">ftp链接ftp://账号:密码@主机:端口/路径/文件 target="_blank"属性设置在新窗口中打开</a><br />
<a href="mailto:10086@qq.com">电子邮箱链接</a><br />
<a href="#tswb">链接到特殊文本</a><br />
<a href="http://www.baidu.com"><img src="txclj.png" /></a><br />
创建图像局部区域链接 <h1>alt属性没搞清楚参数也没有搞清楚</h1><br />
<img src="头像.jpg" border="0" usemap="#Map"/>
<map name="Map" id="Map">
<area shape="rect" coords="0,0,180,50" href="www.0,0,180,50.com"/>
<area shape="rect" coords="180,50,180,50" href="www.180,50,180,50.com" />
<area shape="rect" coords="360,100,180,50" href="www.360,100,180,50.com" />
</map>
<h1>iframe浮动框架 默认220*120像素，通过css控制大小</h1>
<iframe src="http://www.baidu.com"></iframe>
<br />
<hr />
<h1>表单</h1>
<!-- action="url"提交地址 method="post"提交方式-->
<form action="url" method="post">
<fieldset>
<legend>表单</legend>
单行文本输入框<br />
<input type="text" name="text1" size="20" maxlength="30" value="size设置宽度 maxlength设置最大长度" /><br />
多行文本输入框<br />
<textarea name="textarea1" cols="30" rows="2" wrap="hard"></textarea><br />
密码框<br />
<input type="password" name="Password1" size="20" maxlength="20" /><br />
单选按钮 checked属性设置默认选中<br />
<input name="Radio1" type="radio" value="1" checked />男<input name="Radio1" type="radio" value="2" />女<br />
复选按钮<br />
<input type="checkbox" name="Checkbox1" value="1" checked />1
<input type="checkbox" name="Checkbox1" value="2" checked />2
<input type="checkbox" name="Checkbox1" value="3" />3
<input type="checkbox" name="Checkbox1" value="4" />4
<br />
下拉列表 multiple属性设置多选 selected设置默认选中<br />
<select name="xllb1" size="3" multiple>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
</select>
<br />
下拉列表 单选<br />
<select name="xllb2" size="3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br />
下拉列表 单选单列<br />
<select name="xllb3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br />
下拉列表 多选单列<br />
<select name="xllb4">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
</select>
<br />
普通按钮<br />
<input type="button" name="bt" value="普通按钮" /><br />
提交按钮<br />
<input type="submit" name="submit1" value="OK" /><br />
重置按钮<br />
<input type="reset" /><br />
url<br />
<input type="url" name="url1" /><br />
邮箱<br />
<input type="email" name="email1" /><br />
<h3>时间</h3> <br />
date <br />
<input type="date" /><br />
datetime <br />
<input type="datetime" /><br />
datetime-local<br />
<input type="datetime-local" /><br />
month<br />
<input type="month" /><br />
week<br />
<input type="week" /><br />
time<br />
<input type="time" /><br />
数值<br />
<input type="number" name="shuzhi" min="5" max="9" /><br />
滚动控件<br />
<input type="range" name="gundong" min="0" max="100" value="20" /><br />
设置元素不能为空的属性required<br />
<input type="text" required name="k" /><br />
上传对话框<br />
<input type="file" name="sc" /><br />
</fieldset>
</form>
<hr />
<h1>表格</h1><br />
<!--2017年9月19日-->
<!--完整的表格标记-->
<!--background设置背景图像-->
<!-- bgcolor设置背景颜色-->
<!--cellpadding属性设置单元格与内容之间的空白从而调整表格的行高与列宽。-->
<table border="1" background="头像.jpg" cellpadding="10">
<!--caption定义表格标题-->
<caption>表格标题</caption>
<!--thead定义表头-->
<thead>
<tr>
<!--th定义行头-->
<th>行头1</th>
<th>行头2</th>
<th>行头3</th>
</tr>
</thead>
<!--tbody定义主体-->
<tbody>
<tr>
<!--colspan水平合并单元格，rowspan垂直合并单元格-->
<td colspan="2" rowspan="2"> 内容11+内容12+内容21+内容22</td>
<td> 内容13</td>
</tr>
<tr>
<td> 内容23</td>
</tr>
<tr>
<!--align属性设置对其方式-->
<td align="center"> 内容31</td>
<td align="right"> 内容32</td>
<td align="left"> 内容33</td>
</tr>
</tbody>
<!--bgcolor属性设置背景颜色-->
<!--background属性设置背景图像-->
<tfoot><tr><td bgcolor="yellow">tfoot添加脚注</td></tr></tfoot>
</table>
<hr />
<h1>音频&视频</h1><br />
<!--controls 属性设置显示播放控件 autoplay属相设置自动播放 loop属性设置循环播放 src属性为音频地址-->
<audio controls autoplay loop >
<!--aduio标签可以通过source属性添加多个音频文件-->
<source src="王菲 - 梦中人.mp3" type="audio/mp3"/>
王菲 - 梦中人.mp3</audio>
<br />
<!--poster属性当视频未响应或缓冲不足时，该属性值链接到一个图像。该图像将以一定比例被显示出来-->
<!--width height 属性设置宽和高-->
<video controls autoplay loop width="600" poster="头像.jpg" >
犬夜叉.mp4
<source src="犬夜叉.mp4" />
</video>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
