把标签一股脑塞进去了，略显混乱，就当做一个记录吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is a title</title>
</head>
<body>
<h1>这是一个一级标题</h1>
<h2>目录</h2>
<ol>
<li><a href="#textFormat">文本格式化</a></li>
<li><a href="#layout">分区布局</a></li>
<li><a href="#imgTag">图片标签</a></li>
<li><a href="#linkingTag">超链接标签</a></li>
<li><a href="#spe_charTag">特殊字符</a></li>
<li><a href="#tableTag">表格标签</a></li>
<li><a href="#listTag">列表标签</a></li>
<li><a href="#formTag">表单标签</a></li>
</ol>
<h6>这是一个六级标题</h6>
<p>这是一个段落，我要换行了<br />换好了</p>
<p id="textFormat">
<em>这还是斜体，语义强一点</em><br/>
<i>这还是斜体</i><br/>
<strong>这是粗体，语义强一点</strong><br/>
<b>这还是粗体</b><br/>
<del>这是删除线，语义强一点</del><br/>
<s>这还是删除线</s><br/>
<ins>这是下划线，语义强一点</ins><br/>
<u>这还是下划线</u><br/>
</p>
<div id="layout">这是一个分区盒子A，一行只能放一个的大盒子</div>
<div>这是一个分区盒子B，一行只能放一个的大盒子</div>
<span>这是一个小盒子a，一行可以放很多个</span>
<span>这是一个小盒子b，一行可以放很多个</span>
<span>这是一个小盒子c，一行可以放很多个</span>
<p id="imgTag">显示图片：</p>
<img src="images/1.jpeg" />
<p>替换属性alt 显示不出图片的处理：</p>
<img src="noimg.jpg" alt="图片显示失败">
<p>提示属性title 给图片添加提示信息：</p>
<img src="images/2.jpg" title="Spider Man" width="720" height="405" id="spiderman">
<p>提示属性boater 给图片添加边框，一般通过css设定：</p>
<img src="images/3.png" border="15" width="600">
<h4 id="linkingTag">超链接标签 _self当前窗口打开(默认) _blank新窗口打开</h4>
<h5>1.外部链接</h5>
<a href="http://champhere.icu" target="_blank" id="outer_link">Champ is here.</a>
<h5>2.内部链接:页面之间跳转</h5>
<a href="anotherHTML.html" target="_blank" id="inner_link">另一个页面</a>
<h5>3.空链接:#</h5>
<a href="#" target="_blank">空页面</a>
<h5>4.下载链接：地址是文件.exe或.zip等</h5>
<a href="images/1.rar" target="_blank">下载页面</a>
<h5>5.网页元素链接：文本、图片、表格、音频、视频等</h5>
<a href="http://www.champhere.icu" target="_blank"><img src="images/4.jpg" width="500"></a>
<h5>6.锚点链接：类似目录索引</h5>
<a href="#outer_link">外部链接</a><br/>
<a href="#inner_link">内部链接</a><br/>
<a href="#spiderman">SpiderMan</a><br/>
<!--这是一条注释-->
<h5 id="spe_charTag">特殊字符</h5>
<p>
空 格<br/>
这是一个段落标签<p><br/>
x的平方x² x的立方x³<br/>
</p>
<h5 align="center" id="tableTag">表格标签</h5>
<table align="center" border="1" cellpadding="5" cellspacing="0" width="400" height="200">
<!--th表头单元格-->
<thead>
<tr align="center"><th>websites</th><th>logo</th><th>links</th><th>合并单元格</th></tr>
</thead>
<tbody>
<tr align="center">
<td>QQ</td>
<td><img src="images/qq.svg" width="64"></td>
<td><a href="http://www.qq.com" target="_blank">Goto QQ</a></td>
<td rowspan="3"></td>
</tr>
<tr align="center">
<td>Github</td>
<td><img src="images/github.svg" width="64"></td>
<td><a href="https://github.com/Champ-X" target="_blank">Goto Github</a></td>
</tr>
<tr align="center">
<td>Champhere</td>
<td><img src="images/dog.svg" width="64"></td>
<td><a href="http://champhere.icu" target="_blank">Goto Champs'</a></td>
</tr>
</tbody>
</table>
<h3 id="listTag">列表标签</h3>
<h4>无序列表：ul中只能嵌套li、li相当于一个容器，可以容纳所有元素</h4>
<ul>
<li>MIT</li>
<li>CMU</li>
<li>HIT</li>
</ul>
<h4>有序列表：同上</h4>
<ol>
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ol>
<h4>自定义列表：只能嵌套dt、dd</h4>
<dl>
<dt>Contact me via:</dt>
<dd>Github</dd>
<dd>WeChat</dd>
<dd>Tel</dd>
<dd>email</dd>
</dl>
<h3 id="formTag">表单标签：由表单域、表单控件（元素）、提示信息</h3>
<form action="demo.php" method="POST" name="name1">
Name: <input type="text" name="Name" value="Input name" maxlength="6"><br/>
Password: <input type="password" name="Passswork"><br/>
<!--单选和复选都要有相同的name值-->
<!--checked 默认一个选项-->
<!--label标签可以使光标自动转到对应表单元素-->
Gender: <label for="male">Male</label><input checked="checked" type="radio" name="Gender" value="male" id="male">
<label for="female">Female</label><input type="radio" name="Gender" value="female" id="female"><br/>
Hobbies: Basketball<input type="checkbox" value="sport1">
Football<input type="checkbox" value="sport2"> 
PingPong<input type="checkbox" value="sport3"><br/>
<!--会跳往form开始时action的地址的后台服务器-->
<input type="submit" value="submit"><br/>
<!--reset重置表单-->
<input type="reset" value="reset"><br/>
<!--button按钮-->
<input type="button" value="获取验证码"><br/>
<!--file上传文件-->
<input type="file" value="上传文件"><br/>
<!--select下拉表单标签 selected默认状态-->
出生年份：
<select>
<option selected="selected">1999</option><option>2000</option><option>2001</option>
<option>2002</option><option>2003</option><option>2004</option><option>2005</option>
</select><br/>
<!--文本域标签-->
自我介绍：
<textarea rows="3" cols="20">
啥都没有
</textarea>
</form>
</body>
</html>这里可以下载压缩包（包括图片和.html文件）直接运行：点击下载
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
