首页 前端知识 01-HTML认知

01-HTML认知

2024-08-14 22:08:07 前端知识 前端哥 497 4 我要收藏

01-HTML认知

基础认知

网页由文字、图片、音频、视频、超链接组成。

我们看到的网页本质是前端代码经过浏览器转换(解析和渲染)后的样子

五大浏览器

浏览器是网页显示、运行的平台,是前端必备的软件

常见的浏览器主要有:

  • IE浏览器
  • 火狐浏览器(Firefox)
  • 谷歌浏览器(Chrome)
  • Safari浏览器
  • 欧朋浏览器(Opera)

当前大部分IE浏览器已经升级为Edge浏览器

渲染引擎

不同公司出品的浏览器有不同的浏览器内核,浏览器内核即浏览器中专门用于对代码进行解析渲染的部分

在这里插入图片描述

注意:

  • 渲染引擎不同,导致解析相同代码时的速度、性能和效果也不同
  • 谷歌浏览器的渲染引擎速度快、性能高、效果好,所以更吸引用户的喜爱

Web标准

为了让不同的浏览器对同一代码有相同的展示效果,因此制定了Web相关标准,同一展示效果

image-20240722205315851

Web标准的实现要求为:结构、表现、行为三层分离,由HTML搭建页面结构、CSS渲染页面样式,JavaScript完善页面动态交互效果。

HTML概念

HTML(Hyper Text Markup Language)中文译为:超文本标记语言,专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

搭建网页基本步骤

  1. 创建文本文档

    之所以是文本文档,是因为该文档没有文件头、文件尾之类的结构,可以直接编写代码

    在这里插入图片描述

  2. 输入代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01-加粗文本</title>
    </head>
    <body>
        <strong>Hello World</strong>
    </body>
    </html>
    
  3. 修改后缀名为.html

在这里插入图片描述

**注意:**若看不到文件扩展名,则随便选一个文件夹勾选上文件扩展名选项

在这里插入图片描述

  1. 打开该文件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

HTML骨架结构

HTML有一定的固定结构,这些固定结构通过特定的HTML标签进行描述

HTML骨架结构如下:

  • html标签—网页的整体
  • head标签—网页的头部
  • body标签—网页的身体
  • title标签—网页的标题

开发工具的使用

常用的前端开发工具主要有VScode、WebStrom和HBuildX

VScode安装教程参考博客:https://blog.csdn.net/msdcp/article/details/127033151

WebStrom安装教程参考博客:https://blog.csdn.net/qq_17584941/article/details/123497141

HBuild安装教程参考博客:https://blog.csdn.net/leah126/article/details/131443818

本人博客编写用的是WebStrom,后续代码截图基本上都来自于WebStrom

HTML标签学习

HTML注释

注释是程序员为了方便代码理解,添加在代码中,给自己或其他程序员看的内容

注释可以使得代码更具解释性,浏览器执行代码时会忽略所有注释

WebStrom注释快捷键:Ctrl + /

HTML标签的构成

标签结构图:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • HTML标签由<、>、/、英文单词或字母组成,并且<>包裹起来的英文单词或字母称为标签名
  • 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
  • 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容

HTML标签的关系

HTML标签的关系主要分为两种:

  • 父子关系

    <父标签>
        <子标签></子标签>    
    </父标签>
    
  • 兄弟关系

    <兄弟标签1></兄弟标签1>
    <兄弟标签2></兄弟标签2>
    

排版标签

标题标签

HTML中一共有六级标题,重要程度一次递减

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

六级标签文字都存在加粗,并且从1到6,文字大小逐渐减小

h1标签对于网页尤为重要,开发中存在特定的使用场景

HTML有一个特点,那就是“是什么,就是什么”,即标题就是标题,段落就是段落

段落标签

段落标签在新闻和文章的页面中,用于分段显示。段落之间存在间隙,并且段落独占一行

<p>
    我是一段文字
</p>

换行标签

让文字强制换行显示,单标签,让文字强制换行。

换行<br/>

水平线标签

水平线是一条用于分割不同主题内容的水平线,单标签,在页面中显示为水平线

这是一条水平线
<hr/>

文本格式化标签

文本格式化标签主要用于文字的加粗、下划线、倾斜和删除等效果,突出重要性的强调语境

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在实际项目开发中,有一个重要的原则,即:标签语义化。因此相比于<b/><u/>之类的标签,我们更推荐使用<strong/><ins/>之类的标签

媒体标签

图片标签

在网页中显示图片,单标签,img标签对标签的属性进行设置,其中src是图片的路径、alt是图片加载失败时的替换文本。

<img src="" alt="">

还可以设置widthheight属性,来限制图片的宽度和高度

如果只设置一个,则另一个没设置的会进行自动等比例缩放

如果同时设置两个,图片可能会变形

图片属性总结

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

路径

路径主要分为绝对路径和相对路径,在实际开发中,我们尽量使用相对路径,而不使用绝对路径,因为项目的地址很有可能会进行移动。

绝对路径指的是目录下的绝对位置,可直接到达目标位置,通常是从盘符开始的路径,例如::D:\day01\images\1.jpg

相对路径是从当前文件开始出发找目标文件的过程

  • ./文件1—当前文件夹下的文件1
  • ../文件2—上一个文件夹下的文件2
  • ../文件夹1/文件3—上一层文件夹下的文件夹1下的文件3

音频标签

可以采用音频标签在页面中插入音频

<audio src=""></audio>

**注意:**目前音频只支持三种格式:MP3、Wav和Ogg

音频常用标签如下

在这里插入图片描述

视频标签

可以用视频标签在页面中插入视频

<video src=""></video>

**注意:**视频标签目前支持三种格式:MP4、WebM、Ogg

视频标签常用属性如下

在这里插入图片描述

链接标签

可以使用链接标签点击跳转到另一个页面,双标签内部可以包裹内容;如果需要a标签点击之后去指定页面,需要设置a标签的href属性

<a href=""></a>

a标签可以通过target的不同属性确定值

在这里插入图片描述

综合案例

案例一:招聘页面

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

案例二:今日热词

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>今日热词案例</title>
    </head>
    <body>
        <h1>今日搜索热词</h1>
        <hr>
        <h2>1、阿卡贝拉</h2>
        <p>
            阿卡贝拉(意大利:Acappella)即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例:
            <a href="./03-music.html" target="_blank">阿卡贝拉《千与千寻》</a>
        </p>
        <h2>2、翻唱</h2>
        <p>
            “翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱,包括重新填词,编曲。现在已有不少明星,都在翻唱他人的歌,不断在翻唱中突破自己,给大家带
            来不一样的风格。视频示例:
            <a href="./03-video.html" target="_blank">有一种悲伤(翻唱)-《A Kind of Sorrow》</a>
        </p>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>阿卡贝拉《千与千寻》-AZA微唱团</title>
    </head>
    <body>
        <h1>阿卡贝拉《千与千寻》-AZA微唱团</h1>
        <hr>
        <h2>音频</h2>
        <audio src="./img/music.mp3" controls loop></audio>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>有一种悲伤(翻唱)-《A Kind of Sorrow》-Madilyn</h1>
        <hr>
        <h2>视频</h2>
        <video src="./img/video.mp4" controls autoplay></video>
    </body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在这里插入图片描述

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15605.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!