前端从入门到精通（记录自己的前端学习之路）都是一些自己做的笔记

最新推荐文章于 2024-05-09 02:49:02 发布

曦子n初九

最新推荐文章于 2024-05-09 02:49:02 发布

阅读量714

点赞数 2

分类专栏：前端文章标签：前端 html5 css javascript

本文链接：https://blog.csdn.net/a2811908732/article/details/119718738

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、网页界面的基础认知

①网页由哪些组成：音频、视频、超链接、图片、文字

②我们看到的网页背后的本质是：（右击查看网页源代码）前端程序员写的代码

③前端的代码是通过什么软件转换成用户眼中的页面的：通过浏览器转化（解析和渲染）成用户看到的网页

④常见的五大浏览器：IE，火狐（Firefox），谷歌（Chrome），Safari浏览器（苹果系统自带的），欧朋（opera）

渲染引擎不同（浏览器内核）：浏览器中专门对代码进行解析渲染的部分

⑤web标准：结构：HTML（页面元素），表现：CSS（页面样式），行为：JavaScript（页面交互的动态效果）

二、HTML

2.1HTML的概念

①HTML中文译名：超文本标记语言

②网页的建立：文本文档txt改后缀为html变网页

③HTML通过HTML标签编写相应的网页界面

2.2HTML的骨架结构标签

<html>

    <head>

<title>网页的标题</title>

    </head>

<body>

    网页的主体内容

</body>

</html>

2.3编写HTML的软件安装

2.3.1使用vscode软件

优点：体积小，打开速度快，插件多，联想功能好用

安装链接：Download Visual Studio Code - Mac, Linux, Windows

安装好vscode后安装两个插件：①Chinese，②open in browser（方便直接在浏览器打开）

如图：我这个是已经汉化了的，按图步骤搜索这两个插件，图片只展示了Chinese怎么安装，open in browser插件安装同理。

2.3.2 vs code的基本快捷键（非常好用）

①快速生成标签：英文＋tab键

②保存文件：ctrl+s，点击文件勾选自动保存免得忘记保存

③快速查看网页效果：右击→Open in Default Browser（必须安装了open in browser插件）

快捷键：alt+b

④快速生成结构标签：!+tab（!必须是英文，必须保证文件名后缀为html）

⑤注释快捷键：Ctrl+/

2.4标签的构成

常见的标签由两部分构成，称为双标签，少数标签由一部分构成，称为单标签

2.5HTML标签的属性

①标签上可以同时存在多个属性

②标签与属性，属性与属性之间以空格隔开

  <a href=""></a>

            <img src="" alt="">

2.6HTML标签间的关系

①父子关系：

<head>

        <title>

        </title>

    </head>

②兄弟关系：

        <title>

        </title>

</head>

        <body>

        </body>

2.7HTML标签的学习

排版标签

1.1标题标签

<body>

    <!-- 特点见网页页面情况 -->

    <h1>1级标题</h1>  

    <!-- h1标签开发中用于特定场景，如:新闻稿的标题，网页的logo部分 -->

    <h2>2级标题</h2>

    <h3>3级标题</h3>

    <h4>4级标题</h4>

    <h5>5级标题</h5>

    <h6>6级标题</h6>

</body>

1.2段落标签

<body>

    <!-- 段落之间存在间隙，独占一行 -->

    <h1>前端开发</h1>

    <p>前端开发是创建web......</p>

    <p>前端开发从网页......</p>

    <p>前端开发跟随移动互联网......</p>
</body>

1.3换行标签

<br>（在哪个内容的结尾处加这个标签，结尾处开始强制换行）

1.4水平线标签<hr>

曦子n初九

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
前端从入门到精通（记录自己的前端学习之路）都是一些自己做的笔记

一、网页界面的基础认知①网页由哪些组成：音频、视频、超链接、图片、文字②我们看到的网页背后的本质是：（右击查看网页源代码）前端程序员写的代码③前端的代码是通过什么软件转换成用户眼中的页面的：通过浏览器转化（解析和渲染）成用户看到的网页④常见的五大浏览器：IE，火狐（Firefox），谷歌（Chrome），Safari浏览器（苹果系统自带的），欧朋（opera）渲染引擎不同（浏览器内核）：浏览器中专门对代码进行解析渲染的部分⑤web标准：结构：HTML（页面元素），表现：CSS（页面样
复制链接

扫一扫