1、head标签
<html>
<head>
<title>网易</title>
<meta charset="UTF-8"/>
<!--自动刷新-->
<meta http-equiv="refresh" content="3;https://www.163.com" />
<!--小图标-->
<link rel="shortcut icon" href="//static.ws.126.net/www/logo/logo-ipad-icon.png" />
</head>
<body>
look at the title
</body>
</html>
2、文本标签
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
</head>
<body>
<!--字号-->
<h1>最大字号</h1>
<h6>最小字号</h6>
<!--段落标签-->
<p>d标签<br />
width:设置宽度<br />
 width="300px" 设置固定宽度，不会随着浏览器的宽度变化而变化
width="30%" 设置占用页面宽度的百分比，随着浏览器的宽度变化而变化
size:设置厚度
align :设置位置： 靠左 left 居中center 靠右right
</p>
<!--预编译标签-->
<pre>
width:设置宽度
width="300px" 设置固定宽度，不会随着浏览器的宽度变化而变化
width="30%" 设置占用页面宽度的百分比，随着浏览器的宽度变化而变化
size:设置厚度
align :设置位置： 靠左 left 居中center 靠右right
</pre>
<!--横线标签-->
<hr color="bisque" width="50%" size="7"/>
<!--字体标签-->
<font color="aqua" size="5" face="楷体" >今天要记住好多快捷键了</font>
<br />
<!--字形设置-->
<b>加粗</b><br /><i>斜体</i><br /><u>下划线</u><br /><del>删除线</del>
</body>
</html>
3、多媒体标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--图片标签-->
<img src="img/电影1.png" width="500px" />
<img src="img/false.png" title="这是加载错误的图片" alt="抱歉，加载失败"/>
<br />
<!--音频标签-->
<!--h4版本标签-->
<!-- <embed src="music/朗朗 - 梦中婚礼.mp3" width="300px" ></embed>-->
<!--h5版本-->
<!--<audio src="music/朗朗 - 梦中婚礼.mp3" ></audio>-->
<!--视频标签-->
<!--h4版本-->
<!--<embed src="vedio/喜欢你在身旁.mp4" height="300px" ></embed>-->
<video src="vedio/喜欢你在身旁.mp4" controls="controls" autoplay="autoplay"></video>
</body>
</html>
4、超链接标签及应用
基础应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="3.文本标签.html" style="text-decoration: none;"> 这是文字链接,没有下划线</a><br /><br />
<a href="3.文本标签.html"> 这是文字链接，有下划线</a><br /><br />
<a href="4.多媒体标签.html"><img src="img/电影1.png" width="200px"/></a><br />
<a href="4.多媒体标签.html"><img src="img/电影1.png" width="200px"/></a>
</body>
</html>
页内跳转（锚点）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="#1F">第一项</a>
<a href="#2F">第二项</a>
<a href="#3F">第三项</a>
<a name="1F"></a>
<h1>第一项</h1>
<p>第一项</p><p>第一项</p><p>第一项</p><p>第一项</p><p>第一项</p>
<p>第一项</p><p>第一项</p><p>第一项</p><p>第一项</p><p>第一项</p>
<a name="2F"></a>
<a href="#1F">第一项2</a>
<a href="#2F">第二项2</a>
<a href="#3F">第三项2</a>
<h1>第二项</h1>
<p>第二项</p><p>第二项</p><p>第二项</p><p>第二项</p><p>第二项</p><p>第二项</p><p>第二项</p>
<p>第二项</p><p>第二项</p><p>第二项</p><p>第二项</p><p>第二项</p><p>第二项</p><p>第二项</p>
<a href="#1F">第一项</a>
<a href="#2F">第二项</a>
<a href="#3F">第三项</a>
<a name="3F"></a>
<h1>第三项</h1>
<p>第三项</p><p>第三项</p><p>第三项</p><p>第三项</p><p>第三项</p><p>第三项</p><p>第三项</p>
<p>第三项</p><p>第三项</p><p>第三项</p><p>第三项</p><p>第三项</p><p>第三项</p><p>第三项</p>
</body>
</html>
5、列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--无序列表-->
<h5>无序列表</h5>
<ul>
<li>电脑</li>
<li>鼠标</li>
<li>键盘</li>
<li>摄像头</li>
</ul>
<hr />
<h5>有序列表</h5>
<!--有序列表-->
<ol>
<li>周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
</ol>
<hr />
<h5>嵌套列表</h5>
<!--列表嵌套-->
<ol>
<li>周一</li>
<ul type="square">
<li>电脑</li>
<li>鼠标</li>
<li>键盘</li>
<li>摄像头</li>
</ul>
<li>周二</li>
<li>周三</li>
<li>周四</li>
</ol>
<hr />
<h5>自定义列表</h5>
<!--自定义列表-->
<dl>
<dt>
<img src="img/电影1.png" width="100px" />
</dt>
<dt>周末看电影</dt><!--文字顶格写-->
<dd>周末晚上看电影</dd><!--文字缩进-->
</dl>
</body>
</html>
6、表格标签
<!DOCTYPE html>
<html>
<!--
把要合并的单元格内容删除，从起始单元格所在位置开始colspan和rowspan
创建9行5列表格 ： table>tr*9>td*5 + Tab
截图可以量像素点
-->
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<table width="400px" height="250px" border="1" bgcolor="antiquewhite" cellspacing="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>初始年月</th>
</tr>
<tr>
<td>小小</td>
<td>男</td>
<td>10</td>
<td>201901</td>
</tr>
<tr>
<td>小A</td>
<td colspan="3">列合并</td>
<!--<td>女</td>
<td>20</td>
<td>200903</td>-->
</tr>
<tr>
<td>小B</td>
<td>男</td>
<td>23</td>
<td rowspan="2">行合并</td>
<!--<td>199503</td>-->
</tr>
<tr>
<td>小C</td>
<td>男</td>
<td>25</td>
<!--<td>199003</td>-->
</tr>
<tr>
<td rowspan="2" colspan="2"></td><!--行列同时合并-->
<td>10</td>
<td>201901</td>
</tr>
<tr>
<td>10</td>
<td>201901</td>
</tr>
<tr>
<td>小71</td>
<td>72</td>
<td>73</td>
<td>74</td>
</tr>
</table>
<table border="1" width="300px" height="300px" cellspacing="0">
<tr >
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr >
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>44</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
</tr>
</body>
</html>
表格标签应用：个人简历制作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font ></font>
<h3 align="center">近期非常热门的个人简历模板</h3>
<table border="1" cellspacing="0" align="center"
style="border-bottom: none;">
<tr>
<th colspan="5" align="left"
width="600px"
bgcolor="lightgreen"> 基本情况</th>
</tr>
<tr>
<td width="100px"> 姓 名</td>
<td width="140px"></td>
<td width="87px"> 性 别</td>
<td width="140px"></td>
<td rowspan="7"></td>
</tr>
<tr>
<td > 民 族</td>
<td></td>
<td > 出生年月</td>
<td ></td>
</tr>
<tr>
<td > 政治面貌</td>
<td ></td>
<td > 健康情况</td>
<td ></td>
</tr>
<tr>
<td > 籍 贯</td>
<td ></td>
<td > 学 历</td>
<td></td>
</tr>
<tr>
<td > 电子信箱</td>
<td ></td>
<td > 联系电话</td>
<td ></td>
</tr>
<tr>
<td > 专 业</td>
<td colspan="3"></td>
</tr>
<tr>
<td > 毕业院校</td>
<td colspan="3"></td>
</tr>
<tr>
<td > 求职意向</td>
<td colspan="4"></td>
</tr>
</table>
<table border="1" cellspacing="0"
align="center" style="border-bottom: none;">
<tr>
<th colspan="4" align="left"
width="600px"
bgcolor="lightgreen"> 教育情况</th>
</tr>
<tr>
<td width="137px"> 时间</td>
<td width="110px"> 院校名称</td>
<td width="110px"> 专业</td>
<td width="110px"> 学历</td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th colspan="4" align="left"
width="600px"
bgcolor="lightgreen"> 教育情况</th>
</tr>
<tr>
<td> 时间</td>
<td> 院培训机构</td>
<td> 课程</td>
<td> 证书</td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table border="1" cellspacing="0"
align="center" >
<tr>
<th colspan="4" align="left"
width="600px"
bgcolor="lightgreen"> 技能特长</th>
</tr>
<tr height="70px"><td colspan="4"></td></tr>
<tr>
<th colspan="4" align="left"
width="600px"
bgcolor="lightgreen"> 工作经验</th>
</tr>
<tr>
<td width="95px"> 时间</td>
<td width="145px"> 公司名称</td>
<td width="80px"> 职位</td>
<td> 工作内容</td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th colspan="4" align="left"
width="600px"
bgcolor="lightgreen"> 英文、计算机水平</th>
</tr>
<tr height="70px"><td colspan="4"></td></tr>
<tr>
<th colspan="4" align="left"
width="600px"
bgcolor="lightgreen"> 奖励荣誉</th>
</tr>
<tr height="60px"><td colspan="4"></td></tr>
<tr>
<th colspan="4" align="left"
width="600px"
bgcolor="lightgreen"> 自我评价</th>
</tr>
<tr height="60px"><td colspan="4"></td></tr>
</table>
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
