开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详

1. HTML简介

1.1概述

网络世界已经跟我们息息相关，当我们打开一个网站，首先映入眼帘的就是一个个华丽多彩的网页。这些网页，不仅呈现着基本的内容，还具备优雅的布局和丰富的动态效果，这一切都是如何做到的呢？前端入门课程，为您一层层的揭开网页的面纱。

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

网页的构成

HTML：通常用来定义网页内容的含义和基本结构。
CSS：通常用来描述网页的表现与展示效果。
JavaScript：通常用来执行网页的功能与行为。

实例：

 <html>
 <head>
 
 </head>
 <body>
     <p>我的第一个网页</p>
 
 </body>
 </html>

1.2 HTML组成

HTML页面由一系列的元素（elements） 组成，而元素是使用标签创建的。

1）标签

一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。例如：

 <h1>今天是个好日子</h1>    <br/>---><br></br>   <img src=""/> (空标签)

在HTML中，<h1>标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。

2）属性

HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值成对的形式出现，比如：name='value' 。例如：

 <h1 align="center">今天是个好日子!!!</h1>

在HTML标签中，align 属性表示水平对齐方式，我们可以赋值为 center 表示居中。

3）注释

HTML 注释标签：

 <!-- 在此处写注释 -->

注：在开始标签中有一个惊叹号，但是结束标签中没有。浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

2. 基本语法

2.1 标签

基础标签：

标签	描述
h1~h6	设置字体不同大小
p	设置段落
a	超链接
img	添加图片
br	换行
hr	水平线
div	定义文档中的分区或节（division/section）。
span	定义 span，用来组合文档中的行内元素。

实例：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>这是一个页面</title>
     </head>
     <body>
         <!-- h1 - h6 -->
         <h1>This is a heading</h1>
         <h2>This is a heading</h2>
         <h3>This is a heading</h3>
         <h4>This is a heading</h4>
         <h5>This is a heading</h5>
         <h6>This is a heading</h6>
         <!-- p -->
         <p>This is a paragraph</p>
         <p>This is another paragraph</p>
         <!-- a -->
         <a href="http://www.w3school.com.cn/">Visit W3School</a>
         <!-- img -->
         <img src="./img/hao123.png" />
         <!-- br -->
         <br/>
         <!-- hr -->
         <hr/>
         <!-- div -->
         <div> 这是盒子</div>
         <!-- span -->
         <span>这是span</span>
     </body>
 </html>

HTML 头部元素:

标签	描述
head	定义关于文档的信息。
title	定义文档标题。
base	定义页面上所有链接的默认地址或默认目标。
link	定义文档与外部资源之间的关系。
meta	定义关于 HTML 文档的元数据。
script	定义客户端脚本。
style	定义文档的样式信息。

实例：

 <!DOCTYPE html>
 <html>
         <head>
             <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
             <title>Title of the document</title>
             <base href="http://www.w3school.com.cn/images/" />
             <link rel="stylesheet" type="text/css" href="mystyle.css" />
             <style type="text/css">
                     body {background-color:yellow}
                     p {color:blue}
             </style>
         </head>
 
         <body>
         The content of the document......
         </body>
 
 </html>

文本格式化标签:

标签	描述
b	定义粗体文本。
big	定义大号字。
em	定义着重文字。
i	定义斜体字。
small	定义小号字。
strong	定义加重语气
sub	定义下标字.
sup	定义上标字。
ins	定义插入字。
del	定义删除字。

实例：

         <del>删除线</del>
         <u>下划线</u>
         <i>斜体</i>
         <b>加粗</b>
         <a href="">超链接</a>
         <sub>下</sub>标
         <sup>上</sup>标
         20<sup>。</sup>C
         2<sup>2</sup>

表格标签：

标签	描述
table	定义表格
caption	定义表格标题。
th	定义表格的表头。
tr	定义表格的行。
td	定义表格单元。
thead	定义表格的页眉。
tbody	定义表格的主体。
tfoot	定义表格的页脚。
col	定义用于表格列的属性
coigroup	定义表格列的组。

