任务四-课程任务

作者: 饥人谷_我已经是一条咸鱼了 | 来源:发表于2017-09-28 16:01 被阅读0次

HTML、XML和XHTML有什么区别？

HTML: Hypertext Markup Language，超文本标记语言，简称HTML，是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、Javascript一起被众多网站用于设计令人伤心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。

<html>
  <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
  </body>
</html>

XML: Extensible Markup Language，指可扩展标记语言，是一种标记语言，很类似 HTML，其设计宗旨是传输数据，而非显示数据，其标签没有被预定义，需要自行定义标签，被设计为具有自我描述性。它仅仅是纯文本，不会做任何事情，不是对HTML的替代，而是独立于软件和硬件的信息传输工具。

<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

XHTML：Extensible Hypertext Markup Language，指可扩展超文本标签语言，其目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，是更严格更纯净的 HTML 版本，XHTML 是作为一种 XML 应用被重新定义的 HTML。

HTML	XML
	不是 HTML 的替代
显示数据，其焦点是数据的外观，旨在显示信息	传输和存储数据，其焦点是数据的内容，旨在传输信息

HTML	XHTML
元素可以彼此不正确的嵌套	元素必须被正确地嵌套
可以不被关闭	元素必须被关闭
大小写混用也可以	标签名必须用小写字母
不一定	XHTML 文档必须拥有根元素

怎样理解 HTML 语义化

语义化HTML是一种编写HTML的方式，选择合理的标签，使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好的解析
网络爬虫：又称网络蜘蛛、网络机器人，是一种搜索引擎用于自动抓取网页资源的程序或者说叫机器人。从某一个网址为起点，去访问，然后把网页存回到数据库中，如此不断循环，一般认为搜索引擎爬虫都是靠链接爬行的，所以管他叫爬虫。这个只有开发搜索引擎才会用到。对于网站而言，只要有链接指向我们的网页，爬虫就会自动提取我们的网页

怎样理解内容与样式分离的原则

HTML结构层是网页最重要的基础。HTML标签给予内容含义。CSS表现层则是定义您的HTML该如何显示。JavaScript行为层为页面增加交互。
写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能体现页面结构或者内容，之后再去写样式。HTML内不允许出出现属性样式，尽量不要出现行内样式
写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化
最好单独管理好每一层
Bad

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="author" content="http://www.softwhy.com/" />
  <title>蚂蚁部落</title>
</head> 
<body> 
  <div style="width:200px;">
    <font color="red">好好学习</font>
  </div> 
</body> 
</html>

Good

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="author" content="http://www.softwhy.com/" />
  <title>蚂蚁部落</title>
  <style type="text/css"> 
    div 
    { 
      width:200px; 
      color:red; 
    }  
  </style> 
</head> 
<body> 
  <div>好好学习</div> 
</body> 
</html>

有哪些常见的meta标签？

标签	用途
<meta name="keywords" content="">	向搜索引擎说明你的网页的关键词
<meta name="description" content="">	告诉搜索引擎你的站点的主要内容
<meta name="author" content="你的姓名">	告诉搜索引擎你的站点的制作的作者
<meta name="google" content="">	告诉引擎搜索方式*
<meta http-equiv="Content-Type" content="text/html";charset=utf-8">	指定字符集
<meta http-equiv="refresh" content="n;url=">	定时让网页在指定的时间n内跳转
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT">	可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
<meta http-equiv="pragma" content="no-cache">	禁用缓存
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">	cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式
关于移动端
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>	'width=device-width' 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
<meta name="apple-mobile-web-app-capable" content="yes" />	启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />	隐藏状态栏/设置状态栏颜色
<meta name="apple-mobile-web-app-title" content="标题">	添加到主屏后的标题
<meta content="telephone=no" name="format-detection" />	忽略数字自动识别为电话号码
<meta content="email=no" name="format-detection" />	忽略识别邮箱
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />	优先使用 IE 最新版本和 Chrome
关于X-UA-Compatible**
<meta http-equiv="X-UA-Compatible" content="IE=6" >	使用IE6
<meta http-equiv="X-UA-Compatible" content="IE=7" >	使用IE7
<meta http-equiv="X-UA-Compatible" content="IE=8" >	使用IE8
<meta http-equiv="Pragma" content="no-cache">	禁止浏览器从本地计算机的缓存中访问页面内容
<meta name="MobileOptimized" content="240"/>	浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放

