前端学习-HTML基础教程

HTML简介

HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），不是一种编程语言，而是一种标记语言。

文档=网页

HTML文档描述网页，文档包含HTML标签和纯文本；Web浏览器的作用就是读取HTML文档，并以网页的形式去显示他们。

<html>
<body>
<h1>hello world</h1>
<p>这是一个段落</p>
</body>
</html>

例子解释

<html>与</html>之间的文本描述网页
<body>与</body>之间的文本是可见的页面内容
<h1>与</h1>之间的文本被显示为标题
<p>与</p>之间的文本被显示为段落

HTML标题

HTML标题是通过h1-h6等标签进行定义的。
实例


<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML段落

HTML段落是通过< p>标签进行定义的。

实例

1 2	<p> This is a paragraph.</p> <p>This is another paragraph.</p>

HTML链接

HTML链接是通过a进行定义的。

1	<a href="https://github.com/LiuYing0111">这是刘莹的博客</a>

注：在href属性中指定链接的地址。

HTML图像

HTML图像是通过img标签进行定义的。

1	<img src="img.jpg" width="104" height="142"/>

注：图像的名称和尺寸是以属性的形式提供的。

HTML元素

HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签	元素内容	结束标签
< p>	This is a paragraph	< /p>
< a href=”default.htm”>	This is a link	< /a>
< br />

嵌套的HTML元素

大多数HTML元素可以嵌套（可以包含其他HTML元素）。
HTML文档由嵌套的HTML元素构成。
HTML文档实例


<html>
<body>
<p>这是一个段落</p>
</body>
</html>

上面的例子包含三个HTML元素。

空的HTML元素

没有内容的HTML元素被称为空元素，空元素是在开始标签中关闭的。
br就是没有关闭标签的空元素（br标签定义换行）。
在开始标签中添加斜杠，比如< br/ >,是关闭空元素的正确方法。

HTML属性

属性为HTML元素提供附加信息。
HTML标签可以拥有属性，属性提供了有关HTML元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在HTML元素的开始标签中规定。

属性例子

1
2
3

<h1 align="center">拥有关于对齐方式的附加信息。
<body bgcolor="yellow">拥有关于背景颜色的附加信息。
<table boder="1">拥有关于表格边框的附加信息。

HTML水平线

(hr/)标签在HTML页面中创建水平线。
hr元素可用于分隔内容。

实例


<p>This is a paragraph. </p>
<hr/>
<p>This is a paragraph. </p>
<hr/>
<p>This is a paragraph. </p>
```  

### HTML注释
![](https://upload-images.jianshu.io/upload_images/13740218-54d6fe6a796d4340.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
### HTML折行
在不产生一个新段落的情况下进行换行，使用br/标签。
```  

<p>I am <br />a silly <br />girl.</p>
<br/>元素是一个空的HTML元素，由于关闭标签没有任何意义，因此它没有结束标签。
```  

### HTML样式
style 属性用于改变HTML元素的样式。
**background-color属性为元素定义了背景颜色；**
**font-family定义了文本的字体系列；**
**color 定义了字体颜色；**
**font-size定义了字体尺寸;**
**text-align规定了元素中文本的水平对齐方式。**

#### 实例

```  
<html>
<body style ="background-color:PowderBlue;">
<h1>Look!Styles and colors </h1>
<p style ="font-family：verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green.</p>
<p style ="font-size:30px">This text is 30 pixels high</p>
<h1 style="text-align:center">This is a heading.</h1>
</body>
</html>

结果：

HTML文本格式化

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

HTML引用

HTML短的引用

q元素定义短的引用

HTML长应用

HTML< blockquote>元素定义被引用的节。
浏览器通常会对< blockquote>元素进行缩进处理。

<p>超长的引用。</p>
<blockquote>
洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥洒哥哥
</blockquote>

结果：

HTML缩略词abbr

< abbr>元素定义缩写或首字母缩略语。

实例：

1	<p><abbr title="World Health Organization">WHO</abbr>成立于1948年。</p>

HTML引文、引用和定义元素

标签	描述
< abbr>	定义缩写或首字母缩略语
< address>	定义文档作者或拥有者的联系信息
< bdo>	定义文本方向
< blockquote>	定义从其他来源引用的节
< dfn>	定义项目或缩略词的定义
< q>	定义短的行内引用
< cite>	定义著作的标题

HTML计算机代码

HTML键盘格式

kbd元素定义键盘输入

1 2	<p>打开一个文件，选择</p> <p><kbd>File \|Open...</kbd></p>

HTML样本格式

HTML samp 元素定义计算机输出示例：

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

HTML代码格式

HTML code元素定义编程代码示例:

1
2
3

<code>
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
</code>

注：code元素不保留多余的空行和折行;
如需解决该问题，必须在< pre>元素中包围代码。

HTML变量格式化

HTML var元素定义数学变量

1 2	<p>Einstein wrote:</p> <p><var>E = m c<sup>2</sup></var></p>

HTML CSS

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式来对文档进行格式化。有以下三种方式：

外部样式表

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

1
2
3

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

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过style标签定义内部样式表。

内联样式

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

1
2
3

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

HTML链接

我们通过使用a标签创建链接：
1.通过使用href属性-创建指向另一个文档的链接
2.通过使用name属性-创建文档内的书签

####HTML链接语法

1	<a href="url">Link text</a>

实例

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

HTMl链接-target属性

使用target属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：

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

HTMl链接-name属性

name 属性规定锚（anchor）的名称。
可以使用name属性创建HTML页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳到该命明锚的链接。
命明锚的语法

