HTML
- 定义：超文本标记语言—— Hyper Text MarkUp Language
- 内容：有文字格式的文本 图片 音频 视频 动画
HTML文档是由HTML元素组成 一个元素由一个标签和一组属性组成
注意：属性——以名称和值成对出现
浏览器通过标签解释网页的内容：浏览器（IDE）加载并读取 HTML 代码 —> 解析每个标签–> 产生对应的效果
- 标签通常成对出现 eg： 开放标签：<123> 内容 闭合标签：</123>
- 作用：网页排版 图文并发 超链接
- 目前HTML5是最新版本————但很多小型浏览器不支持HTML5
W3C万维网联盟
- World Wide Web Consortium——全球万维网联盟
- 定义：万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言HTML（标准通用标记语言下的一个应用）、可扩展标记语言XML（标准通用标记语言下的一个子集）等
- 作用：
-
- 发展 Web 规范
- 这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块
-
- 确定未来万维网的发展方向，并且制定相关的推荐
- 由于W3C是一个民间组织，没有约束性，因此只提供建议
W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
对应的标准也分三方面
- 结构化标准语言主要包括XHTML和XML
- 表现标准语言主要包括CSS
- 行为标准主要包括对象模型DOM、ECMAScript等
这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA的ECMAScript标准。
HTML基本结构
- 注释：<！-- --> 快捷键：Ctrl+/
- 所有的HTML 标签 都以 <> 开始 </> 结尾 ——成对出现
- < body>——网页的所有内容都放在
- DOCTYPE文档类型——默认声明浏览器网页使用什么规范 默认HTML
- title 标签——网页的小标题名称
- meta 标签——描述信息 用来做SEO
练习：制作自己的第一个网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name = "java" content="好好学习天天向上">
<title>ZY的网页</title>
</head>
<body>
<p>
这是我的第一个网页
</p>
</body>
</html>
基本标签
标题标签
- < h1 >一级标题 < /h1 >
- < h2 > 二级标题 < /h2> 以此类推
段落标签
- < p > 段落 < /p >
换行标签
- < br >
水平线标签
- < hr >
字体样式标签
- < strong > 粗体字体 < /strong >
- < em > 斜体字体 < /em >
特殊符号标签
-   ;——空格
- > ；——大于号
- < ；——小于号
- © ；版权所有：ZY
图像标签
- 一般 .jpg .gif 会常用些
- 格式：< img src = " " > 里面的参数如下
- src： 资源图片 ： 图片的路径
- alt： 图片加载失败，表示图片的问题，也即图片描述
- title： 鼠标放在图片上的悬浮提示
- width： 宽
- height：高
练习：制作出带图片的简单网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>庆余年</title>
</head>
<body>
<h1>庆余年</h1>
<br>
<strong>中国大陆</strong>
<em> 46集</em>
<hr>
<img src="庆余年.jpg" alt="庆余年官方图" title="庆余年官方图" width="268" height="398">
<hr>
<p>
<strong>《庆余年》</strong>是由孙皓执导，张若昀、李沁、陈道明、吴刚、辛芷蕾、宋轶、郭麒麟等主演的古装剧
</p>
<p>
该剧改编自猫腻的同名小说，讲述了一个有着神秘身世的少年，自海边小城初出茅庐，历经家族、江湖、庙堂的种种考验、锤炼的故事。
</p>
<p>
该剧于2019年11月26日在腾讯视频、爱奇艺首播
</p>
</body>
</html>
超链接
- 超链接：表示从一个地方跳转到另外一个地方
- 格式：< a href=“https://www.baidu.com/” target="_self">百度< /a > 里面的参数如下
- href：要跳转地址
- target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
- _self : 在自己的窗口打开
- _blank： 在新窗口中打开
锚链接
- 格式
- 锚点——< a name = "markerA ">A < /a >
- 跳转到锚点——< a herf = "#markerA ">A < /a>
- 作用：1. 用于页面间指定位置跳转 ：快速定位目录
-
- 可以在同一页页面中跳转
-
- 也可以在不同页面中跳转
练习：使用超链接锚链接制作网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ZY的链接网页</title>
</head>
<body>
<h2>庆余年剧情简介</h2><br>
<img src="庆余年.jpg" alt="庆余年官图" title="庆余年官图" height="398" width="268">
<a href="https://baike.baidu.com/item/%E5%BA%86%E4%BD%99%E5%B9%B4/18023915?fr=aladdin#
%E5%88%86%E9%9B%86%E5%89%A7%E6%83%85" target="_blank">百度百科看简介</a>
<hr>
<a href="#marker第一集">第一集</a>
<a href="#marker第二集">第二集</a>
<a href="#marker第三集">第三集</a>
<a href="#marker第四集">第四集</a>
<a href="#marker第五集">第五集</a>
<br>
<a href="markerA">第六集</a>
<a href="#marker第七集">第七集</a>
<a href="#marker第八集">第八集</a>
<a href="#marker第九集">第九集</a>
<a href="#marker第十集">第十集</a>
<hr>
<a name="marker第一集"></a>
<strong>第1集</strong>
<p>
在范闲的记忆中，自己是现代社会一个患了重症肌无力的将死之人，当他的生命走到尽头，再度清醒时，
竟然身为婴孩，陷入一场血雨腥风的追杀中。一个黑布蒙眼的少年五竹，将他救出杀局，送至澹州范府
，令他以京都司南伯范建私生子的身份活了下来。范闲不知自己的生母是谁，也不知自己为何异于常人，
但婴孩时的遭遇令他时刻小心警惕，便勤练母亲留下来的秘籍，力气大于常人许多。
</p>
<a name="marker第二集"></a>
<strong>第2集</strong>
<p>
范闲回到范府，却见周管家被五花大绑，原来他奉京都柳姨娘之命，常年监视范闲，此番鉴查院传来刺杀，
周管家顺水推舟，欲让范闲丧命。老夫人一反常态，严惩了周管家，原来一直以来她对范闲的不闻不问竟是与
范闲有约，以此引出别有用心之人。老夫人叮嘱范闲，要学会心狠，范闲明白自己龟缩在澹州并不能平安度日。
为保老夫人远离危险，范闲告别老夫人，准备启程回京。临行前，五竹将叶轻眉留下的箱子交给范闲，
告诉他打开箱子的钥匙在京都某处。
</p>
<a name="marker第三集"></a>
<strong>第3集</strong>
<p>
长公主派出的宫女落入禁军手中，庆帝让宫典猜测何人欲坏范闲名声，宫典惶恐说出东宫嫌疑颇重。
庆帝随口提及太子送宫典书画之事，宫典骇然，原来范闲现身庆庙实为庆帝安排，并借机试探宫典是否已投诚太子。
宫典速返东宫，将太子所赠书画归还，烧毁多年收藏，声称再无爱好，与太子划清界限。
太子明白两人私交甚笃犯了庆帝的忌讳。
</p>
<a name="marker第四集"></a>
<strong>第4集</strong>
<p>
范建与范闲书房夜谈，揭开了叶轻眉的往事。叶轻眉曾创叶家商号，富甲天下，她早逝后，
商号更名内库归长公主执掌。长公主与当朝宰相林若甫有一私生女林婉儿，范闲迎娶她便可顺理成章拿回内库。
范建分析当朝局势，庆帝赐婚范闲，属意他接手内库，而长公主暗中支持太子，若范闲接手内库，
则断了太子的经济命脉，所以澹州刺杀或与太子有关。范闲半信半疑，仍然怀疑柳姨娘。饭桌上，一家五口当面对峙。
柳如玉承认安排周管家盯住范闲，但绝对没有派人杀他，范若若也认为刺杀不是柳姨娘所为，范闲佯装和解，实则暗中查探。
</p>
<a name="marker第五集"></a>
<strong>第5集</strong>
<p>
后来鉴查院将滕梓荆调入四处，销毁他的资料，承诺保他全家。澹州刺杀失败后，滕梓荆选择假死，
欲回京寻得家人，脱离鉴查院，不料家中早已人去楼空，妻小生死不明。他希望范闲进鉴查院用提司身份帮他调取当年的文卷，
也许上面会有家人的下落，范闲应下此事。郡主林婉儿天生患有肺痨，深居简出，她唯一的好友便是京都守备叶家之女——叶灵儿。
林婉儿向叶灵儿诉苦自己打小孤单，而今只想嫁心仪之人，但苦于庆帝指婚。
</p>
<a name="marker第六集"></a>
<strong>第6集</strong>
<p>
为了不暴露范闲行踪，范思辙假装范闲，称车内有唱曲小娘子，不便相见，婉儿听其言语轻浮，失望离去。婉儿回到皇家别院，
得知范闲将赴靖王府诗会，决定前去再探其真容。范闲至鉴查院调取文卷，发现院内文书值守竟是王启年。王启年称文卷繁多，
一时难以找到，承诺第二日将文卷送至范府。范闲询问澹州刺杀真相，王启年称此事由院长查探，自己不知，范闲威逼利诱，
得到一个叫徐云章的人名。
</p>
<a name="marker第七集"></a>
<strong>第7集</strong>
<p>
入夜时分，滕梓荆与范闲、若若一同前去消息铺子，得知徐云章曾与东宫来往频繁。范闲想起王启年曾言明此事已由鉴查院院长接管，
而此机密消息得来的过于容易令范闲生疑。果不其然，此消息铺子正是鉴查院所建，在庆帝的旨意下，
才将徐云章曾与东宫来往的信息交给范闲，将太子对范闲的敌意展露无遗。庆帝欲对范闲施压，测试他是否有能力接手皇家内库。
</p>
<a name="marker第八集"></a>
<strong>第8集</strong>
<p>
范闲即刻约靖王世子去流晶河畔喝花酒，他表面上与醉仙居头牌司理理同眠，实则将她迷晕，悄然离去，
这一切被靖王世子尽收眼底。范闲行至牛栏街寻得郭保坤的轿子，及时拦住欲为家人报仇的滕梓荆。二人将郭保坤蒙头围殴于小巷之中，
一番逼问，发现文卷内容并不属实。郭保坤并没有看到范闲本人，范闲却吟诵《登高》一诗，自曝身份。
</p>
<a name="marker第九集"></a>
<strong>第9集</strong>
<p>
公堂之上，范闲能言善辩，又叫来司理理和李弘成为自己做牛栏街当夜的不在场证明，他虽从与郭保坤的案子中脱身，
又沾上了一夜风流的名声。京兆尹梅执礼负责审案，欲判范闲无罪，此时太子出现在公堂上，对梅执礼施压，
梅执礼只能对民女身份的司理理用刑逼供，谁知二皇子也出现在公堂上，明面上尊重太子，暗地却指责太子干预司法。
司理理不惧拶刑为范闲作证，赢得身前名。
</p>
<a name="marker第十集"></a>
<strong>第10集</strong>
<p>
范闲前去探望滕梓荆一家人，滕梓荆与儿子多年未见，正在积极努力地赢得儿子的好感。
范闲催促滕梓荆早日与家人离开京都，过上安稳幸福的生活，滕梓荆表示正有此意。夜间滕梓荆却返回范府，
向范闲表示自愿留在京都做范闲的护卫，因为范闲明知自己身处京都漩涡，却不避不躲，直面太子等强权势力，
滕梓荆担心他的安危，范闲感动。
</p>
</body>
</html>
功能性标签
——邮件链接
- 格式：< a herf = " mailto:123456789@ qq.com">联系我们 < / a>
块元素和行内元素
- 块元素：eg：p h1-h6
- 独占一行，不能与其他任何元素并列
- 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%
- 行内元素：eg：a strong em
- 与其他行内元素并排
- 不能设置宽高，默认的宽度就是文字的宽度
练习：分清块元素和行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素和行内元素</title>
</head>
<body>
块元素——单独一行
<p>我是段落标签</p>
<h1>我是一级标签</h1>
行内元素——和其他元素在一行
<br>
<strong>我是加粗字体</strong>
<em>我是斜体</em>
<a href="www.baodu.com">我是百度超链接</a>
</body>
</html>
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
