HTML5学习笔记

随着5G网络逐渐普及，手机已经成为了我们的一部分，从前出门要还要想着带个什么样子的包，现在的出门只要记得带好手机就足矣！以前手机要实现一个功能就需要安装相应的APP，而现在微信小程序等带给我们不一样的体验，我们不再需要安装各种各样的APP，很多都可以在微信小程序上完成。微信小程序的开发门槛虽然低了很多，但我们还是需要掌握一定的基础知识，而作为基础中的基础，HTML5是我们必须学习的。

一、HTML代码基础

1、HTML5的语法要求非常宽松，属性值可以用单引号、双引号包含起来，甚至可以不加引号。如：

id="wl" id='wl' id=wl 这三个是一样的效果。

但需要注意的是如果属性值中含有空格、单引号、大于小于号、反引号等字符时，则必须加引号，而当属性值中含有单引号时，可以加双引号，而值中有双引号时就可以加单引号。为了养成一个好的习惯，建议好始终给属性值加双引号。

2、内容标签是标签中包含一段内容，如p和strong这样的元素；非内容标签（空元素）是指标签不包含内容，比如换行等，它只有起始标签，不需要结束标签，以HTML5以前为了强调结束，经常把非内容标签写成<br />样子，而在HTML5中规定，非内容标签不需要关闭。常见的非内容标签有：<meta>、<img>、<br>、<input>、<link>、<hr>、<embed>等。

3、注释：不论单选还是多行，只需要把注释放在。

4、HTML页面根元素，在整个页面中html是根元素，在这个元素中一般有两个属性，一个是lang，另一个是manifest。

<html lang="zh-cmn-Hans">：声明页面的语言为简体中文。（非标准写法为lang="zh-CN"）；manifest属性用于设定页面缓存，它一旦设置后，浏览器便会将需要缓存的文件保存在本地，主要适用于不依赖网络，且下载后不需要再次更新的HTML5游戏、应用等，如果页面内容需要频繁更新的应该少用该属性，具体用法可以查询HTML5手册，这里不详细说明。

5、Head元素包含五个主要部分，分别是title、link、style、base和meta元素。title元素即网页的标题；link元素定义了文档与外部资源的关系，除了CSS外，还有许多的外部资源也通过这一元素引入页面；style元素用于在页面中定义样式；base元素用于标记文档的基础URL地址，还可被用于设置全局的浏览器打开方式，如：<base target="_blank">设置页面中所有的链接均在新窗口中打开

;meta元素是head中各类最丰富的一个元素，虽然它包含了多种多样的元数据，但它被规定了必须包含name（元数据名称），http-equiv（编译指令）和charset（字符编码）三种属性的其中一种。如不希望页面被抓取并公开时，我们可以在页面中添加名为robots的meta标记，如：<meta name="robots" content="none">，反之则所有都被检索到<meta name="robots" content="all">

。meta元素还能完成诸如刷新、重定向、缓存时间等功能。

6、HTML5新增了header元素，专门用来表述这样的头部区域，section元素对应不用的内容版块，文章可以用article元素来表示，页面的侧边栏可以用aside元素来表示，而且不仅可以放在整个页面的代表侧边栏区域，还能放入section或article中，来容纳一些与版块和文章相关的内容。

7、footer元素和header元素并非区块内容，在这两种元素之内不能再嵌套放入类似section之类的元素。

8、不是所有的文字段落都适用p元素，如一段文字为联系信息时，则应使用address元素。

9、定义列表的除了有ul和ol外，还有一种更加自定义的形式，它由三种元素的组合而成，分别是dl、dt和dd。

10、内容分组元素figure元素，它主要用于展示插图、图表、照片、代码列表等。

11、HTML5加入了一种新的内容分组元素，用来指定页面的主要内容，main元素，每一个页面中最多只能有一个main元素，另外还有像水平分隔线的hr,表示源代码的pre，代表引用的blockquote等都同样属于内容分组元素。