*all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。

**X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页，在html的<head>标签中使用。

文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。它不是 HTML 标签，是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
严格模式又称标准模式，是指浏览器按照 W3C 标准解析代码；混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
- 浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
  - 如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
  - 有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式
  - DTD不存在或者格式不正确——混杂模式
  - HTML5 没有严格和混杂之分
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5 不基于 SGML，所以不需要引用 DTD。
HTML5

<!DOCTYPE html>

始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
DTD：文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。它是标准通用标记语言和可扩展标记语言1.0版规格的一部分，文档可根据某种DTD语法规则验证格式是否符合此规则。文档类型定义也可用做保证标准通用标记语言、可扩展标记语言文档格式的合法性，可通过比较文档和文档类型定义文件来检查文档是否符合规范，元素和标签使用是否正确。
SGML：是国际上定义电子文档和内容描述的标准。它源于1969年IBM公司开发的文档描述语言GML，GML主要用来解决不同系统中文档格式不同的问题。后经过多年发展，1986年经ISO批准为国际标准ISO8897，并被称为SGML。制定SGML的基本思想是把文档的内容与样式分开。在SGML中，标记分两种：一种用来描述文档显示的样式，称为程序标记；另一种用来描述文档中语句的用途，称为描述标记。一个SGML文件通常分三个层次：结构、内容和样式。结构为组织文档的元素提供框架，内容是信息本身，样式控制内容的显示。

浏览器乱码的原因是什么？如何解决？

造成html网页乱码原因主要是html源代码内中文字内容与html编码不同造成。但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码。
比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单。

常见的浏览器有哪些，什么内核？

内核	浏览器
Trident内核	IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核	Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核	Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核	Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

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

标签	含义
<h1>～<h6>	标题，h1代表页面最大的标题，h2代表二级标题。。。
<p>	段落，表示大段文字
<a>	链接，链接到一个地址
	href=“#”某点，”#about”跳到页面上这一点，”/getCourse”相对路径
	target=“_blank”在新窗口打开，默认在当前页面刷新；“mypage”在页面嵌入的小框里面打开新页面
	title=”“在不去点击的的情况下展示的文字
<img>	展示一张图片
	src=‘地址’
	alt=‘’万一地址有问题展示一点东西，或者也可以备注
	只闭合标签，前面不需要加“／”
<div>	语义为“一大块”，用于划分区块，使页面更加清晰
	id=“header””content””footer”;id:给一个元素起个名字，唯一的，相当于身份证号，每个id就是不一样的，根据当前的整个功能去写
	class：代表一类的东西，不同元素都可以叫一个class
<ul>, <li>	无序列表，用于表示并列的内容；ul的直接元素是li，可以嵌套；常常一起使用；ul的直接子元素就是li
<ol>, <li>	有序列表，用于表示带有步骤或者编号的并列内容
<dl>, <dt>, <dd>	用于展示一系列“标题：内容”的场景
<button>	按键
<strong>	非常重要
<em>	需要强调一下
<span>	对于块级元素，相对里面的一些东西进行一些控制，只是在上面加一些标记
<iframe>	用于嵌入一个页面，注意跨域操作问题（假如说当前的地址是同一个域名，后期可以用JS获取；但是如果不一样，只能获取）
<table>	展示表格，不要用来做布局，<thaed>，<tbody>，<tfoot>，<tr>（一行），<td>（一列），<th>（表头的一列）
<br />	换行
<hr />	创建一条水平线

网友评论

本文标题：任务四-课程任务

本文链接：https://www.haomeiwen.com/subject/kxomextx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！