HTML

指的是超文本标记语言（Hyper Text Markup Language）是一种标记语言（markup language）。

超文本的含义它可以加入图片、声音、动画、多媒体等内容（超越文本限制）。

文档类型声明标签

这句话的意思是：当前页面采用的是 HTML5 版本来显示网页。注意：

html

1. <!DOCTYPE> 声明位于文档最前面的位置，处于<html>标签之前。
2. <!DOCTYPE> 不是一个 HTML 标签，他就是文档类型声明标签。

这句话的意思是：当前页面采用的是 HTML5 版本来显示网页。注意：

lang 语言种类

用来显示当前文档显示的语言。

html

<html lang="zh-CN">
  <html lang="en"></html>
</html>

en 定义语言为英文。
zh-CN 定义语言为中文。

这个属性对浏览器和搜索引擎（谷歌/百度）还是有作用的。

meta 标签

charset 字符集

<meta charset="UTF-8" />

用的值有：GBK、UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

页面描述

许多 <meta> 元素包含了 name 和 content 属性：

name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容这两个 meta 元素对于定义你的页面的作者和提供页面的简要描述是很有用的

视口 viewport

html

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width ：表示视口宽度等于屏幕宽度。 viewport 这个知识点，初学者还比较难理解，以后学 Web 移动端的时候会用到。

HTML 中的注释和特殊字符号

注释: VSCode 中快捷键：Ctrk + /
字符实体

字符	显示
` `	空格
`<`	＜
`>`	＞
`©`	©

字体标签`<font>`

属性：

color="红色"或color="#ff00cc"或color="new rgb(0,0,255)"：设置字体颜色。设置方式：单词 \ #ff00cc \ rgb(0,0,255)
size：设置字体大小。取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。
face="微软雅黑"：设置字体类型。

HTML 常用标签

标题标签 h1-h6

<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

段落 p 和换行标签 br

p 指paragraph，意为段落。把文字有条理的显示出来就需要将文字分段显示。

在 html 中，<p>标签用于定义段落，将整个网页分成若干个段落。

<p>我是一个段落标签</p> 标签语义: 把 HTML 文档分割为若干段落。特点：

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。 <br/> 是 break 缩写，意为打断、换行。标签语义：强制换行特点：
<br/> 是个单标签。
<br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

文本格式化标签 strong加粗 em斜体删除线del 下划线ins (废弃)

语义标签

加粗 <strong></strong>
斜体 <em></em>
删除线 <del></del>
下划线 <ins></ins>

这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。
类似的还有水平线标签：<hr /> 换行标签：<br /> 但是，网页中需要换行的时候，是因为另起了一个段落，所以要用p，而不要用<br />。

div 和 span 标签

div 和 span是没有语义的，它们是一个盒子，用来装内容的。

<div>这是头部</div><span>今日价格</span>

div 是 division 的缩写，表示分割、分区。span 意思是跨度、跨距。特点：

div 标签用来布局，但是现在一行只能放一个 div，大盒子。
span 标签用来布局，一行可以多个 span，小盒子。

图像标签和路径

图像标签 <img src="图像url" />
单词 image 的缩写，意为图像。
src 是标签的必须属性，用于指定图像文件的路径和文件名。

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，当图片不显示时显示文字
title	文本	提示文本。鼠标放到图像上显示文字
width	像素	图像宽度
height	像素	图像高度
border	像素	图像边框粗细

路径

相对路径：以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。

分类	符号	说明
同级路径		同一级
下一级路径	/	位于 HTML 文件上一级
上一级路径	../	位于 HTML 文件下一级

绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。这里假设trade是根目录
1、基准a.html访问当前目录下img文件夹中的图片 src = ./img/a.jpg 或者 src = img/a.jpg ，img默认是当前目录下的img文件夹，./代表目录log
2、基准a.html访问上一级目录下img文件夹中的图片 src = ../img/b.jpg，../代表目录parameter
3、基准a.html访问根目录下img文件夹中的图片 src = /img/c.jpg 或者 src = ../../img/c.jpg， / 代表根目录trade，../../代表基准的上级目录parameter 的上级目录trade，即根目录

超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	指定链接地址 url，为必须属性。跳转地址
target	指定页面打开方式，_self为默认值，_blank为在新窗口中打开

