HTML+CSS基础第一季课堂笔记

忆南呦

于 2024-09-29 17:10:45 发布

阅读量441

点赞数 11

分类专栏： HTML&CSS零基础入门到网页设计文章标签：笔记

本文链接：https://blog.csdn.net/qq_64177395/article/details/142621512

版权

HTML&CSS零基础入门到网页设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、HTML简介和发展史

1.1、HTML概述

HTML全称（hypertext markup language）译为超文本标记语言，其译文代表了HTML的含义，它和其他编程语言不同的是，HTML不是一门真正意义上编程语言，而是一种标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构搭建

1.2、HTML发展史

HTML创始人（蒂姆·伯纳斯-李）

蒂姆·伯纳斯-李除了是HTML的创始人，还是w3c组织的主席

1、HTML1.0 （1991年12月）

1991年万维网（www）在互联网上首次露面，也随之引起了巨大的轰动。

1989年，伯纳斯-李写了一份备忘录，提出建立一个基于互联网的超文本系统。同年和另外一个工程师一起进行联合资金申请，但是这个项目并没有通过。

1991年底的时候，伯纳斯-李公开了一份“HTML Tag”的文档，里面描述了组成HTML初始版本的18个元素

2、HTML2.0（1995年11月）

HTML 2.0是HTML语言的扩展。

与原始版本的HTML不同，HTML 2.0被创建为Web标准，规定了常见的网页结构

3、HTML3.2（1996年1月）

惨淡的"第一次浏览器大战时期（Netspace Vs IE）"，两大巨头不断推出重大举措试图控制整个领域。

网页开发者是这场战争中的焦点。商业战争就像军备竞赛，各家公司为了保持领先，招兵买马。各家都有各家的规则。

那时候，你不得不写两份不同的网页，一个用于网景的浏览器，另一个用于微软的浏览器

4、HTML4（1997年12月）

浏览器大战接近尾声，W3C（世界万维网联盟）成立，他们打算通过制定统一的HTML标准，使整个产业能有序的发展。

他们计划用两种语言分离出HTML的表达式（HTML 4.0）和结构（CSS），并且说服浏览器厂商接受这些标准

这次发布提供了规范的三种变体：

Strict，严格版本；

Transitional，过渡版本；

Frameset，iframe框架集；

HTML4.0 采纳了许多浏览器特定的元素类型及属性，但是同时也把 Netscape 的视觉化标记标记为过时的寻求淘汰; 赞成使用样式表; 同时在1998年4月对HTML4.0进行了微小的修订，没有增加版本号HTML5.0

5、HTML4.01（1999年12月）

像 HTML4.0 一样提供了三种变体，并且他的最终错误修订版在2001年的5月12日发布

6、XHTML 1.0（2000年1月）

各大浏览器厂商纷纷接受W3C标准的时候，新技术出现了。

HTML和另一种语言XML融合，XHTML（可拓展的超文本标记语言）就此诞生。

它继承了HTML的通用型和浏览器的兼容性，继承了XML的严密性和可拓展性

7、HTML5（2014 年 10 月）

HTML5是HTML最新的修订版本，由W3C制定，目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准

我们接下来要学习的就是html5版本，因为由于新兴框架的出现和浏览器兼容性的提升，让我们更放心的使用html5版本。

二、互联网的原理

互联网原理：上网即请求数据

HTML：制作网页文件上网时，用户通过客户端发送http请求到服务器端，服务器端将请求对应的数据找到后，通过http响应回传给本地计算机，计算机加载网页

上网过程中有实际的、物理文件的传输

2.1 服务器

服务器（server)是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。

服务器在网络中为其它客户机（如 PC 机、智能手机、ATM 等终端甚至是火车系统等大型设备）提供计算或者应用服务。

服务器具有高速的 CPU 运算能力、长时间的可靠运行能力

2.2 浏览器

英文：browser
作用：发送http请求，接收回传的数据，渲染网页
浏览器根据厂商和版本不同，区分为不同的品牌版本
主流浏览器：chrome（谷歌）、Firefox（Mozilla）、IE（微软）、Opera（欧朋）、Safari（苹果）
工作原理：在网址栏输入网址后向服务器发送请求，服务器响应后返回数据到浏览器后渲染
第一次加载一个网页时，时间较长，从第二次以后打开同一个网站的速度变快，原因就是因为第一次浏览时，已经将大部分文件存储到了本地，会先从本地进行查找

