1.html 常用标签
- body 体
- p 段落
- a 超链接
- table tr tb 表格 行 列
- border 线条宽度 width 宽度 height 高度
- rowspan=“3” 合并3行 colspan=“2” 合并2列
- h1 一级标题
- img 图片
- title 标题
- ul li 无序编号
- ol li 有序编号
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./素材/banner.jpg" alt="">
<table width="1000" height="50" border="1">
<tr>
<td>手机</td>
<td>手机</td>
<td>手机</td>
<td>手机</td>
<td>手机</td>
</tr>
</table>
<h1> <a href="./win7.html">关于iPhone7有个好消息和一个坏消息</a></h1>
<h2> <a href="./win10.html">微软：ISO是Win10最可靠安全的升级方式</a></h2>
<table>
<tr>
<td width="600">
<p>【手机中国新闻】8月2日消息，索尼手机做防水多年，可惜一直也没有掀起多大波澜。倒是三星凭借三
星$7/S7 edge IPe68级的防水特性一举夺得了不少关注度，水下触控也很很秀了友商一脸优越。今年，人
们对三星的老对手苹果也充满了期待，希望即将到来的Poe7能支持防水，并且达到s7的级别。今日，
关于这一点，已经有最新消息传来，一个好消息，一个坏消息。</p>
<img src="./素材/win10_big.jpg" alt="" width="500">
<p align="left"><b>微软：ISO是win10最可靠安全的升级方式（图片来自cnbeta）</b></p>
<p> 咱们开门见山，根据富士康内部员工爆料来看，好消息就是Phoe7的确拥有防水特性，坏消息测是
防水并未达到IP68级别，只是比iPhone6s好了那么一点点。在这大早上，这个坏消息还真是提神醒脑，
让人对Phone7的期待又少了一分。反观隔壁三星Note7防水特性再次得到确以，不出意外应该也是跟三
星S7一样的IP68级，三星Note7胜一局。</p>
<img src="./素材/iphone7_big.jpg" alt="">
<p> 除了防水这一点，爆料人也给出了许多iPhone7其他方面的消息。根据爆料人所言，iPhone7已经确
认有金色、玫瑰金、黑色正在生产中，尚未见到蓝色版本。此外，苹果在Phone7上取消了按压式实体
Home键，改用触摸键，取消3.5mm耳机孔，后置镜头更大更凸起。这样的iPhone7,果粉还爱吗？</p>
<p align="right">(责任编辑：罗园UT008)</p>
<img src="./素材/share.jpg" align="right" alt="">
</td>
<td valign="top">
<p>
<h4>新品热评</h4>
</p>
<img src="./素材/phone3.jpeg" alt="">
<img src="./素材/phone1.jpg" alt="">
<img src="./素材/phone2.jpg" alt="">
<p>
<h4>热门活动</h4>
</p>
<img src="./素材/phone4.jpg" alt="">
<ul>
<li>中国摄影师杂志优秀摄影作品征集</li>
<li>和咪咕善跑"跑越里约"，领500M流量</li>
</ul>
<p>
<h4>热点专题</h4>
</p>
<img src="./素材/phone5.jpg" alt="">
<ul>
<li>亚洲CRS：VR和智能硬件并喷，不再是美国翻版</li>
<li>盘点MWC2016：最受关注产品 全是黑科技</li>
</ul>
<p>
<h4>评测</h4>
</p>
<img src="./素材/test.jpg" alt="">
<ul>
<li>LGG5体验：除了模块化还有哪些可玩性？</li>
<li>史上最贵Kindle0asis体验：高端轻薄上档次</li>
<li>ubia Z11上手：回归小屏幕的绝佳手感</li>
<li>魅蓝ote3体验：精致得不像千元机</li>
<li>HTC101 ifestyle上手：有亮点也有遗憾</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
3.效果图
4.思路
- 先用表格（一行两列）搭框架
- 插入图片，内容和一些超链接，练习水平垂直居中，段落，有序无序等html常用标签
- live server插件要先打开文件夹，否则无法使用
