一、HTML5概念

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。

二、HTML5标签

2.1、图片标签

标签的属性写在标签的内部，可存在多个属性（之间用空格隔开）

• src（图片地址）属性：用于放图片地址

• alt（替换文本）属性：当图片加载失败则显示alt里面的文本，否则不显示

• title（提示文本）属性（此属性还可用于其他标签）：当鼠标悬停时才显示的文本

2.2、标题标签

• 文字都有变大，且h1-> h6文字逐渐减小，独占一行

• H系列标签常应用于新闻的标题、网页的logo部分

• <h1>这是一级标题</h1>
  <h2>这是二级标题</h2>
  <h3>这是三级标题</h3>
  <h4>这是四级标题</h4>
  <h5>这是五级标题</h5>
  <h6>这是六级标题</h6>
  

2.3、段落标签

• 段落之间存在间隙，独占一行

• <p>
      这是一个段落
  </p>
  

2.4、文本格式化标签

• 需要让文字加粗、下划线、倾斜、删除线等效果

• <b></b>和<strong></strong>：加粗

• <u></u>和<ins></ins>：下划线

• <i></i>和<em></em>：倾斜

• <s></s>和<del></del>：删除线

2.5、容器标签

• div标签（大盒子）用来布局，但是一行只能放一个

• span标签（小盒子）用来布局，一行上可以多个

• <div>
      这是大盒子，一行只能放置一个
  </div>
  <span>
  	这是小盒子，一行可以放置多个
  </span>
  

2.6、音频标签

• controls：显示播放的控件

• toplay：自动播放（部分浏览器不支持）

• loop：循环播放

• <source> 用于指定 <picture> 、 <audio> 元素或 <video> 元素的多个媒体资源。它是一个空元素，意味着它没有内容，也没有结束标记。

• <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
      您的浏览器不支持 Audio 标签。
  </audio>
  

2.7、视频标签

• 属性同音频属性一样

• <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
      您的浏览器不支持 Video 标签。
  </video>
  

2.8、链接标签

• href：写需要跳转的页面

• 默认有下划线

• 未被点击，默认文字显示蓝色，否则文字显示紫色

• target属性：

  • _self：默认值，在当前窗口中跳转（覆盖原网页）；

  • _blank：在新窗口打开；

  • _parent：当前浏览环境的父级浏览上下文，如果没有父级框架，行为与 _self 相同；

  • _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先），如果没有祖先，行为与 _self 相同。

• 链接分类

  • 外部链接：例如< a href="https://www.baidu.com"> 百度\</a >；

  • 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如 <a href="index.html">首页</a >；

  • 空链接：如果当时没有确定链接目标时，<a href="#">首页</a >；

  • 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件；

  • 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接；

  • 锚点链接：点击链接，可以快速定位到页面中的某个位置；

    • 在链接文本的href属性中，设置属性值为 #名字的形式，如<a href="#two">第2集</a>；

    • 找到目标位置标签，里面添加一个id 属性="刚才的名字"，如：<h3 id="two">第2集介绍</h3>；

2.9、列表标签

<ul></ul>

• 列表每一项前面默认显示圆点标识

• <ul></ul>中只允许包含<li><li>

• <li></li>可以包含任何内容

• <ul>
      <li>内容1</li>
      <li>内容2</li>
      <li>内容3</li>
  </ul>
  

<ol></ol>

• 列表每一项前面默认显示序号标识

• <ol></ol>中只允许包含<li></li>

• <li></li>标签可以包含任何内容

• <ol>
      <li>内容1</li>
      <li>内容2</li>
      <li>内容3</li>
  </ol>
  

<dl></dl>

由<dl></dl>（表自定义列表的整体，包裹<dt></dt>和<dd></dd>）、<dt></dt>（表自定义列表的主题）、<dd></dd>（表自定义列表的针对主题的每一项内容）

• <dl>
      <dt></dt>
      <dd></dd>
  </dl>
  

• dl标签中只允许包含dt或dd标签

• dt或dd标签可以包含任何内容

• dd前会默认显示缩进效果

2.10、表格标签

• <table></table>：表格的整体，可用于包含多个<tr></tr>

