01.index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Python1806-HTML</title>
<style type="text/css">
p{font-size: 25px; text-align:center;}
li{
height: 30px;
margin-left: 612px;
margin-top: 20px;
font-size: 20px;
}
a{
color: royalblue;
text-decoration:none;
}
</style>
</head>
<body>
<h1 align="center">Python1806-HTML</h1><hr />
<p class>目 录</p>
<ul>
<a href="day01/目录.html"><li>HTML-Day01</li></a>
</ul>
<hr />
</body>
</html>
02.目录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Python1806-HTMLday01</title>
<style type="text/css">
p{font-size: 25px; text-align:center;}
li{
height: 30px;
margin-left: 630px;
margin-top: 20px;
font-size: 20px;
}
a{
color: royalblue;
text-decoration:none;
}
</style>
</head>
<body>
<h1 align="center">Python1806-HTMLday01</h1><hr />
<p class>目 录</p>
<ul>
<a href="01-文本标签.html"><li>文本标签</li></a>
<a href="02-图片标签.html"><li>图片标签</li></a>
<a href="03-表格标签.html"><li>表格标签</li></a>
<a href="简介.html"><li>简介</li></a>
</ul>
<hr />
</body>
</html>
03.文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>文本标签:</h2><hr />
<ol>
<li>
<h3><strong>文本标签：h1-h6</strong></h3>
<ul><li>h1-h6网页的内容涉及到标题的时候使用</li></ul>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
</li>
<!------------------------------------------------------->
<li>
<h3><strong>段落标签：p</strong></h3>
</li>
<ul>
<li>网页的内容中一个段落文字对应一个p标签</li>
<li>p标签内容结束后会自动换行</li>
<ul>
<li><p><strong>注意：html中的文字是不会因为手动的回车和空格以及缩进产生空白效果
（换行、空格、缩进无效）但是可以通过特殊符号，产生特定效果。</strong></p></li>
</ul>
<li>空格符：& n b s p ;</li>
<li>强制换行：< b r / ></li>
</ul>
<!------------------------------------------------------->
<li>
<h3><strong>文字效果：</strong></h3>
</li>
<ul>
<li>a.加粗：b标签，strong标签
<ul>
<li>b标签：单纯的在样式上进行加粗</li>
<li>strong标签：除了将文字加粗显示外还有强调的意义</li>
</ul>
<li>b.倾斜：i标签，em标签
<ul>
<li>em标签有强调的作用</li>
</ul>
</li>
</li>
</ul>
<!------------------------------------------------------->
<li>
<h3><strong>水平线：< hr /></strong></h3>
<ul>
<li>单标签</li>
</ul>
</li>
<!------------------------------------------------------->
<li>
<h3><strong>列表标签：ul、ol、dl</strong></h3>
<ul>
<li>ul:无序列表</li>
<li>ol:有序列表</li>
<li>dl:自定义列表</li>
</ul>
</li>
</ol>
</body>
</html>
04.图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>图片标签:</h2><hr />
<ol>
<h3><strong>1.图片标签：img标签</strong></h3>
<ul>
<li>单标签</li>
<li>src属性：图片地址（可以是本地图片地址，也可以是网络地址）</li>
<li>title属性：鼠标停留图片上显示标题</li>
<li>alt属性：图片加载失败后的提示信息</li>
</ul>
<p><strong>例如:</strong>< img src="../img/GJ.jpg" title="冠军" width="700" height="360" ></p>
<img src="../img/GJ.jpg" title="冠军" width="700" height="360"/><br />
<p><strong>例如:</strong>如果图片地址错误 - < img src="" alt="加载失败" ></p>
<img src="" alt="加载失败" /><br />
</ol>
<br /><br />
<ol>
<h3><strong>2.超链接标签：a标签</strong></h3>
<li>想要点击跳转的地方都可以使用超链接语法</li>
<p>1）href属性：跳转目标对应的地址</p>
<ul>
<li>a.其他的网页地址----跳转</li>
<p>
<strong>
例如:
</strong>< a target="_blank" href="http://www.alibaba.com">阿里巴巴< /a>
<a target="_blank" href="http://www.alibaba.com">阿里巴巴</a></p>
<li>b.写本地的html路径 ----跳转</li>
<p>
<strong>
例如:
</strong>< a href="http://www.FIFA.com">FIFA< /a>
<a href="http://www.FIFA.com">FIFA</a>
</p>
<li>c.空 ---- 刷新当前页面</li>
<p>
<strong>
例如：
</strong>< a href="">刷新< /a>
<a href="">刷新</a>
</p>
<li>d.位置选择器---- 让网页跳转指定位置</li>
<p>
<strong>
例如:
</strong><br />
<img id="1" src="../img/GJ.jpg" title="第一张" alt="加载失败" width="600",height="600"/><br />
<img id="2" title="第二张" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/> <br />
<img id="3" src="../img/GJ.jpg" title="第三张" alt="加载失败" width="600",height="600"/><br />
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/><br />
<img src="../img/GJ.jpg" title="冠军" alt="加载失败" width="600",height="600"/> <br />
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/><br />
<br />
<a href="#1">第一张</a>
<a href="#2">第二张</a>
<a href="#3">第三张</a>
</p>
</ul>
<a href=""></a>
</body>
</html>
05.表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<h2>表格标签</h2>
<hr />
<ol>
<h3><strong>表格标签：table标签、tr标签、td标签、th标签</strong></h3>
<ul>
<strong>1.标签</strong>
<li>table标签：表格整体(一个table标签代表一个表格)</li>
<li>tr标签：行（一个tr标签代表表格中的一行）</li>
<li>td标签：单元格（一个td代表一个单元格)</li>
<li>th标签：表头</li>
</ul>
<ul>
<strong>2.属性</strong>
<li>border属性：设置表格外边框的宽度（只能作为table属性）</li>
<li>bordercolor属性:设置边框颜色 （只能作为table属性）</li>
<li>bgcolor属性:设置背景颜色（可以作用于table\tr\td）</li>
<li>cellspacing属性:设置单元格与单元格之间的间距(默认是1)</li>
<li>cellpadding属性:设置内容和单元格之间的间距</li>
<li>width: 一般作用于某一个单元格，影响的是这个单元格对应的那一列</li>
<li>height: 一般作用于行，影响的是一行的高度</li>
<li>align：设置对齐方式(可以作用于table\tr\td) <br />
作用于table，让整个表格在浏览器中居中<br />
作用于tr/td，让内容在单元格中居中</li>
</ul>
</ol>
<p><strong>代码如下图：</strong></p>
<img src="../img/表格.png" alt="代码" />
<table cellpadding="20"cellspacing="0" border="1" bordercolor="red" background="img/GJ.jpg" bgcolor="beige">
<!--<tr><th>成绩表</th></tr>-->
<tr bgcolor="red">
<td bgcolor="royalblue">姓名</td>
<td>年龄</td>
<td>组织</td>
</tr>
<tr>
<td>白胡子</td>
<td>72</td>
<td>白胡子海贼团</td>
</tr>
<tr>
<td>路飞</td>
<td>22</td>
<td>草帽海贼团</td>
</tr>
</table>
</body>
</html>
06.简介
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p{font-size: 30px;}
</style>
<title></title>
</head>
<body>
<strong><p align="center">个人简历</p>
<table align="center" bgcolor="black" cellspacing="1" height="500">
<tr bgcolor="white" align="center">
<td bgcolor="#4169E1" rowspan="8" width="50px">个<br />人<br />基<br />本<br />简<br />历</td>
<td height="35px" width="80px">姓 名</td>
<td width="160px">廖鸿业</td>
<td width="80px">性 别</td>
<td width="160px" colspan="2">男</td>
<td rowspan="4" width="125px">
<img src="../img/zp.jpg" height="189px" width="180px"/></td>
</tr>
<tr bgcolor="white" align="center">
<td height="35px">民 族</td>
<td>汉</td>
<td>出生年月</td>
<td colspan="2">97-09</td>
</tr>
<tr bgcolor="white" align="center">
<td height="35px">籍 贯</td>
<td>云南</td>
<td>政治面貌</td>
<td colspan="2">团员</td>
</tr>
<tr bgcolor="white"align="center">
<td height="35px">身 高</td>
<td>999cm</td>
<td>职 务</td>
<td colspan="2">CEO</td>
</tr>
<tr bgcolor="white" align="center">
<td height="35px">健康状况</td>
<td>健 康</td>
<td>英语水平</td>
<td colspan="3">666级</td>
</tr>
<tr bgcolor="white" align="center">
<td height="35px">学 历</td>
<td>？？？</td>
<td>专 业</td>
<td colspan="3">计算机</td>
</tr>
<tr bgcolor="white" align="center">
<td height="35px">联系地址</td>
<td colspan="2">火星</td>
<td>邮 编</td>
<td colspan="2">999999999</td>
</tr>
<tr bgcolor="white" align="center">
<td height="35px">联系电话</td>
<td colspan="2">999888777666555</td>
<td>E—mail</td>
<td colspan="2">~~~~~~~</td>
</tr>
<tr bgcolor="white" align="center" height="80px">
<td bgcolor="#4169E1">所获<br />证书</td>
<td colspan="6"></td>
</tr>
<tr bgcolor="white" align="center" height="80px">
<td bgcolor="#4169E1">获<br />奖<br />情<br />况</td>
<td colspan="6"></td>
</tr>
<tr bgcolor="white" align="center" height="80px">
<td bgcolor="#4169E1">社会<br />实践</td>
<td colspan="6"></td>
</tr>
<tr bgcolor="white" align="center" height="80px">
<td bgcolor="#4169E1">专业<br />课程</td>
<td colspan="6"></td>
</tr>
<tr bgcolor="white" align="center" height="80px">
<td bgcolor="#4169E1">求职<br />意向</td>
<td colspan="6"></td>
</tr>
<tr bgcolor="white" align="center" height="80px">
<td bgcolor="#4169E1">个人<br />爱好</td>
<td colspan="6"></td>
</tr>
<tr bgcolor="white" align="center" height="80px">
<td bgcolor="#4169E1">自我<br />评价</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
网友评论