超链接分类

外部链接
内部链接：网站内部页面之间的相互链接。
空链接: #
下载链接：地址链接的是文件.exe、压缩包.zip 等。
网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等。
锚点链接：点击链接，可以快速定位到页面中的某个位置。 ○ 在链接文本的href属性中，设置属性为 #名字的形式 ○ 找到目标位置标签，里面添加一个 id 属性 = 名字

HTML 语义化标签

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

表格标签`<table>`

表格基本语法

<table></table> 用于定义表格的标签。
<tr></tr> 标签用于定义表格中的行，必须嵌套在 <table></table>中。
<td></td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 中。
<th> 标签表示 HTML 表格的表头部分
字母 td 指表格数据（table data），即单元格的内容。

合并单元格
合并单元格方式：
● 跨行合并：rowspan="合并单元格个数"
● 跨列合并：colspan="合并单元格个数"

确定跨行 or 跨列。
找到目标单元格：跨行取最上面为目标单元格，跨列取最左边为目标单元格。<td colspan="2"></td>
删除多余单元格。

列表标签 `<ul>、<ol>、<dl>`

无序列表

html

<ul>     
<li>列表项1</li>    
 <li>列表项2</li>     
<li>列表项3</li> 
</ul>

有序列表

html

<ol>     
<li>列表项1</li>    
 <li>列表项2</li>     
<li>列表项3</li> 
</ol>

自定义列表

html

<dl>     
<dt>名词1</dt>     
<dd>名词1解释1</dd>     
<dd>名词1解释2</dd> 
</dl>

表单标签`<form>`

为什么需要表头
收集用户信息。和用户进行交互，收集用户资料。
表单域
表单域是一个包含表单元素的区域。
使用 <form> 标签用于定义表单域form 标签会将它范围内的表单元素信息提交给服务器。
语法格式
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件</form>
常用属性：

属性	属性值	作用
action	url 地址	指定接受并处理表单数据的服务器的 url 地址
method	get/post	设置表单数据的提交方式
name	名称	用于指定表单名称，区分同一个页面中的多个表单域

表单元素`<input>`

<input type="属性值" />
● input 标签为单标签
● type 属性设置不同属性值来指定不同控件类型

属性值	描述
button	定义可点击按钮
checkox	复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。字符被掩码。
radio	定义单选按钮
reset	定义重置按钮，清除表单所有数据。
submit	定义提交按钮。重置按钮会清除表单所有数据。
text	定义输入字段。用户可输入文本，默认宽度为 20 个字符。placeholder 占位字

input 的其他属性

属性	属性值	描述
name	自定义	定义 input 元素名称
value	自定义	规定 input 元素的值
checked	checked	规定此 input 元素首次加载时应当被选中
maxlength	正整数	规定输入字段字符的最大长度

注意

对于 radio 单选框，必须使 input 的 name 具有相同的属性值，才能实现多选一。同理，复选框也要有相同的name值。
单选框和复选框可以设置 checked 属性，页面打开默认选择按钮。
设置 type 的值为 submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。

`<label>` 标签

<label> 标签为 input 元素定义标注。
<label>标签用于绑定一个表单源深路，当点击 label 标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上，提升用户体验。语法： <label for="sex">男</label> <input type="radio" name="sex" id="sex" /> 核心：<lable>标签的 for 属性与相关元素的 id 属性相同。

`<select>` 下拉表单元素

select 标签设置多个选项让用户选择，节约页面空间。

html

<select>     
<option>选项1</option>     
<option>选项2</option>     
<option>选项3</option> 
</select>

注意

select 中至少包含一对 option。
在 option 中定义属性selected=selected，当前项即为默认选项

`<textarea>` 文本域表单元素

html

<textarea rows="3" cols="20">     
文本内容 
</textarea>

HTML5新增多媒体标签

视频 `<vedio>`

所有浏览器支持 mp4 格式。

src=url 视频地址
autoplay="autoplay"
controls="controls" 显示控件
width 设置宽度
height 设置高度
loop=loop 设置循环播放
preload="auto/none" 是否预加载
poster=url 封面图片
muted=muted 静音播放

音频 `<audio>`

所有浏览器支持 mp3 格式。

