本文深入讲解HTML的基础知识，包括标题、段落、链接、图像、属性、文本格式化、表格、列表、div和span元素等内容，是学习HTML的实用指南。
python爬虫知识用到的一些html基础知识
基本忘光了，纯分享当初的学习笔记
HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.
HTML 段落
HTML 段落是通过标签 <p> 来定义的.
HTML 链接
HTML 链接是通过标签 <a> 来定义的.
<a href="http://www.runoob.com">这是一个链接</a>
在 href 属性中指定链接的地址。
HTML 图像是通过标签 <img> 来定义的.
<img src="/images/logo.png" width="258" height="39" />
HTML 属性
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。
HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，
例如：name=‘John “ShotGun” Nelson’
HTML 提示：使用小写属性
HTML 属性参考手册
属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)
属性和属性值，尽量小写，本来这样做也方便些。
class 属性可以多用 class=" " （引号里面可以填入多个class属性）
id 属性只能单独设置 id=" "（只能填写一个，多个无效）
HTML 标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，
也不会显示它们。
注释写法如下:
实例
<!-- 这是一个注释 -->
<html> 定义 HTML 文档
<body> 定义文档的主体
<h1> - <h6> 定义 HTML 标题
<hr> 定义水平线
<!--...--> 定义注释
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
HTML 段落
段落是通过 <p> 标签定义的。
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行）
，请使用 <br> 标签：
实例
<p>这个<br>段落<br>演示了分行的效果</p>
HTML 文本格式化
HTML 格式化标签
HTML 使用标签
<b>("bold") 与 <i>("italic")
对输出的文本进行格式, 如：粗体 or 斜体
HTML 文本格式化标签
标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。
点击链接可以从一张页面跳转到另一张页面。
HTML 超链接（链接）
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，
您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">链接文本</a>
提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
实例
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
HTML 链接- id 属性
id属性可用于创建在一个HTML文档书签标记。
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：
<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：
<a href="http://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>
请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“http://www.runoob.com/html”，
就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，
然后创建一个新的请求，就像这样：href=“http://www.runoob.com/html/”。
<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>
单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
在进行邮件内容发送时，需要使用关键字：mailto
参数 描述
mailto:name@email.com 邮件接收地址
cc=name@email.com 抄送地址
bcc=name@email.com 密件抄送地址
subject=subject text 邮件主题
body=body text 邮件内容
? 第一个参数分隔符
& 其他参数分隔符
注：多个邮件地址用 ; 隔开，空格用 %20 代替。
nofollow 是 HTML 页面中 a 标签的属性值。这个标签的意义是告诉搜索引擎"
不要追踪此网页上的链接或不要追踪此特定链接"。
HTML <head> 元素
<head> 元素包含了所有的头部标签元素。
在 <head>元素中你可以插入脚本（scripts）,
样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为:
<title>, <style>, <meta>, <link>, <script>,
<noscript>, and <base>.
HTML <title> 元素
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标，
该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
meta标签描述了一些基本的元数据。
<meta>
标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
<meta> 标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。
显示时，要将<link>标签放入<head>里。
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" alt="some_text">
URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，
那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
HTML 图像- Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。 此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯， 这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。 HTML 图像- 设置图像的高度与宽度 height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，
页面加载时就会保留指定的尺寸。
如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件
加载页面时，要注意插入页面图像的路径，
如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），
每行被分割为若干单元格（由 <td> 标签定义）。
字母 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>
HTML 表
格表头
表格的表头使用 <th> 标签进行定义。
HTML 表格标签
标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下：
Coffee
Milk
HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于
- 标签。每个列表项始于
- 标签。
列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器中显示如下：
Coffee
Milk
HTML 列表标签
标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
HTML <div> 和<span>
HTML 可以通过 <div> 和 <span>将元素组合起来。
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，
浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。
它取代了使用表格定义布局的老式方法。
使用 <table> 元素进行文档布局不是表格的正确用法。
<table> 元素的作用是显示表格化的数据
。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
HTML 分组标签
标签 描述
<div> 定义了文档的区域，块级 (block-level)
<span> 用来组合文档中的行内元素， 内联元素(inline)
HTML 布局 - 使用<div> 元素
div 元素是用于分组 HTML 元素的块级元素。
扫一扫
3864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
