HTML笔记
HTML笔记
颜色:https://www.runoob.com/html/html-colorvalues.html
ps:html5的
ps:HTML5只学到表单元素,后面再学
html5支持MathML,MathML 是数学标记语言
html5支持SVG图片格式
html5的任何元素都支持拖放,使用(Drag 和 Drop),draggable="true"
<!DOCTYPE html>文档类型声明标签,提示浏览器html5版本显示页面+
<html lang="en"></html>
<html lang="zh-CN"></html>//中文:提示浏览器用翻译成中文
前两种不影响
下一种也用不到
<html lang="..."></html>//别的文字,提示浏览器翻译成别的语言
//charset用于防止乱码
<meta charset="UTF-8" />
常用值:GB2312,BIG5,GBK,UTF-8。
UTF-8也成为万国码,包含了全世界所有国家的字符
1、关闭标签设置。禁用关闭标签。闭合的写法:。
。
2、
其中:alert('弹出信息的内容'); 为单击时弹出的信息,window.open('打开网页的地址') 为打开的网页。
HTML 标签简写及全称
下表列出了 HTML 标签简写及全称:
标签 | 英文全称 | 中文说明 |
---|---|---|
a | Anchor | 锚 |
abbr | Abbreviation | 缩写词 |
acronym | Acronym | 取首字母的缩写词 |
address | Address | 地址 |
alt | alter | 替用(一般是图片显示不出的提示) |
b | Bold | 粗体(文本) |
bdo | Direction of Text Display | 文本显示方向 |
big | Big | 变大(文本) |
blockquote | Block Quotation | 区块引用语 |
br | Break | 换行 |
cell | cell | 巢 |
cellpadding | cellpadding | 巢补白 |
cellspacing | cellspacing | 巢空间 |
center | Centered | 居中(文本) |
cite | Citation | 引用 |
code | Code | 源代码(文本) |
dd | Definition Description | 定义描述 |
del | Deleted | 删除(的文本) |
dfn | Defines a Definition Term | 定义定义条目 |
div | Division | 分隔 |
dl | Definition List | 定义列表 |
dt | Definition Term | 定义术语 |
em | Emphasized | 加重(文本) |
font | Font | 字体 |
h1~h6 | Header 1 to Header 6 | 标题1到标题6 |
hr | Horizontal Rule | 水平尺 |
href | hypertext reference | 超文本引用 |
i | Italic | 斜体(文本) |
iframe | Inline frame | 定义内联框架 |
ins | Inserted | 插入(的文本) |
kbd | Keyboard | 键盘(文本) |
li | List Item | 列表项目 |
nl | navigation lists | 导航列表 |
ol | Ordered List | 排序列表 |
optgroup | Option group | 定义选项组 |
p | Paragraph | 段落 |
pre | Preformatted | 预定义格式(文本 ) |
q | Quotation | 引用语 |
rel | Reload | 加载 |
s/ strike | Strikethrough | 删除线 |
samp | Sample | 示例(文本 |
small | Small | 变小(文本) |
span | Span | 范围 |
src | Source | 源文件链接 |
strong | Strong | 加重(文本) |
sub | Subscripted | 下标(文本) |
sup | Superscripted | 上标(文本) |
td | table data cell | 表格中的一个单元格 |
th | table header cell | 表格中的表头 |
tr | table row | 表格中的一行 |
tt | Teletype | 打印机(文本) |
u | Underlined | 下划线(文本) |
ul | Unordered List | 不排序列表 |
var | Variable | 变量(文本) |
HTML5 添加了很多语义元素如下所示:
标签 | 描述 |
---|---|
定义页面独立的内容区域。 | |
定义页面的侧边栏内容。 | |
允许您设置一段文本,使其脱离其父元素的文本方向设置。 | |
定义命令按钮,比如单选按钮、复选框或按钮 | |
用于描述文档或文档某个部分的细节 | |
定义对话框,比如提示框 | |
标签包含 details 元素的标题 | |
规定独立的流内容(图像、图表、照片、代码等等)。 | |
定义 |
|
定义 section 或 document 的页脚。 | |
定义了文档的头部区域 | |
定义带有记号的文本。 | |
定义度量衡。仅用于已知最大和最小值的度量。 | |
定义导航链接的部分。 | |
定义任何类型的任务的进度。 | |
定义 ruby 注释(中文注音或字符)。 | |
定义字符(中文注音或字符)的解释或发音。 | |
在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 | |
定义文档中的节(section、区段) 等于div | |
定义日期或时间。 | |
规定在文本中的何处适合添加换行符。 |
HTML5 表单
新表单元素, 新属性,新输入类型,自动验证。
HTML5 拥有多个新的表单输入类型:(我只记了常用的)
- color
- date
- datetime
- datetime-local
- month
- number 限制数字类型
- range
- **search ** 搜索框
- tel 手机号码
- time
- url
- week
Input 类型: number
使用下面的属性来规定对数字类型的限定:
属性 | 描述 |
---|---|
disabled | 规定输入字段是禁用的 |
max | 规定允许的最大值 |
maxlength | 规定输入字段的最大字符长度 |
min | 规定允许的最小值 |
pattern | 规定用于验证输入字段的模式 |
readonly | 规定输入字段的值无法修改 |
required | 规定输入字段的值是必需的 |
size | 规定输入字段中的可见字符数 |
step | 规定输入字段的合法数字间隔 |
value | 规定输入字段的默认值 |
<input type="number" min="0" max="9" step="3" value="3">
Input 类型: email
email 类型用于应该包含 e-mail 地址的输入域。
实例
在提交表单时,会自动验证 email 域的值是否合法有效:
E-mail: <input type="email" name="email">
Input 类型: color
color 类型用在input字段主要用于选取颜色,如下所示:
实例
从拾色器中选择一个颜色:
选择你喜欢的颜色: <input type="color" name="favcolor">
Input 类型: date
date 类型允许你从一个日期选择器选择一个日期。
实例
定义一个时间控制器:
生日: <input type="date" name="bday">
Input 类型: datetime
datetime 类型允许你选择一个日期(UTC 时间)。
实例
定义一个日期和时间控制器(本地时间):
生日 (日期和时间): <input type="datetime" name="bdaytime">
Input 类型: datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
实例
定义一个日期和时间 (无时区):
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
Input 类型: range--滑动条
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
实例
定义一个不需要非常精确的数值(类似于滑块控制):
<input type="range" name="points" min="1" max="10">
已移除元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
-
-
-
</li> <li> <strike> </li> <li> <tt> </li> </ul> <h2 id="html5-新元素">HTML5 新元素</h2> <h2 id="-新元素javascript绘图api"><canvas> 新元素javascript绘图API</h2> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220108220019697.png" alt="image-20220108220019697" loading="lazy"></p> <h2 id="新多媒体元素">新多媒体元素</h2> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220108220033379.png" alt="image-20220108220033379" loading="lazy"></p> <h2 id="新表单元素datalistkeygenoutput">新表单元素:datalist,keygen,output</h2> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220108220051608.png" alt="image-20220108220051608" loading="lazy"></p> <h2 id="datalist--和input配合使用边输入边提示的效果">datalist-->和input配合使用,边输入边提示的效果</h2> <pre><code class="language-html"><!--input的list要和datalist的id一样,这样才能完成绑定 datalist是输入域的选项列表 --> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </code></pre> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220109175622896.png" alt="image-20220109175622896" loading="lazy"></p> <h2 id="html5-的--和-标签添加了几个新属性">HTML5 的 <form> 和 <input>标签添加了几个新属性.</h2> <form>新属性: <ul> <li>autocomplete</li> <li>novalidate</li> </ul> <p><input>新属性:</p> <ul> <li>autocomplete -是否记录上次提交的内容(单击后显示历史填写内容)使用前提是input必须有name属性。默认是on保留,off是关闭</li> <li>autofocus -页面加载时,自动聚焦</li> <li>form</li> <li>formaction</li> <li>formenctype</li> <li>formmethod --post和get。<strong>等价于</strong>form的method</li> <li>formnovalidate</li> <li>formtarget</li> <li>height 与 width</li> <li>list --和datalist id一起用</li> <li>min 与 max</li> <li>multiple -可以选多个文件提交-此时input的type应该是file ,multiple="multiple"</li> <li>pattern (regexp) --正则表达式</li> <li>placeholder --若为空,则用此变量的值代替</li> <li>required --不能为空</li> <li>step</li> </ul> <h2 id="新的语义和结构元素">新的语义和结构元素</h2> <p>HTML5提供了新的元素来创建更好的页面结构:</p> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220108220250115.png" alt="image-20220108220250115" loading="lazy"></p> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220108220308980.png" alt="image-20220108220308980" loading="lazy"></p> <h1 id="html-速查列表">HTML 速查列表</h1> <hr> <p>HTML 速查列表. 你可以打印它,以备日常使用。</p> <hr> <h2 id="html-基本文档">HTML 基本文档</h2> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <title>文档标题</title> </head> <body> 可见文本... </body> </html> </code></pre> <hr> <h2 id="基本标签basic-tags">基本标签(Basic Tags)</h2> <pre><code class="language-html"><h1>最大的标题</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>最小的标题</h6> <p>这是一个段落。</p> <br> (换行) <hr> (水平线) <!-- 这是注释 --> </code></pre> <hr> <h2 id="文本格式化formatting">文本格式化(Formatting)</h2> <pre><code class="language-html"><b>粗体文本</b> <code>计算机代码</code> <em>强调文本</em> <i>斜体文本</i> <kbd>键盘输入</kbd> <pre>预格式化文本</pre> <small>更小的文本</small> <strong>重要的文本</strong> <abbr> (缩写) <address> (联系信息) <bdo> (文字方向) <blockquote> (从另一个源引用的部分) <cite> (工作的名称) <del> (删除的文本) <ins> (插入的文本) <sub> (下标文本) <sup> (上标文本) </code></pre> <hr> <h2 id="链接links">链接(Links)</h2> <pre><code class="language-html">普通的链接:<a href="http://www.example.com/" target="_blank">链接文本</a> 图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> 邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a> 空链接: <a href="#">asdasd</a> 锚点链接(书签): <a href="#tips">直接定位到页面中的元素id='tips'的元素的位置</a> <div id="tips">提示部分</div> a标签还有一个属性target:打开窗口的方式 默认_self,当前窗口打开 _blank,新窗口打开 </code></pre> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220127173640416.png" alt="image-20220127173640416" loading="lazy"></p> <hr> <h2 id="图片images">图片(Images)</h2> <pre><code class="language-html">//一般hight和wight只需要设置一个,另一个就会自动等比例缩放 <img loading="lazy" src="URL" alt="替换文本" height="42" width="42" /> <!--在浏览器无法载入图像时,(alt)替换文本代替图片展示。--> <!--loading="lazy" 可选。 图片位置未至用户视窗范围或屏幕位置时不予请求加载资源,直至其附近位置方可请求加载。--> </code></pre> <h2 id="特殊字符">特殊字符</h2> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220127174112578.png" alt="image-20220127174112578" loading="lazy"></p> <h2 id="html-图像标签">HTML 图像标签</h2> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><img></td> <td>定义图像</td> </tr> <tr> <td><map></td> <td>定义图像地图</td> </tr> <tr> <td><area></td> <td>定义图像地图中的可点击区域(和map结合起来用)</td> </tr> </tbody> </table> <p>map和area结合可以使得图片的不同部分,分别有不同的链接</p> <hr> <h2 id="样式区块stylessections">样式/区块(Styles/Sections)</h2> <pre><code class="language-html"> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> <div>文档中的块级元素</div> <span>文档中的内联元素</span> </code></pre> <hr> <h2 id="无序列表-ul">无序列表-ul</h2> <p>自动设置每个li前面加小黑点</p> <p>li标签之间可以加任何元素</p> <p>ul标签之间只能是li标签</p> <pre><code class="language-html"><ul> <li>项目</li> <li>项目</li> </ul> <!--去掉小黑点--> list-style:none; </code></pre> <hr> <h2 id="有序列表">有序列表</h2> <p>自动设置每个li前面为有顺序的数字</p> <p>li标签之间可以加任何元素</p> <p>ol标签之间只能是li标签</p> <pre><code class="language-html"><ol> <li>第一项</li> <li>第二项</li> </ol> </code></pre> <hr> <h2 id="自定义定义列表-列表项前面不会有符号">(自定义)定义列表-列表项前面不会有符号</h2> <p>dl标签之间只能出现dt和dd,可以有多个,但是一般一个dt后面伴随多个dd</p> <p>dd和dt标签之间可以放任何元素</p> <p>dl是自定义列表的容器</p> <p>dt就是列表名</p> <p>dd就是列表项</p> <pre><code class="language-html"><dl> <dt>项目 1</dt> <dd>描述项目 1</dd> <dt>项目 2</dt> <dd>描述项目 2</dd> </dl> </code></pre> <hr> <h2 id="表格tables">表格(Tables)</h2> <table border="1"> <tr> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>表格数据</td> <td>表格数据</td> </tr> </table> <pre><code class="language-html"><table border="1"> <tr> <th>表格标题</th> <!--th表头单元格标签-加粗j显示--> <th>表格标题</th> </tr> <tr> <td>表格数据</td> <td>表格数据</td> </tr> </table> </code></pre> <hr> <h2 id="表格属性">表格属性</h2> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220127190226486.png" alt="image-20220127190226486" loading="lazy"></p> <h2 id="表格结构标签-theadtbody">表格结构标签-thead,tbody</h2> <pre><code class="language-html"><table> <thead> //表格的头部区域 <tr> <td> asd </td> </tr> </thead> <tbody> //表格的主体区域 </tbody> </table> </code></pre> <h2 id="合并单元格">合并单元格</h2> <ul> <li> <p>跨行合并:rowspan="合并单元格的个数"</p> </li> <li> <p>跨列合并:colspan="合并单元格的个数"</p> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220127192150888.png" alt="image-20220127192150888" loading="lazy"></p> </li> </ul> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220127192645281.png" alt="image-20220127192645281" loading="lazy"></p> <h2 id="框架iframe">框架(Iframe)</h2> <pre><code class="language-html"><iframe src="demo_iframe.htm"></iframe> </code></pre> <hr> <h2 id="表单forms">表单(Forms)</h2> <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>action</td> <td>url地址</td> <td>指定接受表单数据的服务器程序的url</td> </tr> <tr> <td>method</td> <td>get/post</td> <td>设置表单提交方式,只能是get/post</td> </tr> <tr> <td>name</td> <td>名称</td> <td>指定表单的名称,以区分同一个页面的多个表单域</td> </tr> </tbody> </table> <pre><code class="language-html"><form action="demo_form.php" method="post/get" name="add"> <input type="text" name="email" size="40" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <!--radio控件必须要有相同的name才能实现多选--> <input type="radio" name="a" checked="checked"> <!--checked表示首次加载时就被选中--> <input type="radio" name="a" maxlength="10"> <!--maxlength表示可输入的最大长度--> <input type="radio" name="a"> <input type="submit" value="Send"> <input type="reset"> <input type="hidden"> <!--select是下拉列表--> <select> <!--只能包含option标签--> <option>苹果</option> <!--selected是默认选中项--> <option selected="selected">香蕉</option> <option>樱桃</option> </select> <!--当内容文字过多时可以使用文字域textarea->可以多行输入的控件--> <textarea name="comment" rows="60" cols="20"></textarea> <!--rows是显示的行数(高),cols每行的字符数(宽),常用于css--> <!--1字符等于2字节,一个数字/字母/符号1字节--> </form> </code></pre> <h2 id="html-表单标签">HTML 表单标签</h2> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220128112110152.png" alt="image-20220128112110152" loading="lazy"></p> <hr> <h2 id="表单元素"><input>表单元素</h2> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220128114426256.png" alt="image-20220128114426256" loading="lazy"></p> <h2 id="label标签">label标签</h2> <p><img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220128114823809.png" alt="image-20220128114823809" loading="lazy"></p> <h2 id="实体entities">实体(Entities)</h2> <p>< 等同于 < > 等同于 > © 等同于 ©</p> <pre><code class="language-html"> < 等同于 < > 等同于 > © 等同于 © </code></pre> <h1 id="_"><head></h1> <h4 id="-定义了html文档的标题"><title>-定义了HTML文档的标题</h4> <p>使用 <title> 标签定义HTML文档的标题</p> <h4 id="-定义了所有的链接的url"><base>-定义了所有的链接的URL</h4> <p>使用 <base> 定义页面中所有链接默认的链接目标地址</p> <pre><code class="language-html"><head> <base href="http://www.runoob.com/images/" target="_blank"> </head> </code></pre> <h4 id="-提供了html文档的meta标记"><meta>-提供了HTML文档的meta标记</h4> <p>使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等</p> <p>为搜索引擎<strong>定义关键词</strong>:</p> <pre><code class="language-html"><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> </code></pre> <p>为网页定义<strong>描述内容</strong>:</p> <pre><code class="language-html"><meta name="description" content="免费 Web & 编程 教程"> </code></pre> <p>定义网页<strong>作者</strong>:</p> <pre><code class="language-html"><meta name="author" content="Runoob"> </code></pre> <p>每30秒钟<strong>刷新当前页面</strong>:</p> <pre><code class="language-html"><meta http-equiv="refresh" content="30"> </code></pre> <h2 id="html--元素导入外部css样式表">HTML <link> 元素(导入外部CSS样式表)</h2> <link> 标签定义了文档与外部资源之间的关系。 <link> 标签通常用于**链接到样式表**: <pre><code class="language-html"><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <!--rel="stylesheet" --> <!--rel是relation的缩写 --> <!--这指出引用的文件是一个样式表 --> <!--rel的所有值之中,只有"stylesheet"是所有浏览器都支持的 --> </code></pre> <h1 id="html5-canvas-默认没有边框和内容">HTML5 Canvas-默认没有边框和内容</h1> <hr> <p>"<canvas> 标签<strong>定义图形</strong>,比如图表和其他图像,您必须使用<strong>脚本来绘制图形</strong>。<br> HTML5 <canvas> 元素用于图形的绘制,通过脚本 (<strong>通常是JavaScript</strong>)来完成."</p> <p>"<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。"</p> <p>你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。</p> <h2 id="创建一个画布canvas">创建一个画布(Canvas)</h2> <p>一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制.</p> <p><strong>注意:</strong> <strong>默认</strong>情况下 <canvas> 元素<strong>没有边框和内容</strong>。</p> <p><strong>注意:</strong> 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.</p> <p><strong>提示:</strong>你可以在HTML页面中使用多个 <canvas> 元素.</p> <p><strong>使用 style 属性来添加边框:</strong></p> <h2 id="实例-6">实例</h2> <pre><code class="language-html"><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> </code></pre> <h2 id="使用-javascript-来绘制图像-就了解一下以后再学">使用 JavaScript 来绘制图像-就了解一下以后再学</h2> <p>canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:</p> <h2 id="实例-7">实例</h2> <pre><code class="language-js">var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //创建 context 对象,相当于matlab使用2d的绘图工具 //getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 //下面的两行代码绘制一个红色的矩形 ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); //设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。 //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。 </code></pre> <h1 id="html5支持svg">HTML5支持SVG</h1> <h2 id="什么是svg">什么是SVG?</h2> <ul> <li>SVG 指可伸缩矢量图形 (Scalable Vector Graphics)</li> <li>SVG 用于定义用于网络的基于矢量的图形</li> <li>SVG 使用 XML 格式定义图形</li> <li>SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失</li> <li>SVG 是万维网联盟的标准</li> </ul> <h2 id="svg优势">SVG优势</h2> <p>与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:</p> <ul> <li>SVG 图像可通过文本编辑器来创建和修改</li> <li>SVG 图像可被搜索、索引、脚本化或压缩</li> <li>SVG 是可伸缩的</li> <li>SVG 图像可在任何的分辨率下被高质量地打印</li> <li>SVG 可在图像质量不下降的情况下被放大</li> </ul> <h1 id="html5-支持mathml">HTML5 支持MathML</h1> <p>HTML5 可以在文档中使用 MathML 元素,对应的标签是 <math>...</math> 。</p> <p>MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。</p> <h1 id="获取用户当前经纬度地理位置谷歌">获取用户当前经纬度,地理位置(谷歌)</h1> <pre><code class="language-js"> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } function showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="用户拒绝对获取地理位置的请求。" break; case error.POSITION_UNAVAILABLE: x.innerHTML="位置信息是不可用的。" break; case error.TIMEOUT: x.innerHTML="请求用户地理位置超时。" break; case error.UNKNOWN_ERROR: x.innerHTML="未知错误。" break; } } </code></pre> <h1 id="获取当前经纬度并绘图百度地图">获取当前经纬度,并绘图(百度地图)</h1> <pre><code class="language-html"> <!DOCTYPE html> <!--点击按钮,获取坐标,绘制百度地图--> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" /> <meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" /> <title>百度地图API自定义地图</title> <!--引用百度地图API--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=c6KhDElgRUq0kYjXcnlr5jThAT3WTuCe"></script> </head> <body> <input type="button" onclick="getLocation()" value="确认" /> <div id="position_x"></div> <div id="position_y"></div> <!--百度地图容器--> <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div> </body> <script type="text/javascript"> var x = document.getElementById('position_x'); var y = document.getElementById('position_y'); var x_loc; var y_loc; function getLocation() { // 创建百度地理位置实例,代替 navigator.geolocation var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(e) { if(this.getStatus() == BMAP_STATUS_SUCCESS){ // 百度 geolocation 的经纬度属性不同,此处是 point.lat 而不是 coords.latitude x.innerHTML = e.point.lng; y.innerHTML = e.point.lat; x_loc = e.point.lng; y_loc = e.point.lat; initMap(); } else { x.innerHTML = 'failed' + this.getStatus(); y.innerHTML = 'failed' + this.getStatus(); } }); } //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMapOverlay();//向地图添加覆盖物 } function createMap(){ map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(x_loc,y_loc),19); } function setMapEvent(){ map.enableScrollWheelZoom(); map.enableKeyboard(); map.enableDragging(); map.enableDoubleClickZoom() } function addClickHandler(target,window){ target.addEventListener("click",function(){ target.openInfoWindow(window); }); } function addMapOverlay(){ } //向地图添加控件 function addMapControl(){ var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); scaleControl.setUnit(BMAP_UNIT_IMPERIAL); map.addControl(scaleControl); var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(navControl); var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true}); map.addControl(overviewControl); } var map; </script> </html> </code></pre>