• <tr></tr>：表格每行，可用于包裹<td></td>或者<th></th>

• <td></td>：表格单元格，可用于包裹内容

• <th></th>：表头单元格，表示一列小标题，通常用于表格的第一行，默认内部文字加粗并居中显示（<th></th>书写在<tr></tr>内部，用于替换<td></td>）

• <caption></caption>：表格大标题，表示表格整体大标题，默认在表格整体顶部居中的位置显示（注意的是，caption标签书写在table标签内部）

• 表格相关属性（实际开发中常用CSS样式进行设置）

  • border：边框的宽度

    • cellpadding：规定单元格边沿与其内容之间的空白，默认1px

    • cellspacing：规定单元格之间的空白，默认2px

    • border-collapse: collapse;（让相邻表格边框进行合并，得到细线边框效果）CSS样式

• 合并单元格：（需要注意的是，只有同一个结构标签中的单元格才能合并，不能跨结构标签合并）

  • 上下合并->只保留最上的，删除其他的，并设置rowspan属性的数值（将几个单元格合并数值就写几）

  • 左右合并->只保留最左的，删除其他的，并设置colspan属性的数值（将几个单元格合并数值就写几）

• 表格结构标签

  • <thead></thead>：用于定义表格的头部，<thead> 内部必须拥有 <tr> 标签， 一般是位于第一行

    • <tbody></tbody>：用于定义表格的主体，主要用于放数据本体

    • 以上标签都是放在 <table></table> 标签中

• <table>
    <thead>
      <tr>
        <th colspan="2">The table header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>The table body</td>
        <td>with two columns</td>
      </tr>
    </tbody>
  </table>
  

2.11、表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<label>	定义了<input>元素的标签，一般为输入标题
<textarea>	定义文本域（一个多行的输入控件）
<fieldset>	用于对表单中的控制元素进行分组（也包括 label 元素）
<legend>	定义了<fieldset>元素的标题
<select>	定义了下来选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段

<form></form>

• 表单域是一个包含表单元素的区域。 在 HTML 标签中，<form></form>用于定义表单域，以实现用户信息的收集和传递。

• <form action="" method="get" class="form-example">
    <div>
      <label for="name">请输入你的名字：</label>
      <input type="text" name="name" id="name" required />
    </div>
    <div>
      <label for="email">请输入你的邮箱：</label>
      <input type="email" name="email" id="email" required />
    </div>
    <div>
      <input type="submit" value="Subscribe!" />
    </div>
  </form>
  

• 在我们写表单元素（input、select、textarea）之前，应该有个表单域把他们进行包含。

<input />

可以通过type属性值的不同，展示不同的效果：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符

• text属性：文本框，用于输入单行文本

• password属性：密码框，用于输入密码

• audio属性：单选框，用于多选一

  • 对于radio属性，name属性具有分组的功能，有相同name的属性值的单选框为一组，一组中只能有一个被选中

  • 对于radio属性，checked属性具有默认选中的功能

• checkbox属性：多选框，用于多选多

  • 对于checkbox属性，checked属性具有默认选中的功能

• file属性：文件选择，用于之后上传文件

  • multiple属性：具有多文件选择的功能

  • accept属性：文件上传控件中预期文件类型的提示

  • <label for="avatar">选择个人资料图片：</label>
    <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />
    

• submit属性：提交按钮，用于提交

• reset属性：重置按钮，用于重置

• button属性：普通按钮，默认无功能，之后配合js添加功能

  • 对于submit、reset、button属性，要实现这三个功能，需要用<form></form>把表单标签一起包裹起来

• placeholder属性：占位符，提示用户输入内容的文本

• value属性和name属性作用

  • value属性：用户输入的内容，提交之后会发送给后端服务器

  • name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义

• 后端接收到的数据格式是：name的属性值 = value的属性值

除type属性外，<input>标签还有其他很多属性，其常用属性如下

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

• name和value是每个表单元素都有的属性值，主要给后台人员使用

  • 用户名: <input type="text" value="请输入用户名" name="username" /> 
    

