前端 -- HTML学习_诸葛一帆 csdn-CSDN博客

什么是HTML？
HTML 不是一种编程语言，而是一种标记语言，它有一套标记标签 (markup tag)。
HTML 使用标记标签来描述网页。
以下是一个HTML标记的例子：
<p>这是一个段落。</p>
网页结构
你可以使用 HTML 来建立自己的 WEB 站点，获取此技能是学习如何创建站点的出发点。
网页主要由3个部分组成：
- HTML：结构（Structure）
- CSS：表现（Presentation）
- JavaScript：行为（Behavior）
<-html>标签
<-html>元素定义了整个 HTML 文档。
这个元素拥有一个开始标签<-html> ，以及一个结束标签<-/html>。
<-head> 标签
<-head> 元素包含了所有的头部标签元素。
<-head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息。
<-body> 标签
<-body> 元素定义文档的主体。
<-body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
以下是HTML的基本结构：

<html>
   <head>
   </head>
   <body>
   </body>
</html>

注意
注意：对于中文网页需要使用 <-meta charset=”utf-8”> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <-meta charset=”gbk”>。
<-title> 标签
<-title> 标签定义了 HTML 文档的标题，在所有 HTML 文档中是必需的。
- <-title> 元素：
  1.定义浏览器工具栏中的标题
  2.提供页面被添加到收藏夹时的标题
  3.显示在搜索引擎结果中的页面标题
<-p> 标签
创建段落，是通过 <-p> 标签定义的。
<-br /> 标签
如果你希望在不产生一个新段落的情况下进行换行（新行），请使用 <-br /> 标签：
注意：即使 <-br> 在所有浏览器中都是有效的，但使用 <-br /> 其实是更长远的保障。
格式化元素
HTML 使用标签<-b> 与 <-i>对输出的文本进行格式化，如：粗体和斜体。
- 例子
  <-b>： 定义粗体文本
  <-em>：定义着重文字
  <-i>： 定义斜体字
  <-small>：定义小号字
  <-strong>：定义重要的文本
  <-sub>：_{定义下标字}
  <-sup>：^{定义上标字}
  <-ins>：定义插入字
  <-del>：~~定义删除字~~
HTML 标题
HTML标题（Heading）是通过 <-h1> - <-h6> 标签进行定义的。
根据重要性排列，<-h1>定义最大的标题，<-h6> 定义最小的标题。
*注意：请确保将 HTML 标题标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题。
HTML 水平线
<-hr> 标签在 HTML 页面中创建水平线。
<-hr> 元素可用于分隔 HTML 页面中的内容。
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。
浏览器会忽略注释，也不会显示它们。
注释写法如下：<-!– 这是一个注释 –>
HTML 属性
属性是 HTML 元素提供的附加信息，属性一般描述于开始标签。
属性总是以名称/值对的形式出现，比如：<-p align=”center”> <-/p>。
- 例子
  align=”center”：此文本居中对齐
  class=”intro”：定义一个或多个类名
  id=”header”：文档中必须是唯一的
  width=”50%”：定义宽度
  height=”50%”：定义高度
  align=”left”：定义对齐方式