2.3 http协议

http是无连接的，每一次都需要重新请求

一次浏览器的请求过程

浏览器通过 DNS 把域名解析成对应的IP地址；
根据这个 IP 地址在互联网上找到对应的服务器，建立连接；
客户端向服务器发送HTTP协议请求包，请求服务器里的资源文档；
在服务器端，实际上还有复杂的业务逻辑比如服务器可能有多台，到底指定哪台服务器处理请求。都需要一个负载均衡设备来平均分配所有用户的请求，还有请求的数据是存储在分布式缓存里还是一个静态文件中，或是在数据库里，完成以上操作之后，服务器将相应的数据资源返回给浏览器
客户端与服务器断开。由客户端解析HTML文档，在客户端屏幕上渲染图形结果

三、纯文本和超文本之间的区别

纯文本：纯文本只包含文字内容，不能包含文字以外的，例如图片、视频等，不能传输文字样式，常见的纯文本格式文件.txt,.html,.css,.js。

超文本：超文本文件是一种含有特殊标记的文本文件，其作用类似于word中的排版标记，常用格式.doc，.ppt

四、开发工具的使用

可以根据个人的喜好使用不同的编辑器，我们使用自己顺手的编辑器

关于编辑器，我们使用vsCode，每个人可以使用自己喜欢的编辑器

vscode的官网：Visual Studio Code - Code Editing. Redefined

第二步

第三步

安装包

安装完打开编辑器之后的界面

安装插件

安装第一个插件：chinese

重启后就是中文界面

常用必备插件:Elm Emmet、HTML CSS Support、HTML Snippets、Sublime Text Keymap and Settings Importer

编辑器的基本使用

首先新建自己的文件夹

快捷键

HTML骨架	html:5 → tab
快速生成元素	元素名→tab
自动生成多个元素	div*5 → tab
生成h1-h6	h$*6 → tab
复制当前行文本	shift+alt+键盘上下箭头
删除当前行	ctrl+shift+k
选中多个光标	按住滚轮键不松手，向下拖动鼠标（不是滚动滚轮）
在任意位置换行	按住ctrl+enter
放大或缩小文字	Ctrl+键盘（+或者-）

五、HTML骨架

5.1 DTD

HTML5的骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

DTD（Document Type Definition，文本类型定义），必须出现在第一行。让浏览器知道是什么格式的文件。

<!DOCTYPE html>

<!>，表示警示标签。

DOCTYPE表示文档类型，html就是HTML超文本标记语言

5.2 关于html标签

整个网页必须被<html></html>包裹，它里面有<head></head>和<body></body>两部分。

<head></head> ：网页的配置
<body></body> ：网页的正式内容，浏览器可视区域

标签有一个属性lang，是英语language语言的意思，表示整个网页的主体语言。

en表示英语。中文的表示法有三种。zh、cn、zh-CN。

需要注意的是，无论哪种语言，都使用英文开发。

<html lang="en">
<html lang="zh-CN">

5.3 字符集

在head标签对儿中，是一个个文件的配置。几乎所有的配置都是写在meta标签中的。

meta就是“元”的意思，表示基本配置。

首先映入眼帘的是配置字符集：

<meta charset="UTF-8">
<meta charset="gb2312">
<meta charset="gbk">

charset是英语character set文字集合的意思。

什么是字符集呢？

在计算机中所有的字实际上都是按某种规律排列而成。这个规律是什么呢？不同的字符集有不同的规律。

不同字符集中的字，在计算机内部表达不一样的：

字符集	字库是否全面	优缺点
UTF-8	这个字库涵盖了地球上所有国家、民族的语言文字。非常全，每年更新，它是一个国际化的字库	每个汉字占3个字节。所以如果你想网页快一点打开，不能使用UTF-8。新华网的阿拉伯语频道、日语频道等都要使用UTF-8.
gb2312	gb是国标的意思，只有汉族的文字和少量其他符号。	每个汉字占2个字节。几乎所有的门户网站，都是gb2312。
gbk	gbk是gb2312的略微增强版，文字稍微多了点， gbk也是只有汉语，只不过多了点怪异汉语字，比如“喆”。	每个汉字占2个字节。几乎所有的门户网站，都是gbk。

什么时候使用utf-8，什么时候使用gbk？

答：如果你的网页使用场景是面向群体是国际化的，使用utf-8，比如中华网；如果面向群体主要是国内，使用gbk比如腾讯网