• name表单元素的名字，要求 单选按钮 和 复选框 要有相同的name值

  • <input type="radio" name="sex" />男
    <input type="radio" name="sex" />女
    

• checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素

  • 性别:
    <input type="radio" name="sex" value="男" checked="checked" />男
    <input type="radio" name="sex" value="女" />女
    

• maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。

<select></select>

由<select></select>（下拉菜单的整体）和<option></option>（下拉菜单的每一项）组成，selected属性：下拉菜单的默认选中。

• <select> 中至少包含一对<option>

• 在<option>中定义 selected = “selected"时，当前项即为默认选中项

• 广东大学：
  <select>
      <option selected="selected">中山大学</option>
      <option>华南理工大学</option>
      <option>华南师范大学</option>
  </select>
  

<textare></textare>

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

• 属性：cols（规定文本域内可见宽度）和rows（规定了文本域内可见行数）

• 右下角可以拖拽改变大小，实际开发一般采用CSS样式

• 通过<textarea> 可以轻松地创建多行文本输入框

<button></button>

有submit、reset属性

• submit: 此按钮将表单数据提交给服务器，如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值

• reset: 此按钮重置所有组件为初始值

• button标签是双标签，便于包裹其他内容，如文字、图片等

<label></label>

• <label> 标签为input元素定义标注（标签），<label>标签用于绑定一个表单元素，当点击<label> 标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

• 使用方法：

  • 第一种方法

    • 使用label标签把内容（如文本）包裹起来

    • 在表单标签上添加id属性

    • 在label标签的for属性中设置对应的id属性值

    • <label for="man">男</label>
      <input type="radio" name="sex" id="man" />
      <label for="woman">女</label>
      <input type="radio" name="sex" id="woman" />
      

  • 第二种方法

    • 直接使用lable标签把内容（如文本）和表单标签一起包裹起来

    • 需要把label标签的for属性删除

    • <label>
          男<input type="radio" name="sex" />
      </label>
      <label>
          女<input type="radio" name="sex" />
      </label>
      

<fieldset><fieldset/>

<form action="" method="post">
    <fieldset>
        <legend>请选择你的爱好：</legend>

        <select name="myhobby" id="myhobby">
            <optgroup label="运动">
                <option value="篮球">篮球</option>
                <option value="足球">足球</option>
            </optgroup>
            <optgroup label="电子">
                <option value="看电影">看电影</option>
                <option value="看电视">看电视</option>
            </optgroup>
        </select>
    </fieldset>
</form>

2.12、语义化标签

标签	描述
<header>	头部标签，一般用于展示介绍性内容
<footer>	尾部标签，一般用于展示一些作者信息，版权信息
<main>	主内容标签，一般网页的主内容放置在该标签内
<section>	节（部分）标签，一般表示一部分独立的内容
<article>	文章标签，一般表示一篇文章
<aside>	旁白标签，一般用于表示内容以外的内容
<nav>	导航标签，一般页面的导航链接会放置在此标签内
<mark>	标记标签，一般用于重要的内容或者强调文本
<details>	细节标签，一般用于定义用户能够查看或隐藏的额外细节
<summary>	用于定义<details>标签的可见标题
<time>	时间标签，用于一定日期或者时间

• <header></header>：用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

<header>
  <a class="logo" href="#">Cute Puppies Express!</a>
</header>

<article>
  <header>
    <h1>Beagles</h1>
    <time>08.12.2014</time>
  </header>
  <p>I love beagles 
      <em>so</em>
      much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!
  </p>
</article>

• <nav></nav>：表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

<nav class="crumbs">
  <ol>
    <li class="crumb"><a href="#">Bikes</a></li>
    <li class="crumb"><a href="#">BMX</a></li>
    <li class="crumb">Jump Bike 3000</li>
  </ol>
</nav>

<h1>Jump Bike 3000</h1>
<p>
  This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.
</p>

• <footer></footer>：表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

<article>
  <h1>How to be a wizard</h1>
  <ol>
    <li>Grow a long, majestic beard.</li>
    <li>Wear a tall, pointed hat.</li>
    <li>Have I mentioned the beard?</li>
  </ol>
  <footer>
    <p>© 2018 Gandalf</p>
  </footer>
