2025.2.17 认识网站

网页由哪些部分组成？

文字、图片、音频、视频、超链接

我们看到的网页背后本质是什么？

前端程序员写的代码

前端的代码是通过什么软件转换成用户眼中的页面的？

通过浏览器转化（解析和渲染）成用户看到的网页

五大浏览器有哪些？

IE浏览器

火狐浏览器（Firefox）

谷歌浏览器（Chrome）

Safari浏览器

欧朋浏览器（Opera）

相同的网页在不同浏览器中显示效果会完全一致吗?

因为不同浏览器渲染引擎不同，解析的效果会存在差异

前端工程师日常推荐使用哪一个浏览器？

谷歌浏览器（Chrome）

Web标准中分成三个构成：

Web标准要求页面实现：结构、表现、行为三层分离

结构：HTML（决定了身体）

表现：CSS（决定了样式美观）

行为：JavaScript（决定了交互的动态效果）

HTML（Hyper Text Markup Language）中文译为：超文本标记语言

专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

HTML骨架结构由哪些标签组成？

html标签：网页的整体

head标签：网页的头部

body标签：网页的身体

title标签：网页的标题

head存放给浏览器的代码，像css。body存放给用户的代码，如图片，文字。

在vscode中，！+enter/tab 可以快速生成骨架

vscode的默认注释的快捷键是？

Ctrl + /（添加删除都是这个）

注释的模板是<!–这是内容–>

HTML标签的结构

常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

结束标签比开始标签多一个/

html的各种标签

标题

共有六种，<h1~h6>，一般h1存放主标题，用一次。<h1></h1>….

段落

<p></p>

换行和水平线标签

换行：<br>，水平线：<hr>

文本格式化标签

图像标签

<img src=”图像的URL”> alt=”文本” titile=”文本”，输入./可以索引图片位置。

路径

超链接

前面是网站地址，后面是用户能看见的文字

可以添加属性在<>内，target = “_blank”，可以跳转到新页面

可以写 #来保留超链接

<a href="#">空链接, 不知道跳到哪里去</a>

音频标签

<audio src="音频的URL"></audio>

2025.2.17 认识列表，表格，表单

列表，分无序，有序，定义。

无序列表

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ...
</ul>

有序列表

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
…
</ol>

定义列表

<dl>
<dt>第一项</dt>
<dt>第二项</dt>
<dt>第三项</dt>
…
</dl>

表格

表单

<input type=”…” placeholder=”提示信息”>

可以添加placeholder属性添加提示文本

radio属性

上传文件

多选框

下拉菜单

文本域

<textarea>默认提示文字</textarea>

能够输入多行文本

label标签

能增加点击范围

按钮

<button type =””>按钮</button>

布局标签

div：独占一行，span：不换行，这两个作用就是划分网页区域

字符实体

2025.2.18 认识CSS

CSS是叠层样式表，用来描述HTML等文档的呈现形式，描述了在媒体上的元素该如何被渲染。

引入方式

类选择器

一个标签可以使用多个类名，class属性值可以写多个类名