HTML的简单介绍

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>|定义一个文章内容

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 前言 转自博客园 原文 一、简单介绍一下什么是浏览器内核。浏览器最重要或者说核心的部分是“Rendering En...
    吴晗君阅读 3,634评论 1 30
  • 关于 HTML 超文本标记语言(HyperText Markup Language,简称 HTML)是一种用于创建...
    _空空阅读 1,075评论 0 1
  • 1、HTML、XML、XHTML 有什么区别HTML是超文本标记语言(Hyper Text Markup Lang...
    feihang阅读 308评论 0 0
  • 什么是HTML? HTML指的是超文本标记语言 HTML不是一种编程语言,而是一种标记语言 标记语言是一套标记标签...
    Echolate阅读 438评论 0 1
  • 1、HTML、XML、XHTML 有什么区别 HTML是超文本标记语言(Hyper Text Markup Lan...
    imtns阅读 269评论 0 1