前言

学习如何使用html的基本语法。

一、什么是HTML?

一种超文本标记语言。

二、运行规则

2.1起始行

起始行写法------> <!DOCTYPE html>

2.2 HTML文件结构

标签

描述

<head>

定义关于文档的信息。

<title>

定义文档标题。

<base>

定义页面上所有链接的默认地址或默认目标。

<link>

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

<meta>

定义关于 HTML 文档的元数据。

<script>

定义客户端脚本。

<style>

定义文档的样式信息。

简单结构：

<!DOCTYPE html>
<html>

 <head>
  <title>第一个网页</title>
 </head>

 <body> </body>
</html>

2.3 HTML 标签

  • HTML标签通常是成对出现的，比如<b>和</b>
  • 尖括号包围的关键词，比如<html>
  • 具体案例：
  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

2.3.1 常用标签

标签

含义

h1

一级标题

h2

二级标题

h3

三级标题

p

段落

b

加粗

i

斜体

sub

带下标

hub

带上标

del

带删除线

br

下一行

ul

无序列表

ol

有序列表

li

列表项（放在ul和ol里面）

2.3.2 超链接标签

<a href="xxx">跳转到xxx</a>

2.3.3 图片标签

<img src="./当前目录下.jpg" />

注意：也可以指定网络上的url地址。

2.3.4 视频标签

<video src="./路径.MP4" controls></video>

2.3.5 音频标签

<audio src="./路径.MP3" controls></audio>

2.3.5 表格标签

表格由 <table> 标签来定义。表格的表头使用 <th> 标签进行定义，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

实例：

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

其他表格标签：

表格

描述

<table>

定义表格

<caption>

定义表格标题。

<th>

定义表格的表头。

<tr>

定义表格的行。

<td>

定义表格单元。

<thead>

定义表格的页眉。

<tbody>

定义表格的主体。

<tfoot>

定义表格的页脚。

<col>

定义用于表格列的属性。

<colgroup>

定义表格列的组。

2.4 HTML属性

属性

值

描述

class

classname

规定元素的类名（classname）

id

id

规定元素的唯一 id

style

style_definition

规定元素的行内样式（inline style）

title

text

规定元素的额外信息（可在工具提示中显示）

2.5 其他标签

水平标签（常用）
<hr /> 标签在 HTML 页面中创建水平线。

换行标签
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用<br />标签。

子窗口标签

标签

描述

<iframe>

定义内联的子窗口（框架）

论文引用标签

标签

描述

<abbr>

定义缩写。

<acronym>

定义首字母缩写。

<address>

定义地址。

<bdo>

定义文字方向。

<blockquote>

定义长的引用。

<q>

定义短的引用语。

<cite>

定义引用、引证。

<dfn>

定义一个定义项目。

<abbr>

定义缩写或首字母缩略语。

<address>

定义文档作者或拥有者的联系信息。

<bdo>

定义文本方向。

<blockquote>

定义从其他来源引用的节。

<dfn>

定义项目或缩略词的定义。

<q>

定义短的行内引用。

<cite>

定义著作的标题。

2.6 注释

<!---这就是注释 --->

2.7 超链接标签的属性

1.<a>标签是一个超链接标签。
2. Target 属性，你可以定义被链接的文档在何处显示。
3. name 属性规定锚（anchor）的名称,用于锚记链接：

  • 当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
  • 实例：
<!--- 首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：--->

<a name="tips">基本的注意事项 - 有用的提示</a>
<!---然后，我们在同一个文档中创建指向该锚的链接：--->

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

<!---- 您也可以在其他页面中创建指向该锚的链接：在下面的代码中，
我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。--->
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

注释：请始终将正斜杠添加到子文件夹1。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

4.邮件链接：

<p>
	这是邮件链接：
	<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
	<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

2.8 理解元素并组合元素

块元素
大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。

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

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

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

<div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

2.9 Class类与id属性

1.对 HTML 进行分类class（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。语法：.class{}
2.HTML id 属性用于 为HTML 元素指定唯一的` id。一个 HTML文档中不能存在多个有相同 id 的元素。id 的语法是：写一个井号 (#)，后跟一个 id 名称。

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

注意id和name:
1、id属性的值是区分大小写的，每个id值都应该是唯一的；而name属性不具有是唯一性，它的值可以重复使用。
2、用途不一样，id属性可以用作锚引用，也可用作ID选择器；而name属性在表单中使用，用来提交信息。
3、html5去掉了name属性,建议使用id定义锚点(如果是在a标签上定义锚点,可以使用name属性)

HTML深度学习

请登录 跳转到w3school，或等待下一篇文章，持续更新ing。

  1. 假如这样书写链接：href=“http://www.w3school.com.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.w3school.com.cn/html/”。 ↩︎