前端之HTML语言之基础标签（持续更新）(基础部分更新结束)

前端之HTML语言

学习完后端的各种层之后，今天开始学习前端，前端和后端都是一个项目的组成部分。

前端对应得到语言是HTML，HTML最重要的有三块，行为，样式，J结构。行为就是交互，理解为鼠标的点击；样式就是字面意思，这个页面可以被设计成多种样式；结构，就是指这个语言有自己的代码结构。

本博客持续更新，持续讲述个人学习HTML的过程，学习参考资料为w3school这个网站。

1.基础格式

基础格式：

<!DOCTYPE HTML>
<html>
<body>
(基本所有的东西都在这里)
</body>
<html/>

举个例子：

<!DOCTYPE HTML>
<html>
<body style="background-color:yellow"><!-- 主体，设置颜色bgcolor标签也是被要淘汰，以后用CSS中的style来设置颜色-->
<h1 style="background-color:yellow;text-align:center;font-family:verdana">我的第一个标题</h1><!--标题，设置居中align标签的方式来居中标题马上要淘汰了，以后用样式表style（独立的样式表，可以改变所有元素，CSS文件）来实现这个功能,-->

<p style="background-color:green">我的第一个段落</P><!--段落-->
<hr /><!--分割线-->
<br /><!--换行，也可以写在段落里边-->
<p style="font-family:arial;color:red;font-size:20px">我的第二个段落</P>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a><!--新建标签打开这个网站-->
<table border="1"><table><!--设置表间距-->
</body>
</html>

2.文本格式化标签

<b>     定义粗体文本
<big>   定义大号字
<em>    定义着重语气
<i>     定义斜体字
<small> 定义小号字
<strong>定义加重语气
<sub>   定义下标字
<sup>   定义上标字
<ins>   定义插入字，就是下划线文本
<del>   定义删除字，就是那种字上划一下的感觉，打出不来自己查把

3.计算机输出标签，用于显示计算机/编程代码

说实话我现在还没遇到这些，不知道这些勾八是干嘛的，但是教程先讲了，所以我先写上，后边再说

<code>  定义计算机代码
<kbd>   定义键盘码
<samp>  定义计算机代码样本
<tt>    定义打字机代码
<var>   定义变量
<pre>   定义预格式文本，就是里边自动包含了空格和换行，很适合实现计算机代码

4.引用、引用和术语定义

<abbr>      定义缩写，例<abbr title="etcetera">etc.</abbr>，出来的是etc.这么整完有的网页能显示翻译啥的
<acronym>   定义定义首字母缩写，例<acronym title="World Wide Web">WWW</acronym>，出来的是WWW
<address>   定义地址，例子有点乱套，自己查把
<bdo>       定义文字方向，没什么B用啊感觉
<blockquote>定义长的引用，说白了就是双引号的意思
<q>   定义短的引用，说白了就是双引号的意思，注：使用blockquote元素的话，浏览器会插入换行和外边距，而 q元素不会有任何特殊的呈现。例：<q>构建人与自然和谐相处的世界。</q>
<cite>      定义引用，引证
<dfn>       定义一个定义项目，说白了也是缩写，说实话跟abbr有点重复

5.HTML CSS-样式表

有三种，外部样式表，内部样式表，内联样式

（1）外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。例如：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

（2）内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

（3）内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。直接定义P。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

6.HTML 链接

（1）HTML超链接（链接）；超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
我们通过使用标签在 HTML 中创建链接。

有两种使用标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
例如：

<a href="http://www.w3school.com.cn/">访问 W3School</a>

点击这个超链接会把用户带到 W3School 的首页。

提示：“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

如果用图片做链接看下边的例子：

<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a>
<!--注释： 在a这个标签里边设置了图像链接-->
</p>
</body>
</html>

（2）HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

（3）HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

例如：首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

7.HTML图像

7.1图像标签（）和源属性（Src）

在 HTML 中，图像由标签定义。

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

7.2替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

8.HTML表格

8.1表格由标签来定义。

每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<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>

在浏览器显示如下：

在这里插入图片描述

8.2表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性border来显示一个带有边框的表格：

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

8.3表格的表头

表格的表头使用标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<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>

在浏览器显示如下：

在这里插入图片描述

8.4表格的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

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

浏览器可能会这样显示：

请添加图片描述
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中显示如下：
在这里插入图片描述
下边是表格常用的标签

在这里插入图片描述

9.HTML 列表

HTML 支持有序、无序和定义列表

9.1无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于

