HTML、XML、XHTML 有什么区别?
HTML: HTML是一种用于创建网页的语言,中文叫超文本标记语言,英文是HyperText Markup Language,简称:HTML。HTML不是编程语言,它使用标记标签来描述网页。列如:<h1></h1>
就是代表一级标题的标签。
XML: XML可扩展标记语言(EXtensible Markup Language),也是一种标记语言,但是XML与HTML作用不同,XML是用于传输和携带数据,不是用于展示数据。所以XML用途的主要是它说明数据是什么,以及携带数据信息。XML的标签没有被定义,需要自己定义标签。
XHTML: 可扩展超文本标记语言(英语:eXtensible HyperText Markup Language,XHTML),是一种标记语言,与 HTML 4.01 几乎是相同,但是语法上更为严格,从继承关系上讲,HTML是一种基于标准通用标记语言(SGML)的应用,是一种非常灵活的置标语言,而XHTML则基于可扩展标记语言(XML),XML是SGML的一个子集。HTML语法要求比较松散,机器不好处理,所以定义更为严格的XHTML。
怎样理解 HTML 语义化?
语义化是指根据内容的结构选择合适的标签,语义化不仅方便开发者阅读代码,也利于浏览器的爬虫和机器解析标签。语义化有以下几个好处:
1.有利于阅读代码
2.有利于seo(搜尋引擎最佳化),有助于爬虫抓取到更多的有利信息。
3.语义化的html没有css样式也可以很好的理解代码。
4.便于开发和维护。
怎样理解内容与样式分离的原则?
一个完整的网页主要由三部分组成,html控制网页的结构,css控制网页的样式,javascript控制网页的行为,内容与样式分离是指将网页的编码结构与样式分开,在写网页之初,先不考虑样式,先把网页结构写出来,让html可以体现网页的内容和结构,再用css设置网页的样式,最后用js控制网页的行为
内容与样式分离的好处:
1.便于维护,当网页的某些样式需要修改的时候不用动页面的结构,可以在css中修改,也减少后台开发人员的工作量。
2.方便JavaScript脚本编写,用js控制标签的className来动态的改变元素的样式,而不是直接修改其具体样式。
3.一个css文件可以用在多个不同的页面,重用率高。
4.使网页更小,加载速度快。
有哪些常见的meta标签?
网页相关的
1.申明编码
<meta charset='utf-8' />
2.优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
3.浏览器内核控制
国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。 而添加meta标签的网站可以控制浏览器选择何种内核渲染。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
4.禁止浏览器从本地计算机的缓存中访问页面内容
<meta http-equiv="Pragma" content="no-cache">
用于SEO优化
1.页面关键词
每个网页应具有描述该网页内容的一组唯一的关键字
<meta name="keywords" content="your tags" />
2.设置搜索引擎索引方式
<meta name="robots" content="index,follow" />
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索;
nofollow:页面上的链接不可以被查询。
移动设备
1.viewport
viewport能优化移动浏览器的显示
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
2.WebApp全屏模式
启用全屏模式, 伪装app,离线应用
<meta name="apple-mobile-web-app-capable" content="yes" />
3.隐藏状态栏/设置状态栏颜色
只有在开启WebApp全屏模式时才生效。 content的值为default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
4.添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题">
5.忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />
6.忽略识别邮箱
<meta content="email=no" name="format-detection" />
7.针对不识别Viewport的手持设备进行优化
<meta name="HandheldFriendly" content="true">
8.添加智能 App 广告条 Smart App Banner
告诉浏览器这个网站对应的app,并在页面上显示下载banner
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
文档声明的作用
DOCTYPE是document type(文档类型)的简写,告知浏览器以何种模式来渲染文档。 在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。
混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。
<!doctype html> 的作用
html5标准网页声明,支持html5标准的主流浏览器都认识这个声明。表示网页采用html5
浏览器乱码的原因是什么?如何解决
1、比如网页源代码是gbk的编码,而内容中的中文字是utf-8编码的,这样浏览器打开即会出现html乱码。反之网页是编码utf-8,内容是gbk也会出现乱码。
2、html网页编码是gbk,而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3、浏览器不能自动检测网页编码,造成网页乱码。
解决办法
1.写网页的时候要开头统一规范下编码格式。常见的编码有utf-8,gbk,gb2312.
2.根据自己的编码格式,在html头部添加编码格式来规定网页的编码。
如果用utf-8就把charset写成utf-8,如果是别的编码,就对应把charset写成跟自己编码格式一样的。
常见的浏览器有哪些,什么内核
一.Trident内核
Trident(又称为MSHTML),是微软的Windows系统搭载的网页浏览器—Internet Explorer的排版引擎的名称,它的第一个版本随着1997年10月Internet Explorer第四版释出,之后不断的加入新的技术并随着新版本的Internet Explorer释出。在Internet Explorer第七版中,微软对Trident排版引擎做了的重大的变动,除了加入新的技术之外,并增加对网页标准的支持。
常见 Trident 内核浏览器:
Internet Explorer 8 , Internet Explorer 9, Internet Explorer 10,
和360安全浏览器。
二:Webkit、Chromium内核
Chromium是一个由Google主导开发的网页浏览器,以BSD许可证等多重自由版权发行并开放源代码。Chromium的开发可能早自2006年即开始[1],设计思想基于简单、高速、稳定、安全等理念,在架构上使用了苹果发展出来的WebKit排版引擎、Safari的部份源代码与Firefox的成果,并采用Google独家开发出的V8引擎以提升解译JavaScript的效率,而且设计了“沙盒”、“黑名单”、“无痕浏览”等功能来实现稳定与安全的网页浏览环境.
而Webkit浏览器引擎是苹果公司的开源项目,苹果的Safari浏览器就是基于Webkit开发的。
常见基于Chromium的单核浏览器
Chrome 浏览器
常见基于 Webkit 的浏览器
Safari浏览器,Opera 15 浏览器
国内Trident与Chromium双核浏览器
搜狗浏览器下载, 360极速浏览器,QQ浏览器,猎豹浏览器,UC浏览器电脑版
三:Gecko内核
常见 Gecko 内核浏览器
Mozilla Firefox 浏览器
四:Presto内核
Presto是一个由Opera Software开发的浏览器排版引擎,供Opera7.0及以后版使用。Presto取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版
浏览器
Opera 浏览器
列出常见的标签,并简单介绍这些标签用在什么场景
标签 | 使用场景|
-|
基础|
<title>
| 为文档定义一个标题
<h1>to<h6>
|定义 HTML 标题
<p>
|定义一个段落
<br>
|换行
<hr>
|水平线
格式|
<b>
|定义粗体
<em>
|强调文本
<del>
|定义被删除文本
<i>
|定义斜体文本。
<s>
|定义加删除线的文本。
<small>
|定义小号文本。
<strong>
|定义语气更为强烈的强调文本
<var>
|定义文本的变量部分。
表单|
<from>
|定义一个 HTML 表单,用于用户输入。
<input>
|定义一个输入控件
<textarea>
|定义多行的文本输入控件
<button>
|定义按钮
<select>
|定义选择列表(下拉列表)。
<option>
|定义选择列表中的选项。
<label>
|定义 input 元素的标注。
图像|
<img>
|定义图像
<area>
|定义图像地图内部的区域。
Audio/Video|
<audio>
|定义声音,比如音乐或其他音频流。
video
|定义一个音频或者视频
链接|
<a>
|定义一个链接
<link>
|定义文档与外部资源的关系。
<nav>
|定义导航链接(新元素)
列表|
<ul>
|定义一个无序列表
<ol>
|定义一个有序列表
<li>
|定义一个列表项
<dl>
|定义一个定义列表
<dd>
|定义定义列表中项目的描述。
<dt>
|定义一个定义定义列表中的项目。
表格|
<table>
|定义一个表格
<caption>
|定义表格标题
<th>
|定义表格中的表头单元格
<tr>
|定义表格中的行
<td>
|定义表格中的单元
<thead>
|定义表格中的表头内容
<tbody>
|定义表格中的主体内容
<tfoot>
|定义表格中的表注内容(脚注)。
<col>
|定义表格中一个或多个列的属性值
<colgroup>
|定义表格中供格式化的列组
样式/节|
<div>
|定义文档中的节
<span>
|定义文档中的节。
<header>
|定义一个文档头部部分
<footer>
|定义一个文档底部
<section>
|定义了文档的某个区域
<article>
|定义一个文章内容