如何修改字符集，比如我们现在的字符集是gbk，修改为utf-8

第一步要将meta标签改为utf-8

<meta charset="utf-8">

第二步

第三步

第四步

5.4 视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果不加这个视口，手机看这个网页是“俯瞰”模式，将以980px宽度俯瞰页面：

如果加上这个视口，手机看网页就是“APP”模式，将以APP的状态、字号看页面。

5.5 浏览器私有设置

edge是win10中的IE升级版浏览器，这句话的意思表示设置兼容性为让edge和ie渲染方式一样。

<meta http-equiv="X-UA-Compatible" content="ie=edge">

类似的还有一些“双核浏览器”比如360浏览器、QQ浏览器、搜狗高速浏览器、百度浏览器、猎豹浏览器等，都可以加上这句话，表示尽可能的用高级核打开页面：

<meta name="renderer" content="webkit">

5.6 title标签

title就是在浏览器选项卡的区域显示的文字：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是网页标题</title>
</head>
<body>
    
</body>
</html>

5.7 keywords关键字

SEO（search engine optimization，搜索引擎优化）

最基本的SEO技术就是把keywords写好。keywords就是网页关键字。

name属性一定要设置为keywords，content就是关键字的内容，中间用逗号隔开

<meta name="keywords" content="前端,HTML,JavaScript">

5.8 description页面描述

页面描述就是搜索引擎搜到你之后，展示的文字。

<meta name="description" content=" 网页的描述" />

以腾讯网为例，看到源码，keywords和description

六、HTML基本语法

6.1标签

标签名必须书写在一对尖括号<>内部。
标签分为单标签和双标签，双标签必须成对出现，有开始标签和结束标签。
结束标签必须有关闭符号/。
根据标签内部存放的内容不同，将不同的标签划分为两个级别

<h1>存放内容的地方</h1>

单标签	双标签
img	h1-h6
br	div
hr	span
	p
	a
	ul+li

根据标签的种类区分两个等级，分别是容器级和文本级

容器级：元素内部除了可以存放文本之外，还可以嵌套标签

文本级：元素内部只能存放文本或者文本级标签

容器级标签	文本级标签
div,ol,ul,li,dl,dt,dd,h1-h6	span,img,b,u,i

6.2 标签属性

标签属性是标签身上的一些特殊性质，通俗讲，给标签加上某个属性就相当于给标签赋予了职能，前提是标签必须具备这些职能

书写位置：在开始标签或单标签的标签名后面，添加一个空格，空格后面书写属性。
属性包含属性名（key）和属性值（value）两部分，根据英文表示，习惯将属性写法称为键值对写法，标签属性的键值对写法是：k=”v”

6.3 标签之间对空白换行缩进不敏感

文字的位置不会根据书写标签位置决定，而是根据标签的种类决定（块级还是行内级，后面CSS课程中讲）

标签与其他标签之间对空白、换行、缩进等不敏感，有没有空白不影响浏览器加载效果
HTML语法中，认识标签的开始和结束，不论有没有换行都只认标签开始结束
标签之间还认识嵌套关系
在书写过程中，为了让代码是容易解读的，建议进行合理的换行和缩进
在上传代码过程中，为了提高传输速度，可以将代码进行压缩，删除多余的空白，目的就是问了压缩文件的大小

6.4 文本的空白折叠现象

在普通文字之间，如果有空格、换行、缩进导致的空白，在浏览器中加载时会被折叠成一个空格显示，这就是空白折叠现象

一些空白要想在浏览器中正常显示，需要使用一些替换写法书写不同的空白。

空格：可以使用字符实体替换书写，在代码中书写 替换空格

换行：可以使用br单标签进行书写

<p>
        你好                           我是张三
</p>

如果需要给文本增加多个空格需要使用字符实体 

<p>
        你好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是张三
</p>

增加了字符实体后，浏览器显示了多个空格

七、HTML常见标签

7.1 h系列标签

英文：headline（标题）

包含一共六级标题，有h1,h2,h3,h4,h5,h6

都是双标签，容器级标签

作用：给内部内容添加对应级别标题的语义

标签根据重要性不同，认为权重不同，所有的标题标签的权重都比别的标签要高

h系列标签的基本使用

<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>

从我们对文本的定义来讲，权重就是文本的权重，比如设置h标签的文字就富裕了标题的语义

