HTML基础问题

发表于 | 分类于 ，

HTML基础问题

1. 常见浏览器有哪些？哪些内核？

1. Trident内核代表产品Internet Explorer，又称其为IE内核。

Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

2. Gecko内核代表作品Mozilla Firefox

Gecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

3. WebKit内核代表作品Safari、Chrome

webkit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

4. Presto内核代表作品Opera

Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

2. doctype有什么作用？怎么写？

作用

doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。假如文档中的标记不遵循doctype声明所指定的DTD，这个文档除了不能通过代码校验之外，还有可能无法在浏览器中正确显示。总得来说，主要作用为：

  • 约定浏览器使用什么版本的html解析页面。
  • 约定浏览器使用哪种模式渲染页面。

写法

不同的版本有不同的写法，常用的有HTML5：<!DOCTYPE html>，

HTML 4.01：Strict（严格模式）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[http://www.w3.org/TR/html4/strict.dtd">](http://www.w3.org/TR/html4/strict.dtd%22%3E)

Transitional （过渡模式） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""[http://www.w3.org/TR/html4/loose.dtd">](http://www.w3.org/TR/html4/loose.dtd%22%3E)

Frameset （框架集）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""[http://www.w3.org/TR/html4/frameset.dtd">](http://www.w3.org/TR/html4/frameset.dtd%22%3E)

3. 页面出现了乱码，是怎么回事？如何解决？

原因

没有使用正确的字符编码。

如何解决

开发网页时，加入meta charset编码标签， 使浏览器和网页源码编码格式相同 <meta charset="UTF-8">。

4. meta 有哪些常见的值？

标签位于 head 元素内部。

普通设备

  • charset：此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。
  • content：基于内容，这个属性为 http-equiv或 name 属性提供了与其相关的值的定义.
  • http-equiv：这个枚举属性定义了能改变服务器和用户引擎行为的编译。
属性(必须) 值 描述
content some text 定义与http-equiv或name属性相关的元信息
属性 值 描述
http-equiv content-type / expire / refresh / set-cookie 把content属性关联到HTTP头部
name author / description / keywords / generator / revised / others 把 content 属性关联到一个名称
content some text 定义用于翻译 content 属性值的格式 
1
2
3
4
<meta name="keywords" content="your tags" /> 页面关键词
<meta name="description" content="150 words" /> 页面描述 150个字
<meta name="author" content="author name" /> 定义网页作者
<meta charset='utf-8' /> 申明编码

移动设备

  • viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。
  • 参数：
    width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
    height：高度（数值 / device-height）（范围从223 到10,000）
    initial-scale：初始的缩放比例 （范围从>0 到10）
    minimum-scale：允许用户缩放到的最小比例
    maximum-scale：允许用户缩放到的最大比例
    user-scalable：用户是否可以手动缩 (no,yes)
    注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

详情参见MDN文档。

5. 列出常见的标签，并简单介绍这些标签用在什么场景。

<html> 标签 是 HTML 页面的根元素；
<body>标签 包含页面的主体内容；
<head> 标签 包含了文档的元（meta）数据；
<meta>标签 提供了元数据.元数据也不显示在页面上，被浏览器解析；
<link> 标签 定义了文档与外部资源之间的关系。通常用于链接到样式表；
<style> 标签 定义了HTML文档的样式文件引用地址，在<style> 元素中可直接添加样式来渲染 HTML 文档；
<script>标签 用于加载脚本文件，如： JavaScript；
<title> 标签 描述了文档的标题；
<h1>~<h6>标签 定义了一级标题到六级标题，标题字体大小逐渐减弱；
<p> 标签 定义一个段落；
<a>标签 是网页链接。通过href属性，来指定链接地址。通过target属性，来指定链接页面打开的方式。通过title，来指定鼠标移到标签上时出现的文字提示；
<image>标签 定义html图像。可通过width和heigth属性来指定图像的大小；
<div> 元素 是块级元素，它可用于组合其他 HTML 元素的容器,没有特定的含义。它属于块级元素，浏览器会在其前后显示折行；
<span> 元素 是内联元素，也没有特定的含义，可用作文本的容器；
<ol><li>标签 有序列表始于 标签。每个列表项始于 标签。列表项目会使用数字进行标记；
<ul><li>标签 无序列表，列表项目会使用粗体圆点（典型的小黑圆圈）进行标记；
<table>标签 定义表格；
<tr>标签 定义表格的行；
<td> 标签 定义表格每行的列；
<th> 定义表格的表头；
<tbody> 定义表格的主体；
<tfoot> 定义表格的页脚 ；
<iframe>标签 用于在当前页面嵌入新页面；
<strong>标签 定义重要的文本；
<em>标签 定义被强调的文本。

6. title 属性和 alt属性分别有什么作用？

title属性为设置该属性的元素提供额外说明信息；title属性可以为链接添加描述性文字，特别是当链接本身并不是十分清楚的表达了链接的目的。

alt属性只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。