</article>

• <aside></aside>：表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）

<p>蝾螈是一类两栖动物，外表像蜥蜴，两种幼虫都有短腿和尾巴和成人形式。</p>

<aside>
  <p>皮肤粗糙的蝾螈用一种致命的神经毒素保护自己</p>
</aside>

<p>几种蝾螈栖息在太平洋西北部的温带雨林中，包括Ensatina、西北蝾螈和粗皮蝾螈。大多数蝾螈都是夜间活动的，捕食昆虫、蠕虫和其他小生物。</p>

• <section></section>：表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。

<h1>选择苹果</h1>
<section>
  <h2>引言</h2>
  <p>这份文件提供了一个指南，以帮助选择正确的苹果的重要任务。</p>
</section>
<section>
  <h2>准则</h2>
  <p>选择苹果有很多不同的标准，大小、颜色、硬度、甜度、酸度......</p>
</section>

• <article></article>：表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

<article>
  <h1>中国天气预报</h1>
  <article>
    <h2>2023年3月13日</h2>
    <p>局部下雨</p>
  </article>
  <article>
    <h2>2023年4月16日</h2>
    <p>晴天</p>
  </article>
</article>

• <details></details>：可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。<sammary>元素可为该部件提供概要或者标签。

<details>
    <summary>点我展开细节</summary>
    这是我的细节。。。
</details>

2.13、字符实体

• 如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格

• 常见的字符实体

  • 空格 ：&nbsp;

  • 小于号<：&lt;

  • 大于号>：&gt;

  • 和号 & ：&amp;

2.14、其他标签

• <pre></pre>：标签中的文本会保留空格和换行符， 而文本也会呈现出等宽字体

• ：下标标签

• ：上标标签

• <br />：换行标签（让文字强制换行）；换行标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

• <hr />：水平线标签（在页面中显示一条水平线）

三、HTML5属性

属性	描述
accesskey	设置访问元素的键盘快捷键
class	规定元素的类名（classname）
contenteditable	规定是否可编辑元素的内容
contextmenu	指定一个元素的上下文菜单，当用户右击该元素，出现上下文菜单
data-*	用于存储页面的自定义数据
dir	设置元素中内容的文本方向
draggable	指定某个元素是否可以拖动
dropzone	指定是否将数据复制，移动，或链接，或删除
hidden	hidden 属性规定对元素进行隐藏
id	规定元素的唯一 id
lang	设置元素中内容的语言代码
spellcheck	检测元素是否拼写错误
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序
title	规定元素的额外信息（可在工具提示中显示）
translate	指定是否一个元素的值在页面载入时是否需要翻译

四、HTML5事件

4.1、窗口事件

由窗口触发该事件 (同样适用于 <body> 标签)：

属性	值	描述
onafterprint	script	在打印文档之后运行脚本
onbeforeprint	script	在文档打印之前运行脚本
onbeforeonload	script	在文档加载之前运行脚本
onblur	script	当窗口失去焦点时运行脚本
onerror	script	当错误发生时运行脚本
onfocus	script	当窗口获得焦点时运行脚本
onhashchange	script	当文档改变时运行脚本
onload	script	当文档加载时运行脚本
onmessage	script	当触发消息时运行脚本
onoffline	script	当文档离线时运行脚本
ononline	script	当文档上线时运行脚本
onpagehide	script	当窗口隐藏时运行脚本
onpageshow	script	当窗口可见时运行脚本
onpopstate	script	当窗口历史记录改变时运行脚本
onredo	script	当文档执行再执行操作（redo）时运行脚本
onresize	script	当调整窗口大小时运行脚本
onstorage	script	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
onundo	script	当文档执行撤销时运行脚本
onunload	script	当用户离开文档时运行脚本

4.2、表单事件

表单事件在HTML表单中触发（适用于所有 HTML 元素，但该HTML元素需在form表单内）：

