Java前端学习（Day 1）

最新推荐文章于 2024-07-20 18:16:53 发布

照我满怀霜雪.

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量167

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/weixin_69314119/article/details/127873341

版权

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>