1	<a name="label">锚（显示在页面上的文本）</a>

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

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

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

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

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

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

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

###HTML图像

####图像标签（img）和源属性（Src）
在HTML中，图像由img标签定义。
img是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。指“source”。源属性的值是图像的URL地址。
定义图像的语法是：

<img src="url"/>

URL指存储图片的位置。
实例

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

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

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
实例

###HTML表格

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

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

在浏览器显示：

####表格和边框属性
如果不定义边框属性，表格将不显示边框。
使用边框属性来显示一个带有边框的表格：

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

####表格的表头
表格的表头使用th标签进行定义。
大多数浏览器会把标头显示为粗体居中的文本：

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

浏览器显示：

####表格中的空单元格
如果某个表单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
在空单元格中添加一个空格占位符 &nbsp加；，就可以将边框显示出来。

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

显示：

###HTML列表

####无序列表
无序标签始于ul标签。
每个列表项始于li。

<html>
<body>
<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

显示：

####有序列表
有序列表始于ol标签。
每个列表项始于li标签。

####定义列表
自定义列表不仅仅是一个项目，而是项目及其注释的组合。
自定义列表以dl标签开始；
每个自定义列表项以dt开始；
每个自定义列表项的定义以dd开始。

###HTML块
可以通过div和span将HTML元素组合起来。

####HTML块元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>,<p>,<ul>,<table>

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

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

####HTMLdiv元素
div是块级元素，是可用于组合其他HTML元素的容器。
定义文档中的分区或节。

####HTMLspan元素
span是内联元素，可用作文本的容器。
用来组合文档中的行内元素。

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

###HTML布局

####使用div元素的HTML布局
div元素常用作布局工具，因此能够轻松地通过CSS对其进行定位。

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="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>
</div>
<div id="footer">
Copyright W3School.com.cn
</div>
</body>

结果：

###HTML响应式Web设计

####什么是响应式Web设计？

RWD指的是响应式Web设计（Responsive Web Design）
RWD能够以可变尺寸传递网页
RWD对于平板和移动设备是必须的
HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

框架结构标签frameset

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

框架标签（Frame）

Frame标签定义了放置在每个框架中的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>

注意：1. 不能将< body>< /body>标签与< frameset>< /frameset>标签同时使用！
2.假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况，可以在frame标签中加入：noresize=”noresize”.

HTML内联框架

iframe语法

<iframe src="URL"></iframe>

iframe定义内联的子窗口（框架）；
URL指向隔离页面的位置。

iframe-设置高度和宽度

height和width属性规定iframe的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如“80%”）

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

iframe-删除边框

frameborder属性规定是否显示iframe周围的边框。
设置属性值为“0”就可以移除边框；

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe作为链接的目标

iframe可用作链接的目标（target）。
链接的target属性必须引用iframe的name属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

HTML背景

背景颜色（bgcolor)

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

以上的代码均将背景颜色设置为黑色。

背景（background)

body拥有两个配置背景的标签。背景可以是颜色或者图像。
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

注意

body 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

HTML脚本

JavaScript使HTML页面具有更强的动态和交互性。

HTML script元素

script标签用于定义客户端脚本，比如JavaScript。
script元素即可包含脚本语句，也可通过src属性指向哇哦不脚本文件。
必须的type属性规定脚本的MIME类型。
JavaScript最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出”helloworld”

<script type="text/javascript">
document.write("Hello World!")
</script>

noscript标签

noscript标签提供无法使用脚本时的替代内容。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

HTML头部元素

head元素

<head>元素是所有头部元素的容器。
<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到head部分：<title>、<base> <link> <meta> <script> <style>.

title元素

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

base元素

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

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
#### <link>元素
<link>标签定义文档与外部资源之间的关系，最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

style元素

为HTML文档定义样式信息
可以在style元素内规定HTML元素在浏览器中呈现的样式：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

meta元素

元数据（metadata）是关于数据的信息。
meta 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
meta 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

定义页面的描述：

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

定义页面的关键词：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

HTML头部元素

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

HTML速查手册

HTML基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本
</body>
</html>

HTML基本标签

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6><br>
<p>这是一个段落。</p>
< br> （换行）
< hr> （水平线）
< !-- 这是注释 -->

HTML文本格式化

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong><br>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
< sub> （下标文本）
< sup> （上标文本）

HTML链接

普通的链接：<a href="https://liuying0111.github.io/">小可爱 </a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

无序列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

框架

<iframe src="demo_iframe.htm"></iframe>

HTML简介

标签

文档=网页

HTML标题

HTML段落

HTML链接

HTML图像

HTML元素

嵌套的HTML元素

空的HTML元素

HTML属性

属性例子

HTML水平线

实例

HTML文本格式化

HTML引用

HTML短的引用

HTML长应用

HTML缩略词abbr

HTML引文、引用和定义元素

HTML计算机代码

HTML键盘格式

HTML样本格式

HTML代码格式

HTML变量格式化

HTML CSS

如何使用样式

外部样式表

内部样式表

内联样式

HTML链接

HTMl链接-target属性

HTMl链接-name属性

HTML框架

框架结构标签frameset

框架标签（Frame）

HTML内联框架

iframe语法

iframe-设置高度和宽度

iframe-删除边框

使用iframe作为链接的目标

HTML背景

背景颜色（bgcolor)

背景（background)

注意

HTML脚本

HTML script元素

noscript标签

HTML头部元素

head元素

title元素

base元素

style元素

meta元素

HTML头部元素

HTML速查手册

HTML基本文档

HTML基本标签

HTML文本格式化

HTML链接

图片

样式/区块

无序列表

有序列表

定义列表

表格

框架