属性	值	描述
onblur	script	当元素失去焦点时运行脚本
onchange	script	当元素改变时运行脚本
oncontextmenu	script	当触发上下文菜单时运行脚本
onfocus	script	当元素获得焦点时运行脚本
onformchange	script	当表单改变时运行脚本
onforminput	script	当表单获得用户输入时运行脚本
oninput	script	当元素获得用户输入时运行脚本
oninvalid	script	当元素无效时运行脚本
onselect	script	当选取元素时运行脚本
onsubmit	script	当提交表单时运行脚本

4.3、键盘事件

通过键盘触发事件，类似用户的行为：

属性	值	描述
onkeydown	script	当按下按键时运行脚本
onkeypress	script	当按下并松开按键时运行脚本
onkeyup	script	当松开按键时运行脚本

4.4、鼠标事件

属性	值	描述
onclick	script	当单击鼠标时运行脚本
ondblclick	script	当双击鼠标时运行脚本
ondrag	script	当拖动元素时运行脚本
ondragend	script	当拖动操作结束时运行脚本
ondragenter	script	当元素被拖动至有效的拖放目标时运行脚本
ondragleave	script	当元素离开有效拖放目标时运行脚本
ondragover	script	当元素被拖动至有效拖放目标上方时运行脚本
ondragstart	script	当拖动操作开始时运行脚本
ondrop	script	当被拖动元素正在被拖放时运行脚本
onmousedown	script	当按下鼠标按钮时运行脚本
onmousemove	script	当鼠标指针移动时运行脚本
onmouseout	script	当鼠标指针移出元素时运行脚本
onmouseover	script	当鼠标指针移至元素之上时运行脚本
onmouseup	script	当松开鼠标按钮时运行脚本
onmousewheel	script	当转动鼠标滚轮时运行脚本
onscroll	script	当滚动元素的滚动条时运行脚本

4.5、媒体事件

通过视频（videos），图像（images）或音频（audio） 触发该事件，多应用于HTML媒体元素比如：<embed>，<object>，<img>，<audio>和<video>。

属性	值	描述
onabort	script	当发生中止事件时运行脚本
oncanplay	script	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythrough	script	当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchange	script	当媒介长度改变时运行脚本
onemptied	script	当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onended	script	当媒介已抵达结尾时运行脚本
onerror	script	当在元素加载期间发生错误时运行脚本
onloadeddata	script	当加载媒介数据时运行脚本
onloadedmetadata	script	当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstart	script	当浏览器开始加载媒介数据时运行脚本
onpause	script	当媒介数据暂停时运行脚本
onplay	script	当媒介数据将要开始播放时运行脚本
onplaying	script	当媒介数据已开始播放时运行脚本
onprogress	script	当浏览器正在取媒介数据时运行脚本
onratechange	script	当媒介数据的播放速率改变时运行脚本
onreadystatechange	script	当就绪状态（ready-state）改变时运行脚本
onseeked	script	当媒介元素的定位属性不再为真且定位已结束时运行脚本
onseeking	script	当媒介元素的定位属性为真且定位已开始时运行脚本
onstalled	script	当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspend	script	当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate	script	当媒介改变其播放位置时运行脚本
onvolumechange	script	当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaiting	script	当媒介已停止播放但打算继续播放时运行脚本

4.6、其他事件

属性	值	描述
onshow	script	当 <menu> 元素在上下文显示时触发
ontoggle	script	当用户打开或关闭 <details> 元素时触发

五、Emmet语法

1、快速生成HTML结构语法

​ 1）生成标签 直接输入标签名按tab键即可，比如div然后tab键，就可以生成 <div></div> ；

​ 2）如果想要生成多个相同标签 加上"*" 就可以了，比如div*3就可以快速生成3个<div></div>；

​ 3）如果有父子级关系的标签，可以用>比如ul > li就可以了；

​ 4）如果有兄弟关系的标签，用+就可以了，比如div+p；

​ 5）如果生成带有类名或者id名字的， 直接写.demo或者#two，tab键就可以了；

​ 6）如果生成的div类名是有顺序的，可以用 自增符号\$；

​ 7）如果想要在生成的标签内部写内容可以用 { } 表示。

2、快速生成CSS样式语法，CSS 基本采取简写形式即可

​ 1）比如w200按tab可以生成width: 200px;

​ 2）比如lh26px按tab可以生成line-height: 26px;