任务四-课程任务

2017-09-28  本文已影响0人  饥人谷_我已经是一条咸鱼了

HTML、XML和XHTML有什么区别？

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

<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
HTML XML
不是 HTML 的替代
显示数据，其焦点是数据的外观，旨在显示信息 传输和存储数据，其焦点是数据的内容，旨在传输信息
HTML XHTML
元素可以彼此不正确的嵌套 元素必须被正确地嵌套
可以不被关闭 元素必须被关闭
大小写混用也可以 标签名必须用小写字母
不一定 XHTML 文档必须拥有根元素

怎样理解 HTML 语义化

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

<!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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>

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

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

内核 浏览器
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 /> 创建一条水平线
上一篇下一篇

猜你喜欢

热点阅读