整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端HTML面试

. 【基础】请说出XHTML和HTML的区别?

1、文档顶部doctype声明不同,xhtml的doctype顶部声明中明确规定了xhtml DTD的写法。

2、html元素必须正确嵌套,不能乱。

3、属性必须是小写的。

4、属性值必须加引号。

5、标签必须有结束,单标签也应该用“/”来结束掉。

2. 【基础】写出以下几个HTML标签:加粗、下标、居中、字体?

加粗:<b>、<strong> 下标:<sub> 居中:<center> 字体:<font>、<basefont>

3. 【基础】网页验证码是干嘛的,是为了解决什么安全问题?

1、区分用户是计算机还是人的程序。

2、可以防止恶意破解密码、刷票、论坛灌水。

4. 【中级】简述一下src与href的区别?

1、src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。

2、src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位;href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接。

5. 【中级】<image>标签上title属性与alt属性的区别是什么?

在alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字。

6. 【中级】form标签上定义请求类型的是哪个属性?定义请求地址的是哪个属性?

form表单定义请求类型的是 method 属性,定义请求地址的是 action属性。

7. 【中级】iframe框架有那些优缺点?

优点:

1、iframe能够原封不动的把嵌入的网页展现出来。

2、如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。

3、网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。

4、如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

缺点:

1、搜索引擎的爬虫程序无法解读这种页面

2、框架结构中出现各种滚动条

3、使用框架结构时,保证设置正确的导航链接。

4、iframe页面会增加服务器的http请求。

8. 【高级】很多网站不常用table、iframe这两个元素,知道原因吗?

因为浏览器页面渲染的时候是从上至下的,而table和iframe 这两种元素会改变这样渲染规则,他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

9. 【高级】cookies,sessionStorage和localStorage的区别?

共同点:都是保存在浏览器端,且是同源的。

区别:

1、cookies是为了标识用户身份而存储在用户本地终端上的数据,始终在同源http请求中携带,即cookies在浏览器和服务器间来回传递,而sessionstorage和localstorage不会自动把数据发给服务器,仅在本地保存

2、存储大小的限制不同。cookie保存的数据很小,不能超过4k,而sessionstorage和localstorage保存的数据大,可达到5M。

3、数据的有效期不同。cookie在设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效,窗口和浏览器关闭也一直保存,用作长久数据保存。

4、作用域不同。cookie在所有的同源窗口都是共享;sessionstorage不在不同的浏览器共享,即使同一页面;localstorage在所有同源窗口都是共享。

10. 【高级】请用html知识解决seo优化问题?

1、meta标签,这个是重中之重

2、页面结构清晰,

3、logo,给logo图片添加h1标签、a链接连接到首页以及alt

4、img标签,img标签增加alt属性,这个logo的时候也提到了

5、h1~h6标签

6、前后端分离(vue、ajax)、flash不利于seo

7、增加外部链接。


PS:小弟不才,略知一二,欢迎大家关注、评论、转发。

行效果

效果图

技术要点

  • CSS选择器

选择器

用法

ID选择器

#mycalssName { }

类选择器

.mycalssName {}

标签选择器

div { }

相邻选择器

ul + li { }

子选择器

ul > li { }

后代选择器

li a { }

通配符选择器

*{}

属性选择器

a[title] {

color: green;}

伪 类选择器

a:hover { }

  • 浮动 float

- none: 默认值,不浮动,为常规流

- left: 靠上靠左排列

- right: 靠上靠右排列

注意浮动的不占有位置,造成坍塌,需要清除浮动,清除浮动的方法可以参考其它文章

源码

喜欢互联网的一点是在互联网放置静态页面是如此简单。今天有人问我该怎么做,所以我想我会快速地写下来!

-- Julia Evans(作者)

我喜欢互联网的一点是在互联网放置静态页面是如此简单。今天有人问我该怎么做,所以我想我会快速地写下来!

只是一个 HTML 页面

我的所有网站都只是静态 HTML 和 CSS。我的网页设计技巧相对不高( https://wizardzines.com 是我自己开发的最复杂的网站),因此保持我所有的网站相对简单意味着我可以做一些改变/修复,而不会花费大量时间。

因此,我们将在此文章中采用尽可能简单的方式 —— 只需一个 HTML 页面。

HTML 页面

我们要放在互联网上的网站只是一个名为 index.html 的文件。你可以在 https://github.com/jvns/website-example 找到它,它是一个 Github 仓库,其中只包含一个文件。

HTML 文件中包含一些 CSS,使其看起来不那么无聊,部分复制自 https://example.com 。

如何将 HTML 页面放在互联网上

有以下几步:

  1. 注册 Neocities 帐户
  2. 将 index.html 复制到你自己 neocities 站点的 index.html 中
  3. 完成

上面的 index.html 页面位于 julia-example-website.neocities.com 中,如果你查看源代码,你将看到它与 github 仓库中的 HTML 相同。

我认为这可能是将 HTML 页面放在互联网上的最简单的方法(这是一次回归 Geocities,它是我在 2003 年制作我的第一个网站的方式):)。我也喜欢 Neocities (像 glitch ,我也喜欢)它能实验、学习,并有乐趣。

其他选择

这绝不是唯一简单的方式,在你推送 Git 仓库时,Github pages 和 Gitlab pages 以及 Netlify 都将会自动发布站点,并且它们都非常易于使用(只需将它们连接到你的 GitHub 仓库即可)。我个人使用 Git 仓库的方式,因为 Git 不会让我感到紧张,我想知道我实际推送的页面发生了什么更改。但我想你如果第一次只想将 HTML/CSS 制作的站点放到互联网上,那么 Neocities 就是一个非常好的方法。

如果你不只是玩,而是要将网站用于真实用途,那么你或许会需要买一个域名,以便你将来可以更改托管服务提供商,但这有点不那么简单。

这是学习 HTML 的一个很好的起点

如果你熟悉在 Git 中编辑文件,同时想练习 HTML/CSS 的话,我认为将它放在网站中是一个有趣的方式!我真的很喜欢它的简单性 —— 实际上这只有一个文件,所以没有其他花哨的东西需要去理解。

还有很多方法可以复杂化/扩展它,比如这个博客实际上是用 Hugo 生成的,它生成了一堆 HTML 文件并放在网络中,但从基础开始总是不错的。


via: https://jvns.ca/blog/2019/09/06/how-to-put-an-html-page-on-the-internet/

作者: Julia Evans 选题: lujun9972 译者: geekpi 校对: wxy

本文由 LCTT 原创编译, Linux中国 荣誉推出

点击“了解更多”可访问文内链接