Java前端学习（Day 1）

HTML初识（基础认知+HTML标签）

一，基础认知

1.Web标准的构成

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

2.Web标准要求页面实现：

结构:HTML(决定了身体)，表现:CSS（决定了样式美观），行为:JavaScript(决定了交互的动态表现)三层分离。

3.HTML的中文译名：

超文本标记语言

4.认识HTML

<!--后面的代码都是HTML的-->
<!DOCTYPE html>
<!--根路径 网页的整体-->
<html lang="en">
<!--头标签 网页的头部-->
<head><!--对网页来进行各种设置--><meta charset="UTF-8"><!--网页的标题--><title>我的第一个网页</title>
</head>
<!--身体标签-->
<body>
<b>网页的主题内容</b>
</body>
</html>

二，HTML标签学习

1.排版标签

1.1标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

代码：h系列标签

<body>
<!--标题标签 h系列 1-6级标题--><h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>

语义：1~6级标题，重要程度依次递减

特点：

文字都有加粗
文字都有变大，并且从h1→h6文字逐渐减小
独占一行

注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

1.2段落标签

场景：在新闻和文章的页面中，用于分段显示

代码：

<body>
<!--段落标签的使用-->
<h1>为中国人民谋幸福 为中华民族谋复兴</h1>
<h6>2022-10-15 00:00:00 人民日报</h6>
<!--水平线标签-->
<hr>
<p>中国共产党一经诞生，就把为中国人民谋幸福、为中华民族谋复兴确立为自己的初心和使命。</p>
<p>新时代的10年，中华大地上全面建成小康社会，第一个百年奋斗目标如期实现<br>中国人民正意气风发迈向全面建成社会主义现代化强国的第二个百年奋斗目标。</p>
</body>

语义：段落

特点：

段落之间存在间隙
独占一行

1.3换行标签

场景：让文字强制换行显示

代码：

语义：换行

特点：

单标签
让文字强制换行

1.4水平线标签

场景：分割不同主题内容的水平线

代码：

语义：主题的分割转换

特点：

单标签
在页面中显示一条水平线

2.文本格式化标签

场景：需要让文字加粗、下划线、倾斜、删除线等效果

代码：

标签	说明
b	加粗
strong	加粗
u	下划线
ins	下划线
i	倾斜
em	倾斜
s	删除线
del	删除线

<body>
<b>今日看点</b>
<strong>今日新闻</strong><br>
<u>点我有惊喜</u>
<ins>不要点我</ins><br>
<i>我是一朵花</i>
<em>一朵玫瑰花</em><br>
<s>原价999</s>
<del>原价19999</del>
</body>

语义：突出重要性的强调语境

3.媒体标签

3.1图片标签

场景：在网页中显示图片

代码：

<body>
<!--
src：属性名 "" ：属性值
1.标签的属性可以写在开始标签的内部
2.标签上可以同时存在多个属性
3.属性之间用空格隔开
4.标签名和属性之间必须要以空格隔开
5.属性之间没有顺序之分alt属性：
当图片在加载失败的时候所显示出来的文本
加载成功的时候不会加载出来title属性：
当鼠标悬停的时候，才会显示的文本width和height属性：
宽度和高度（数字）-->
<img src="/img/cat.gif" width="900px"  alt="我是一个替换文本" title="我是一只鬼鬼祟祟的猫">
</body>

特点：

单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置

3.2路径标签

<body>
<!--绝对路径 目录下的绝对位置-->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-baofun.zhhainiao.com%2Ffs%2F99f6bbf658b6c5a387b3338cf8957f2c.jpg&refer=http%3A%2F%2Fimg-baofun.zhhainiao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668395342&t=75735f65bdbef1a4b5f4128696988c48"width="600px">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.moyublog.com%2Fd%2Ffile%2F2020-12-10%2F6fe84a37068af5367db46da38782bd96.jpg&refer=http%3A%2F%2Ffile.moyublog.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668395342&t=daa19ef3bf28160de3f2cb716c5c6a3c"width="600px">
<img src="https://t7.baidu.com/it/u=3363770168,3975932502&fm=193" width="600px"><!--相对路径
同级目录，下级目录，上级目录
-->
<img src="one1/cat.gif">
<img src="/img/cat.gif"><!--补充一下超链接
空链接
功能：点击之后回到网页的顶部
-->
<a href="#">空链接</a>
</body>

3.3音频标签

场景：在页面中插入音频

代码：

<body>
<!--
src：音频的路径
controls：显示播放的控件 控制面板
autoplay:自动播放（部分浏览器不支持）
loop：循环播放注意：支持三种音乐格式 MP3，Wav，Ogg
-->
<audio src="/audio/music.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
</body>

注意点：

音频标签目前支持三种格式：MP3、Wav、Ogg

3.4视频标签

