JAVA前端————HTML—W3C—基本标签—超链接锚链接

HTML

  • 定义:超文本标记语言—— Hyper Text MarkUp Language
  • 内容:有文字格式的文本 图片 音频 视频 动画

HTML文档是由HTML元素组成 一个元素由一个标签和一组属性组成
注意:属性——以名称和值成对出现

浏览器通过标签解释网页的内容:浏览器(IDE)加载并读取 HTML 代码 —> 解析每个标签–> 产生对应的效果

  • 标签通常成对出现 eg: 开放标签:<123> 内容 闭合标签:
  • 作用:网页排版 图文并发 超链接
  • 目前HTML5是最新版本————但很多小型浏览器不支持HTML5

W3C万维网联盟

  • World Wide Web Consortium——全球万维网联盟
  • 定义:万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南,如广为业界采用的超文本标记语言HTML(标准通用标记语言下的一个应用)、可扩展标记语言XML(标准通用标记语言下的一个子集)等
  • 作用:
    1. 发展 Web 规范
  • 这些规范描述了 Web 的通信协议(比如 HTML 和 XHTML)和其他的构建模块
    1. 确定未来万维网的发展方向,并且制定相关的推荐
  • 由于W3C是一个民间组织,没有约束性,因此只提供建议

W3C标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。
对应的标准也分三方面

  1. 结构化标准语言主要包括XHTML和XML
  2. 表现标准语言主要包括CSS
  3. 行为标准主要包括对象模型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 = " " > 里面的参数如下
  1. src: 资源图片 : 图片的路径
  2. alt: 图片加载失败,表示图片的问题,也即图片描述
  3. title: 鼠标放在图片上的悬浮提示
  4. width: 宽
  5. height:高

练习:制作出带图片的简单网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>庆余年</title>
</head>
<body>
<h1>庆余年</h1>
<br>
&nbsp; &nbsp;&nbsp; &nbsp;<strong>中国大陆</strong>
&nbsp; &nbsp;<em> 46</em>
<hr>
<img src="庆余年.jpg" alt="庆余年官方图" title="庆余年官方图" width="268" height="398">
<hr>
<p>
    <strong>《庆余年》</strong>是由孙皓执导,张若昀、李沁、陈道明、吴刚、辛芷蕾、宋轶、郭麒麟等主演的古装剧
</p>
<p>
    该剧改编自猫腻的同名小说,讲述了一个有着神秘身世的少年,自海边小城初出茅庐,历经家族、江湖、庙堂的种种考验、锤炼的故事。
</p>
<p>
    该剧于20191126日在腾讯视频、爱奇艺首播
</p>
</body>
</html>

超链接

  • 超链接:表示从一个地方跳转到另外一个地方
  • 格式:< a href=“https://www.baidu.com/” target="_self">百度< /a > 里面的参数如下
  1. href:要跳转地址
  2. target: 目标打开的窗口,在自己这个当前页面打开,还是在新的页面打开
  3. _self : 在自己的窗口打开
  4. _blank: 在新窗口中打开

锚链接

  • 格式
  • 锚点——< a name = "markerA ">A < /a >
  • 跳转到锚点——< a herf = "#markerA ">A < /a>
  • 作用:1. 用于页面间指定位置跳转 :快速定位目录
    1. 可以在同一页页面中跳转
    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>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#marker第二集">第二集</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#marker第三集">第三集</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#marker第四集">第四集</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#marker第五集">第五集</a>
<br>
<a href="markerA">第六集</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#marker第七集">第七集</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#marker第八集">第八集</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#marker第九集">第九集</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="#marker第十集">第十集</a>
<hr>
<a name="marker第一集"></a>
<strong>1</strong>
<p>
      在范闲的记忆中,自己是现代社会一个患了重症肌无力的将死之人,当他的生命走到尽头,再度清醒时,
    竟然身为婴孩,陷入一场血雨腥风的追杀中。一个黑布蒙眼的少年五竹,将他救出杀局,送至澹州范府
    ,令他以京都司南伯范建私生子的身份活了下来。范闲不知自己的生母是谁,也不知自己为何异于常人,
    但婴孩时的遭遇令他时刻小心警惕,便勤练母亲留下来的秘籍,力气大于常人许多。
</p>
<a name="marker第二集"></a>
<strong>2</strong>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;范闲回到范府,却见周管家被五花大绑,原来他奉京都柳姨娘之命,常年监视范闲,此番鉴查院传来刺杀,
    周管家顺水推舟,欲让范闲丧命。老夫人一反常态,严惩了周管家,原来一直以来她对范闲的不闻不问竟是与
    范闲有约,以此引出别有用心之人。老夫人叮嘱范闲,要学会心狠,范闲明白自己龟缩在澹州并不能平安度日。
    为保老夫人远离危险,范闲告别老夫人,准备启程回京。临行前,五竹将叶轻眉留下的箱子交给范闲,
    告诉他打开箱子的钥匙在京都某处。
</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
  1. 独占一行,不能与其他任何元素并列
  2. 能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%
  • 行内元素:eg:a strong em
  1. 与其他行内元素并排
  2. 不能设置宽高,默认的宽度就是文字的宽度

练习:分清块元素和行内元素

<!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>

你可能感兴趣的:(JAVA前端————HTML—W3C—基本标签—超链接锚链接)