day1-html
2018-10-29 本文已影响0人
_桑心人
1.html标签
标签 == 标记
1.标签语法
双标签（常规标签）：<标签名 属性名1：属性值1 ....> 标签内容</标签名>
单标签：<标签名 属性名1：属性值1 ....> 或 <标签名 属性名1：属性值1 ..../>
说明
标签名 - 是html中已有的标签，不能自己随便命名。
属性 -属性和属性对应的值用：连接，多个属性之间用空格隔开
标签内容：在开始标签和结束标签之间，内容可以是任意
2.head标签中的内容
head中的标签：title,mate,base,link,style,script
title - 设置网页标题
meta - 设置网页元数据（单标签）
2.文本标签
<!--
1.标题标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.标题标签
h1-h6
h1 - 大标题
h2 - 副标题
h3 - 副标题下的副标题
...
-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<!--
2.段落标签:p
一个段落选择一个p标签,每个p标签中的内容显示完成后会自动换行
-->
<!--
3.特殊功能标签
html中文本中的 换行,空格,tab等都是无效的(空白无效)
换行:<br>
空格: &emsp
-->
<p>
窗前明月光<br />
疑是地上霜<br />
举头望明月<br />
低头思故乡<br />
</p>
<!--
4.字体相关标签
加粗:<b>/<strong>标签
b标签知识单纯加粗,strong标签还有强调作用
倾斜:i标签/em标签
i标签知识单纯倾斜,em标签又强调的意思
水平线:<hr>
-->
<p>
<b>窗前<i>明</i>月</b><br />
<b>疑是<em>地</em>上</b><br />
<hr>
</p>
</body>
</html>
3.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签
</title>
</head>
<body>
<!--列表标签分为有序列表,无序列表,自定义列表-->
<!--
1.有序列表
ol标签 -- 代表整个列表
li标签 -- 代表列表中的 元素
-->
<ol>
<li>基础语法</li>
<li>web前端</li>
<li>web后端</li>
<li>数据和人工只能</li>
<li>项目阶段</li>
</ol>
<!--
2.无序列表
ul标签 -- 代表整个列表
li标签 -- 代表列表中的 元素
-->
<ul>
<li>Python人工稚嫩</li>
<li>HTML5</li>
<li>Java大数据</li>
<li>自动胡测试</li>
<li></li>
</ul>
<!--
3.自定义列表
dl标签 -- 代表整个列表
dt标签 -- 分组名
dd标签 -- 分组中的 内容
-->
<dl>
<dt>Phton培训</dt>
<dd>余婷</dd>
</dl>
</body>
</html>
4.图片标签和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.图片标签:img
单标签
src属性 - 图片是地址可以本地图片路径通过(可以本地图片路径也可以是网络图片的url)
title属性 - 设置图片标题(鼠标停留在图片上,显示内容)
alt属性 - 设置图片加载 失败的提示信息
-->
<!--显示一张本地图片-->
<img id="top" src="img/clock.jpg" title="ad" alt="加载失败"/>
<!--
2.超链接标签:a标签
内容 - 文字/图片
href - 跳转的目标地址
网页地址 - 跳转到指定网页
-->
<a href="https://www.baidu.com/">百度一下</a>
<a href="https://www.baidu.com/"><img src="img/clock.jpg" alt="" /></a>
<!--
选择器 - 在当前网页中跳转到指定的位置
-->
<a href="#top">回到顶部</a>
<!--
target - 跳转方式
_self - 默认值,在当前页面加载新的网页(原网页会被覆盖)
_bank - 在新的页面中加载新的网页
-->
<a href="https://www.baidu.com/" target=""></a>
</body>
</html>
5.数据表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.表格标签
table标签 - 代表一个表格
tr - 行
td - 单元格
2.边框相关的属性
boder:边框的宽度
bordercolor:设置边框的颜色
cellspacing:单元格和单元格之间的间隙
cellpadding:设置内容和单元格边框之间的间距
3.背景颜色
bgcolor:背景颜色
-->
<table bgcolor="antiquewhite" border="2" bordercolor="red" cellspacing="1" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
<!--应用:细线表格-->
<!--
width:宽度
height:高度
-->
<table align="center" bgcolor="black" cellspacing="1" width="200px" height="100px">
<tr align="center" bgcolor="white">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr bgcolor="white">
<td>466</td>
<td>533as</td>
<td>asda</td>
</tr>
<tr bgcolor="white">
<td>ad3</td>
<td>ad3</td>
<td>w3ad</td>
</tr>
</table>
<!--
居中:align:center/left(左对齐)/right(右对齐)
a.作用域table,让整个表格在其父标签中居中
b.作用域tr,让整行中的内容在单元格中居中
-->
</body>
</html>
6.复杂表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复杂表格</title>
</head>
<body>
<!--
1.制作复杂表格的方法
a.确定表格的最大行数
b.确定每一行有多少个单元格,用td表示出来
c.确定是否有合并现象
-->
<table bgcolor="black" cellspacing="1" align="center" width="600" height="400">
<tr bgcolor="white">
<td></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<hr />
<table bgcolor="black" cellspacing="1" align="center" width="600" height="400">
<tr bgcolor="white">
<td colspan="2"></td>
<td colspan="4"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td rowspan="3" colspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
7.作业-复杂表格
效果：
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人简历</title>
<style type="text/css">
a{
text-decoration: none;
}
</style>
</head>
<body>
<h1 align="center">个人简历</h1>
<table align="center" bgcolor="black" cellspacing="1" width="700" height="950">
<tr align="center" bgcolor="white">
<td width="70">学院</td>
<td colspan="5"><a href="https://www.pku.edu.cn/" target="_blank">北京大学</a></td>
<td rowspan="5" width="140"><img src="img/d.jpg" style="width: 140px;height: 200px;" alt="" /></td>
</tr>
<tr align="center" bgcolor="white">
<td>专业</td>
<td colspan="5"><a href="https://www.pku.edu.cn/academics/index.htm" target="_blank">计算机科学与技术</a></td>
</tr>
<tr align="center" bgcolor="white">
<td>姓名</td>
<td width="100">李炘煜</td>
<td width="90">性别</td>
<td width="80">男</td>
<td width="110">民族</td>
<td>满</td>
</tr>
<tr align="center" bgcolor="white">
<td>出生年月</td>
<td>1997.9</td>
<td>籍贯</td>
<td>云南</td>
<td>身高</td>
<td>1.80</td>
</tr>
<tr align="center" bgcolor="white">
<td>学历</td>
<td>博士</td>
<td>政治面貌</td>
<td colspan="3">党员</td>
</tr>
<tr align="center" bgcolor="white">
<td>就业意向</td>
<td colspan="6"></td>
</tr>
<tr align="center" bgcolor="white">
<td>兴趣爱好</td>
<td colspan="6"></td>
</tr>
<tr align="center" bgcolor="white">
<td>个人说明</td>
<td colspan="6"></td>
</tr>
<tr align="center" bgcolor="white">
<td>家庭住址</td>
<td colspan="6"></td>
</tr>
<tr align="center" bgcolor="white">
<td>住宿住址</td>
<td colspan="2"></td>
<td>联系电话</td>
<td></td>
<td>手机</td>
<td></td>
</tr>
<tr align="center" bgcolor="white">
<td>任职情况</td>
<td colspan="6"></td>
</tr>
<tr align="center" bgcolor="white">
<td rowspan="9" valign="middle">本<br />人<br />简<br />历</td>
<td colspan="2">时间</td>
<td colspan="2">学校</td>
<td colspan="2">任职</td>
</tr>
<tr align="center" bgcolor="white">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr align="center" bgcolor="white">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr align="center" bgcolor="white">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr align="center" bgcolor="white">
<td colspan="6"></td>
</tr>
<tr align="center" bgcolor="white">
<td colspan="6"></td>
</tr>
<tr align="center" bgcolor="white">
<td colspan="6"></td>
</tr>
<tr align="center" bgcolor="white">
<td colspan="6"></td>
</tr>
<tr align="center" bgcolor="white">
<td colspan="6"></td>
</tr>
<tr bgcolor="white">
<td>备注</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
结果可自行测试
