自己建网站做外贸/seo和sem的区别

新看一个项目想要给复制到vue中，已经忘了怎么用原始html去写前端代码。这次就当做一个复习吧。

一开始是html的声明

声明必须是 HTML 文档的第一行，位于 标签之前。

html标签。 然后lang =en 语言使用英语

然后是head标签，
head标签，用于定义文档的头部，它是所有头部元素的容器，head中的元素可以引用脚本，指示浏览器在哪里找到样式表，提供元信息。

meta标签
meta标签，可提供有关页面的信息，比如针对搜索引擎和更新频度的描述和关键词。
meta标签，位于文档的头部，不包含任意内容，meta标签的属性定义了与文档相关联的名称/值对

必须选择的属性content
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。

name属性
name属性提供了名称/值对的名称，通常情况下你可以自己使用对自己和源文档的读者富有意义的名称。
author
description
keywords
generator
revised
others

keywords是一个经常被用到的名称，它为文档定义了一组关键字。某些搜索文档引擎在遇到这些关键字的时候，会用这些关键字对文档进行分类

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

关于meta标签 中的name = viewport

什么是viewport
手机浏览器是把页面放进一个虚拟的窗口中（viewport），通常这个虚拟的窗口，比屏幕要宽，这样就不用把每个网页挤到很小的窗口中，用户可以通过平移和缩放来看网页中的不同的部分。

viewport 基础
一个常用的针对移动网页优化过的页面viewport meta标签大致如下

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width 控制viewport的大小，可以指定一个值，如果600，或者特殊的值，如device-width为设备的宽度，
height：与width想对应，指定高度
initial-scale： 初始缩放比例，也就是用户第一次load的时候缩放的比例
maximum-scale： 允许用户缩放到的最大比例
minimum-scale：允许用户缩放的最小比例
user-scalable：用户是否可以手动缩放

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

那么上面代码说明，用户第一次正常缩放，用户不可以手动缩放

<meta charset="UTF-8" />

使用utf-8编码方式

    <title>停车场商场车位占用例子|室内三维地图引擎|ESmap</title>

那么就是这个浏览器的标题

<title> 元素可定义文档的标题。

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

<meta name="keywords" content="停车场导航,商场导航,停车场定位,室内地图,易景地图,ESMap" /><meta name="description" content="停车场车位占用例子定时5秒从后台获取数据,停车场导航,商场导航,停车场定位,易景室内三维地图引擎提供地图浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内地图显示风格及样式，可自动绘制楼层热力图、散点图等专题地图，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的地图主题资源供二次开发调用。" />

这个是keywords是搜索引擎能搜索到的关键字
description 是对此的描述

html中link标签

href是该链接文档的位置 url
rel 规定当前文档与被链接文档之间的关系

    <link href="../../lib/bootstrap.min.css" rel="stylesheet" /><link href="css/common.css" rel="stylesheet" /><link href="css/iconfont/iconfont.css" rel="stylesheet" />

这是引用的css样式

head标签中全部学完

style
style标签用于为html文档定义样式信息
type属性是必须的，定义style元素的内容，唯一的值可能是“text/css”

<style type="text/css">.viewmode-group {position: absolute;right: 12px;top: 32%;border-radius: 6px;border: none;}.viewmode-group button {display: inline-block;width: 38px;height: 38px;border-radius: 4px;border: none;background-image: url("image/wedgets/3D.png");}.parking {width: 320px;height: 46px;line-height: 46px;left: 100px;bottom: 14px;border: 1px solid #083344;border-radius: 4px;color: rgb(255, 255, 255);background-color: rgba(71, 92, 105, 0.8);font-size: 16px;text-align: center;}.fix {position: fixed;}.codition {width: 120px;left: 10px;bottom: 120px;}.codition ul {width: 100%;padding: 6px;list-style-type: none;}.codition ul li {display: list-item;height: 36px;background-color: rgb(255, 255, 255);line-height: 36px;text-align: center;}.codition ul li span {display: inline-block;width: 18px;height: 18px;border-radius: 50%;margin-right: 10px;vertical-align: middle;}.codition-first {background-color: #f00;}.codition-second {background-color: #0f0;}.codition-third {background-color: rgb(126, 172, 202);}.i-test-tip {width: 360px;height: 46px;left: 470px;bottom: 14px;border-radius: 4px;overflow: hidden;/* position: relative; */background-color: rgba(71, 92, 105, 0.8);text-align: center;}.test-tip {position: absolute;top: 0;left: 100%;color: #fff;font-size: 24px;line-height: 46px;white-space: nowrap;word-break: keep-all;text-overflow: ellipsis;}.test-tip span {color: #0f0;}
</style>

本个项目中，所有的样式都在其中

body标签，定义文档的主体
body元素包含文档中的所有内容（比如文本，图像，超链接，列表等）

<div id="map-container"></div>

定义一个id为map-container的标签

<div class="loading"><div class="lodingImg"></div></div>

定义了一个loading的标签，里面有一个loading图片的标签

这样的一个标签

 <nav class="navbar navbar-inverse"><div class="container-fluid"><h1><a href="/" title="室内地图-地图轨迹回放" target="_blank">易景室内三维地图引擎</a>（停车场车位占用例子定时5秒从后台获取数据）</h1><div class="tips-right"><span class="tip1"></span> <span class="tip2"></span></div><div class="tips-msg"><div class="msg msg1"><div class="erweima"></div><p>手机扫一扫进入体验</p></div><div class="msg msg2"><h4>停车场车位占用</h4><p>1. 停车场车位占用例子定时5秒从后台获取数据</p><div style="display: none">停车场车位占用例子定时5秒从后台获取数据,停车场导航,商场导航,停车场定位,易景室内三维地图引擎提供地图浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内地图显示风格及样式，可自动绘制楼层热力图、散点图等专题地图，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的地图主题资源供二次开发调用。</div></div></div></div></nav>

nav标签是html5新元素，用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备支持也很好