标签。每个列表项始于
。

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

浏览器显示如下：

在这里插入图片描述
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

9.2有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于

标签。每个列表项始于
标签

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

浏览器显示如下：

在这里插入图片描述
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

9.3定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

浏览器显示如下：

在这里插入图片描述

9.4不同类型的无序列表

<html>
<body>

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

</body>
</html>

在这里插入图片描述

9.5不同类型的有序列表

<html>
<body>

<h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

</body>
</html>

在这里插入图片描述

9.6嵌套列表

<html>

<body>

<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>

在这里插入图片描述
常用列表标签

在这里插入图片描述

10. HTML 块元素和行内元素

可以通过

和将 HTML 元素组合起来。

10.1 块元素

大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：
<h1>, <p>, <ul>, <table>

10.2 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

10.3 div 元素

HTML

元素是块级元素，它是可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用元素进行文档布局不是表格的正确用法。

元素的作用是显示表格化的数据。

10.4 span 元素

HTML 元素是内联元素，可用作文本的容器。

元素也没有特定的含义。

当与 CSS 一同使用时，元素可用于为部分文本设置样式属性

常用标签：

在这里插入图片描述

11.HTML类（类选择器）

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
.cities {      <!--设定一个类cites，其实就是创造一个模板，颜色边距啥的，然后后边是城市都用这个模板-->
                 <!--要想单独设置h2标题居中，就要用到选择器，比如：  h2{text-align:center;}，这样h2的标题就都居中了-->
    background-color:grey;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>               <!--要想单独把这个标题提前，在h2后边加    style="text-align:center"  也好使-->
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 

</body>
</html>

在这里插入图片描述

11.1分类块级元素

HTML

元素是块级元素。它能够用作其他 HTML 元素的容器。对其他元素生效。

设置

元素的类，使我们能够为相同的

元素设置相同的类：

<!DOCTYPE html>
<html>
<head>
<style>
h2{text-align:center;}            //单独设置个h2的选择器来设置居中
.cities {
    background-color:grey;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

在这里插入图片描述

11.2分类行内元素

HTML 元素是行内元素，能够用作文本的容器。对行生效。

设置元素的类，能够为相同的元素设置相同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

在这里插入图片描述

12. HTML id 属性（id选择器）

HTML id 属性用于为HTML 元素指定唯一的 id。

一个 HTML文档中不能存在多个有相同 id 的元素。

12.1 使用 id 属性

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。下面的例子中我们有一个 h1 元素，它指向 id 名称 “myHeader”。这个 h1 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置：

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

在这里插入图片描述
注释：id 名称对大小写敏感！

注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

12.2 Class 与 ID 的差异

同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：

<!DOCTYPE html>
<html>
<head>
<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* 设置类名为 "city" 的所有元素的样式 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
</head>
<body>

<h1>Class 与 ID 的差异</h1>

<p>一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：</p>

<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">我的城市</h1>

<!-- 拥有相同类名的多个元素 -->
<h2 class="city">上海</h2>
<p>中国最大的经济城市。</p>

<h2 class="city">深圳</h2>
<p>中国最具创新力的城市。</p>

<h2 class="city">北京</h2>
<p>中国的首都。</p>

</body>
</html>

在这里插入图片描述

12.3 通过 ID 和链接实现 HTML 书签

HTML 书签用于让读者跳转至网页的特定部分。

如果页面很长，那么书签可能很有用。

要使用书签，您必须首先创建它，然后为它添加链接。

然后，当单击链接时，页面将滚动到带有书签的位置。

<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">跳转到 Chapter 4</a></p>       //第二步，在同一张页面中，向这个书签添加一个链接
<p><a href="#C10">跳转到 Chapter 10</a></p>   //第二步，在同一张页面中，向这个书签添加一个链接

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>      // //第一步，用 id 属性创建书签：
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>           // //第一步，用 id 属性创建书签：
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

在这里插入图片描述

12.4 在 JavaScript 中使用 id 属性

JavaScript 也可以使用 id 属性为特定元素执行某些任务。

JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素

这个在 HTML JavaScript 章节中再深入学习。

12.5 本章总结

（1）id 属性用于为 HTML 元素指定唯一的 id
（2）id 属性的值在 HTML 文档中必须是唯一的
（3）CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
（4）id 属性的值区分大小写
（5）id 属性还可用于创建 HTML 书签
（6）JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素

13. HTML Iframe

iframe 用于在网页内显示网页。

设置高度和宽度：height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.baidu.com/" width="200" height="200"></iframe>       //引号里边就是网址

<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>

</body>
</html>

14. HTML JavaScript

JavaScript 使 HTML 页面更具动态性和交互性

14.1 HTML

HTML

```

在这里插入图片描述

14.2 JavaScript 能够更改内容

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>JavaScript 可以更改 HTML 元素的内容：</p>

<button type="button" onclick="myFunction()">点击我！</button>

<p id="demo">这是一个演示。</p>

<script>
function myFunction() { 
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>

在这里插入图片描述
点击之后变化如下：

在这里插入图片描述

14.3 Javascript可以更改样式

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">JavaScript 可以更改 HTML 元素的样式。</p>

<script>
function myFunction() {
  document.getElementById("demo").style.fontSize = "25px"; 
  document.getElementById("demo").style.color = "red";
  document.getElementById("demo").style.backgroundColor = "yellow";        
}
</script>

<button type="button" onclick="myFunction()">点击我！</button>

</body>
</html>

在这里插入图片描述
点击之后变化如下：

14.4 JavaScript 能够更改属性

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>在这里，JavaScript 更改了图像的 src 属性。</p>

<script>
function light(sw) {
  var pic;
  if (sw == 0) {
    pic = "/i/eg_bulboff.gif"
  } else {
    pic = "/i/eg_bulbon.gif"
  }
  document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="/i/eg_bulboff.gif" width="109" height="180">

<p>
<button type="button" onclick="light(1)">开灯</button>
<button type="button" onclick="light(0)">关灯</button>
</p>

</body>
</html>

在这里插入图片描述
点击开灯，把light类中的参数变成了1，运行else分支，输出eg_bulbon.gif图片；
点击关灯，把light类中的参数变成了0，运行if分支，输出eg_bulboff.gif图片；

14.5 HTML 标签

HTML 标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>

<p>不支持 JavaScript 的浏览器将显示 noscript 元素内的文本。</p>
 
</body>
</html>

在这里插入图片描述
上边的代码输出的结果是这两句话，如果是不支持脚本或者禁用脚本的用户，那么他们看到的只有下边这句了。

在这里插入图片描述

15. HTML 文件路径

15.1 文件路径

在这里插入图片描述

文件路径描述了网站文件夹结构中某个文件的位置。

文件路径会在链接外部文件时被用到：

网页、图像、样式表，JavaScript。

15.2 绝对路径

绝对文件路径是指向一个因特网文件的完整 URL，比如：<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

15.3 相对路径

相对路径指向了相对于当前页面的文件。

比如，文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：

<img src="/images/picture.jpg" alt="flower">

比如，在本例中，文件路径指向了位于当前文件夹中 images 文件夹里的一个文件：

<img src="images/picture.jpg" alt="flower">

比如：文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件：

<img src="../images/picture.jpg" alt="flower">

16. HTML 头部元素

16.1 head元素

head 元素是所有头部元素的容器。head内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：
<title>、<base>、<link>、<meta>、<script> 以及 <style>。

16.2 title元素

title 标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：

（1）定义浏览器工具栏中的标题
（2）提供页面被添加到收藏夹时显示的标题
（3）显示在搜索引擎结果中的页面标题

例如：

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>    //title 元素能够：（1）定义浏览器工具栏中的标题
                                                          //（2）提供页面被添加到收藏夹时显示的标题
                                                          //（3）显示在搜索引擎结果中的页面标题
</head>

<body>
The content of the document......
</body>

</html>

16.3 base 元素

base 标签为页面上的所有链接规定默认地址或默认目标（target）：

例如：

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.w3school.com.cn/" target="_blank">
</head>
<body>

<h1>base 元素</h1>

<img src="/i/photo/flower.gif" width="90" height="90" alt="花朵">

<p>请注意，我们只指定了图像的相对地址。由于我们在 head 部分指定了基准 URL，因此浏览器将在“https://www.w3school.com.cn/i/photo/flower.gif”处查找图像。</p>

<p><a href="/tags/tag_base.asp">HTML base 标签</a></p>

<p>请注意，该链接会在新窗口中打开，即使它没有 target="_blank" 属性。这是因为 base 元素的 target 属性已被设置为“_blank”。</p>
</body>
</html>

16.4 link元素

link标签定义文档与外部资源之间的关系。

link 标签最常用于连接样式表，例如：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

16.5 style元素

style标签用于为 HTML 文档定义样式信息。

您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式，例如：

<head>
<style type="text/css">
body {background-color:yellow}     //说白了就是选择器
p {color:blue}
</style>
</head>

16.6 meta元素

元数据（metadata）是关于数据的信息。

meta 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

meta 标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词：一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

16.7 script

script 标签用于定义客户端脚本，比如 JavaScript。

在这里插入图片描述

17. HTML布局

网站常常以多列显示内容（就像杂志和报纸）
所以布局是好看的网页的关键

17.1 使用 div元素的 HTML 布局

注释：div元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个div元素来创建多列布局：

<body>

<div id="header">   //id起名，为了后续在CSS中设置样式位置啥的
<h1>City Gallery</h1>
</div>

<div id="nav">  //id起名，为了后续在CSS中设置样式位置啥的
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">      //id起名，为了后续在CSS中设置样式位置啥的
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">     //id起名，为了后续在CSS中设置样式位置啥的
Copyright W3School.com.cn
</div>

</body>

在这里插入图片描述
设置完内容之后，还可以设置一下样式，就是在代码开头写一下CSS配置：

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

17.2 使用 HTML5 的网站布局

时代在发展，使用div块元素在设置布局已经属于是老技术了，现在新的技术叫HTML5

这个属于升级版，更加简单，后边会详细讲这个东西，现在先简单看看效果

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright W3School.com.cn
</footer>

</body>

CSS的代码

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

在这里插入图片描述
可以看到基本上跟用div块元素写的基本一样，但是代码少了，虽然仅仅少了一点,css部分的代码也基本差不太多，用HTML5的话就不用style和#了，直接给对应的地方设置参数即可。

17.3 使用表格的 HTML 布局

注释：table 元素不是作为布局工具而设计的。

table 元素的作用是显示表格化的数据。

使用 table元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

<!DOCTYPE html>
<html>
<head>
<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td { 
    padding:10px;
}
table.lamp th {
    width:40px;
}

</style>
</head>

<body>
 
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>

</body>
</html>

在这里插入图片描述

18. HTML 响应式 Web 设计

18.1 什么是响应式 Web 设计？

即RWD，指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的
说白了就是里边的内容会随着窗口的大小而改变排布位置

下面是一个响应式web设计的例子：

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>

<body>

<h1>W3School Demo</h1>
<h2>Resize this responsive page!</h2>
<br>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

18.1 使用 Bootstrap制作响应式 Web 设计

另一个创建响应式设计的方法，是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

下边列一个简单的例子，后期进阶再仔细讲这个勾八东西：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</div>

</body>
</html>

19. HTML计算机代码

这个勾八东西就是第3节讲的那个东西，用于展示计算机代码在HTML应该如何写，说实话，看完一遍之后我还是觉得这个勾八没什么用，与其说我费劲设这个标签那个标签的，又编程代码又键盘输入又输出打印结果的，我直接用p标签，内容想写啥写啥不行吗？这不纯纯多此一举吗？搁置，以后用到了再说。

20. HTML语义

这个其实也应该在HTML5再讲，说白了，就是在HTML版本中，标签啥的都得搭配div啊，span啊，style之类的一起使用，例如这些：

<div id="nav"> <div class="header"> <div id="footer">

但是HTML5就不用了，单词啥意思就直接用就行：

在这里插入图片描述
直接代表对应的含义，就把div给省了。比如：

<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>

我直接一个article，根本不用div还有id=了，全省了。

常见的HTML5能用到的语义元素如下:

在这里插入图片描述

21.HTML 代码约定

这节说白了就是说HTML代码有自己的规范，这节目的是学习规范。

21.1请始终在文档的首行声明文档类型：

<!DOCTYPE html>

小写也行

<!doctype html>

21.2请使用小写元素名

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

21.3记得写结尾

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

21.4关闭空的 HTML 元素

在 HTML5 中，关闭空元素是可选的。

允许这样：

<meta charset="utf-8">

这样最好：

<meta charset="utf-8" />

斜杠（/）在 XHTML 和 XML 中是必需的。

如果您期望 XML 软件来访问您的页面，保持这个习惯是个好主意。

21.5使用小写属性名

<div class="menu">

推荐属性值加引号：

如果属性值包含值，则必须使用引号，加引号的值更易阅读。

下面这个属性值无效，因为值中包含空格：

<table class=table striped>

这样是有效的：

<table class="table striped">

21.6必需的属性

请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

21.7空格和等号

等号两边的空格是合法的：

<link rel = "stylesheet" href = "styles.css">

但是精简空格更易阅读。

21.8避免长代码行

21.9请勿毫无理由地增加空行。

为了提高可读性，请增加空行来分隔大型或逻辑代码块。

为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。

请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每个元素：

不必要：

<body>

  <h1>Famous Cities</1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

更好：

<body>

<h1>Famous Cities</1>
<h2>Tokyo</h2>

<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>

</body>

表格示例：

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  <tr>
</table>

列表示例：

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

21.10不推荐省略`<html>` 和 `<body>`标签。

21.11省略 `<head>`？

在 HTML5 标准中，标签也能够被省略。

默认地，浏览器会把之前的所有元素添加到默认的元素。

通过省略标签，您能够降低 HTML 的复杂性：

示例

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

注释：要我说就别勾八省了，该写的都写上，好懂一点。

21.12元数据

<title>元素在 HTML5 中是必需的。请尽可能制作有意义的标题。

<title>HTML5 Syntax and Coding Style</title>
为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

21.13HTML样式表

请使用简单的语法来链接样式表（type 属性不是必需的）：

<link rel="stylesheet" href="styles.css">

短规则可以压缩为一行，就像这样：

p.into {font-family:"Verdana"; font-size:16em;}

长规则应该分为多行：

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格
在每个属性值对（包括最后一个）之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行，之前不用空格
避免每行超过 80 个字符
注释：在逗号或分号之后添加空格，是所有书写类型的通用规则。

21.14在 HTML 中加载 JavaScript

请使用简单的语法来加载外部脚本（type 属性不是必需的）：

<script src="myscript.js">

21.15通过 JavaScript 访问 HTML 元素

使用“不整洁”的 HTML 样式的后果，是可能会导致 JavaScript 错误。

这两个 JavaScript 语句会产生不同的结果：

var obj = getElementById("Demo")

var obj = getElementById("demo")

如果可能，请在 HTML 中使用（与 JavaScript）相同的命名约定。

21.16使用小写文件名

大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：

不能以 london.jpg 访问 London.jpg。

其他 web 服务器（微软，IIS）对大小写不敏感：

能够以 london.jpg 或 London.jpg 访问 London.jpg。

如果使用混合大小写，那么您必须保持高度的一致性。

如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏您的网站。

为了避免这些问题，请始终使用小写文件名（如果可以的话）。

21.17文件扩展名

HTML 文件名应该使用扩展名 .html（而不是 .htm）。

CSS 文件应该使用扩展名 .css。

JavaScript 文件应该使用扩展名 .js。

22. HTML字符实体

说白了，就是在HTML里有些符号不能直接用，你得用别的符号代替，否则识别不出来

除了字符，符号也是一样，这个东西没必要背，用的时候查就行

在这里插入图片描述

为了正确显示 HTML 页面，Web 浏览器必须了解页面中使用的字符集。

这在 meta标签中指定：

<meta charset="UTF-8">

23. HTML 统一资源定位器

当您点击 HTML 页面中的某个链接时，对应的<a> 标签指向万维网上的一个地址。

统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。

网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：

scheme://host.domain:port/path/filename
解释：

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

说白了就是可以设置成网址，你可以点

在这里插入图片描述
挂自己电脑中的图片，要把HTML和图片放在一个文件夹下边

24.HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

说白了就是编程分块了，可以随意调每块的大小，类似EXCEL中的表格。

24.1 框架结构标签（frameset）

框架结构标签（frameset）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

24.2 框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 frame标签中加入：noresize="noresize"。

记得为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将<body></body> 标签与<frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于 <body></body> 标签内。

垂直框架：

<html>

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

在这里插入图片描述
水平框架：

<html>

<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

在这里插入图片描述
这些例子等用到的时候记得查

25. HTML背景

使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

意思就是用css来设置样式就完事了

26.HTML 快速参考

来自 W3School 的 HTML 快速参考。可以打印它，以备日常使用。

HTML 基础文档

<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>

文本元素

<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>

逻辑样式

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

物理样式

<b>This text is bold</b>
<i>This text is italic</i>

链接、锚、图像元素

<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

无序列表

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

有序列表

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

定义列表

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

表格

<table border="1">
<tr>
  <th>someheader</th>
  <th>someheader</th>
</tr>
<tr>
  <td>sometext</td>
  <td>sometext</td>
</tr>
</table>

框架

<frameset cols="25%,75%">
  <frame src="page1.htm">
  <frame src="page2.htm">
</frameset>

表单

<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>

实体

&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©

其他元素

<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>