DTD文档模型以及meta的使用

移动端 H5页面

<!DOCTYPE html> 

<html>

<head>

  <title></title>

  <meta charset="UTF-8">  UTF-8是国际通用标准,各国语言都可以正常显示,中国的字符编码集是GB2312

  <meta name="keywords" content="关键字">

  <meta name="description" content="网站描述"> 关键字和网站描述方便SEO

  <meta name="viewport" content="width=device-width,initial-scale=1.0,max-scale=1.0,user-scalable=0;">

</head> 

<body>

</body>

</html>

 

PC端

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content= "text/html" charset="UTF-8">
<meta name = "keywords" content = "关键字">
<meta name="description" content="描述">
<meta name="viewport" content="width=device-width,initial-scale=1.0,max-scale=1.0,user-scalable=0;"/>
</head>
<body> 

  <p>  p标签表示段落
    <a href="http://map.baidu.com/">百度地图</a>  能够点击的文字用a标签
  </p>
  <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270px" height="129px" alt="百度" title="百度">  
  <br/>
  <span>2015baidu</span>  不能点击的文字用span标签

</body>

</html>

 

总结:

DTD文档模型:

  过渡的(Transitional) : 要求非常宽松,继续使用HTML4.01的标识

  严格的(Strict) : 不能使用任何表现层的标识和属性,如<br/>

  框架的(Frameset) : 页面中含有框架,需要使用这种DTD

 

meta

  1.设置文档编码

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  PC端

    <meta charset="UTF-8">  移动端

  2.设置关键字和描述方便SEO

    <meta name="keywords" content="关键字">

    <meta name="description" content="描述">

  3.设置移动端开发缩放比例

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">

图片

  苹果设备的图片分辨率是普通的2倍,所以图片一般做成2倍,以防止苹果设备使用时图片被拉伸变模糊.

转载于:https://www.cnblogs.com/IceyB/p/5631048.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值