HTML学习笔记

一、HTML的概念

什么是HTML

HTML，即超文本标记语言。一种通过“超文本”链接交叉引用Internet上文本的简单方法。“超文本”的原义是指页面之间交叉引用的电子形式存储的文本。它可以指可被其他对象链接的任何对象（文本、图像和文件等）。超文本标记语言描述包含文本、图像和其他信息的网页是如何组织和互相链接的。

HTML、XML与XHTML

XML提供一种基本结构以及标记语言必须遵守的一组规则。XML用于创建标记语言，标记语言用于描述结构化信息，如HTML。
XHTML，即扩展超文本标记语言。是HTML的一个版本，它与XML严格的规则兼容。

二、开始创建网页

1、从简单网页开始

一个简单网页的开始

首先创建一个网页必备的标签有< html >、< head >、< title >、< body >,与所有的HTML页面一样，以“<”开始、以“>”结束的单词实际上都是编码命令。这些编码命令成为HTML标签，因为他们“标记”了一些文本，使网页浏览器能够识别这是哪种文本，从而正确的显示文本。

HTML标签

HTML标签是用于指示如何显示网页部分的编码命令。
大多数HTML标签都由两部分组成：

<1>开始标签，表明本标签由文本的那个地方开始；结束标签，表明标签在哪个地方结束。
<2>结束标签是由“/”开始，位于符号“<”之后。
还有一种空标签，其独特之处在于不需要一对开始标签和结束标签。空标签是在页面中发出一个HTML命令而不包含任何文本的HTML标签。总是以“<”开始，“/>”结束。比如“< br />”换行标签。

简单网页创建必须了解的标签及含义

< html >：网页开始（创建网页必备标签）
< head >： 标题部分的开始与结束
< title > ：标题文本内容
< body >：页面正文文本的开始与结束

2、使用分段分行组织网页

由于网页中必然存在大量的正文文本内容，对于如何将这些文本内容有逻辑清晰地展现给用户，就需要对文本进行分段和分行。使用分段分行组织网页必须要了解的标签有：
< p >：用于包含一段文本
< br />：段落内强行分行（属于空标签，不需要结束标签）
< hr />：（属于空标签）使页面包含一条水平的标尺线，使用< hr />标签插入水平标尺线也会引起分行，即使没有使用< br />标签。要使水平标尺线上下有更多的空间，可以在< hr />标签前后分别添加< p >和</ p>。这相当于将水平标尺线单独放在一个段落内。
注：空标签没有结束标签，且空标签的“/”位置与结束标签是相反的。

块元素和行内元素

块元素表示在页面中独占一行的元素，比如标题标签h1、h2等都在页面中独占一行，都属于块元素，通常我们可以用hgroup标签来为标签分组，可以将一组相关的标题同时放入hgroup中。

<hgroup>
     <h1>周深</h1>
     <h2>他是个歌手</h2>
</hgroup>

行内元素表示在页面中不会独占一行的元素。
em标签用于表示语音语调的加重（行内元素）
strong标签用于表示强调重要内容（行内元素）
blockquote标签和q标签都表示引用，但blockquote是块元素，q是行内元素
注：一般情况下可以在块元素内放行内元素，而不会在行内元素中放块元素，块元素内基本上什么都能放，p元素中不能放任何块元素！

布局标签

header标签表示网页的头部
main标签表示网页的主体部分
footer标签表示网页的底部
nav标签表示网页的导航
aside标签用于表示和主体相关的部分（侧边栏）
article标签用于表示一个独立的文章
section标签用于表示一个独立的区块，当上述标签均不可用时使用section

div标签没有语义，就是用来表示一个区块，目前是我们主要使用的布局元素
span标签是行内元素没有语义，一般用于在网页中选中文字。

3、使用标题突出文本

在创建网页的过程中，可能需要突出某一部分的文本，这时候可以使用标题标签将需要突出的文本变得更加明显。在标签< h1 >和< /h1>之间的文本将作为大标题文本显示。另外，< h2 >和< h3 >表示字体较小的标题，以此类推。
注：一定要区分title和heading的区别：在HTML中，< title >指定整个网页的标题，但并不显示在网页上，而是显示在浏览器窗口的标题栏中。而heading标签使一些文本突显在网页上。一个网页只有一个< title >,且只能出现在< head >和< /head>标签内，但< h1>< h2>可以有任意多个，顺序也可以任意安排。另外，与title不同，heading总是放在页面中。

4、html实体

在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格，所以如果想在网页中显示多个空格则需要使用html中的实体（转义字符）
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体，实体的语法有：（&实体名称）