场景：在页面中插入视频

代码：

<body>
<!--
src:视频的路径
controls：控制面板
autoplay：自动播放
loop：循环播放
-->
<video src="/video/video.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>
</body>

视频标签目前支持三种格式：MP4、WebM、Ogg

4.链接标签

场景：点击之后，从一个页面跳转到另一个页面

称呼：a标签、超链接、锚链接

代码：

<body>
<!--
特点：
默认文字有下划线
没有点击过，默认为蓝色
点击之后就会变成紫色target属性：
_self:默认值，窗口中跳转，覆盖原来的网页
_black:在新窗口中实现跳转（保留原来的网页）
harf属性：
点击之后跳转去哪一个网页（目标网页的路径）
-->
<a href="https://www.baidu.com">外部链接</a>
<a href="7-音频标签.html" target="_self">超链接音频</a>
<a href="8-视频标签.html" target="_blank">超链接视频</a>
</body>

特点：

双标签，内部可以包裹内容

如果需要a标签点击之后去指定页面，需要设置a标签的href属性

空链接

代码：

<a href="#"></a>

功能：

点击之后回到网页顶部
开发中不确定该链接最终跳转位置，用空链接占个位置

三，综合案例

1.招聘案例

<body>
<h1>腾讯科技高级web前端开发岗位</h1>
<hr>
<h2>职位描述</h2>
<p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>
<h2>岗位要求</h2>
<p>5年以上前端开发经验，<strong>精通html5/css3/javascript等</strong>web开发技术；</p>
<p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；</p>
<p>代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；</p>
<p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p>
<p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p>
<p>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p>
<h2>工作地址</h2>
<p>上海市-徐汇区-腾云大厦</p><br>
<img src="../img/1.jpg" ">
</body>

2.今日热词

<body><h1>今日搜索热词</h1>
<hr>
<h2>1.阿卡贝拉</h2>
<p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例:<a href="阿卡贝拉《千与千寻》.html">阿卡贝拉《千与千寻》</a></p>
<h2>2.翻唱</h2>
<p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例：<a href="有一种悲伤（翻唱）-《A Kind of Sorrow》-Madilyn.html">有一种悲伤（翻唱）</a></p>
</body>

Java前端学习（Day 1）相关推荐

Java前端学习（一）JavaScript脚本语言基础
JavaScript脚本语言基础前言一.JavaScript简介 1.应用 2.特点 3.示例 4.补充二.语法基础 1.数据类型 2.表达式和运算符 3.流程控制语句 4.函数三.对话框 1 ...
前端开始学java_[Java教程]开启前端学习之路
[Java教程]开启前端学习之路 0 2014-06-10 17:00:06 前言第一次在博客园写博客,写写自己开启前端学习之路.应该是受邢师兄的影响吧,不得不说邢师兄人很好,学习也很认真,师兄的前 ...
初级java开发学习路线_成为初级全栈Web开发人员的10分钟路线图
初级java开发学习路线 So you have started your journey into the world of web development. But what do you lea ...
Java入门学习注意事项有哪些?
想要学好java技术,做好学习规划路线和注意事项是非常重要的,尤其是零基础学员,Java涉及到的知识点非常多,我们需要制定合理的Java学习路线图,这样会事半功倍,下面小编和大家总结一下Java入门学 ...
java培训学习阶段步骤讲解
目前的培训机构行业比较热门的IT技术就是java技术,java技术在近几年广受关注,java所涉及的技术知识也比较广泛,下面小编就为大家详细的介绍一下java培训学习多有哪几个阶段? java培训学习 ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
给初学者的一点建议，新手学习java需要学习哪些基础？
在编程的世界里,Java一直是企业级别开发最喜欢选择的编程语言,从java目前的就业形势来看还是相当不错的,由于手机安卓开发的需要,许多人也开始转战Java的学习,以我做开发6年的经验来看虽然java ...
python比前端好学吗_前端学习到底难不难？
难易程度是相对的,不是绝对的. 前端学习相对于java,python等肯定是更为简单的.精通会有难度,而且更新速度很快,需要不断的充实自己,提升自己,这也是一个难点. 前端学习初期,不知道该怎么学,学 ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...

Java前端学习（Day 1）

Java前端学习（Day 1）

HTML初识（基础认知+HTML标签）

一，基础认知

1.Web标准的构成

2.Web标准要求页面实现：

3.HTML的中文译名：

4.认识HTML

二，HTML标签学习

1.排版标签

1.1标题标签

1.2段落标签

1.3换行标签

1.4水平线标签

2.文本格式化标签

3.媒体标签

3.1图片标签

3.2路径标签

3.3音频标签

3.4视频标签

4.链接标签

空链接

三，综合案例

1.招聘案例

2.今日热词

Java前端学习（Day 1）相关推荐

最新文章

热门文章