如果从浏览器的角度去考虑，它的权重在搜索引擎的优化，搜索引擎的优化除了会抓取meta标签配置的keywords之外还会优先抓取标题的内容，h1标签的权重是最高的，一个页面只使用一个h1，通常用来制作网页的logo，如果你在页面中设置了多个h1标签，搜索引擎会认为你在作弊，从而降低排名

7.2 p标签

英文：paragraph（段落）

双标签，文本级标签

作用：添加一个完整段落的语义

基本使用

<p>
    周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男   歌手、原创音乐人、演员、导演等，毕业于淡江中学。
</p>
<p>
    2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。
</p>
<p>
    2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [5]  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖
</p>
<p>
    2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [9]  ，同年获得第20届金曲奖最佳国语男歌手奖 [10]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [11]  。2011年再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》 [12]  。2012年登福布斯中国名人榜榜首 [13]  。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》 [14]  。2019年起举行“嘉年华”世界巡回演唱会
</p>
<p>
    演艺事业外，他还涉足商业、设计等领域。2007年成立杰威尔有限公司 [16]  。2011年担任华硕笔电设计师并入股香港文化传信集团
</p>
<p>
    周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。2008年捐款援建希望小学 [19]  。2014年担任中国禁毒宣传形象大使
</p>

7.3 img标签

英文：image（图片）

单标签，文本级标签

作用：在指定位置插入一张图片

img标签的属性

src: 作用是引入图片的路径
alt: 图片加载不出来时候的替换文本

<img src="images/345345.jpg" alt="我是鸟巢">

3.width: 设置图片的宽度

4.height: 设置图片的高度

我们看上图确实将图片变为了理想的高度和宽度，但是实际工作中宽度和高度并不会共同使用，因为如果只单独设置一个属性比如宽度，高度会等比例进行缩放

只设置了宽度属性，我们看上图的高度是通过等比例缩放得到的

5.title：作用是设置鼠标以上图片时候的悬停文本

6.border：作用是给图片添加边框

图片的border属性用来了解就可以了，因为我们真正加边框的时候是通过CSS实现的，因为边框不可能只有黑色

<img src="images/0.jpg" alt="我是鸟巢" style="border:10px dashed red" width="220px"

7.4 相对路径和绝对路径

相对路径：从html文件出发，找到对应图片位置的路径

如果进入到某个文件夹使用‘/’，如果出某个文件夹使用‘../’

先看直观的引入文件的路径

引入路径

如果文件夹内部是文件，图片在文件夹的外面

如果需要出多个文件夹，使用多个../

7.5 绝对路径

绝对路径重要分为盘符绝对地址，和网站的绝对地址

盘符绝对地址

通过c盘根目录出发去查找你对应文件位置，工作中不使用这种方法，因为服务器没有c盘...这些目录

网站的绝对地址

7.6 锚点<a></a>

英文anchor（锚）

双标签，文本级标签

作用：在指定位置添加一个超级链接，从而实现相应的跳转

a标签有几个属性，是给超级链接添加相应的作用

1.href: 英文hypertext reference （超文本引用）

<a href="http://www.baidu.com">跳转到百度</a>

上面的代码href属性跳转到百度网站，这个是绝对路径，我们也可以设置相对路径跳转

2.target：作用是是否在新标签打开链接，值一定是”_blank”

3.title属性：作用是鼠标移上文字之后的悬停文本

页面锚点的使用

锚点的作用：实现点击超级链接从而实现页面内的跳转

有两种方法：

方法一

设置一个空锚点，然后给这个空锚点设置一个name属性值和锚的href属性是一的

锚，href属性，后面一定要加#号

锚点的点，name属性设置被跳转的点