实体	含义
&nbsp	边框的宽度（0或none表示隐藏边框）
&gt	大于号
&lt	小于号
&copy	版权符号

其他实体可网页搜索w3school进行查询：https://www.w3schools.com/html/html_entities.asp

5、meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看！meta标签中有charset、name、content、http-equiv属性。
charset用于指定网页的字符集

name用于指定数据的名称
content用于指定数据的内容
其中name的值可以为keywords或description。
keywords表示网站的关键字，可以指定多个关键字，关键字间使用，隔开

<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>

description用于指定网站的描述

<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>

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

http-equiv用于将页面重定向到另一个网站

<meta http-equiv="refresh" content="3;url=https://baidu.com"/>

content中的3代表3秒后自动跳转到url指定页面。

6、列表

在html中可以创建列表，html列表一共有三种：无序列表，有序列表和定义列表。
无序列表使用ol标签进行创建，使用li标签表示列表项
有序列表使用ul标签进行创建，使用li标签表示列表项
定义列表使用dl标签进行创建，使用dt标签表示定义的内容，使用dd标签对内容进行解释说明

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

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

<dl>
    <dt>结构</dt>
    <dd>结构表示网页的结构......</dd>
</dl>

三、链接到其他网页

1、链接到另一个网页

1、< a >标签和URL
< a >用来创建链接，其中a即英文单词“anchor”，< a >标签用于标识网页中一个特定的点——锚点（anchor point），那么需要链接的地址应放在< a >标签内的“href=”之后。
什么是URL？URL， 又称统一资源定位符，即Internet地址。
举个例子：若在你创建的网页中出现了“周深”，并且你希望用户点击周深就可以查看他的百度百科，那么你只需要创建一个< a >标签即可：

<a href="https://zh.wikipedia.org/wiki/周深">周深</a>

其中href表示超文本引用，它是< a >标签的一个属性。
注：a标签是行内元素，但在a标签中可以嵌套除他自身以外的任何元素！

2、在自己的网页间链接

创建位于同一计算机上的网页之间的链接，不一定需要完整的Internet地址。实际上，如果两个页面保存在同一文件夹中，可以只用HTML文件本身的文件名：

<a href="page.html">Click here to go to page 2!</a>

3、指定网页的地址

为组织网站的网页，最简单的方法是将所有网页放在同一文件夹下。当网页以这种方式存放时，可以直接用文件名作为属性href的值来链接网页。如果有许多网页，可能要将这些网页放在多个文件夹下，以便更好地组织。在这种情况下，链接网页时不需要给出完整的地址，而是使用相对地址。
e.g.假设在WebPage目录下创建一个abc.html页面。这个文件包含一个链接，该链接指向bcd.html页面，它位于WebPage下的small子文件夹中。那么这个链接应该如何表示？

<a href="small/bcd.html">Click here to go to bcd!</a>

通常在bcd.html页面会包含返回abc.html页面的链接：

<a href="../abc.html">Return to abc!</a>

注：1、双点号“…”是一种特殊符号，表示包含当前文件夹的文件夹——也就是父文件夹。
2、HTML总是用“/”来分隔目录，一定不要使用反斜杠“\”！！！

总结：在自己的网页中链接只用文件名或相对地址，到其它网站的链接使用完整的Internet地址。

4、在新浏览器窗口中打开链接

在已经知道如何创建链接之后，如果想要实现被链接的网页在新的浏览器窗口中打开，原来的页面还在原来的窗口这样的效果，则可以在< a >标签中添加另一个属性target，并将target属性值设置为“_blank”

<a href="../abc.html" target="_blank">Return to abc!</a>

当用户单击“Return to abc!”时，abc.html页面将显示在一个新的浏览器窗口中。
target属性值默认为_self，即新打开的超链接仍在当前页面。

5、跳转到网页的任意指定位置

跳转到当前页面的顶部:

<a href='#'>去到顶部</a>

跳转到当前页面的底部或任意位置，需要在指定位置的标签内加上id属性，该属性的值在整个页面中唯一，不可重复出现。当跳转到该位置时，href属性的值应为#id名称:

<p id='p3'>........</p>
<a href='#p3'>跳转到第三自然</a>

补充：也可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生。

常见的一些问题及解决方法：

链接在本地计算机是正常的，将页面放在浏览器上后，连接就不能正常使用的原因有哪些？

解答：1、大小写错误。有些文件编辑器和文件转换程序在用户不知情的情况下修改了文件名的大小写。所以最好的解决办法是所有网页的文件名都采用小写

