html学习之路教程001
2024-04-01 03:10:02
001学习目录
标题标签
换行标签和段落标签
文本格式化标签
spn和div标签
图像标签
相对路径和绝对路径
超链接标签
锚点定位
教程001总结案例
标题标签
<h1>标题标签</h1>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
代码样例：
<!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><h1>标题标签</h1> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>-----li老师
</body>
</html>
显示效果
换行标签和段落标签
<p>这个<br>段落<br>演示了分行的效果</p>
代码样例：
<!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><p>事情是这样的，现在猪肉涨了，但是农民的工资却不见涨啊，没钱怎么买猪肉啊。<br />蒜头君这就去买猪肉，结果找来的零钱中有假币！！！可惜蒜头君一不小心把它混进了一堆真币里面去了。现在知道假币的重量比真币的质量要轻，所有真币的重量是一样的。</p><p>现在包含假币一共有 nn 张纸币，然后有一个天平，蒜头君设计一个找假币的方案。如果有偶数张纸币，把所有的钱分成两份，用天平称一下，哪边轻假币就在哪边。如果有奇数张纸币，先随机抽出一张，然后把所有的钱分成两份，用天平称一下，哪边轻假币就在哪边。如果两边一样轻，那么抽出来的就是假币。</p>
</body>
</html>
文本格式化标签
代码样例：
<strong></strong>加粗
<em></em>倾斜
<del></del>删除
<ins></ins>下划线
<!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>我是<strong>加粗</strong>的标签我是<s>删除</s>的标签我是<em>倾斜</em>的标签我是<ins>下划线</ins>的标签
</body>
</html>
spn和div标签
div是一个较大的盒子单独占一行
spn是一个小盒子，自己独占一行
代码样例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div和spn标签</title>
</head>
<body><div>我是一个div标签我一个人单独占一行</div><div>我是一个div标签我一个人单独占一行</div><span>百度</span><span>新浪</span><span>网易</span>
</body>
</html>
显示效果：
图像标签
src指定文件的路径和文件名
图像标签img的属性：
代码样例：
<!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><h4>图形标签的使用:</h4><img src="img.jpg" /><h4>alt 替换文本的使用:图像显示不出来的时候用文字代替</h4><img src="img1.jpg" alt="我是li老师" /><h4>title提示文本，鼠标放到图片上，提示的文字：</h4><img src="img.jpg" title="我是li老师" /><h4>width给图像设定宽度：</h4><img src="img.jpg" title="我是li老师" width="500" /><h4>height给图像设定高度：</h4><img src="img.jpg" title="我是li老师" width="500" height="300" /><h4>height给图像设定高度：</h4><img src="img.jpg" title="我是li老师" height="300" /><h4>border给图像设定边框：</h4><img src="img.jpg" title="我是li老师" height="300" border="15" />
</body></html>
相对路径和绝对路径
代码样例：
<!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><img src="img.jpg"/><img src="data:images/img.jpg"/><img src="../img.jpg"/>
</body>
</html>
绝对路径：位于电脑的位置
<!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><img src="C:\Users\Administrator\Desktop\前端基础HTML\img.jpg"/><img src="http://www.itcast.cn/2018czgw/images/logo2.png"/>
</body>
</html>
超链接标签
代码样例：
<!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><h4>1 .外部链接</h4><a href="http://www.qq.com" target="_blank">腾讯</a><br />href=打开窗口的链接，_self在本页面内打开 _blank在外部窗口打开链接<h4>2.内部链接:网站内部页面之间的相互链接：</h4><a href="http://www.qq.com" target="_blank">公司简介</a>
</body>
</html>
代码样例：
<!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><h4>1 .外部链接</h4><a href="http://www.qq.com" target="_blank">腾讯</a><br />href=打开窗口的链接，_self在本页面内打开 _blank在外部窗口打开链接<h4>2.内部链接:网站内部页面之间的相互链接：</h4><a href="gongsijianjie.html" target="_blank">公司简介</a><h4>3.空链接:#</h4><a href="#" target="_blank">公司简介</a><h4>4.地址链接的是文件 .exe 文件或者是 zip 等压缩包的形式</h4><a href="img.zip" target="_blank">下载文件</a><h4>5.网页元素的链接</h4><a href="http://www.baidu.com" target="_blank"><img src="img.jpg" /></a>
</body></html>
锚点定位：
点击一些文字能及时的跳到对应的地方
主要语句示范：
<a href="#zuopin">3 主要作品<br /></a>
<h3 id="zuopin">主要作品</h3>
（#号后面的名称一致）
代码样例：
<!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><h2 id="dingbu">目录</h2>1 早年经历<br /><a href="#yanyi">2 演艺经历<br /></a><a href="#zuopin">3 主要作品<br /></a><a href="#huodong"> 4 社会活动<br /></a>5 获奖记录<br />6 人物评价<br /><h3>早年经历</h3><p>1994年-1999年就读于成都三圣街小学。2000年在成都学道街中学读初中。2003年在成都列五中学读高中。2006年-2010年就读于原四川师范大学电影电视学院播音与主持系。</p><h3 id="yanyi">演艺经历</h3><p>2007年，李易峰在东方卫视选秀娱乐节目《加油好男儿》获得总决赛第八名以及最具亲和力奖，从而进入娱乐圈 [21] ；11月，推出首支个人单曲《我爱的人伤我最深》 [22]；12月15日，发行首张个人EP专辑《四叶草》，及个人首本半自传写真《时间总是在转圈圈的》。 [23] </p><p>2008年5月13日，由李易峰作词的四川地震公益歌曲《娃娃不哭》发布 [24] ；7月20日发行概念EP《摩天轮》。 [25] 7月26日，在上海美琪大剧院举行个人首场演唱会“2008我们易起峰”。</p><p>2009年，出演改编自日本同名动漫的青春励志剧《网球王子》，在剧中饰演左博，这是他的首部电视剧作品 [26] ；5月17日，发行首张个人专辑《小先生》 [27]，收录了包括《我曾爱过的女孩》、《我要的幸福》等在内的10首歌曲。</p><p>2014年7月2日，古装仙侠剧《古剑奇谭》首播获得了全国同时段电视剧收视率第一，网络播放量突破50亿，单集平均点击量则突破1.5亿的成绩，李易峰在剧中饰演男主角百里屠苏，并为该剧演唱插曲《剑伤》、《剑心》 [41]。8月1日，首发写真书《壹刻》限量纪念版，开售23秒10001册即被抢购一空 [42] 。同年7月，李易峰与陈意涵、江铠同等人联袂主演的都市青春励志剧《小时代之折纸时代》上线播出、古装喜剧《欢天喜地俏冤家》上档央八 [43]；同年主演年代剧《活色生香》 [44] ，饰演男主角宁致远，演唱片尾曲《心如玄铁》 [45] 。10月，主演改编自同名人气小说网络季播剧《盗墓笔记》，并在剧中饰演德国留学归来，老九门吴家的小三爷吴邪 [46]。10月24日，荣获ELLE风尚大典年度新锐风尚艺人奖，这是该奖项第一次颁发给男艺人 [47] 。12月，接拍管虎导演剧情动作类电影《老炮儿》，这也是他首次在影视作品中尝试胡同“古惑仔”的角色 [48]。12月17日，荣获国剧盛典内地最具人气男演员和最具商业价值男演员奖 [49] 。12月26日，获得“2014年度腾讯娱乐白皮书”最受媒体关注明星、最被期待演员两项榜单第一名 [50] 。《我是你的喋喋phone》《我是你的喋喋phone》(8张)</p><p>2015年1月31日和2月28日，分别在北京国家体育馆和上海大舞台举行“峰狂”Fan’s Meeting演唱会。2月，接拍何炅导演，黄磊监制的青春校园电影《栀子花开》，饰演男主角许诺 [10]。2月4日，李易峰主演民国传奇电视剧《活色生香》开播 [9] 。5月11日，李易峰首次登上2015年福布斯中国名人榜，位列第9名 [51] 。6月4日，主演陈国辉导演的都市爱情电影《怦然星动》 [11]。6月8日，由李易峰主演的2集网络剧《我是你的喋喋phone》登陆腾讯视频，一周内视频专辑总点击量突破5800万 [52]。领衔主演的《盗墓笔记》季播剧首创差异化排播模式，自6月12日起在爱奇艺正式上线，22小时内播放量破亿，打破记录 [53]；7月，首次担任制片人，投资制作的户外探险真人秀《一起出发》于11月起在湖北卫视、黑龙江卫视同步播出，率先实现省级卫视季播综艺节目的双平台播出 [54]。7月10日，主演的电影《栀子花开》上映。8月1日，主演同名小说改编电视剧《麻雀》，饰演双面特工陈深 [55] 。9月12日，出席第72届威尼斯电影节，参与主演的电影《老炮儿》成为电影节闭幕影片 [56]。11月21日，李易峰加盟在北京工人体育馆举办的“老炮儿”演唱会 [57] 。11月24日，推出个人单曲《请跟我联络》，该歌曲由林夕作词、窦鹏作曲。12月3日，主演的电影《怦然星动》上映，饰演从小就有音乐梦想的大明星苏星宇[58] 。12月24日，参与主演的电影《老炮儿》上映，累计票房破9亿 [59] 。2015年度腾讯娱乐白皮书报告显示，李易峰为最具商业价值明星第一名，同时，李易峰入选《第一财经周刊》评选的”中国最具品牌价值明星榜“第一名[60] 。荣誉时刻荣誉时刻(24张)</p><h3 id="zuopin">主要作品</h3>我和我的家乡2020-10-1饰演姜小峰 导演张艺谋、徐峥 主演张译、范伟动物世界2018-6-29饰演郑开司 导演韩延 主演迈克尔·道格拉斯、周冬雨<br />心理罪2017-8-11饰演方木 导演谢东燊 主演廖凡、万茜建军大业2017-07-28饰演何长工 导演刘伟强 主演刘烨、朱亚文<br />老炮儿2015-12-24饰演张晓波（小炮儿） 导演管虎 主演冯小刚、张涵予怦然星动2015-12-03饰演苏星宇 导演陈国辉 主演杨幂、陈数<br />栀子花开2015-07-10饰演许诺 导演何炅 主演张慧雯、蒋劲夫恋爱恐慌症2011-08-06饰演崔艾伦 导演龙毅 主演林依晨、陈柏霖<br /><h3 id="huodong">社会活动</h3><p> 2007年11月8日，李易峰参与腾讯公益慈善基金会、中国儿童少年基金会主办，腾讯网协办的“星光爱心行动”，为北京某打工子弟学校送去文体用具等爱心礼物，还给学生上起了体育课 [135] 。</p><p>2008年1月，李易峰参加《京华时报》联合中国扶贫基金会主办的“爱心照亮回家路”慈善活动的受助学生路费发放仪式暨慈善义演 [136]。同年5月，李易峰与制作团队一起连夜进棚创作，通宵录唱了为家乡四川地震特别谱写的赈灾公益歌曲《娃娃不哭》。同年6月，李易峰联合《风度men’suno》杂志拍摄宣传片，将Ferragamo首席设计师为四川地震灾区设计的2000件全球限量悼念T恤进行义卖，所得善款全部捐献用于四川灾后重建 [137] 。</p><p>2009年-2010年，李易峰连续两年参与MusicRadio音乐之声“我要上学“助学公益活动，将亲自DIY的MUZINE娃扑满、主题服和《幸福一定强》剧中使用的背包义卖，募集善款；现场演唱歌曲为活动造势；邀请参与捐助的粉丝上台互动 [139-140]。同年1月10日，李易峰参与在云南举办的“超越巅峰”国际慈善歌会，进行“你向希望工程捐款，我赠演唱会爱心票”的义卖活动，借以推动云南独龙江地区青少年慈善事业发展 [141] 。</p><a href="#dingbu">返回顶部</a>
</body></html>
结果显示
注释标签和特殊字符
代码样例：
<!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><!-- 我想和手磨咖啡 -->讲 究 <br ><!-- 表示空格 -->< p > 是一个段落标签
</body>
</html>
教程001总结案例：
<!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><h1>圣诞节的那些事</h1><br /><a href="#jieri">1 圣诞节是怎样由来的</a><br /><a href="#sheng1">2 圣诞老人的由来</a><br /><a href="#shu">3 圣诞树的由来</a><br /><h3 id="jieri">圣诞节是怎样由来的</h3><p>基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。圣诞节习俗传播到亚洲主要是在十九世纪中叶，日本、韩国等都受到了圣诞文化的影响。现在西方在圣诞节常互赠礼物，举行欢宴，并以圣诞老人、圣诞树等增添节日气氛，已成为普遍习俗。圣诞节也成为西方世界以及其他很多地区的公共假日。</p><img src="data:images/xue.gif" /><h3 id="sheng1">圣诞老人的由来</h3><P>圣诞节人物形象主要指<a href="19-shengdanlaoren.html"target="_blank">圣诞老人</a>（SantaClaus），其原型是生活在公元4世纪米拉城（今土耳其境内）的主教圣尼古拉斯。他一生当中做了很多慈善工作，最喜欢在暗中帮助穷人。圣诞老人是他后来的别号，这个名字是出自他暗中送钱，帮助三个女孩子的故事。尼古拉斯死后被尊为圣徒。圣诞老人的形象是一位身穿红袍、头戴红帽的白胡子老头。每年圣诞节他驾着鹿拉的雪橇从北方而来，由烟囱进入各家，把圣诞礼物装在袜子里挂在孩子们的床头上或火炉前。</P><img src="data:images/shengdan.jpg" height="400" /><h3 id="shu">圣诞树的由来</h3><p>圣诞树，是指用灯烛和装饰品把枞树或洋松装点起来的常青树。作为是圣诞节重要的组成元素之一，近代圣诞树起源于德国，后来逐步在世界范围内流行起来，成为圣诞节庆祝中最有名的传统之一。</p><p> 据说圣诞树最早出现在古罗马12月中旬的所谓农神节。现在通常人们在圣诞前后把一棵常绿植物如松树弄进屋里或者在户外，并用圣诞灯和彩色的装饰物装饰。并把一个天使或星星放在树的顶上。2019年11月，大阪USJ推出冬季圣诞树，连续九年刷新吉尼斯世界纪录 [1] 。</p><img src="data:images/shengdanshu.jpg" height="400" />
</body></html>
代码2：
<!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><h3>圣诞老人</h3><img src="data:images/sheng.jpg"/><P> 圣诞老人源于欧洲的基督教圣人典故。他拥有9只名字各不相同的驯鹿，最大的烦恼是有烟囱爬的房子越来越少了。通常父母们会对他们的子女解释他们在圣诞节收到的礼物是圣诞老人送的。圣诞老人以一位神秘人物带给小孩子们礼物的概念衍生自圣尼古拉。尼古拉是一位生活在4世纪小亚细亚的热爱施舍的慈悲主教，荷兰人在圣尼古拉斯节（12月6日）便会模仿他送礼物。</P><p>每年圣诞节，圣诞老人骑在驯鹿上，圣童手持圣诞树降临人间，随着世事变迁，作家和艺术家开始把圣诞老人描述成我们今日熟悉的着红装，留白胡子的形象。同时不同的国度和文化对圣诞老人也有了不同的解释。在许多国家里，圣诞节前夕，孩子们会准备好空的容器，以便圣诞老人可以装进一些小礼物，如玩具、糖果或水果。在美国，孩子们圣诞夜会在壁炉上悬挂圣诞袜，因为圣诞老人说过要在圣诞前夜从烟囱下来把礼物放到袜子里。他们会在壁炉附近的桌子上放上几块姜坚果饼干（gingernut cookies），据说圣诞老人在送来礼物的同时也会吃掉这些饼干。在其他国家，孩子们把空鞋放到户外，以便圣诞老人可以在圣诞夜（或圣尼古拉斯节前夕的12月5日）送礼物。在德国，传说他扮成圣童把坚果和苹果放在孩子们鞋里。他乘双轮马车四处漫游，观察人们的行为，尤其是小孩，如果表现好，将会得到苹果、坚果、糖等诸多奖品。坏孩子则挨一鞭子。家长们灵机一动纷纷采用此传说来鼓励孩子们听话。</p>
</body>
</html>
效果展示：
圣诞老人链接界面
html学习之路教程001相关推荐
- 前端开始学java_[Java教程]开启前端学习之路
[Java教程]开启前端学习之路 0 2014-06-10 17:00:06 前言 第一次在博客园写博客,写写自己开启前端学习之路.应该是受邢师兄的影响吧,不得不说邢师兄人很好,学习也很认真,师兄的前 ...
- Revit二次开发从入门到精通学习之路, （含Revit二次开发教程下载）
Revit二次开发从入门到精通学习之路 Autodesk Joe Ye叶雄进 2. 18 2014 yexiongjin@hotmail.com Revit在国内的应用越来越广泛, Revit ...
- Qt5 学习之路及嵌入式开发教程11：Qt5标准输入对话框类及QSlider控件
Qt5 学习之路及嵌入式开发教程11:Qt5标准输入对话框类及QSlider控件 这次任务要完成弹出窗口及QSlider控件的界面设计及代码编写 一.Qt5弹出窗口 1.界面式布局 建立项目工程文件 ...
- Qt5 学习之路及嵌入式开发教程21：QML基础
Qt5 学习之路及嵌入式开发教程21:QML基础 一.启动Qt5.12 1.新建项目文件,进入界面 2.选择后 3.几个下一步后,点击完成: 4.运行,查看结果 二.在窗口中绘制一个矩形 1.在tit ...
- Qt5 学习之路及嵌入式开发教程4：代码编写实现信号槽例子
Qt5 学习之路及嵌入式开发教程4:代码编写实现信号槽例子 整体设计思路: 第一步:先设置整体界面控件的位置及大小: 第二步:添加代码,实现信号槽功能: 第三步:调试运行程序,实现程序功能. 一.整体 ...
- 学习之路-现代密码学基础-001
学习之路-现代密码学基础-第一章密码学概论 转载于:https://www.cnblogs.com/vegetables-Adanos/p/5371420.html
- java webwork_[Java教程]Webwork 学习之路（一）Webwork与 Struct 的前世今生_星空网
Webwork 学习之路(一)Webwork与 Struct 的前世今生 2015-12-04 0 Struts 1是全世界第一个发布的MVC框架,它由Craig McClanahan在2001年发布 ...
- AI 学习之路——轻松初探 Python 篇（一）
喜欢小之的文章的可以关注公众号「WeaponZhi」持续关注动态 这是「AI 学习之路」的第 1 篇,「Python 学习」的第 1 篇 前言 1. Python 篇的组织结构 不管是学习人工智能还是 ...
- Python学习之路【第一篇】-Python简介和基础入门
1.Python简介 1.1 Python是什么 相信混迹IT界的很多朋友都知道,Python是近年来最火的一个热点,没有之一.从性质上来讲它和我们熟知的C.java.php等没有什么本质的区别,也是 ...
最新文章
- weblogic连接oracle配置文件,配置weblogic连接oracle的数据源
- 【Win7下Android native code的编译和调试】
- 在活动目录中设置和管理发布打印机
- [MATLAB调试笔记]时变循环诊断——[Vx(x)],[Vx(t),Vy(t),Vz(t)],[Ex(x)],[波]；[Eng(t)],[Ex(k)],[Ex(x,t)],[logEx(x.t)]
- Jenkins pipeline JENKINS_NODE_COOKIE踩坑记录
- JavaScript实现按位运算符乘以无符号数multiplyUnsigned算法（附完整源码）
- Arrays 的copyOf() - JDK 6 和操作符 instanceof
- HTML默认样式表CSS属性
- 中正则表达式详解_python ：正则表达式/re库 超级详细de注释解释
- mysql索引三个字段查询两个字段_mysql中关于关联索引的问题——对a,b,c三个字段建立联合索引，那么查询时使用其中的2个作为查询条件，是否还会走索引？......
- mysql 如何磁阵_Raid教程 全程图解手把手教你做RAID
- ASP.NET性能优化之分布式Session
- HDU1847 Good Luck in CET-4 Everybody!【SG函数】
- 两个链表是否相交 + 赛马（分桶）
- Unity3D开发之GL画线
- 四川自考计算机信息管理专业,计算机信息管理专业2019年10月四川自考科目及考试时间[本科]...
- 免手机验证码网站备案
- Linux如何创建用户及设置权限
- Pymol中如何显示stick+cartoon+surface
- 纺织品行业——瑞士蓝标Bluesign认证