HTML 图像
在 HTML 中，图像由 <-img> 标签定义。
<-img> 是空标签，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。源属性的值是图像的 URL 地址。
注意：如果图像无法显示，则 alt 属性用来为图像定义一串预备的可替换的文本。alt 属性是必需的。
注意：height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。该属性值可以以 像素（px） 或 百分比 (%)形式指定，默认单位为像素。
注意：border 属性规定图像周围的边框的宽度。
例如：<-img src=”url” height=”100px” width=”100px” border=”2” alt=”” />
HTML 链接
HTML使用标签 <-a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
在标签 <-a> 中使用href属性来描述链接的目标地址。
注意：使用 target 属性，你可以规定在何处打开链接文档，给属性赋予 _blank 值将使链接在新窗口或新选项卡中打开。
例如：<-a href=”https://www.w3cschool.cn” target=”_blank”>访问W3Cschool<-/a>
HTML 列表
创建无序列表，要使用 <-ul> 标签，其中每个列表项由 <-li> 标签表示。
创建有序列表，要使用 <-ol> 标签，每个列表项始于 <-li> 标签。
HTML 表格
表格由 <-table> 标签来定义，每个表格均有若干行（由 <-tr> 标签定义），每行被分割为若干单元格（由 <-td> 标签定义）。
注意：border 属性规定表格单元周围是否显示边框，如果不定义边框属性，表格将不显示边框。
注意：表格的表头使用 <-th> 标签进行定义。
注意：使用 colspan 和 rowspan 属性分别定义跨列和跨行的表格单元格。
注意：空的 <-td> 标签表示空单元格。它们是必要的，因为它们维持了表格的结构。
HTML 区块
<-div> 元素没有特定的含义，它属于块级元素，可用于组合其他 HTML 元素的容器，浏览器会在其前后显示折行，如果与 CSS 一同使用，<-div> 元素可用于对大的内容块设置样式属性。
<-span> 元素是内联元素，可用作文本的容器，<-span> 元素也没有特定的含义，当与 CSS 一同使用时，<-span> 元素可用于为部分文本设置样式属性。
HTML 表单
<-form> 标签用于创建供用户输入的 HTML 表单。
使用 action 属性规定当提交表单时，向何处发送表单数据。
method 属性指定在提交表单时使用的 http 方法：get 或 post。
提示：当您使用 get 时，表单数据将在页面地址中显示。如果表单正在更新数据或使用敏感信息（密码），请使用 post。post 提供更好的安全性，因为提交的数据在页面地址中不可见。
name 属性指定表单的名称。要接收用户输入，你需要相应的表单元素，如文本字段。而输入类型是由类型属性（type）定义的，大多数经常被用到的输入类型有：text，password，radio，checkbox，submit 等。
<-input type=”radio”> 标签定义了表单单选框选项。
<-input type=”checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<-input type=”submit” value=”Submit” /> 提交按钮将表单提交到其 action 属性：
例子：<-form action=”url” method=”get”>
例子：<-input type=”text” name=”username” />
HTML 框架
<-iframe> 标签规定一个内联框架,一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
注意：height 和 width 属性用来定义 iframe 标签的高度与宽度。
注意：frameborder 属性用于定义iframe表示是否显示边框。
HTML 5
在编写 HTML5 文档时，<-!doctype> 声明必须位于 HTML5 文档中的第一行:
HTML5 内容模型
HTML5 中引入了很多的标记元素，根据内容类型的不同，这些元素被分成了7大类：内联（embedded）
、流（flow）、标题（heading)、交互（interactive）、元数据（metadata）、短语（phrasing）、区段（sectioning)
元数据：通常出现在页面的head中，设置页面其他部分的表现和行为。
元素：<-base>，<-link>，<-meta>，<-noscript>，<-script>，<-style>，<-title>。
内联：在文档中添加其他类型的内容。
元素：<-audio>，<-video>，<-canvas>，<-iframe>，<-img>，<-math>，<-object>，<-svg>。
交互：与用户交互的内容。
元素：<-a> , <-audio> , <-video> , <-button> , <-details> , <-embed> , <-iframe> , <-img> , <-input> , <-label> , <-object> , <-select> , <-textarea>。
标题：定义段落标题。
元素：<-h1>，<-h2>，<-h3>，<-h4>，<-h5>，<-h6>，<-hgroup>。
短语：文本和文本标记元素。
元素：<-img>，<-span>，<-strong>，<-label>，<-br />，<-small>，<-sub>等。
流内容：包含将包含在文档正常流程中的大多数HTML5元素。
区段内容：定义标题，内容，导航和页脚的范围。
元素：<-article>，<-aside>，<-nav>，<-section>
HTML5 页面结构
通用的 HTML5 页面结构如下图所示：
<-header> 标签
<-header> 标签定义了文档的头部区域。<-header> 元素适合在标签内部使用。
<-footer> 标签
在 HTML5 中，<-footer> 标签定义文档或者文档的一部分区域的页脚。
注意：在典型情况下，<-footer> 元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
<-nav> 标签
在 HTML5 中，<-nav> 标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到 <-nav> 元素。<-nav> 元素只是作为标注一个导航链接的区域。
<-article> 标签
在 HTML5 中，<-article> 标签定义独立的内容。<-article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
<-section> 标签
在 HTML5 中，<-section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
<-aside> 标签
在 HTML5 中，<-aside> 标签定义 <-article> 标签外的内容。aside 的内容应该与附近的内容相关。
<-audio> 元素
<-audio> 标签定义声音，比如音乐或其他音频流。目前，<-audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
注意：<-audio> 元素允许使用多个 <-source> 元素. <-source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
src 属性，规定音频文件的 URL。
control 属性供添加播放、暂停和音量控件。
autoplay 属性，如果出现该属性，则音频在就绪后马上播放。
loop 属性，如果出现该属性，则每当音频结束时重新开始播放。
注意：可以在 <-audio> 和 <-/audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <-audio> 标签的浏览器中。
<-video> 元素
<-video> 标签定义视频，比如电影片段或其他视频流。目前，<-video> 元素支持三种视频格式：MP4、WebM、Ogg。
<-video> 元素和 <-audio> 元素一样，都有 controls，autoplay 和 loop 属性。
<-progress> 标签
<-progress> 标签定义运行中的任务进度（进程）。
max：规定需要完成的值。value：规定进程的当前值。
Web 存储 API
Web 存储对象有两种类型：localStorage 、sessionStorage
localStorage 对象存储的数据没有时间限制。
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 清除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
地理定位 API
HTML5 Geolocation API 用于获得用户的地理位置。
Geolocation API 的主要方法是 getCurrentPosition，它用来获得用户的位置。
getCurrentPosition() 方法返回数据：
- coords.latitude：十进制数的纬度
- coords.longitude：十进制数的经度
- coords.accuracy：位置精度
- coords.altitude：海拔，海平面以上以米计
- coords.altitudeAccuracy：位置的海拔精度
- coords.heading：方向，从正北开始以度计
- coords.speed：速度，以米/每秒计
- timestamp：响应的日期/时间
HTML5 拖放
拖放（Drag 和 drop）是 HTML5 标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
首先，为了使元素可拖动，需要把 draggable 属性设置为 true ：
HTML5 SVG
什么是 SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准

