一个简单的 HTML 网页设计代码

lt;!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>欢迎来到我的网页</h1>

<p>这是一个简单的 HTML 网页设计。</p>

<ul>

</ul>

</body>

</html>

在这个例子中，我们创建了一个简单的 HTML 网页，其中包括以下元素：

<!DOCTYPE html>：告诉浏览器这是一个 HTML5 文件。
<html>：定义 HTML 文档的根元素。
<head>：包含有关文档的元数据，如标题等。
<title>：定义网页标题，将显示在浏览器标签页上。
<body>：定义网页的主要内容。
<h1>：定义一个一级标题。
<p>：定义一个段落。
<img>：定义一个图片，并指定图片的源和替代文本。
<ul> 和 <li>：定义一个无序列表，并列出项目。

图类、打车、外卖等类型的手机APP，一进入便咨询是否允许获取我们的位置，允许之后会根据我们所在位置推荐好物，逐渐地 H5 网页也开始获取用户位置。Geolocation是 H5 新增的对象，用于定位。常见打开网页有两种方式：移动端和PC端。它们是根据什么如何定位的呢？

IP定位：通过IP地址定位，由于没有硬件支持，主要是服务器根据 IP库判断所处位置，所以精度差。
GPS(全球定位系统)：使用GPS定位，定位时间长，耗电量大，但是精度高。
WIFI定位：wifi 定位数据是通过三角距离计算得到，三角是指当前多个接入wifi用户的已知距离，wifi在室内也非常准确。
手机地理位置：基于手机的地理定位数据是通过用户到一些基站的三角距离确定。这种方法可提供相当准确的位置结果。这种方法通常和基于WIFI基于GPS地位结合使用。
用户自定义：用户可以手动输入的地理位置。

Geolocation 方法

geolocation对象继承在navigator对象内，它有两种方法可以获取用户位置getCurrentPosition()和watchPosition()，还有clearWatch取消watchPosition。

getCurrentPosition：获取一次位置

navigator.geolocation.getCurrentPosition(success=>{
 console.log(success.coords)//包含位置的经纬度、速度、海拔、经纬度精度、海拔精度信息
},fail=>{
 console.log(fail)//获取失败的原因
},{
 //可增加的4个配置参数
  enableHighAccuracy:true,//高精度
  timeout:5000,//超时时间,以ms为单位
  maximumAge:24*60*60*1000,//位置缓存时间,以ms为单位
})

位置获取成功后返回的 success.coords 的属性

coords.latitude - 纬度
coords.longitude - 经度
coords.altitude - 海拔
coords.speed - 速度
coords.accuracy - 经纬度精度
coords.altitudeAccuracy - 海拔精度
coords.heading - 方向，从正北开始的弧度数

watchPosition：不断获取位置

navigator.geolocation.watchPosition(
 success=>{
  console.log(success.coords)//包含用户位置速度海拔等信息
 },
 fail=>{
  console.log(fail)//定位失败原因
 },
 {
  enableHighAccuracy:true,//高精度
  timeout:60*1000,//超时，以ms为单位
  maximumAge:24*60*60*1000,//位置缓存时间，以ms为单位
  frequency:1000,//获取频率
 }
)

位置获取成功后返回的 success.coords 的属性与上述getCurrentPosition的一致。它两唯一的区别就是一个获取一次，另外一个获取多次，多了一个获取频率参数。

clearWatch()：取消当前位置的获取，停止 watchPosition 方法。

clearWatch 与 js 中的clearInterval类似，clearInterval用于清除定时器。使用时语法如下：

var wPId = navigator.geolocation.watchPosition(
 success=>{
  console.log(success.coords)//包含用户位置速度海拔等信息
 },
 fail=>{
  console.log(fail)//定位失败原因
 },
 {
  enableHighAccuracy:true,//高精度
  timeout:60*1000,//超时，以ms为单位
  maximumAge:24*60*60*1000,//位置缓存时间，以ms为单位
  frequency:1000,//获取频率
 }
)
navigator.geolocation.clearWatch(wPId)

Geolocation 应用

由于该特性可能侵犯用户的隐私，使用时自动会询问用户是否同意授权位置，除非用户同意，否则无法获取到用户位置。

function getPosition(){
 if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(function(res){
   console.log("res",res)//位置信息
  },function(err){
   console.log("err",err)
  })
 }
}
getPosition()

在电脑上，直接使用浏览器打开文件，浏览器立马弹出如下显示框：

点击禁止后，调试器中打印出报错信息，报错信息为：