实例：

 <table border="1">
     <tr>
         <th>Heading</th>
         <th>Another Heading</th>
     </tr>
     <tr>
         <td>row 1, cell 1</td>
         <td>row 1, cell 2</td>
     </tr>
     <tr>
         <td>row 2, cell 1</td>
         <td>row 2, cell 2</td>
     </tr>
 </table>

列表标签：

标签	描述
ol	定义有序列表
ul	定义无序列表
li	定义列表项
dl	定义定义列表
dt	定义定义项目
dd	定义定义的描述

实例：

     <ul>
     <li>Coffee</li>
     <li>Milk</li>
     </ul>
 
     <ol>
     <li>Coffee</li>
     <li>Milk</li>
     </ol>

块级元素和行内元素

1）概念

在HTML中有两种重要元素类别，块级元素和内联元素。

块级元素：

独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<p> ，<hr>，<li> ，<div>等。

行内元素

行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如<b>，<a>，<i>，u、<span> 、del、等。

注意： 块级元素中可以嵌套块级元素和行内元素；行内元素中可以嵌套行内元素（个别），但是不能嵌套块级元素。

2）div和span

<div> 是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。

<span> 是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。

注意： div和span在页面布局中有重要作用。

2.2 属性

标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以name = value的格式展现。

属性名：同一个标签中，属性名不得重复。
大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。
引号：双引号是最常用的，不过使用单引号也没有问题。

常用属性：

form表单属性：

实例：

 <form action="action_page.php">
         First name:<br>
         <input type="text" value="Mickey">
         <br>
         Last name:<br>
         <input type="text" name="lastname" value="Mouse">
         <br><br>
         <input type="submit" value="Submit">
 </form>

注意：

1> 功能属性：不可替代的，比如：id=""、class=""、name=""、style=""、colspan=""、rowspan=""、type=""、value=""...

2> 样式属性：完全可以使用CSS替代，width=""、height=""、align=""、size=""、color=""、bgcolor=""...

2.3 特殊字符

在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分,

特殊字符：

3. HTML 5特性

3.1 H5简介

什么是 HTML 5？

HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

3.2 H5代码约定

请使用正确的文档类型

 请始终在文档的首行声明文档类型：
 <!DOCTYPE html>
 如果您一贯坚持小写标签，那么可以使用：
 <!doctype html>

请使用小写元素名

HTML5 允许在元素名中使用混合大小写字母。

 <section> 
   <p>This is a paragraph.</p>
 </section>

使用小写属性名

HTML5 允许大小写混合的属性名

 <div class="menu">

3.3 H5语义元素

HTML 5 中新的语义元素，许多网站包含了指示导航、页眉以及页脚的 HTML 代码，

标签	描述
article	定义文章。
aside	定义页面内容以外的内容。
details	定义用户能够查看或隐藏的额外细节
figcaption	定义 figure 元素的标题。
figure	规定自包含内容，比如图示、图表、照片、代码清单等。
footer	定义文档或节的页脚。
header	规定文档或节的页眉
main	规定文档的主内容。
mark	定义重要的或强调的文本。
nav	定义导航链接。
section	定义文档中的节。
time	定义日期/时间。

实例：

 <!--可以将网站首页划分为简介、内容、联系信息等节。-->
     <section>
        <h1>WWF</h1>
        <p>The World Wide Fund for Nature (WWF) is....</p>
     </section> 
 <!--<article> 元素的应用场景：论坛,博客,新闻-->
     <article>
        <h1>What Does WWF Do?</h1>
        <p>WWF's mission is to stop the degradation of our planet's natural environment,
       and build a future in which humans live in harmony with nature.</p>
     </article>
 <!--页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。-->
     <footer>
        <p>Posted by: Hege Refsnes</p>
        <p>Contact information: <a href="mailto:someone@example.com">
       someone@example.com</a>.</p>
     </footer>

3.4 新的表单元素

标签	描述
datalist	定义输入控件的预定义选项。
keygen	定义键对生成器字段（用于表单）
output	定义计算结果。

HTML总结

1. HTML简介

1.1概述

1.2 HTML组成

1）标签

2）属性

3）注释

2. 基本语法

2.1 标签

块级元素和行内元素

1）概念

2）div和span

2.2 属性

2.3 特殊字符

3. HTML 5特性

3.1 H5简介

3.2 H5代码约定

3.3 H5语义元素

3.4 新的表单元素