在 HTML5 中，你能够直接将 SVG 元素嵌入 HTML 页面中。
要使用 SVG 绘制图形，你首先需要创建一个 <-svg> 标签。
要创建一个圆形，需要添加一个 <-circle> 标签。****cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为 (0, 0)。r属性定义圆的半径。
<-rect> 标签可用来创建矩形，以及矩形的变种。
<-line> 标签是用来创建一个直线。
<-polyline> 标签是用于创建任何只有直线的形状。
<-polygon> 标签用来创建含有不少于三个边的图形。
<-ellipse> 标签是用来创建一个椭圆。

HTML5 SVG 动画 & 路径
SVG 动画可以使用 <-animate> 元素创建。
- attributeName：指定哪个属性需要产生动画效果（要无限重复动画，请使用值 “indefinite” 作为 repeatCount 属性。）
  from：指定属性的起始值
  to：指定属性的结束值
  dur：指定动画运行的时间（持续时间）
  fill=“freeze|remove”：指定动画播放完毕后是停留在播放的终点还是回到起始位置
  repeatCount：指定动画的重复播放次数
  <-path> 元素用于定义一个路径。
HTML5 Canvas
HTML5 <-canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。<-canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
<-canvas> 标签通常需要指定一个id属性 (脚本中经常引用)，width 和 height 属性定义的画布的大小。
canvas 的左上角坐标为 (0,0)。
rotate() 方法用于旋转 HTML5 画布。
translate(x,y) 方法用于移动 Canvas。
scale() 方法缩放当前绘图至更大或更小。
- Canvas - 路径
  在Canvas上画线，我们将使用以下两种方法：
  moveTo(x,y) 定义线条开始坐标
  lineTo(x,y) 定义线条结束坐标
  在canvas中绘制圆形, 我们将使用以下方法:
  arc(x,y,r,start,stop)
- Canvas - 文本
  使用 canvas 绘制文本，重要的属性和方法如下：
  font - 定义字体
  fillText(text,x,y) - 在 canvas 上绘制实心的文本
  strokeText(text,x,y) - 在 canvas 上绘制空心的文本
- Canvas - 渐变
  渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
  以下有两种不同的方式来设置Canvas渐变：
  createLinearGradient(x,y,x1,y1) - 创建线条渐变
  createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
  当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
  addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
  使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
- Canvas - 图像
  把一幅图像放置到画布上, 使用以下方法:
  drawImage(image,x,y)
SVG 与 Canvas 的区别:
- SVG
  SVG 是一种使用 XML 描述 2D 图形的语言。
  SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
  特点：
  不依赖分辨率
  支持事件处理器
  最适合带有大型渲染区域的应用程序（比如谷歌地图）
  复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  不适合游戏应用
- Canvas
  Canvas 通过 JavaScript 来绘制 2D 图形。
  Canvas 是逐像素进行渲染的。
  在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
  特点：
  依赖分辨率
  不支持事件处理器
  弱的文本渲染能力
  能够以 .png 或 .jpg 格式保存结果图像
  最适合图像密集型的游戏，其中的许多对象会被频繁重绘
HTML5 表单
HTML5 添加了一个名为 placeholder 的新属性。在 <-input> 和 <-textarea> 元素上，此属性提供一种提示，描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。
当表autofocus 属性规定在页面加载时，域自动地获得焦点。
required 属性规定必须在提交之前填写输入域（不能为空）。
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
新的search搜索输入类型可用于创建搜索框：
<-datalist> 元素规定输入域的选项列表。<-datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
HTML5 拥有多个新的输入类型，包括 email，tel，url，date，time 等。