<h2>周杰伦</h2>
    <a href="#jbxx">基本信息</a>
    <a href="#znjl">早年经历</a>
    <a href="#yyjl">演艺经历</a>
    
    <h3>基本信息</h3>
    <a name="jbxx"></a>
    <p>
        周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、原创音乐人、演员、导演等，毕业于淡江中学。
        2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [5]  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖 [8]  。
        2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [9]  ，同年获得第20届金曲奖最佳国语男歌手奖 [10]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [11]  。2011年再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》 [12]  。2012年登福布斯中国名人榜榜首 [13]  。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》 [14]  。2019年起举行“嘉年华”世界巡回演唱会 [15]
    </p>
   
    <h3>早年经历</h3>
    <a name="znjl"></a>
    <p>
        周杰伦出生于台湾省新北市，祖籍福建省泉州市永春县 [23]  。周杰伦4岁的时候，母亲叶惠美把他送到淡江山叶幼儿音乐班学习钢琴 [24]  。周杰伦读初中二年级时，他的父母因性格不合离婚，而周杰伦则归母亲叶惠美抚养。中考时，周杰伦没有考上普通高中；同年，他因为擅长钢琴而被淡江中学第一届音乐班录取。高中毕业以后，他两次报考台北大学音乐系均没有被录取，于是他开始在一家餐馆打工
    </p>
     <h3>演艺经历</h3>
    <a name="yyjl"></a>
    <p>
        2001年9月，周杰伦发行了第二张专辑《范特西》，他除了担任专辑的制作人外，还包办了专辑中所有歌曲的作曲；该专辑是周杰伦确立其唱片风格的作品，其中结合中西方音乐元素的主打歌《双截棍》成为饶舌歌曲的代表作之一 [32-33]  ；该专辑发行后也让周杰伦打开东南亚市场 [32]  ，并于次年获得第13届台湾金曲奖最佳专辑制作人奖、最佳作曲人奖、最佳流行音乐专辑奖以及香港唱片销量大奖颁奖典礼十大销量国语唱片等奖项 [34]  ；10月，为李玟创作融合中西方音乐元素的歌曲《刀马旦》 [35]  ；12月24日，发行EP《Fantasy + Plus》，收录了他在桃园巨蛋演唱会上演唱的《你比从前快乐》、《世界末日》等歌曲；同年，获得第19届十大劲歌金曲颁奖典礼最受欢迎唱作歌星金奖、叱咤乐坛流行榜颁奖典礼叱咤乐坛生力军男歌手金奖等奖项
    </p>

第二种方法

设置锚点的点为标签的id属性

锚

<a href="#jbxx">基本信息</a>

锚点的点：由原来的a标签的name属性变为了其他标签id属性，id属性的值要和href一样

<h3 id="jbxx">基本信息</h3>

<h2>周杰伦</h2>
<a href="#jbxx">基本信息</a>
<a href="#znjl">早年经历</a>
<a href="#yyjl">演艺经历</a>

<h3 id="jbxx">基本信息</h3>
<p>
周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、原创音乐人、演员、导演等，毕业于淡江中学。
2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [5]  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖 [8]  。
2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [9]  ，同年获得第20届金曲奖最佳国语男歌手奖 [10]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [11]  。2011年再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》 [12]  。2012年登福布斯中国名人榜榜首 [13]  。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》 [14]  。2019年起举行“嘉年华”世界巡回演唱会 [15]
</p>
<h3 id="znjl">早年经历</h3>
<p>
周杰伦出生于台湾省新北市，祖籍福建省泉州市永春县 [23]  。周杰伦4岁的时候，母亲叶惠美把他送到淡江山叶幼儿音乐班学习钢琴 [24]  。周杰伦读初中二年级时，他的父母因性格不合离婚，而周杰伦则归母亲叶惠美抚养。中考时，周杰伦没有考上普通高中；同年，他因为擅长钢琴而被淡江中学第一届音乐班录取。高中毕业以后，他两次报考台北大学音乐系均没有被录取，于是他开始在一家餐馆打工
</p>
<h3 id="yyjl">演艺经历</h3>
<p>
2001年9月，周杰伦发行了第二张专辑《范特西》，他除了担任专辑的制作人外，还包办了专辑中所有歌曲的作曲；该专辑是周杰伦确立其唱片风格的作品，其中结合中西方音乐元素的主打歌《双截棍》成为饶舌歌曲的代表作之一 [32-33]  ；该专辑发行后也让周杰伦打开东南亚市场 [32]  ，并于次年获得第13届台湾金曲奖最佳专辑制作人奖、最佳作曲人奖、最佳流行音乐专辑奖以及香港唱片销量大奖颁奖典礼十大销量国语唱片等奖项 [34]  ；10月，为李玟创作融合中西方音乐元素的歌曲《刀马旦》 [35]  ；12月24日，发行EP《Fantasy + Plus》，收录了他在桃园巨蛋演唱会上演唱的《你比从前快乐》、《世界末日》等歌曲；同年，获得第19届十大劲歌金曲颁奖典礼最受欢迎唱作歌星金奖、叱咤乐坛流行榜颁奖典礼叱咤乐坛生力军男歌手金奖等奖项
</p>