controls：显示控件
autoplay：（谷歌禁用）
loop=loop 设置循环播放

html

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

`<bgsound>`标签：播放背景音乐

属性：

src="音乐文件的路径"
loop="-1"：属性值代表播放次数，-1代表循环播放。

举例：

html

 <body>
 <bgsound src="王菲 - 清风徐来.mp3"></bgsound>
 </body>

SVG (矢量) 图形到网页中

SVG 是用于描述矢量图像的XML语言。它基本上是像 HTML 一样的标记，只是你有许多不同的元素来定义要显示在图像中的形状，以及要应用于这些形状的效果。
作为一个简单的例子，以下代码创建一个圆和一个矩形：

html

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

拖拽元素

页面中设置了 draggable="true" 属性的元素。

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <style>
      .box1{
        width: 200px;
        height: 200px;
        background-color: green;

      }
    </style>
  </head>
  <body>
    <!--给 box1 增加拖拽的属性-->
    <div class="box1" draggable="true"></div>
  </body>
</html>

alt

上图中，我们给 box1 增加了draggable="true" 属性之后，发现 box1 是可以拖拽的。
但是拖拽之后要做什么事情呢？这就涉及到事件监听。
拖拽元素的事件监听：（应用于拖拽元素）
● ondragstart当拖拽开始时调用
● ondragleave 当鼠标离开拖拽元素时调用
● ondragend 当拖拽结束时调用
● ondrag 整个拖拽过程都会调用

javascript

    <script>
      var box = document.querySelector('.box');

      //  绑定拖拽事件

      //  拖拽开始
      box.ondragstart = function () {
        console.log('拖拽开始.');
      }

      //  拖拽离开：鼠标拖拽时离开被拖拽的元素时触发
      box.ondragleave = function () {
        console.log('拖拽离开..');
      }

      //  拖拽结束
      box.ondragend = function () {
        console.log('拖拽结束...');
        console.log("---------------");
      }

      box.ondrag = function () {
        console.log('拖拽');
      }

    </script>

alt

Web 存储 H5 中有两种存储的方式

1、window.sessionStorage 会话存储：
● 保存在内存中。
● 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
● 在同一个窗口下数据可以共享。
2、window.localStorage 本地存储：
● 有可能保存在浏览器内存里，有可能在硬盘里。
● 永久生效，除非手动删除（比如清理垃圾的时候）。
● 可以多窗口共享。

HTML #

文档类型声明标签 #

lang 语言种类 #

meta 标签 #

页面描述 #

视口 viewport #

HTML 中的注释和特殊字符号 #

字体标签<font> #

HTML 常用标签 #

标题标签 h1-h6 #

段落 p 和换行标签 br #

文本格式化标签 strong加粗 em斜体 删除线del 下划线ins (废弃) #

div 和 span 标签 #

图像标签和路径 #

路径 #

绝对路径 #

超链接标签 #

HTML 语义化标签 #

表格标签<table> #

列表标签 <ul>、<ol>、<dl> #

表单标签<form> #

表单元素<input> #

<label> 标签 #

<select> 下拉表单元素 #

<textarea> 文本域表单元素 #

HTML5新增多媒体标签 #

视频 <vedio> #

音频 <audio> #

<bgsound>标签：播放背景音乐 #

SVG (矢量) 图形到网页中 #

拖拽元素 #

Web 存储 H5 中有两种存储的方式 #

HTML

文档类型声明标签

lang 语言种类

meta 标签

页面描述

视口 viewport

HTML 中的注释和特殊字符号

字体标签`<font>`

HTML 常用标签

标题标签 h1-h6

段落 p 和换行标签 br

文本格式化标签 strong加粗 em斜体删除线del 下划线ins (废弃)

div 和 span 标签

图像标签和路径

路径

绝对路径

超链接标签

HTML 语义化标签

表格标签`<table>`

列表标签 `<ul>、<ol>、<dl>`

表单标签`<form>`

表单元素`<input>`

`<label>` 标签

`<select>` 下拉表单元素

`<textarea>` 文本域表单元素

HTML5新增多媒体标签

视频 `<vedio>`

音频 `<audio>`

`<bgsound>`标签：播放背景音乐

SVG (矢量) 图形到网页中

拖拽元素

Web 存储 H5 中有两种存储的方式