2、文件名包含空格。大多数Web服务器不允许文件名包含空格。

3、本地绝对地址。如果在链接中使用了本地绝对地址，将网页放到Internet上时，链接将无效。不应使用本地绝对地址，本地绝对地址通常是因创建临时链接来测试网页的一部分而产生的。

四、引入图片和音频

1、图片标签

使用img标签来引入外部图片，img标签是一个自结束标签。
属性：
src属性指定外部图片的路径
alt属性用于图片的描述，这个描述默认情况下不显示，有些浏览器会在图片无法加载的情况下显示。alt的作用是可以使搜索引擎根据其值来识别图片，如果不写alt属性则图片不会被搜索引擎所收录。
width属性用于调整图片的宽度（单位是像素）
height属性用于调整图片的长度（如果宽度和高度只修改了其中一个，另一个也会等比例改变）

2、图片的格式以及选取方式

jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图，一般用于显示照片
gif：支持的颜色比较少，支持简单透明，支持动图。
png：支持的颜色丰富，支持复杂透明，不支持动图
webp：这种格式是谷歌新推出的专门用来表示网页中图片的一种格式，它具备其他格式的所有优点，文件很小，但缺点是兼容性差
base64：将图片使用base64编码可以将图片转化为字符，通过字符的形式来引入图片，一般都是一些需要和网页一起加载的图片才会使用base64

对于图片格式的选取方式，一般采用以下原则：如果图片效果一样，选取文件最小的，如果效果不一样，选取效果最好的。

3、内联框架

内联框架用于向当前页面中引入一个其他页面。
src属性指定要引入的网页的路径
width属性用来调整引入页面的宽度
height属性用来调整引入页面的长度
frameborder属性用来指定内联框架的边框

<isframe src="https://baidu.com" width="800" height="600" frameborder="0"></isframe>

4、音视频播放

audio标签用于向页面引入一个外部的音频文件，特别注意在使用该标签引入时默认是不受用户控制播放的！
属性：
controls：是否允许用户播放
autoplay：音频文件是否自动播放，但目前来说大部分浏览器即使设置了autoplay也不会自动播放
loop：音乐是否循环播放

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

video标签用于向页面引入一个外部的视频文件，特别注意在使用该标签引入时默认是不受用户控制播放的！其属性与上面的audio标签类似

<video src="./abc/123.mp4" controls loop autoplay> </video>

注：有一些陈旧的浏览器可能无法兼容audio和video标签，只能使用embed标签引入音视频文件，当你无法判断该浏览器是否能够兼容时，也可以使用以下语句：

<audio controls>
    对不起，您的浏览器不支持播放音频，请升级浏览器！
    <source src="./abc/123.mp3">
    <embed src="./abc/123.mp3" type="audio/mp3" width="200" height="50">
</audio>

<video controls>
    对不起，您的浏览器不支持播放音频，请升级浏览器！
    <source src="./abc/123.mp4">
    <embed src="./abc/123.mp4" type="video/mp4" width="800" height="600">
</video>

五、使用表格组织排列网页

为了能够设计出比较有创意的网页，很好的运用表格组织和排列是必须的，它让你能够将文本和图像组织成多列和多行。表格不仅可用于将信息组织为行和列，还可用于排列网页上的文本和图像。

1、创建一个简单的表格

表格是由多行信息构成，每行包括单元格。创建表格首先必须以< table >标签开始，以< /table >标签结束。如果想要表格显示边框，可以在< table >中添加border属性来指定边框的宽度，单位为像素。（也可以将border的值设置为0或none表示隐藏边框）

接下来，应该使用< tr >标签来为表格创建行。表格的每一行都是包含一个或多个单元格，最后由< /tr >标签来结束。< td >标签用来创建单元格，表格中的信息就是放在单元格中。事实上，单元格是一个矩形区域，它可以容纳任何文本、图像和HTML标签。

还有一种标签< th >也是用来创建单元格，与< td >不同的是， < th >标签表示单元格是表头的一部分。很多浏览器将< th >创建的单元格中的文本默认居中对齐并显示粗体。

必须要注意的点：一个单元格中的标签不会影响其他单元格，表格外的标签也不会影响表格中的信息。

e.g.假设创建以下表格：

<div style="font-weight:bold">
    <table>
        <tr>
            <td style="font-style:italic">hello</td>
            <td>there</td>
        </tr>
    </table>
</div>

