HTML笔记

HTML笔记

颜色：https://www.runoob.com/html/html-colorvalues.html

ps:html5的是使用javascript绘图的标签，内容很多，简单了解了一下，以后再学。

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
定义日期或时间。
规定在文本中的何处适合添加换行符。

image-20220214112003559

HTML5 表单

新表单元素, 新属性，新输入类型，自动验证。

HTML5 拥有多个新的表单输入类型:(我只记了常用的)

  • color
  • date
  • datetime
  • datetime-local
  • email
  • 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">

image-20220109174250989

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">

image-20220109174846661

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

  • &lt;/li&gt; &lt;li&gt; &lt;strike&gt; &lt;/li&gt; &lt;li&gt; &lt;tt&gt; &lt;/li&gt; &lt;/ul&gt; &lt;h2 id="html5-新元素"&gt;HTML5 新元素&lt;/h2&gt; &lt;h2 id="-新元素javascript绘图api"&gt;&lt;canvas&gt; 新元素javascript绘图API&lt;/h2&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220108220019697.png" alt="image-20220108220019697" loading="lazy"&gt;&lt;/p&gt; &lt;h2 id="新多媒体元素"&gt;新多媒体元素&lt;/h2&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220108220033379.png" alt="image-20220108220033379" loading="lazy"&gt;&lt;/p&gt; &lt;h2 id="新表单元素datalistkeygenoutput"&gt;新表单元素：datalist,keygen,output&lt;/h2&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220108220051608.png" alt="image-20220108220051608" loading="lazy"&gt;&lt;/p&gt; &lt;h2 id="datalist--和input配合使用边输入边提示的效果"&gt;datalist--&gt;和input配合使用，边输入边提示的效果&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;!--input的list要和datalist的id一样，这样才能完成绑定 datalist是输入域的选项列表 --&gt; &lt;input list=&quot;browsers&quot;&gt; &lt;datalist id=&quot;browsers&quot;&gt; &lt;option value=&quot;Internet Explorer&quot;&gt; &lt;option value=&quot;Firefox&quot;&gt; &lt;option value=&quot;Chrome&quot;&gt; &lt;option value=&quot;Opera&quot;&gt; &lt;option value=&quot;Safari&quot;&gt; &lt;/datalist&gt; &lt;/code&gt;&lt;/pre&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220109175622896.png" alt="image-20220109175622896" loading="lazy"&gt;&lt;/p&gt; &lt;h2 id="html5-的--和-标签添加了几个新属性"&gt;HTML5 的 &lt;form&gt; 和 &lt;input&gt;标签添加了几个新属性.&lt;/h2&gt; &lt;form&gt;新属性： &lt;ul&gt; &lt;li&gt;autocomplete&lt;/li&gt; &lt;li&gt;novalidate&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;&lt;input&gt;新属性：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;autocomplete -是否记录上次提交的内容（单击后显示历史填写内容）使用前提是input必须有name属性。默认是on保留，off是关闭&lt;/li&gt; &lt;li&gt;autofocus -页面加载时，自动聚焦&lt;/li&gt; &lt;li&gt;form&lt;/li&gt; &lt;li&gt;formaction&lt;/li&gt; &lt;li&gt;formenctype&lt;/li&gt; &lt;li&gt;formmethod --post和get。&lt;strong&gt;等价于&lt;/strong&gt;form的method&lt;/li&gt; &lt;li&gt;formnovalidate&lt;/li&gt; &lt;li&gt;formtarget&lt;/li&gt; &lt;li&gt;height 与 width&lt;/li&gt; &lt;li&gt;list --和datalist id一起用&lt;/li&gt; &lt;li&gt;min 与 max&lt;/li&gt; &lt;li&gt;multiple -可以选多个文件提交-此时input的type应该是file ,multiple=&quot;multiple&quot;&lt;/li&gt; &lt;li&gt;pattern (regexp) --正则表达式&lt;/li&gt; &lt;li&gt;placeholder --若为空，则用此变量的值代替&lt;/li&gt; &lt;li&gt;required --不能为空&lt;/li&gt; &lt;li&gt;step&lt;/li&gt; &lt;/ul&gt; &lt;h2 id="新的语义和结构元素"&gt;新的语义和结构元素&lt;/h2&gt; &lt;p&gt;HTML5提供了新的元素来创建更好的页面结构：&lt;/p&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220108220250115.png" alt="image-20220108220250115" loading="lazy"&gt;&lt;/p&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220108220308980.png" alt="image-20220108220308980" loading="lazy"&gt;&lt;/p&gt; &lt;h1 id="html-速查列表"&gt;HTML 速查列表&lt;/h1&gt; &lt;hr&gt; &lt;p&gt;HTML 速查列表. 你可以打印它，以备日常使用。&lt;/p&gt; &lt;hr&gt; &lt;h2 id="html-基本文档"&gt;HTML 基本文档&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;文档标题&lt;/title&gt; &lt;/head&gt; &lt;body&gt; 可见文本... &lt;/body&gt; &lt;/html&gt; &lt;/code&gt;&lt;/pre&gt; &lt;hr&gt; &lt;h2 id="基本标签basic-tags"&gt;基本标签（Basic Tags）&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;h1&gt;最大的标题&lt;/h1&gt; &lt;h2&gt; . . . &lt;/h2&gt; &lt;h3&gt; . . . &lt;/h3&gt; &lt;h4&gt; . . . &lt;/h4&gt; &lt;h5&gt; . . . &lt;/h5&gt; &lt;h6&gt;最小的标题&lt;/h6&gt; &lt;p&gt;这是一个段落。&lt;/p&gt; &lt;br&gt; （换行） &lt;hr&gt; （水平线） &lt;!-- 这是注释 --&gt; &lt;/code&gt;&lt;/pre&gt; &lt;hr&gt; &lt;h2 id="文本格式化formatting"&gt;文本格式化（Formatting）&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;b&gt;粗体文本&lt;/b&gt; &lt;code&gt;计算机代码&lt;/code&gt; &lt;em&gt;强调文本&lt;/em&gt; &lt;i&gt;斜体文本&lt;/i&gt; &lt;kbd&gt;键盘输入&lt;/kbd&gt; &lt;pre&gt;预格式化文本&lt;/pre&gt; &lt;small&gt;更小的文本&lt;/small&gt; &lt;strong&gt;重要的文本&lt;/strong&gt; &lt;abbr&gt; （缩写） &lt;address&gt; （联系信息） &lt;bdo&gt; （文字方向） &lt;blockquote&gt; （从另一个源引用的部分） &lt;cite&gt; （工作的名称） &lt;del&gt; （删除的文本） &lt;ins&gt; （插入的文本） &lt;sub&gt; （下标文本） &lt;sup&gt; （上标文本） &lt;/code&gt;&lt;/pre&gt; &lt;hr&gt; &lt;h2 id="链接links"&gt;链接（Links）&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-html"&gt;普通的链接：&lt;a href=&quot;http://www.example.com/&quot; target=&quot;_blank&quot;&gt;链接文本&lt;/a&gt; 图像链接： &lt;a href=&quot;http://www.example.com/&quot;&gt;&lt;img src=&quot;URL&quot; alt=&quot;替换文本&quot;&gt;&lt;/a&gt; 邮件链接： &lt;a href=&quot;mailto:webmaster@example.com&quot;&gt;发送e-mail&lt;/a&gt; 空链接: &lt;a href=&quot;#&quot;&gt;asdasd&lt;/a&gt; 锚点链接(书签)： &lt;a href=&quot;#tips&quot;&gt;直接定位到页面中的元素id='tips'的元素的位置&lt;/a&gt; &lt;div id=&quot;tips&quot;&gt;提示部分&lt;/div&gt; a标签还有一个属性target：打开窗口的方式 默认_self,当前窗口打开 _blank，新窗口打开 &lt;/code&gt;&lt;/pre&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220127173640416.png" alt="image-20220127173640416" loading="lazy"&gt;&lt;/p&gt; &lt;hr&gt; &lt;h2 id="图片images"&gt;图片（Images）&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-html"&gt;//一般hight和wight只需要设置一个，另一个就会自动等比例缩放 &lt;img loading=&quot;lazy&quot; src=&quot;URL&quot; alt=&quot;替换文本&quot; height=&quot;42&quot; width=&quot;42&quot; /&gt; &lt;!--在浏览器无法载入图像时，(alt)替换文本代替图片展示。--&gt; &lt;!--loading=&quot;lazy&quot; 可选。 图片位置未至用户视窗范围或屏幕位置时不予请求加载资源，直至其附近位置方可请求加载。--&gt; &lt;/code&gt;&lt;/pre&gt; &lt;h2 id="特殊字符"&gt;特殊字符&lt;/h2&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220127174112578.png" alt="image-20220127174112578" loading="lazy"&gt;&lt;/p&gt; &lt;h2 id="html-图像标签"&gt;HTML 图像标签&lt;/h2&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;标签&lt;/th&gt; &lt;th&gt;描述&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;&lt;img&gt;&lt;/td&gt; &lt;td&gt;定义图像&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;map&gt;&lt;/td&gt; &lt;td&gt;定义图像地图&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;area&gt;&lt;/td&gt; &lt;td&gt;定义图像地图中的可点击区域(和map结合起来用)&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;map和area结合可以使得图片的不同部分，分别有不同的链接&lt;/p&gt; &lt;hr&gt; &lt;h2 id="样式区块stylessections"&gt;样式/区块（Styles/Sections）&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-html"&gt; &lt;style type=&quot;text/css&quot;&gt; h1 {color:red;} p {color:blue;} &lt;/style&gt; &lt;div&gt;文档中的块级元素&lt;/div&gt; &lt;span&gt;文档中的内联元素&lt;/span&gt; &lt;/code&gt;&lt;/pre&gt; &lt;hr&gt; &lt;h2 id="无序列表-ul"&gt;无序列表-ul&lt;/h2&gt; &lt;p&gt;自动设置每个li前面加小黑点&lt;/p&gt; &lt;p&gt;li标签之间可以加任何元素&lt;/p&gt; &lt;p&gt;ul标签之间只能是li标签&lt;/p&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;ul&gt; &lt;li&gt;项目&lt;/li&gt; &lt;li&gt;项目&lt;/li&gt; &lt;/ul&gt; &lt;!--去掉小黑点--&gt; list-style:none; &lt;/code&gt;&lt;/pre&gt; &lt;hr&gt; &lt;h2 id="有序列表"&gt;有序列表&lt;/h2&gt; &lt;p&gt;自动设置每个li前面为有顺序的数字&lt;/p&gt; &lt;p&gt;li标签之间可以加任何元素&lt;/p&gt; &lt;p&gt;ol标签之间只能是li标签&lt;/p&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;ol&gt; &lt;li&gt;第一项&lt;/li&gt; &lt;li&gt;第二项&lt;/li&gt; &lt;/ol&gt; &lt;/code&gt;&lt;/pre&gt; &lt;hr&gt; &lt;h2 id="自定义定义列表-列表项前面不会有符号"&gt;(自定义)定义列表-列表项前面不会有符号&lt;/h2&gt; &lt;p&gt;dl标签之间只能出现dt和dd，可以有多个，但是一般一个dt后面伴随多个dd&lt;/p&gt; &lt;p&gt;dd和dt标签之间可以放任何元素&lt;/p&gt; &lt;p&gt;dl是自定义列表的容器&lt;/p&gt; &lt;p&gt;dt就是列表名&lt;/p&gt; &lt;p&gt;dd就是列表项&lt;/p&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;dl&gt; &lt;dt&gt;项目 1&lt;/dt&gt; &lt;dd&gt;描述项目 1&lt;/dd&gt; &lt;dt&gt;项目 2&lt;/dt&gt; &lt;dd&gt;描述项目 2&lt;/dd&gt; &lt;/dl&gt; &lt;/code&gt;&lt;/pre&gt; &lt;hr&gt; &lt;h2 id="表格tables"&gt;表格（Tables）&lt;/h2&gt; &lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;表格标题&lt;/th&gt; &lt;th&gt;表格标题&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;表格数据&lt;/td&gt; &lt;td&gt;表格数据&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;table border=&quot;1&quot;&gt; &lt;tr&gt; &lt;th&gt;表格标题&lt;/th&gt; &lt;!--th表头单元格标签-加粗j显示--&gt; &lt;th&gt;表格标题&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;表格数据&lt;/td&gt; &lt;td&gt;表格数据&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/code&gt;&lt;/pre&gt; &lt;hr&gt; &lt;h2 id="表格属性"&gt;表格属性&lt;/h2&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220127190226486.png" alt="image-20220127190226486" loading="lazy"&gt;&lt;/p&gt; &lt;h2 id="表格结构标签-theadtbody"&gt;表格结构标签-thead,tbody&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;table&gt; &lt;thead&gt; //表格的头部区域 &lt;tr&gt; &lt;td&gt; asd &lt;/td&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; //表格的主体区域 &lt;/tbody&gt; &lt;/table&gt; &lt;/code&gt;&lt;/pre&gt; &lt;h2 id="合并单元格"&gt;合并单元格&lt;/h2&gt; &lt;ul&gt; &lt;li&gt; &lt;p&gt;跨行合并：rowspan=&quot;合并单元格的个数&quot;&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;p&gt;跨列合并：colspan=&quot;合并单元格的个数&quot;&lt;/p&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220127192150888.png" alt="image-20220127192150888" loading="lazy"&gt;&lt;/p&gt; &lt;/li&gt; &lt;/ul&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220127192645281.png" alt="image-20220127192645281" loading="lazy"&gt;&lt;/p&gt; &lt;h2 id="框架iframe"&gt;框架（Iframe）&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;iframe src=&quot;demo_iframe.htm&quot;&gt;&lt;/iframe&gt; &lt;/code&gt;&lt;/pre&gt; &lt;hr&gt; &lt;h2 id="表单forms"&gt;表单（Forms）&lt;/h2&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;属性&lt;/th&gt; &lt;th&gt;属性值&lt;/th&gt; &lt;th&gt;作用&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;action&lt;/td&gt; &lt;td&gt;url地址&lt;/td&gt; &lt;td&gt;指定接受表单数据的服务器程序的url&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;method&lt;/td&gt; &lt;td&gt;get/post&lt;/td&gt; &lt;td&gt;设置表单提交方式，只能是get/post&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;name&lt;/td&gt; &lt;td&gt;名称&lt;/td&gt; &lt;td&gt;指定表单的名称，以区分同一个页面的多个表单域&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;form action=&quot;demo_form.php&quot; method=&quot;post/get&quot; name=&quot;add&quot;&gt; &lt;input type=&quot;text&quot; name=&quot;email&quot; size=&quot;40&quot; maxlength=&quot;50&quot;&gt; &lt;input type=&quot;password&quot;&gt; &lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot;&gt; &lt;!--radio控件必须要有相同的name才能实现多选--&gt; &lt;input type=&quot;radio&quot; name=&quot;a&quot; checked=&quot;checked&quot;&gt; &lt;!--checked表示首次加载时就被选中--&gt; &lt;input type=&quot;radio&quot; name=&quot;a&quot; maxlength=&quot;10&quot;&gt; &lt;!--maxlength表示可输入的最大长度--&gt; &lt;input type=&quot;radio&quot; name=&quot;a&quot;&gt; &lt;input type=&quot;submit&quot; value=&quot;Send&quot;&gt; &lt;input type=&quot;reset&quot;&gt; &lt;input type=&quot;hidden&quot;&gt; &lt;!--select是下拉列表--&gt; &lt;select&gt; &lt;!--只能包含option标签--&gt; &lt;option&gt;苹果&lt;/option&gt; &lt;!--selected是默认选中项--&gt; &lt;option selected=&quot;selected&quot;&gt;香蕉&lt;/option&gt; &lt;option&gt;樱桃&lt;/option&gt; &lt;/select&gt; &lt;!--当内容文字过多时可以使用文字域textarea-&gt;可以多行输入的控件--&gt; &lt;textarea name=&quot;comment&quot; rows=&quot;60&quot; cols=&quot;20&quot;&gt;&lt;/textarea&gt; &lt;!--rows是显示的行数（高），cols每行的字符数（宽），常用于css--&gt; &lt;!--1字符等于2字节，一个数字/字母/符号1字节--&gt; &lt;/form&gt; &lt;/code&gt;&lt;/pre&gt; &lt;h2 id="html-表单标签"&gt;HTML 表单标签&lt;/h2&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220128112110152.png" alt="image-20220128112110152" loading="lazy"&gt;&lt;/p&gt; &lt;hr&gt; &lt;h2 id="表单元素"&gt;&lt;input&gt;表单元素&lt;/h2&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220128114426256.png" alt="image-20220128114426256" loading="lazy"&gt;&lt;/p&gt; &lt;h2 id="label标签"&gt;label标签&lt;/h2&gt; &lt;p&gt;&lt;img src="https://picfortypora.oss-cn-hangzhou.aliyuncs.com/img/image-20220128114823809.png" alt="image-20220128114823809" loading="lazy"&gt;&lt;/p&gt; &lt;h2 id="实体entities"&gt;实体（Entities）&lt;/h2&gt; &lt;p&gt;&lt; 等同于 &lt; &gt; 等同于 &gt; © 等同于 ©&lt;/p&gt; &lt;pre&gt;&lt;code class="language-html"&gt; &amp;lt; 等同于 &lt; &amp;gt; 等同于 &gt; &amp;#169; 等同于 © &lt;/code&gt;&lt;/pre&gt; &lt;h1 id="_"&gt;&lt;head&gt;&lt;/h1&gt; &lt;h4 id="-定义了html文档的标题"&gt;&lt;title&gt;-定义了HTML文档的标题&lt;/h4&gt; &lt;p&gt;使用 &lt;title&gt; 标签定义HTML文档的标题&lt;/p&gt; &lt;h4 id="-定义了所有的链接的url"&gt;&lt;base&gt;-定义了所有的链接的URL&lt;/h4&gt; &lt;p&gt;使用 &lt;base&gt; 定义页面中所有链接默认的链接目标地址&lt;/p&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;head&gt; &lt;base href=&quot;http://www.runoob.com/images/&quot; target=&quot;_blank&quot;&gt; &lt;/head&gt; &lt;/code&gt;&lt;/pre&gt; &lt;h4 id="-提供了html文档的meta标记"&gt;&lt;meta&gt;-提供了HTML文档的meta标记&lt;/h4&gt; &lt;p&gt;使用 &lt;meta&gt; 元素来描述HTML文档的描述，关键词，作者，字符集等&lt;/p&gt; &lt;p&gt;为搜索引擎&lt;strong&gt;定义关键词&lt;/strong&gt;:&lt;/p&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;meta name=&quot;keywords&quot; content=&quot;HTML, CSS, XML, XHTML, JavaScript&quot;&gt; &lt;/code&gt;&lt;/pre&gt; &lt;p&gt;为网页定义&lt;strong&gt;描述内容&lt;/strong&gt;:&lt;/p&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;meta name=&quot;description&quot; content=&quot;免费 Web &amp; 编程 教程&quot;&gt; &lt;/code&gt;&lt;/pre&gt; &lt;p&gt;定义网页&lt;strong&gt;作者&lt;/strong&gt;:&lt;/p&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;meta name=&quot;author&quot; content=&quot;Runoob&quot;&gt; &lt;/code&gt;&lt;/pre&gt; &lt;p&gt;每30秒钟&lt;strong&gt;刷新当前页面&lt;/strong&gt;:&lt;/p&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;meta http-equiv=&quot;refresh&quot; content=&quot;30&quot;&gt; &lt;/code&gt;&lt;/pre&gt; &lt;h2 id="html--元素导入外部css样式表"&gt;HTML &lt;link&gt; 元素(导入外部CSS样式表)&lt;/h2&gt; &lt;link&gt; 标签定义了文档与外部资源之间的关系。 &lt;link&gt; 标签通常用于**链接到样式表**: &lt;pre&gt;&lt;code class="language-html"&gt;&lt;head&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;mystyle.css&quot;&gt; &lt;/head&gt; &lt;!--rel=&quot;stylesheet&quot; --&gt; &lt;!--rel是relation的缩写 --&gt; &lt;!--这指出引用的文件是一个样式表 --&gt; &lt;!--rel的所有值之中，只有&quot;stylesheet&quot;是所有浏览器都支持的 --&gt; &lt;/code&gt;&lt;/pre&gt; &lt;h1 id="html5-canvas-默认没有边框和内容"&gt;HTML5 Canvas-默认没有边框和内容&lt;/h1&gt; &lt;hr&gt; &lt;p&gt;&quot;&lt;canvas&gt; 标签&lt;strong&gt;定义图形&lt;/strong&gt;，比如图表和其他图像，您必须使用&lt;strong&gt;脚本来绘制图形&lt;/strong&gt;。&lt;br&gt; HTML5 &lt;canvas&gt; 元素用于图形的绘制，通过脚本 (&lt;strong&gt;通常是JavaScript&lt;/strong&gt;)来完成.&quot;&lt;/p&gt; &lt;p&gt;&quot;&lt;canvas&gt; 标签只是图形容器，您必须使用脚本来绘制图形。&quot;&lt;/p&gt; &lt;p&gt;你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。&lt;/p&gt; &lt;h2 id="创建一个画布canvas"&gt;创建一个画布（Canvas）&lt;/h2&gt; &lt;p&gt;一个画布在网页中是一个矩形框，通过 &lt;canvas&gt; 元素来绘制.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;注意:&lt;/strong&gt; &lt;strong&gt;默认&lt;/strong&gt;情况下 &lt;canvas&gt; 元素&lt;strong&gt;没有边框和内容&lt;/strong&gt;。&lt;/p&gt; &lt;p&gt;&lt;strong&gt;注意:&lt;/strong&gt; 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;提示:&lt;/strong&gt;你可以在HTML页面中使用多个 &lt;canvas&gt; 元素.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;使用 style 属性来添加边框:&lt;/strong&gt;&lt;/p&gt; &lt;h2 id="实例-6"&gt;实例&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-html"&gt;&lt;canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot; style=&quot;border:1px solid #000000;&quot;&gt; &lt;/canvas&gt; &lt;/code&gt;&lt;/pre&gt; &lt;h2 id="使用-javascript-来绘制图像-就了解一下以后再学"&gt;使用 JavaScript 来绘制图像-就了解一下以后再学&lt;/h2&gt; &lt;p&gt;canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：&lt;/p&gt; &lt;h2 id="实例-7"&gt;实例&lt;/h2&gt; &lt;pre&gt;&lt;code class="language-js"&gt;var c=document.getElementById(&quot;myCanvas&quot;); var ctx=c.getContext(&quot;2d&quot;); //创建 context 对象,相当于matlab使用2d的绘图工具 //getContext(&quot;2d&quot;) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 //下面的两行代码绘制一个红色的矩形 ctx.fillStyle=&quot;#FF0000&quot;; ctx.fillRect(0,0,150,75); //设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。 //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。 &lt;/code&gt;&lt;/pre&gt; &lt;h1 id="html5支持svg"&gt;HTML5支持SVG&lt;/h1&gt; &lt;h2 id="什么是svg"&gt;什么是SVG？&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;SVG 指可伸缩矢量图形 (Scalable Vector Graphics)&lt;/li&gt; &lt;li&gt;SVG 用于定义用于网络的基于矢量的图形&lt;/li&gt; &lt;li&gt;SVG 使用 XML 格式定义图形&lt;/li&gt; &lt;li&gt;SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失&lt;/li&gt; &lt;li&gt;SVG 是万维网联盟的标准&lt;/li&gt; &lt;/ul&gt; &lt;h2 id="svg优势"&gt;SVG优势&lt;/h2&gt; &lt;p&gt;与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;SVG 图像可通过文本编辑器来创建和修改&lt;/li&gt; &lt;li&gt;SVG 图像可被搜索、索引、脚本化或压缩&lt;/li&gt; &lt;li&gt;SVG 是可伸缩的&lt;/li&gt; &lt;li&gt;SVG 图像可在任何的分辨率下被高质量地打印&lt;/li&gt; &lt;li&gt;SVG 可在图像质量不下降的情况下被放大&lt;/li&gt; &lt;/ul&gt; &lt;h1 id="html5-支持mathml"&gt;HTML5 支持MathML&lt;/h1&gt; &lt;p&gt;HTML5 可以在文档中使用 MathML 元素，对应的标签是 &lt;math&gt;...&lt;/math&gt; 。&lt;/p&gt; &lt;p&gt;MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。&lt;/p&gt; &lt;h1 id="获取用户当前经纬度地理位置谷歌"&gt;获取用户当前经纬度，地理位置(谷歌)&lt;/h1&gt; &lt;pre&gt;&lt;code class="language-js"&gt; var x=document.getElementById(&quot;demo&quot;); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML=&quot;该浏览器不支持获取地理位置。&quot;; } } function showPosition(position) { x.innerHTML=&quot;纬度: &quot; + position.coords.latitude + &quot;&lt;br&gt;经度: &quot; + position.coords.longitude; } function showPosition(position) { var latlon=position.coords.latitude+&quot;,&quot;+position.coords.longitude; var img_url=&quot;http://maps.googleapis.com/maps/api/staticmap?center=&quot; +latlon+&quot;&amp;zoom=14&amp;size=400x300&amp;sensor=false&quot;; document.getElementById(&quot;mapholder&quot;).innerHTML=&quot;&lt;img src='&quot;+img_url+&quot;'&gt;&quot;; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML=&quot;用户拒绝对获取地理位置的请求。&quot; break; case error.POSITION_UNAVAILABLE: x.innerHTML=&quot;位置信息是不可用的。&quot; break; case error.TIMEOUT: x.innerHTML=&quot;请求用户地理位置超时。&quot; break; case error.UNKNOWN_ERROR: x.innerHTML=&quot;未知错误。&quot; break; } } &lt;/code&gt;&lt;/pre&gt; &lt;h1 id="获取当前经纬度并绘图百度地图"&gt;获取当前经纬度，并绘图(百度地图)&lt;/h1&gt; &lt;pre&gt;&lt;code class="language-html"&gt; &lt;!DOCTYPE html&gt; &lt;!--点击按钮，获取坐标，绘制百度地图--&gt; &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; &lt;meta name=&quot;keywords&quot; content=&quot;百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具&quot; /&gt; &lt;meta name=&quot;description&quot; content=&quot;百度地图API自定义地图，帮助用户在可视化操作下生成百度地图&quot; /&gt; &lt;title&gt;百度地图API自定义地图&lt;/title&gt; &lt;!--引用百度地图API--&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://api.map.baidu.com/api?v=2.0&amp;ak=c6KhDElgRUq0kYjXcnlr5jThAT3WTuCe&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=&quot;button&quot; onclick=&quot;getLocation()&quot; value=&quot;确认&quot; /&gt; &lt;div id=&quot;position_x&quot;&gt;&lt;/div&gt; &lt;div id=&quot;position_y&quot;&gt;&lt;/div&gt; &lt;!--百度地图容器--&gt; &lt;div style=&quot;width:700px;height:550px;border:#ccc solid 1px;font-size:12px&quot; id=&quot;map&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;script type=&quot;text/javascript&quot;&gt; 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(&quot;map&quot;); 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(&quot;click&quot;,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; &lt;/script&gt; &lt;/html&gt; &lt;/code&gt;&lt;/pre&gt;
posted @ 2023-06-06 09:03  迷路之本  阅读(21)  评论(0)  编辑  收藏  举报