写页面快捷小技巧
1、ul里有多个li：emmet wrap:使用缩写包围，ul>li*
2、手机页面显示的图片过大：img {max-width: 100%;}
3、列表的点点怎么去除：div代替
4、多行修改或添加一样的代码用 ALT
写周杰伦简介（html裸奔）
详情见我的GitHub:
jiangwenxu.github.io/JayChou.htm…
<!DOCTYPE html>
<html lang="zh-CN">
<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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>周杰伦</title>
<style>
table {
width: 200px;
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
border: 1px solid black;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<nav>
<ol>
<li><a href="#jay">个人简介</a></li>
<li><a href="#events">重要事件</a></li>
<li><a href="#awards">主要成就</a></li>
<li><a href="#works">主要作品</a></li>
<li><a href="#pictures">生活照</a></li>
<li><a href="#life ">生平</a></li>
</ol>
</nav>
<h1 id="jay">周杰伦</h1>
<p>
英文名：Jay Chou,（1979年1月18日出生），
台湾华语流行歌曲男歌手、音乐家、编曲家、唱片制片人、魔术师。
同时是演员、导演、电子竞技职业战队J Team的老板。
</p>
<h2 id="events">重要事件</h2>
<ul>
<li>
在2000年，周杰伦发行了他的首张专辑《Jay》，从属于唱片公司阿尔发音乐。
</li>
<li>
在2003年，他是《时代》杂志（亚洲版）的封面故事，被称为“亚洲流行音乐的新天王”。
</li>
<li>在2005年，周杰伦在电影《头文字D》中开始了他的电影事业</li>
<li>在2011年，首度进入好莱坞，饰演《青蜂侠》的助理Kato</li>
<li>在2016年，他再次进入了好莱坞，在电影《惊天魔盗团》中扮演小李。</li>
</ul>
<h2 id="awards">主要成就</h2>
<ul>
<li>
周杰伦于第20届和第22届金曲奖以《魔杰座》和《跨时代》两张专辑拿下最佳国语男歌手等奖项。
</li>
<li>周杰伦于2002年至2006年曾连续5年获得香港IFPI最佳销量国语唱片奖。</li>
<li>
周杰伦于2001年以《开不了口》得奖，同时他亦是继周华健后第二位获得叱咤乐坛唱作人大奖的台湾歌手。
</li>
<li>
周杰伦获得香港叱咤乐坛流行榜颁奖典礼我最喜爱的歌曲大奖的台湾歌手。
</li>
<li>
周杰伦分别于2004年、2006年、2007年、2008年，共四次获得世界音乐大奖“亚洲最高销量艺人”奖。
</li>
<li>
周杰伦出道以来，发行的其中四张专辑（分别为《Jay》、《范特西》、《叶惠美》和《跨时代》）曾拿下金曲奖最佳国语专辑奖。
</li>
<li>
周杰伦出道7年，在十大中文金曲中只有2005年没得到全国最受欢迎中文歌曲奖项。
</li>
<li>
随后连续三年金曲奖角逐的失败使周杰伦心灰意冷，而后连续两年以《青花瓷》和《稻香》二曲分别拿下两届金曲奖年度最佳歌曲奖。
</li>
<li>
第一张专辑《Jay》就获得最佳专辑，同时也入围当年最佳制作人、最佳作曲人和最佳新人奖三项大奖。同年，获得新加坡金曲奖最佳新人奖。
</li>
<li>第四张专辑《叶惠美》获得最佳专辑、最佳音乐视频导演奖。</li>
<li>
第二张专辑《范特西》获得包括最佳专辑、最佳编曲等在内的五个金曲奖奖项。
</li>
</ul>
<h2 id="works">主要作品</h2>
<table>
<thead>
<tr>
<th>年份</th>
<th>专辑名</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000年</td>
<td>Jay</td>
</tr>
<tr>
<td>2001年</td>
<td>范特西</td>
</tr>
<tr>
<td>2002年</td>
<td>八度空间</td>
</tr>
<tr>
<td>2003年</td>
<td>叶惠美</td>
</tr>
<tr>
<td>2004年</td>
<td>七里香</td>
</tr>
<tr>
<td>2005年</td>
<td>11月的肖邦</td>
</tr>
<tr>
<td>2006年</td>
<td>依然范特西</td>
</tr>
<tr>
<td>2007年</td>
<td>我很忙</td>
</tr>
<tr>
<td>2008年</td>
<td>魔杰座</td>
</tr>
<tr>
<td>2010年</td>
<td>跨时代</td>
</tr>
<tr>
<td>2011年</td>
<td>惊叹号</td>
</tr>
<tr>
<td>2012年</td>
<td>12新作</td>
</tr>
<tr>
<td>2014年</td>
<td>哎呦，不错哦</td>
</tr>
<tr>
<td>2016年</td>
<td>周杰伦的床边故事</td>
</tr>
</tbody>
</table>
<h2 id="pictures">生活照</h2>
<div>
<a href="images/1.jpg" target="_blank"
><img width="400" src="images/1.jpg" alt="图一"
/></a>
</div>
<div>
<a href="images/2.jpg" target="_blank"
><img width="400" src="images/2.jpg" alt="图二"
/></a>
</div>
<div>
<a href="images/1.jpg" target="_blank"
><img width="400" src="images/1.jpg" alt="图三"
/></a>
</div>
<h2 id="life">生平</h2>
<p>
周杰伦在台湾台北林口长大。父亲周耀中，当时任教于台北县芦洲国中，教授生物；母亲叶惠美则是林口国中美术教师。14岁时父母离异，由父亲担任监护人，年满18岁后选择与母亲共同生活，周杰伦在台湾民视新闻台由胡婉玲主持的节目《台湾演义》专访中，澄清《爸，我回来了》的灵感，只是对社会上家暴现象的感慨，并非指涉父母间的状况，父亲方面的亲戚也曾质疑过他，他还为此向亲戚们澄清，为此误解抱歉过。
</p>
<p>
周杰伦自小对音乐表现出浓厚的兴趣，并且喜欢模仿歌星、演员表演和变魔术。3岁开始学习钢琴。周杰伦国小时住在台北市光华商场附近，就读忠孝国小。国中时就读金华国中，此时期他的父母因长年争执而决议离婚，使周杰伦的性情大受影响。除了音乐外，周杰伦热爱篮球，他在国中参加篮球队，结识学长陈建州。在同侪中是高手，球场上的表现常受众人围观。
</p>
<p>
高中就读于台北县私立淡江中学第一届音乐科（本来是想报考华冈艺校，但错过了报名时间，幸好淡江中学恰巧新设了音乐科），主修钢琴，副修大提琴，为将来的音乐发展打下了深厚的基础。这时的他因正值青春期，常常秀琴技想吸引女同学的注意。但学科成绩不甚理想，故高中毕业时，大学联考落榜。又因患有僵直性脊椎炎，依据台湾兵役制度得以免服义务兵役。
</p>
<p>
周杰伦曾表示少年时受到香港乐坛“四大天王”之一张学友的专辑《吻别》的影响，从而喜欢并开始专注于流行音乐。另外他也透漏过，除了张学友以外，李恕权与史帝夫·汪达也是他童年时影响他很深的人，李恕权每回出现在电视上，周杰伦便会在电视机面前模仿他，而史帝夫·汪达有一首《I
just called to say I love
you》是他的婶婶曾在他叔父的葬礼中播放的歌曲。由于他的音乐基础扎实，令其在流行音乐创作方面如鱼得水。
</p>
</body>
</html>
复制代码添加目录（TOC)
TOC
全称：Table of Content (目录）
技巧
使用 a href=#xxx 做到
注意
- 最下面一个锚点往往无法达到页面顶部
- 可以通过添加额外的空白解决
代码如下：
<nav>
<ol>
<li><a href="#jay">个人简介</a></li>
<li><a href="#events">重要事件</a></li>
<li><a href="#awards">主要成就</a></li>
<li><a href="#works">主要作品</a></li>
<li><a href="#pictures">生活照</a></li>
<li><a href="#life ">生平</a></li>
</ol>
</nav>
<h1 id="jay">周杰伦</h1>
复制代码效果如下：
添加外部资源
添加图片
- 注意不要让图片变形（只设定长宽中的一个）
- 注意图片比例不对，需要用工具剪裁一下
- 如果图片尺寸过大，无需特殊处理
- 如果图片体积过大（300kb)，则需要压缩
添加链接
- 国内一般需要添加 target=_blank
新窗口打开图片：
<a href="images/1.jpg" target="_blank"
><img width="400" src="images/1.jpg" alt="图三"
/></a>
复制代码- 添加完了之后要自己全部点一遍，防止出错
手机调试
meta:vp 完整内容
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
复制代码- VSCode 默认生成的不完整！
- 请自己找个地方把完整版记下来！
- 写了不完整的 meta:vp，你会很难受！
怎么兼容手机
- 无需费力，加上meta:vp和img maxwidth就可以完成
- 记下meta:vp,以后会用到
用WIFI调试手机
- 让手机和电脑处于同一wifi
- 手机可以直接用IP和端口访问电脑
- 用哪个IP？http-server给出的IP全部试一遍（hs -c-1)
- 用border调试法调试CSS（以后）
- 用vConsole.js调试JS（以后）
部署到GitHub pages
复习github
本地仓库上传到远程仓库：
- git init ：创建.git目录，容纳你的命令
- git add 路径：git add . （选择要提交的）
- git commit -v: git commit （提交上去）
- 在GitHub里创建仓库，等待上传
- 复制仓库下的两行代码，用master上传
git remote add origin git@github.com:jiangwenXu/JayChou.html.git
git push -u origin master
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
