Web 前端基础—— Http 和CSS 学习笔记

发布于:2024-04-26 ⋅ 阅读:(30) ⋅ 点赞:(0)

HTML

1、 对HTML语义化的理解

语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化)。通俗来讲就是用 正确的标签做正确的事情。

语义化的优点如下:

对机器友好,带有语义的文字表现力丰富,更适合搜索引擎的爬虫爬取有效信息,有利于SEO。除 此之外,语义类还支持读屏软件,根据文章可以自动生成目录;

对开发者友好,使用语义类标签增强了可读性,结构更加清晰,开发者能清晰的看出网页的结构, 便于团队的开发与维护。

常见的语义化标签:

<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块(有语义化的div)
<main></main> 主要区域
<article></article> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部

2、html document是干嘛的?

HTML即:超文本标记语言,标准通用标记语言的一个应用,“超文本”就是指页面内可以包含图 片、链接、甚至音乐、程序等非文字元素。

HTML Document即:HTML Document对象,每个载入浏览器的HTML文档都会成为Document 对象

由于Document对象是window对象的一部分,所以可通过window.document属性对其进行访 问。

3、DOCTYPE有什么作用

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文 档以混杂模式呈现。

4、什么是严格模式与混杂模式?

严格模式:是以浏览器支持的最高标准运行

混杂模式:页面以宽松向下兼容的方式显示,模拟老式浏览器的行为

5、head 标签有什么作用,其中什么标签必不可少?

head标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器 在哪里找到样式表、提供元信息等。

文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的 关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, <title> 。

其中定义文档的标题,它是 head 部分中唯一必需的元素。

6、什么是WEB标准?什么是W3C标准?

Web标准不是某一个标准,而是一系列标准的集合

web标准简单来说可以分为结构、表现和行为 :

  • 结构 主要是有HTML标签组成
  • 表现 即指css样式表
  • 行为 主要是有js、dom组成

web标准一般是将该三部分独立分开,使其更具有模块化。但一般产生行为时,就会有结构或者表 现的变化,也使这三者的界限并不那么清晰。

W3C对于WEB标准提出了规范化的要求

  • 1)标签和属性名字母要小写
  • 2)标签要闭合
  • 3)标签不允许随意嵌套
  • 4)尽量使用外链css样式表和js脚本。让结构、表现和行为分为三块,符合规范。同时提高页面渲 染速度,提高用户的体验。
  • 5)样式尽量少用行间样式表,使结构与表现分离
  • 6)标签的id和class等属性命名要做到见文知义,更利于seo,代码便于维护

7、HTML 的注释怎样写?

HTML 中的注释也叫"注释标签"。

“<- -” ,表示注释的开始,"- ->" 表示注释的结束。

8、src和href的区别?

src和href都是用来引用外部的资源,它们的区别如下:

  • src: 表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下 载并应⽤到⽂档内,如请求js脚本。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直 到将该资源加载、编译、执⾏完毕,所以⼀般js脚本会放在页面底部。
  • href: 表示超文本引用,它指向一些网络资源,建立和当前元素或本文档的链接关系。当浏览器 识别到它他指向的⽂件时,就会并⾏下载资源,不会停⽌对当前⽂档的处理。 常用在a、link等标 签上。

9、常见的块标签和内联标签以及内联块标签的区别? 空(void)元素有那些?

块级标签:单独占一行,可以设置宽高等样式h1 h2 h3 h4 h5 h6 p div ul li ol dl dt dd

内联标签(行内标签)在同一行显示,不可以设置宽度,宽高由内容撑开strong b em i span 空元素,即没有内容的HTML元素。空元素是在开始标签中关闭的,也就是空元素没有闭合标签:

常见的有:<br> 、 <hr> 、 <img> 、 <input> 、 <link> 、 <meta> ;

10、 title与h1的区别、b与strong的区别、i与em的区别?

  • strong标签有语义,是起到加重语气的效果,而b标签是没有的,b标签只是一个简单加粗标签。b 标签之间的字符都设为粗体,strong标签加强字符的语气都是通过粗体来实现的,而搜索引擎更 侧重strong标签。
  • title属性没有明确意义只表示是个标题,H1则表示层次明确的标题,对页面信息的抓取有很大的 影响 i内容展示为斜体,em表示强调的文本。

11、 label 的作用是什么?如何使用?

label标签来定义表单控件的关系:当用户选择label标签时,浏览器会自动将焦点转到和label标签 相关的表单控件上。

使用方法1:

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

使用方法2:

<label>Date:<input type="text"/></label>

12、如何合并表格单元格

rowspan="2"表示从设置的td单元格开始向下合并两个单元格

colspan="2"表示自左向右合并两个单元格。

Thead,tbody,tfoot的作用

thead 表格的头 用来放标题之类的东西

tbody 表格的身体 放数据本体

tfoot 表格的脚 放表格的脚注之类

13、标签上title属性与alt属性的区别是什么?

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文 字符或者用户必须保证替换文字尽可能的短。

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使 用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

14、标签应该如何合理嵌套?

合理嵌套HTML标签,ul和li是固定嵌套,ul的直接子元素必须是li标签,ol和li是固定嵌套,ol的直 接子元素必须是li。Dl,dt,dd是固定嵌套,dl的直接子元素必须是dt和dd,dt和dd是兄弟元素。

块标签可以套其他的标签,但是p标签除外,p标签不能嵌套其他的块标签,内联标签不能嵌套块 标签(a标签特殊),a标签不允许嵌套a标签和其他有交互作用的标签。块级元素与块级元素并列、 内嵌元素与内嵌元素并列。 

15、png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp?

1. png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.

        优点是:压缩比高,色彩好。 大多数地方都可以用。

2. jpg是