目的
根据HTML文件夹中文件内容，熟悉并快速上手HTML。适合零基础，跟着敲一遍，运行看看效果，就能学会。
学习是一个持之以恒的事情，赶紧点赞收藏，不然找不到了。
学习本文章的内容，你将学会如下的简单页面编写
文件夹结构
简单介绍：
reset.css对body,html进行一个美化处理
img文件夹：文件中引用的图片
music文件夹：文件中引用的音频
文件
01-HelloWorld.html
<!-- 声明当前使用HTML的版本：HTML5 -->
<!--<br> <hr> : H5： 自结束标签的 / 可以省略-->
<!DOCTYPE html>
<!--文档标签：代表一个网页-->
<html>
<!--
文档的描述标签：存放用于描述网页信息
- head标签中的内容不会显示到网页上
-->
<head>
<meta charset="utf-8">
<!--网页的名称-->
<title>HelloWorld</title>
</head>
<!--
文档的内容标签：存放文档的类容
- body标签中写的内容会直接显示到网页上
-->
<body>
<!--浏览器为了防止程序员的布局对页面中的内容产生影响，浏览器会把 一个或多个的 空格 回车 tab 转为一个空格 -->
我们的男生都 是最帅的。当然 这个是不可质疑的！！！<br><br><br>
当然这是不可能的。
</body>
</html>
<!--
HTML文档：以.html结尾的文件称之为HTML文档,一个HTML文档就是一个网页
HTML标签： HTML文档中由HTML标签构成
普通标签：<标签名 属性="属性值" 属性="属性值" ...>标签体（标签体可以是任意类容）</标签名>
自结束标签：<标签名 属性="属性值" 属性="属性值" ... /> , H5中的 / 可以省略
一个HTML文档中只能有一个标签，并且这个标签必须是<html></html>， 一个HTML标签代表一个网页
-->运行方式：运行到浏览器，选择自己的浏览器即可。不再岩石，请自行查看运行效果。
02-格式标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>格式标签</title>
</head>
<!--
标签作用：标签主要用于使网页中的内容具有一定的格式
块元素：块元素默认占满屏幕一整行，就算自己没有使用，其他元素也是不能使用的。
内联元素：内联元素所占用的空间和其本身使用空间相关，使用多少空间则占用多少空间。
理解：一行中只能存在一个快元素，但是可以存在多个内联元素。
标签之间可以互相嵌套。标签的嵌套需要复合如下原则：
块元素可以嵌套块元素和内联元素。
内联元素只能嵌套内联素元素。
-->
<body>
<!-- 标题标签 -->
<h1>悯农</h1>
<h2>悯农</h2>
<h3>悯农</h3>
<h4>悯农</h4>
<h5>悯农</h5>
<h6>悯农</h6>
<!--段落标签-->
<p>锄禾日当午，</p>
<p>汗滴禾下土。</p>
<p>谁知盘中餐，</p>
<p>粒粒皆辛苦。</p>
8月3日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例96例，其中境外输入病例25例（云南7例，福建4例，江苏3例，上海2例，浙江2例，广东2例，天津1例，山西1例，辽宁1例，河南1例，四川1例），本土病例71例（江苏35例，湖南15例，湖北9例，山东6例，云南3例，河南2例，福建1例）；无新增死亡病例；新增疑似病例2例，均为境外输入病例（均在上海）。
<!--分割线-->
<hr>
8月3日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例96例，其中境外输入病例25例（云南7例，福建4例，江苏3例，上海2例，浙江2例，广东2例，天津1例，山西1例，辽宁1例，河南1例，四川1例），本土病例71例（江苏35例，湖南15例，湖北9例，山东6例，云南3例，河南2例，福建1例）；无新增死亡病例；新增疑似病例2例，均为境外输入病例（均在上海）。
<p>8月3日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例96例，其中境外输入病例25例（云南7例，福建4例，江苏3例，上海2例，浙江2例，广东2例，天津1例，山西1例，辽宁1例，河南1例，四川1例），本土病例71例（江苏35例，湖南15例，湖北9例，山东6例，云南3例，河南2例，福建1例）；无新增死亡病例；新增疑似病例2例，均为境外输入病例（均在上海）。</p>
<p>8月3日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例96例，其中境外输入病例25例（云南7例，福建4例，江苏3例，上海2例，浙江2例，广东2例，天津1例，山西1例，辽宁1例，河南1例，四川1例），本土病例71例（江苏35例，湖南15例，湖北9例，山东6例，云南3例，河南2例，福建1例）；无新增死亡病例；新增疑似病例2例，均为境外输入病例（均在上海）。</p>
<!--
列表标签
ol : 有序列表
type: 规则排序规则
ul : 无序列表
type: 规则排序规则
ol and ul 标签中只能包含 li 标签
-->
您的爱好：
<ol type="A">
<li>打游戏</li>
<li>洗脚</li>
<li>抽烟</li>
<li>烫头</li>
</ol>
您的爱好：
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
</ul>
<!--
dl列表：
dt:列表标题
dd:列表内容
-->
<dl>
<dt>java基础</dt>
<dd>基础语法</dd>
<dd>面向对象</dd>
<dd>java集合</dd>
<dd>java网络</dd>
<dt>java基础</dt>
<dd>基础语法</dd>
<dd>面向对象</dd>
<dd>java集合</dd>
<dd>java网络</dd>
<dt>java基础</dt>
<dd>基础语法</dd>
<dd>面向对象</dd>
<dd>java集合</dd>
<dd>java网络</dd>
</dl>
</body>
</html>
03-多级菜单.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>多级菜单</title>
</head>
<body>
<ul>
<li>商品管理
<ul>
<li>添加商品</li>
<li>删除商品</li>
<li>修改商品</li>
<li>查询商品</li>
</ul>
</li>
<li>分类管理
<ul>
<li>分类商品</li>
<li>分类商品</li>
<li>分类商品</li>
<li>分类商品</li>
</ul>
</li>
<li>用户管理
<ul>
<li>修改密码</li>
<li>
<dl>
<dt>忘记密码</dt>
<dd>找回密码</dd>
<dd>重置密码</dd>
</dl>
</li>
</ul>
</li>
</ul>
<p>8月3日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例96例，其中境外输入病例25例（云南7例，福建4例，江苏3例，上海2例，浙江2例，广东2例，天津1例，山西1例，辽宁1例，河南1例，四川1例），本土病例71例（江苏35例，湖南15例，湖北9例，山东6例，云南3例，河南2例，福建1例）；无新增死亡病例；新增疑似病例2例，均为境外输入病例（均在上海）。</p>
<nobr>
8月3日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例96例，其中境外输入病例25例（云南7例，福建4例，江苏3例，上海2例，浙江2例，广东2例，天津1例，山西1例，辽宁1例，河南1例，四川1例），本土病例71例（江苏35例，湖南15例，湖北9例，山东6例，云南3例，河南2例，福建1例）；无新增死亡病例；新增疑似病例2例，均为境外输入病例（均在上海）。
</nobr>
</body>
</html>
04-文本标签.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
默认文本
<b>文本加粗</b>
<i>java</i>
<i><b>加粗+斜体</b></i>
10<sup>2</sup>
A<sub>1</sub>
A<sub>2</sub>
<del>管穿线</del>
<u>下划线</u>
<p>你<strong>真的</strong><em>java</em>！！！</p>
<p>你<strong>真的</strong>java！！！</p>
<marquee behavior="slide" direction="right">今晚所有消费由赵公子买单</marquee>
</body>
</html>
05-超链接标签.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接标签</title>
</head>
<body>
<!--
a: 超链接标签。主要用于页面跳转
href：目标地址
target: 规定在那个地方打开我们新的页面
_self： 在当前页面打开
_blank: 在新的页面中打开
相对路径（推荐）：相对于当前页面进行查找
绝对路径：以项目运行后的服务器根路径开始早
-->
<!-- 跳转自己项目中的其他页面：推荐使用相对路径 -->
<a href="01-HelloWorld.html" target="_blank">HelloWorld</a>
<!--跳转互联网上得其他网页-->
<a href="http://www.softeem.com" id="myA">软帝集团</a>
<!--执行JavaScript代码-->
<a href="javascript:alert('讨厌，点我干嘛！！');" >点我一下</a>
<!--取消a标签的默认功能-->
<a href="javascript:void(0);" >点我无效</a>
<!--发送邮件：你的电脑上要有可以发送邮件的软件-->
<a href="mailto:softeemGG@163.com">联系我们</a>
<input type="button" value="获取验证码" onclick="alert(“ADS2")/>
<script>
document.getElementById('myA').addEventListener('click', function(event) {
console.log("阻止跳转")
event.preventDefault(); // 阻止默认行为
});
</script>
</body>
</html>
06-内联框架.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联框架</title>
<style>
html，body{
margin: 0;
padding: 0;
width: 100%;
height:100%;
}
</style>
</head>
<body>
<a href="http://www.softeem.com" target="my-iframe">软帝</a>
<a href="https://www.163.com/" target="my-iframe">网易</a>
<a href="https://www.alibabagroup.com/" target="my-iframe">Alibaba</a>
<!--
内联框架：相当于在我们的页面上重新定义了一个浏览器
内联框架属于内联元素
width： 设置内联框架的宽
height： 设置内联框架的高
src: 默认打开的网页
长度单位：
px: 像素，以屏幕上得像素点为单位,最常用。
%: 占用父控件的百分之比
-->
<br>
<!--
前端命名规则：
hello-world
hello_world
-->
<iframe width="1400px" height="1000px" name="my-iframe" src="http://www.softeem.com"></iframe>
</body>
</html>
07-锚链接.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚链接</title>
</head>
<body>
<ul>
<li><a href="#experience">人物经历</a></li>
<li><a href="#activity">社会活动</a></li>
<li><a href="#award">获奖记录</a></li>
<li><a href="#books">图书出版</a></li>
</ul>
<h2 id="experience">人物经历</h2>
早年时期
马化腾，广东省汕头市潮南区成田镇家美人。 [15] 1971年10月29日，出生在广东省东方县八所港（今属海南省东方市）。1984年，东方风来满眼春，深圳经济特区成立的第四个年头，13岁的马化腾随父母定居深圳。 [1] 后转入深圳中学，1989年，高考以739分的优异成绩考入深圳大学电子工程系计算机专业。
1993年毕业后进入深圳润迅通讯发展有限公司 [18] ，开始做编程工程师，专注于寻呼机软件的开发，至升任开发部主管。该段经历使马化腾明确了开发软件的意义就在于实用，而不是写作者的自娱自乐。润讯提升了马化腾的视野，以及给马化腾在管理上必要的启蒙 [19-20] 。
第一桶金
1998年，实用软件概念不仅培养了马化腾敏锐的软件市场感觉，也使他从中盈利不菲。马化腾是风靡一时的股霸卡的作者之一，他和朋友合作开发的股霸卡在赛格电子市场一直卖得不错。马化腾还不断为朋友的公司解决软件问题。这使他不仅在圈内小有名气，而且也有了相当的原始积累。
但他真正意义上的第一桶金是来自股市 [21] 。他最精彩的一单是将10万元炒到70万元。这为马化腾独立创业打下了基础 [22] 。
创立腾讯
马化腾父亲马陈术等人
马化腾父亲马陈术等人
1998年马化腾与他的同学张志东“合资”注册了深圳腾讯计算机系统有限公司。之后又吸纳了三位股东：曾李青、许晨晔、陈一丹。作为一家没有风险资金介入就成立的软件公司，初期的每一笔支出都让马化腾和他的同伴心惊。
在决定做OICQ的时候，当时国内已经有了两家公司先做，产品比腾讯更有市场名气 [23] 。马化腾没有想得更多，除了因为这个产品可以和公司的主项发展业务移动局、寻呼台、无线寻呼方案和项目相互促进外，也因为当时飞华、中华网等许多公司有意向做即时通讯项目，市场显得很有发展前景。 [24]
困难机遇
官司缠身
马化腾02
马化腾02 [25]
初期发展过程中，腾讯经过一个很重要的赔偿官司 [26] ：在1999-2000年左右，仿照ICQ开发的OICQ抢了很多ICQ的用户群，尤其是中国大陆用户，后来ICQ公司通过法律途径，最终判定腾讯败诉，停止使用OICQ这个名称，并归还OICQ域名给ICQ公司，同时赔偿了一定金额的费用，自此腾讯便使用了QQ这个名称。
资金困难
创业之初，马化腾率领自己的团队做网页、做系统集成、做程序设计。但由于不懂市场和市场运作，腾讯的产品拿出去向运营商推销，却经常被拒之门外 [27] 。跟其他刚开始创业的互联网公司一样，资金和技术是腾讯最大的问题。
1999年2月，腾讯开发出第一个“中国风味”的ICQ，即OICQ后，受到用户欢迎，注册人数疯长，很短时间内就增加到几万人。人数增加就要不断扩充服务器，而那时一两千元的服务器托管费对公司都不堪重负。
2000年，第一次网络泡沫席卷了整个中国互联网，腾讯进入了最为困难的时期，在面临资金困难时，曾险些把开发出的ICQ软件以60万元的价格卖给深圳电信数据局，但终因价格原因告吹 [28] 。
<h2 id="activity">社会活动</h2>
2015年12月16日，出席了第二届世界互联网大会开幕式。 [48]
2016年3月3日，全国人大代表、腾讯公司董事会主席兼CEO马化腾表示，2016年全国两会带来五个准备提交的建议案，涉及“互联网+”落地措施、分享经济、互联网医疗、数字内容产业和互联网生态安全。 [49]
2016年6月16日，中国“互联网+”峰会在京举行。马化腾先生现场指出，对每个行业而言，互联网不只是一个新经济、新领域，而是与自己行业息息相关、必须拥抱的。在过去一年，在“互联网+”信息能源的巨大赋能下，通信、金融、零售、O2O、交通领域都发生巨大的积极变化。 [50]
2018年4月，任首批西湖大学创校荣誉校董会成员。 [51]
<h2 id="award">获奖记录</h2>
时间
荣誉
评选（颁奖）机构及备注
2004
2004年CCTV中国经济年度人物新锐奖
中央电视台（该届共奖12人/件，新锐奖1人） [52]
美国《时代周刊》 [14] 2004全球最具影响力商界人士
美国《时代周刊》和有线新闻网（注：该届25人当选） [53]
中国香港第四届紫荆花杯杰出企业家奖
香港理工大学（该届有15位民营企业家当选） [54]
2006
全球青年领袖
国际经济组织，达沃斯经济论坛
第八届“广东青年五四奖章”
中国共青团广东省委（该届有10位青年获选） [55]
2006第四届“中国IT十大财经人物暨十佳市场策划”
《财经时报》《财经文画》主办，腾讯等协办 [56]
《中国企业家》最具影响力的企业领袖
《中国企业家》主办（该届25人当选）
2007
《中国经济周刊》中国改革开放30年经济百人榜
《中国经济周刊》主办、人民日报海外版等协办 [57]
2007中国最具影响力的商界领袖
《财富》杂志 [58]
2008
2008年中国最具影响力的25位商界领袖第11位
《财富》杂志 [59]
2009
2009CCTV中国经济年度人物“十年商业领袖”
中央电视台（央视年度人物附属奖项，10人当选） [60]
2009年中国最具影响力的25位商界领袖第8位
《财富》杂志 [61]
2010
2010年中国最具影响力的25位商界领袖第3位
《财富》杂志 [62]
2011
2011“中国最具影响力的50位商界领袖”排行榜第8位
《财富》杂志 [63]
2012
捐款列福布斯2012年“中国慈善榜”第11位
该榜为福布斯中国富豪榜附属榜 [64]
2012“中国最具影响力的50位商界领袖”排行榜第5位
《财富》杂志 [65]
2013
捐款列福布斯2013年“中国慈善榜”第6位
该榜为福布斯中国富豪榜附属榜 [66]
胡润百富榜之“2013中国十大创新企业家”第2位
该榜为胡润百富榜附属榜 [67]
胡润百富榜之“2013胡润IT及娱乐富豪榜”IT第1位
该榜为胡润百富榜附属榜 [25]
《巴伦周刊》全球30位最佳CEO名单上榜
美国《巴伦周刊》财经杂志（上榜30名） [68]
2013年度全球”商界风云人物排行榜第3位
《财富》杂志 [69]
《时代》2014年度百大影响力人物
美国《时代》杂志 [70]
2014
《福布斯》最具权力人物排行榜
美国《福布斯》杂志 [71]
2014“中国最具影响力的50位商界领袖”排行榜第1位
《财富》杂志 [72]
2015
2015"中国最具影响力的50位商界领袖"排行榜第2位
《财富》杂志 [31]
中国IT富豪榜第2位
《2015信中利·胡润IT富豪榜》 [32]
2016
中国IT富豪榜第2位
《2016胡润IT富豪榜》 [35]
2018年4月
《时代周刊》2018年全球最具影响力人物 [5]
2018
2018福布斯中国慈善榜排名第四
《福布斯》 [73]
2018
世界最具影响力十大华商人物
CCG《世界华商发展报告2018》课题组 [74]
2018
改革开放40年百名杰出民营企业家
中央统战部、全国工商联 [75]
2018
被授予改革先锋称号，颁授改革先锋奖章。
党中央、国务院 [6]
2019
2019福布斯中国慈善榜排名第4（现金捐赠总额73,084万元人民币） [76-77]
《福布斯》
2019
杰出社会企业家 [78]
第五届全球社会企业家生态论坛
2020
深圳经济特区建立40周年创新创业人物和先进模范人物
中共深圳市委、深圳市人民政府 [79]
2020
《2020中国品牌人物500强》第6位 [80]
品牌联盟
注：本表所列或不全。各参考资料见横行附注末。
个人荣誉
胡润百富榜
马化腾历年在“胡润百富榜”情况表
时间
财富（人民币）
排名
2005年
19.00亿元
第82位
2006年
40.00亿元
第56位
2007年
120.00亿元
第50位
2008年
125.00亿元
第32位
2009年
245.00亿元
第16位
2010年
320.00亿元
第11位
2011年
340.00亿元
第13位
2012年
410.00亿元
第07位
2013年
620.00亿元
第03位
2014年
840.00亿元
第07位
2015年
1200.00亿元
第04位 [81]
2016年
1650.00亿元
第03位 [34]
2018年
2400.00亿元
第03位 [82]
2019年
2600.00亿元
第02位 [83]
2020年
3080.00亿元
中国第2、全球第22位 [84]
2020年4月6日
2900亿元人民币
中国第1、全球第21位 [85]
2020年10月20日
3900亿元
第02位 [86]
注：1999年，胡润做出了中国第一个内地首富企业家排行榜。随后开始为福布斯编写中国富豪榜。2003年6月后，胡润脱离福布斯，独立制作榜单。这份“胡润百富榜”是最具知名度的榜单之一。 [87-88]
福布斯中国富豪榜
马化腾在历年“福布斯中国富豪榜（大陆）”情况表
时间
财富
排名
2003年
1亿美元
第99位 [89]
2004年
1.41亿美元
第99位 [89]
2005年
20.90亿元
第68位 [90]
2006年
43.00亿元
第35位 [91]
2007年
101.90亿元
第40位 [92]
2008年
107.40亿元
第09位 [93]
2009年
259.40亿元
第07位 [94]
2010年
294.00亿元
第09位 [95]
2011年
274.90亿元
第13位 [96]
2012年
403.20亿元
第04位 [97]
2013年
622.00亿元
第05位 [98]
2014年
881.30亿元
第03位 [99]
2015年
1117.6亿元
第03位 [100]
2016年
245亿美元
第03位 [36]
2017年
2581.8亿元
第02位 [101]
2019年
2550.0亿元
第02位 [102]
2019年
2,545.50亿元
第02位 [11-12]
2020
3,683.2亿元
第02位 [103]
注：1917年创立的福布斯杂志，1982年首次推出富豪榜，便在全球产生空前的影响。2003年10月30日，福布斯第一次亲自编制中国富人排行榜，其后渐受关注。是最具知名度的榜单之一。 [87]
新财富富人榜
马化腾在历年”新财富500富人榜”情况表
时间
财富（人民币）
排名
2004年
3.50亿元
第398位 [104]
2005年
12.00亿元
第155位 [105]
2006年
20.90亿元
第92位 [106]
2007年
64.30亿元
第33位 [107]
2008年
126.90亿元
第44位 [108]
2009年
100.00亿元
第15位 [109]
2010年
336.20亿元
第05位 [110]
2011年
347.00亿元
第07位 [111]
2012年
254.00亿元
第08位 [112]
2013年
405.10亿元
第04位 [113]
2014年
739.00亿元
第04位 [114]
2015年
1007.8亿元
第04位 [115]
2016年
1366.1亿元
第02位 [116]
2020年
2767.3亿元
第02位 [117]
注：新财富500富豪榜由《新财富》杂志2003年推出，是中国大陆媒体推出的第一份富人排名榜。 [118]
马化腾03
马化腾03 [119]
2014年时代周刊人物 [14]
2014年4月24日，美国《时代》周刊24日在其网站公布了2014年度全球100位最有影响力人物名单。包括深圳腾讯公司董事会主席兼首席执行官（简称CEO）马化腾。 [24] [120-123]
2015年11月4日，美国《福布斯》杂志公布全球最具影响力人物，马化腾排名第48位。 [124]
最佳CEO榜
综合排名全球第45位，财务表现排名第2位——在本次《哈佛商业评论·全球最佳CEO》的排行榜中，腾讯董事会主席兼首席执行官马化腾成为中国内地惟一上榜的企业家。 [125]
2016年2月24日，《2016胡润全球富豪榜》公布，马化腾财富1240亿元位列大陆第四，全球第41位，比去年上升12位。 [126]
2020年8月，马化腾位列“2020福布斯中国最佳CEO榜”第2位。 [127]
慈善榜
2016年6月7日，胡润研究院发布《大城小爱慈尚会2016胡润慈善榜》，马化腾以139亿元捐赠额首次成为首善。 [128]
2019年7月，2019福布斯中国慈善榜发布，马化腾排名第4。 [129]
2017中国最具影响力的50位商界领袖
2017年4月，马化腾继2014年后再次入选财富杂志最新公布的“2017中国最具影响力的50位商界领袖”，高居第二位，仅次于华为创始人任正非。 [130]
《福布斯》富豪榜
2018年4月21日，《福布斯》杂志评出2018年“世界最伟大领袖”榜单，马化腾排第19名。 [131]
2019年3月，马化腾以388亿美元财富排名2019年福布斯全球亿万富豪榜第20位。 [7]
2019年10月19日，入选2019福布斯年度商业人物之跨国经营商业领袖名单。 [10]
2020年4月7日，马化腾以381亿美元财富位列《2020福布斯全球亿万富豪榜》第20位。 [132]
2020年4月13日，入选《财富》中文版“2020年中国最具影响力的50位商界领袖”榜单。 [133]
2021年4月，马化腾以658亿美元财富位列《2021福布斯全球富豪榜》第15名。 [141]
<h2 id="books">图书出版</h2>
做产品要像小白用户那样思考
我的风格是：要务实和专注，永葆激情，求知若渴；要快速思考，坚定执行；要关注战略、速度与细节，亲力亲为。要像“小白”用户那样思考，并每天高频使用产品，不断发现不足，一天发现一个，解决一个，就会引发口碑效应。
好产品不需要所谓特别厉害的设计，因为自我感觉特别好的人就会故意搞一些体现自己厉害，但用户完全不需要的东西，这往往是舍本逐末了。资源只是加法，产品力才是王道。10个都弱不如1个很强。否则一堆做不起来的产品，只能减分、分散精力。 [134]
互联网将“连接一切”
互联网是主体经济社会的一部分，“互联网+”将连接实体、产业、服务、个人、设备等一切基本要素，创造出一个“互联网+”的生态体系。 [135]
<!--重新加载当前页面：回到顶部-->
<br>
<a href="#">回到顶部</a>
</body>
</html>
08-多媒体标签.html(阁主没有放图片和音频，请自行更换资源路径)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多媒体</title>
</head>
<body>
<!--
img：图片标签，主要用于显示图片
src: 图片的地址。项目中的图片（相对路径），或在线图片。
alt：加载失败后的提示信息
注意：在设置图片大小时建议只设置宽高中的一个，另一个会自动适配
-->
<img src="img/1.jpeg" width="200" alt="小姐姐">
<img src="img/2.jpeg" height="200" alt="也是小姐姐">
<img src="img/3.jpeg" width="500" alt="小姐姐">
<img src="img/4.jpeg" width="400" alt="小姐姐">
<img src="https://img0.baidu.com/it/u=4242249520,469897212&fm=26&fmt=auto&gp=0.jpg" height="200" alt="">
<!--
音乐播放标签：audio
src: 音乐的地址
controls: 是否显示控制台
autoplay: 是否自动播放
属性简写：属性名和属性值相同的属性 controls="controls" 属性值可以简写
-->
<audio id="audio" src="music/野摩托-阿丽.mp3" autoplay controls >
你的浏览器太low了，还不支持H5，赶紧换了吧。
</audio>
<script>
document.body.onclick = function () {
document.getElementById("audio").play();
}
</script>
</body>
</html>
09-表单元素.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
</head>
<body>
<!--
form: 表单元素，主要用于收集用户的信息并提交到服务器
action: 服务的地址
method: 请求方式，数据以什么样的形式发送到服务器
-->
<!--form 标签主要用于划分区域 -->
<form action="#" method="get">
<!--
input：输入框标签, 此标签为内联元素
type：决定当前输入框的属性
text：普通文本输入框
password：密码输入框
submit：提交按钮，把表单中的数据提交到后天服务器
reset：重置按钮，把表单中的内容全部清空
name： 输入框的名称，数据发送到后台后，通过name数据得到相对应的数据
value: 此属性中记录上传给服务器的信息
placeholder： 提示信息，当没有类容时显示，添加内容后自动小时
-->
账户：<input type="text" name="userName" value="admin"><br>
密码：<input type="password" name="password"><br>
<!--多行文本-->
<textarea rows="10" cols="50" name="text"></textarea>
<br>
<!--select： 下拉框-->
<select name="province">
<option value="1">湖北</option>
<option value="2">湖南</option>
<option value="3">河北</option>
<option value="4">河南</option>
<option value="5">山西</option>
</select>
<select name="city">
<option value="1">武汉市</option>
<option value="2">十堰市</option>
<option value="3">黄石市</option>
<option value="4">鄂州市</option>
</select>
<select name="district">
<option value="1">洪山区</option>
<option value="2">江夏区</option>
<option value="3">汉口区</option>
<option value="4">汉阳区</option>
</select>
<br>
性别：
<label>男<input type="radio" name="gender" value="m"></label>
<label for="w">女</label>
<input id="w" type="radio" name="gender" value="w">
<br>
爱好：
<label>王者荣耀<input type="checkbox" name="like" value="1"></label>
<label>和平精英<input type="checkbox" name="like" value="2"></label>
<label>明日之后<input type="checkbox" name="like" value="3"></label>
<label>摩尔庄园<input type="checkbox" name="like" value="4"></label>
<br>
<label>记住密码<input type="checkbox" name="isSavePwd"></label>
<br>
<input type="reset" value="还原">
<input type="submit" value="登录">
</form>
</body>
</html>
10-其他表单元素.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>其他表单元素</title>
</head>
<body>
<!--
form:
method: 上传方式
get： 系统默认会把上传的数据按照一定的格式拼接到URL路径后面
页面和数据之间使用?分割,上传的数据 name=value 进行上传，如果有多个参数，则以&连接
http://xxx/xxx/xxx.html?userName=abc&password=123&test=123
get请求上传的内容有大小限制，最大不超过2kb
post:
post请求会把数据通过后台上传，不会拼接到URL路径上，更加安全
post上传没有大小限制
文件上传：
要求一：表单必须通过POST请求的方式进行提交
要求二： 修改上传方式为IO流上传
enctype="multipart/form-data"
-->
<form action="#" method="post" enctype="multipart/form-data">
<input type="text" placeholder="请输入您的用户名" name="userName"><br>
<input type="password" name="password" placeholder="请输入您的密码"><br>
<br>
<input type="color">
<br>
<input type="email">
<br>
<input type="date">
<br>
<input type="datetime-local">
<br>
<input type="file">
<br>
<button type="button">按钮</button>
<input type="button" value="按钮">
<br>
<!--下拉提示-->
<input type="text" list="input-data">
<datalist id="input-data">
<option>java</option>
<option>mysql</option>
<option>javascript</option>
<option>Python</option>
<option>C#</option>
<option>C</option>
</datalist>
<br>
<input type="submit" value="登录">
</form>
</body>
</html>
11-区分标签.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分区标签</title>
</head>
<style>
div>span {
color: red;
}
</style>
<body>
<!--
分区标签：
块元素：div
内联元素：span
1.分区标签本身不具备任何效果
2.分区标签的功能知识单纯的划分区域方便添加样式
经验：尽量多使用分区标签，您的页面分的越细致，则布局越简单。
-->
分区标签的功能知识单纯的划分区域方便添加样式
分区标签的功能知识单纯的划分区域方便添加样式
<div>
分区标签的功能知识单纯的划分区域方便添加样式
</div>
<div>
<span>分区标签</span>的功能知识单纯的划分区域方便添加样式
</div>
<span>分区标签的功能知识单纯的划分区域方便添加样式</span>
<span>分区标签的功能知识单纯的划分区域方便添加样式</span>
</body>
</html>
12-百度注册页面练习.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册百度账号</title>
</head>
<body>
<h1>欢迎注册</h1>
已有账号？<a href="#">登录</a>
<form action="#">
用户名：<input type="text" placeholder="请设置用户名" name="userName"><br>
手机号：<input type="text" placeholder="用用于登录和找回密码" name="phone"><br>
密码：<input type="password" placeholder="请设置登录密码" name="password"><br>
验证码：<input type="text" placeholder="请输入验证码" name="code">
<!--
type:
button: 普通按钮，没有任何默认功能
reset: 重置按钮，默认重置当前表单
submit: 提交按钮，默认提交当前表单
-->
<button type="button">获取验证码</button>
<br>
<input type="submit" value="注册">
<br>
<label><input type="checkbox" name="isConsent">阅读并接受</label>
<a href="#">《百度用户协议》</a> 及 <a href="">《百度隐私权保护声明》</a>
</form>
</body>
</html>
目前阶段处于初学，更多后续内容请搜索阁主的文章，会更加精彩，页面制作会更加逼真。感谢支持!
扫一扫
4938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