{
code: 1
message: "User denied Geolocation" //用户拒绝地理位置
}

点击允许之后，发现并未打印出位置信息，什么原因呢？PC是根据电脑的IP地址来解析位置的，此时直接打开文件没有域名或ip，所以无法获取位置，必须把文件放到服务内，如果你是不会起服务可以下载nginx，下载安装成功之后文件放入html文件夹内，启动nginx就可以访问了。

启动本地服务，再次获取位置之后，发现依旧报错，无法返回位置，报错信息为：

{
 code: 1, 
 message: "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)."//只允许安全来源
}

意思就是只能在https域名下才可以哦！

还需要注意的是chrome的google浏览器也不能获取位置，但是IE浏览器可以获取到。

把上述案例放到线上，获取位置只要用户点击同意就没有问题啦！

除此之外，带有位置的我们经常会用到输入位置，在地图中自动标记一个点，移动标记点到更具体的位置，如图：

一般需要绘制地图的时候，我们就借助三方的百度、高德、腾讯等地图，注册账号，申请密钥才可以使用。有空了可以去多看看，多了解了解！

作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标签，这些标签通常都写在head标签内，因此被称为头部相关标签。本节将具体介绍常用的头部标签。

1.设置页面标题标签<title>

<title>标签用于定义HTML页面的标题，即给网页取一个名字，该标签必须位于<head>标签之内。一个HTML文档只能包含一对<title></title>标签，<title></title>之间的内容将显示在浏览器窗口的标题栏中。例如将页面标题设置为“轻松学习HTML5”，具体代码如下：

<title>轻松学习HTML5</title>

上述代码对应的页面标题效果如图1所示。

图 1设置页面标题标签<title>

2.定义页面元信息标签<meta />

1）<meta name="名称" content="值" />

在<meta />标签中使用name和content属性可以为搜索引擎提供信息，其中name属性用于提供搜索内容的名称，content属性提供对应的搜索内容值，具体应用如下。

●设置网页关键字，例如某图片网站的关键字设置：

<meta name="keywords" content="千图网,免费素材下载,千图网免费素材图库,矢量图,矢量图库,图片素材,网页素材,免费素材,PS素材,网站素材,设计模板,设计素材， 网页模板免费下载,千图,素材中国,素材,免费设计,图片" />

其中name属性的值为keywords，用于定义搜索内容名称为网页关键字，content属性的值用于定义关键字的具体内容，多个关键字内容之间可以用“,”分隔。

●设置网页描述，例如某图片网站的描述信息设置：

<meta name="description" content="专注免费设计素材下载的网站！提供矢量图素材,矢量背景图片,矢量图库,还有psd素材,PS素材,设计模板,设计素材,PPT素材,以及网页素材,网站素材,网页图标免费下载" />

其中name属性的值为description，用于定义搜索内容名称为网页描述，content属性的值用于定义描述的具体内容。需要注意的是网页描述的文字不必过多，能够描述清晰即可。

●设置网页作者，例如可以为网站增加作者信息：

<meta name="author" content="网络部" />

其中name属性的值为author，用于定义搜索内容名称为网页作者，content属性的值用于定义具体的作者信息。

2）<meta http-equiv="名称" content="值" / >

在<meta />标签中使用http-equiv和content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数标准。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<meta http-equiv="Content-Type" content="text/html" / >，通知浏览器发送的文件类型是HTML。具体应用如下：

●设置字符集，例如某图片官网字符集的设置：

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

其中http-equiv属性的值为Content-Type，content属性的值为text/html和charset=gbk，两个属性值中间用“;”隔开。这段代码用于说明当前文档类型为HTML，字符集为gbk(中文编码)。目前最常用的国际化字符集编码格式是utf-8，常用的国内中文字符集编码格式主要是gbk和gb2312。当用户使用的字符集编码不匹配当前浏览器时，网页内容就会出现乱码。
值得一提的是，在HTML5中，简化了字符集的写法，变为如下所示代码。

<meta charset="utf-8">

●设置页面自动刷新与跳转，例如定义某个页面10秒后跳转至百度：

<meta http-equiv="refresh" content="10; url= https://www.baidu.com/" />

其中http-equiv属性的值为refresh，content属性的值为数值和url地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。

在线咨询

上一篇：新手入门一个简单实例，说明JavaScript如何确认表单信息完整
下一篇：CSS3 transition动画圆角、rgba

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

一个简单的 HTML 网页设计代码

Geolocation 方法

Geolocation 应用

您的项目需求