在这个例子中，< div >标签用于包含页面中的信息块，因此该信息块中的内容应当全部应用粗体样式，但“there”既不是粗体也不是斜体，因为hello单元格中的style="font-style:italic"不会影响“there”单元格，表格外的< div >标签也不会影响“there”单元格。
如果想要将这个例子中的“hello”和“there”都变为粗体，应该将粗体样式属性加到< table >标签中(代码实现如下)：

<table style="font-weight:bold">
    <tr>
        <td style="font-style:italic">hello</td>
        <td>there</td>
    </tr>
</table>

代码修改后，在这个例子中，“hello”和“there”都为粗体，并且“hello”还是斜体。

如果想让某个单元格中的内容独占两个单元格，可以直接横向或纵向合并单元格。使用样式colspan（横向合并单元格），rowspan（纵向合并单元格）

<td colspan="2">A3</td>

可以将表格分成三个部分：表头（thead），主体（tbody），表尾（tfoot）
使用这三个标签的好处是如果打乱顺序编写也不受任何影响，thead标签中的内容始终表示表头。注：thead标签中可以使用th标签设置单元格，有自动加粗的效果

2、控制表格的大小

可以在< table >标签中指定width和height来控制整个表格的大小。也可以在每个< td >标签中指定width和height样式来控制单元格的大小。

<table style="width:500px";height:400px>

如果要想使第一个单元格占整个表格宽度的20%，第二个单元格占整个表格宽度的80%，可以这样实现：

<table style="width:100%">
    <tr>
        <td style="width:20%">第一个单元格</td>
        <td style="width:80%">第二个单元格</td>
    </tr>
</table>

3、表格内部的对齐和跨度

<1>对齐
在默认情况下，单元格中的内容将水平左对齐，垂直居中。可以通过样式属性text-align和vertical-align来控制单元格中内容在水平方向和垂直方向上的位置。

注：这两个样式属性也同样适用于< tr >、< td >和< th >标签。若在< tr >标签中使用，那么将应用于该行所有单元格！！！

<2>跨越
跨越是使单元格扩展到占据表格中多行或多列的过程。属性rowspan来创建跨越多行的单元格，属性colspan来创建跨越多列的单元格

4、表格背景及间距

<1>设置表格背景
表格背景可以分为两种，设置背景颜色和设置背景图片。设置背景颜色可在标签< table >、< tr >、< td >、< th >中添加属性background-color.

<table style="background-color:yellow">  /也可用十六进制表示

设置背景图片则用样式属性"background-image":

<table style="background-image:url(flower.gif)">

<2>设置表格的间距
属性cellpadding和cellspacing用来控制表格边框的间距。cellspacing属性设置表格边框之间和表格单元格之间的间距。cellpadding属性设置单元格中信息四周的间距。

<table cellpadding="2" cellspacing="1">

5、使用表格设计有创意的网页布局

表格的常见用途是将文本和数字排列为表格，但实际上表格还可以用于排列整个网页。比如没有边框的网页可用于排列文本和图像。（事实上，W3C提倡用样式表而不是表格进行网页布局，样式表的功能非常强大，应该将其用于设计更复杂的网页，而表格则用于简单的布局以及使用样式表不方便实现的布局。）

附录：

注：有关于HTML所有标签及其他知识可查询文档：
1、zeal（英文）：
2、网页搜索w3school（中文）

一、HTML的所有标签及含义

标签	含义
< html >	网页开始（创建网页必备标签）
< head >	标题部分的开始与结束
< title >	标题文本内容
< body >	页面正文文本的开始与结束
< p >	用于包含一段文本
< br />	段落内强行分行（属于空标签，不需要结束标签）
< hr />	使页面包含一条水平的标尺线（属于空标签）
< h1 >和< /h1>	一级标题
< h2 >和< /h2>	二级标题
< h3 >和< /h3>	三级标题
< a >	创建链接（属性有href）
< table >	创建表格
< tr >	创建表格中的行
< td >	创建表格每行中的单元格
< th >	创建表格的表头单元格

二、部分标签的属性及其含义

1、< a >标签：

属性	含义
href =“adress”	链接地址
target=“_blank”	在新浏览器中打开链接的页面

< table >标签：

属性	含义
border=“ ”	边框的宽度（0或none表示隐藏边框）
style="width(height): "	用来控制表格大小
style="background-color:	设置背景颜色
style="background-image:	设置背景图片

< td >标签：

属性	含义
style="width(height): "	用来控制单元格大小
style=“text-align”	控制单元格中内容在水平方向上的位置
style=“vertical-align”	控制单元格中内容在垂直方向上的位置
rowspan=""	实现单元格跨越多行
colspan=""	实现单元格跨越多列
style="background-color:	设置背景颜色
style="background-image:	设置背景图片