12、在过去HTML版本中，a还可以当成锚点，如<a name="a1"></a>，但在HTML5中把这一特性去掉了，当href属性缺失时，它被视作一个占位符，而不会显示为一个超链接。

13、span元素是一种常见的文本元素，但如果不对span设置样式，则spqn中的文本和其他的文本看上去不会有任何差异。

14、在HTML5中有两种表示强调的文本元素，分别为em和strong，em元素更多代表语义、语气的加强，而strong则更加强调页面文本的重要性、紧急程度等，浏览器中em默认的显示为斜体，而strong则显示为粗体。

15、big标记的文本显示大于普通的段落文本，而small标记的文本则小于普通的段落文本；当需要插入某句被引用的话，或者某段文字摘录时，可以使用q元素，而当需要插入文献的标题、作者、链接时使用cite元素，q元素默认在头和尾加上双引号，而cite元素默认显示为斜体。

16、表单在制作时需要设置method和action属性，分别用来指定表单提交数据的方式和目的页面；数据提交的方式有两种，get和post，get是把数据放在URL中，以明文的方式发送给后台，它不能传输过大的数据，也不能传输文件类数据，而post是把数据放在数据体内再发给后台，数据不能直接被看到，可传输的数据量较大，所以一般都选择使用post方式。

17、在文本输入框可以加入placeholder（占位符）属性，值为框内显示的文本，也可以为input元素添加required属性使该表单项必填，也可以添加autofocus属性使其自动获得焦点，一般设置第一个字段。

18、HTML5为input元素增加了很多新的类型，如电话的tel，电子邮件的email，日期的date等。

19、radio表示单选按钮，同一组的单选按钮具有相同的name属性，它的值由value属性决定，checked属性表示该按钮默认选中。如：

<p>
<label for="sex">性别：</label>
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</p>

还可以使用分区度更高的fieldset元素，它可以对表单内容的一部分进行打包，生成一组相关的表单字段，它使用legend元素指定标题。

checkbox的input元素为复选框，checked属性为选中状态；select元素生成下拉菜单，元素使用option元素标记。

.标签

1.1meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容

keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

description 用于指定网站的描述

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

将页面重定向到另一个网站

1.2title标签

title标签的内容会作为搜索结果的超链接上的文字显示

<title>Document</title>

1.3标题

h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
标题元素是块元素
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
其他标签

p标签表示页面中的一个段落
<p>在p标签中的内容就表示一个段落</p>
em标签用于表示语音语调的一个加重
<p>今天天气<em>真</em>不错！</p>
strong表示强调，重要内容！
<p>你今天必须要<strong>完成作业</strong>！</p>
blockquote 表示一个长引用
<blockquote>
这句话我是从来没有说过的！
</blockquote>
q表示一个短引用
子曰<q>学而时习之，乐呵乐呵！</q>
br标签表示页面中的换行
<br>

1.4布局标签

header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体相关的其他内容（侧边栏） article 表示一个独立的文章 section 表示一个独立的区块，上边的标签都不能表示时使用section

div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

span 行内元素，没有任何的语义，一般用于在网页中选中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分类

1.1.1.1有序列表

使用ol标签来创建无序列表，使用li表示列表项

<ul>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ul>

1.1.1.2 无序列表

使用ul标签来创建无序列表，使用li表示列表项

<ol>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ol>

1.1.1.3定义列表

使用dl标签来创建一个定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明

<dl>
       <dt>结构</dt>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
   </dl>

1.1.1.4列表之间可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超链接

1.6.1 作用

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

1.6.2 定义

使用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>

1.6.3 属性

1.6.3.1属性1：href

指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

1.6.3.2 属性2：target

用来指定超链接打开的位置

_self 默认值在当前页面中打开超链接

_blank 在一个新的要么中打开超链接

<a href="07.列表.html" target="_blank">超链接</a>

1.6.4其他

将#作为超链接的路径的展位符使用

javascript：; 来作为href的属性，此时点击这个超链接什么也不会发生

将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置

跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三个自然段</a>
   <br><br>
<p>
  内容多一点
</p>
<a href="#">这是一个新的超链接</a>
   <br><br>
<a href="javascript：;">这是一个新的超链接</a>
   <br><br>
<a id="bottom" href="#">回到顶部</a>

1.7图片标签

img标签来引入外部图片，img标签是一个自结束标签

属性：src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示

<img src="./img/1.gif" alt="松鼠">

1.8内联框架

用于向当前页面中引入一个其他页面

src 指定要引入的网页的路径
frameborder 指定内联框架的边框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音视频标签

1.8.1音频

audio 标签用来向页面中引入一个外部的音频文件的

1.8.1.1 属性

controls 是否允许用户控制播放
autoplay 音频文件是否自动播放

如果设置了autoplay 则音乐在打开页面时会自动播放

loop 音乐是否循环播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

<audio controls>
       <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2视频

与 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

在table中使用tr表示表格中的一行，有几个tr就有几行
在tr中使用td表示一个单元格，有几个td就有几个单元格
rowspan 纵向的合并单元格
colspan 横向的合并单元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

长表格

可以将一个表格分成三个部分：

头部 thead
主体 tbody
底部 tfoot

th 表示头部的单元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合计</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合计</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格样式

border-spacing: 指定边框之间的距离

border-spacing: 0px;

border-collapse: collapse; 设置边框的合并

border-collapse: collapse;

如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中tr不是table的子元素

3.表单（form）

使用form标签来创建一个表单
action 表单要提交的服务器的地址
数据要提交到服务器中，必须要为元素指定一个name属性值

<input type="text" name="username">

单选按钮

像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
checked 可以将单选按钮设置为默认选中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多选框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
          <option value="i">选项一</option>
          <option selected value="ii">选项二</option>
          <option value="iii">选项三</option>
      </select>

提交按钮

<input type="submit" value="注册">

属性

autocomplete="off" 关闭自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按钮 -->
      <input type="reset">
      <!-- 普通的按钮 -->
      <input type="button" value="按钮">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>
  </form>

4.注释

<!--
我是注释中的注释 注释不能嵌套
-->

5.属性

属性，在标签中（开始标签或自结束标签）还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

6.文档声明

<!doctype html>

例

链接到外部样式文件:

<head>

</head>

浏览器支持

所有主流浏览器都支持 <link> 标签。

标签定义及使用说明

注意： link 元素是空元素，它仅包含属性。

注意： 此元素只能存在于 head 部分，不过它可出现任何次数。

HTML 4.01 与 HTML5之间的差异

一些 HTML 4.01 属性在 HTML5 中不支持。

HTML5 新增了 "sizes" 属性。

HTML 与 XHTML 之间的差异

在 HTML 中，<link> 标签没有结束标签。

在 XHTML 中，<link> 标签必须被正确地关闭。

属性

New：HTML5 新属性。

属性	值	描述
charset	char_encoding	HTML5 不支持该属性。定义被链接文档的字符编码方式。
href	URL	定义被链接文档的位置。
hreflang	language_code	定义被链接文档中文本的语言。
media	media_query	规定被链接文档将显示在什么设备上。
rel	alternatearchivesauthorbookmarkexternalfirsthelpiconlastlicensenextnofollownoreferrerpingbackprefetchprevsearchsidebarstylesheettagup	必需。定义当前文档与被链接文档之间的关系。
rev	reversed relationship	HTML5 不支持该属性。定义被链接文档与当前文档之间的关系。
sizesNew	HeightxWidthany	定义了链接属性大小，只对属性 rel="icon" 起作用。
target	_blank_self_top_parentframe_name	HTML5 不支持该属性。定义在何处加载被链接文档。
type	MIME_type	规定被链接文档的 MIME 类型。

全局属性

事件属性

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：了解一下iframe页面嵌入使用，轻松实现页面集成
下一篇：你知道HTML、CSS、JS文件在浏览器中是如何转化成页面的吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商