HTML4结构

来源:互联网 发布:mac照片怎么导入iphone 编辑:程序博客网 时间:2024/05/19 06:49
 HTML Code 
1

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html                      指定文档类型名称,说明使用何种html规则
PUBLIC               对任何人公开访问
version name     html版本标识

URL                     指定html语言定义规范文件在internet位置


 HTML Code 
1
2
3
4

<html>
<head></head>                    不需要显示在页面中的写在头部
<body></body>                     需要显示在页面的写在body体内
</html> 


不需要再页面显示:(写在头部)

 HTML Code 
1
2
3
4
5
6

<title></title>               标题
<base></base>         相对URl转化成绝对URL
<meta/>                       定义文件信息名称内容描述等
<link/>                          文档声明使用外连接资源 css,使用标签
<style></style>           文档声明样式
<script></script>        javascript脚本

(最后两行也可以写在body体内)


 HTML Code 
1

<title> 哈哈哈</title>  

重要关键字,百度搜索引擎关键字。


 HTML Code 
1

<base href=" url " target="_black" >

使用base后body内超连接会在base规定中的路寻找,没有写base在本地寻找。


 HTML Code 
1

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
确定文本样式html和css 世界通用编码
charset=“gb2312”显示中文
记事本写代码,保存的时候 编码选择UTF-8保存。

css里样式前面加入@charset "utf-8";


 HTML Code 
1

<meta name="Author" content="哈哈"/>
设置作者的名字
 HTML Code 
1

<meta name="keywords" content="哈哈"/> 

设置关键字


 HTML Code 
1

<meta name="description" content="哈哈"/>

网页描述信息,百度标题下内容块,不写,百度默认放页面第一行内容。


 HTML Code 
1
2

<meta name="Robots" content="index"/>
<meta name="Robots" content="nondex"/>
允许搜索引擎通过你网页去寻找其他其他网站

不允许搜索引擎通过你网页去寻找其他其他网站


 HTML Code 
1
2

 <meta http-equiv="Refresh" content="10"/>
 
<meta http-equiv="Refresh" content="10" url=" "/>
十秒刷新一次网页

十秒刷新一次网页并跳转到新连接


 HTML Code 
1

<meta http-equiv="Windows-Target" content="_Top"/>

防止自己网页被他人当分祯使用,当对方使用时,占领整个页面


手机站的头标记:

 HTML Code 
1
2
3
4
5
6
7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="css/style.css">
widthdevice-width宽度等于设备的宽度。(范围从 200 到 10,000 ,默认为 980像素 )
height: viewport 的高度 (范围从 223 到 10,000 )
initial-scale:初始缩放比例(范围从>0到10 )
maximum-scale:允许用户缩放到的最大比例
minimum-scale:允许用户缩放到的最小比例

user-scalable:用户是否可以手动缩放


 HTML Code 
1

<meta name="apple-touch-fullscreen" content="yes">

添加到主屏幕后,全屏显示


 HTML Code 
1

<meta name="apple-mobile-web-app-capable" content="yes" />

删除默认的苹果工具栏和菜单栏


 HTML Code 
1

<meta name=”apple-mobile-web-app-status-bar-style” content=black” />

默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。若值为灰色半透明将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)


 HTML Code 
1
2

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

在iOS中有两个meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明


 HTML Code 
1
2

<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

iOS用rel="apple-touch-icon",android用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标


 HTML Code 
1

<meta name="sharecontent" data-msg-img="缩略图地址" data-msg-title="标题" data-msg-content="简介" data-msg-callBack="" data-line-img="缩略图地址" data-line-title="标题" data-line-callBack=""/>

微信分享页面设置


原创粉丝点击