1.web标准
a.结构标准（html）：决定网页中的内容
b.表现标准（css）：决定网页中内容的布局和样式
c.行为标准（JavaScript）：决定网页中的行为和动作（变化）
2.html
a.html：超文本标记语言
标记语言：通过不同的标记来显示不同的内容（以指定的格式）
超文本：除文本以外还可以标记图片、超链接、音频、视频、flash、输入框、按钮等等
html文件就是后缀是.html的文件。
注意：html中大小写不敏感
b.html结构
head中的内容除了title和icon以外其内容都不可见。body代码是网页的内容部分。里面的标签一般都是可见
c.html版本
1.标题标签
<h1></h1>
2.段落标签
<P></P>
3.特殊功能标签
html中文本的换行、空格、tab等都是无效的（空白无效）
执行：
| 字符 | 十进制 | 转义字符 |
|---|---|---|
| " | " | " |
| & | & | & |
| < | < | < |
| > | > | > |
| 不断开空格(non-breaking space) |   | |
4.字体相关
加粗：b标签/strong标签
b标签只是单纯的文字加粗，strong有强调效果
倾斜：i标签/em标签
i标签只是单纯的文字倾斜，em有强调效果
列表标签分为有序列表、无序列表、自定义列表
1.有序列表
ol标签：整个列表
li标签：代表列表中的元素
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
2.无序列表
<ul>
<li>python</li>
<li>java</li>
<li>c</li>
</ul>
3.自定义列表
dl标签：代表整个列表
dt标签：分组中的内容
<dl>
<dt>abcdef</dt>
<dd>a</dd>
<dd>b</dd>
<dd>c</dd>
<dt>ghijk</dt>
<dd>h</dd>
<dd>i</dd>
<dd>j</dd>
</dl>
1.图片标签
a.src属性：图片地址，可以是本地图片路径也可以是网络图片的路径
本地图片：可以是绝对路径也可以是相对路径
b.title：设置图片标题(鼠标停留在图片上，显示内容)
c.alt:设置图片加载失败的提示信息
<img src="img/1.ico" title="ico" alt="加载失败"/><br />
<img alt="加载失败" src="https://images.unsplash.com/photo-1540674568310-6b7f7c7"/>
2.超链接：a标签
a.内容
b.href：跳转的目标地址
网络地址
本地的html文件
空为刷新
选择器 在当前的页面中跳转到指定的位置
<a href="03-列表标签.html">列表标签</a>
3.target:跳转方法
_self：默认值。在当前页面加载新的网页
_blank：创建一个新的网页
1.表格标签
table标签 整个表格
tr 行
td 单元格
2.边框相关的属性
border：边框的宽度
bordercolor：设置边框颜色（颜色值可以是英语单词，也可也是RGB对应的16进制值）
cellspascing:单元格之间的间隙
cellpadding:单元格内边距
3.背景颜色
bgcolor:背景颜色
可以作为table属性，也可以作为tr属性，也可以作为td的属性
4.宽度和高度
a.作用于table：设置整个表格的宽度和高度（会按比例分配每一行和每一列的宽度和高度）
b.设置单元格的宽度和高度
5.居中
center：居中
a.作用于table，让整个表格在其父标签中居中
b.作用于tr，让整行在单元格居中
c.作用于td，指定单元格居中
<table border="1" bordercolor="red" cellspacing="0" cellpadding="20" align="center">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<!--细线表格
1.设置整个表格的背景颜色（边框颜色）和每个单元格的背景颜色（表格内容的颜色）不一样
2.设置cellspacing的值为边框的宽度
-->
<table bgcolor="black" cellspacing="1" width="300px" height="200">
<tr bgcolor="aquamarine">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr bgcolor="aquamarine">
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr bgcolor="aquamarine">
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table>
制作复杂表格
1.制作复杂表格的方法：
a.确定表格的最大行数，在table中用tr表示出来
b.确定每一行有多少个单元格,用td表示出来
c.确定每一个单元格是否有合并现象。如果是行合并就设置rowspan的值，如果是列合并就设置colspan的值
<table border="1" width="300" height="400">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
作业：
QQ图片20181029171258.png
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="text-align: center;">
<h1>个人简历</h1>
<table border="1" style="border-collapse:collapse;" cellpadding="10" width="850" height="1000" align="center">
<tr>
<td width="80">学院</td>
<td colspan="5">深圳大学计算机与软件学院</td>
<td rowspan="5" width="120"><img src="img/22.jpg" width="120" height="250"/></td>
</tr>
<tr>
<td>专业</td>
<td colspan="5">计算机及应用</td>
</tr>
<tr>
<td>姓名</td>
<td width="100">马化腾</td>
<td width="80">性别</td>
<td>男</td>
<td width="80">名族</td>
<td>汉族</td>
</tr>
<tr>
<td>出生年月</td>
<td>1971年10月29日</td>
<td>籍贯</td>
<td>中国</td>
<td>身高</td>
<td>180</td>
</tr>
<tr>
<td>学历</td>
<td>本科</td>
<td>政治面貌</td>
<td colspan="3">不详</td>
</tr>
<tr>
<td>就业意向</td>
<td colspan="6">腾讯CEO</td>
</tr>
<tr>
<td>兴趣爱好</td>
<td colspan="6">坑玩家的钱</td>
</tr>
<tr>
<td>个人说明</td>
<td colspan="6">腾讯公司主要创办人之一。现任腾讯公司控股董事会主席兼首席执行官；全国青联副主席。</td>
</tr>
<tr>
<td>家庭住址</td>
<td colspan="6">广东省汕头市潮南区</td>
</tr>
<tr>
<td>住宿地址</td>
<td colspan="2">不详</td>
<td>联系电话</td>
<td>400652555</td>
<td>手机</td>
<td>12345678910</td>
</tr>
<tr>
<td rowspan="10" height="500">本人简历</td>
<td colspan="2" height="15">时间</td>
<td colspan="2">学校</td>
<td colspan="2">任职</td>
</tr>
<tr>
<td colspan="2">2015年7月</td>
<td colspan="2">中国</td>
<td colspan="2">当选为十二届全国青联副主席。</td>
</tr>
<tr>
<td colspan="2">2018年1月</td>
<td colspan="2">中国</td>
<td colspan="2">当选第十三届全国人民代表大会代表（广东省）。</td>
</tr>
<tr>
<td colspan="2">2018年5月9日</td>
<td colspan="2">中国</td>
<td colspan="2">当选中国网络社会组织联合会副会长。</td>
</tr>
<tr>
<td colspan="6">2014年时代周刊人物</td>
</tr>
<tr>
<td colspan="6">2015年中国内地最佳CEO</td>
</tr>
<tr>
<td colspan="6">捐139亿成首善</td>
</tr>
<tr>
<td colspan="6">2017中国最具影响力的50位商界领袖</td>
</tr>
<tr>
<td colspan="6">《福布斯》世界最伟大领袖榜单</td>
</tr>
<tr>
<td colspan="6">榜单显示，马化腾身家453亿美元，位列17位，成为中国和亚洲首富。</td>
</tr>
</table>
</body>
</html>
结果：
捕获.JPG
网友评论