HTML基础

最新推荐文章于 2021-06-09 16:14:45 发布

GEVIN313

最新推荐文章于 2021-06-09 16:14:45 发布

阅读量769

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/GEVIN313/article/details/79833198

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML 元素

一、HTML 元素

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

二、HTML 元素语法

1.HTML 元素以开始标签起始，HTML 元素以结束标签终止

2.元素的内容是开始标签与结束标签之间的内容

3.某些 HTML 元素具有空内容（empty content）

4.空元素在开始标签中进行关闭（以开始标签的结束而结束）

5.大多数 HTML 元素可拥有属性

三、空的 HTML 元素

1.没有内容的 HTML 元素被称为空元素

2.空元素是在开始标签中关闭的

3.<br> 就是没有关闭标签的空元素（<br>标签定义换行）

4.在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障

HTML 属性

一、HTML 属性

1.属性为 HTML 元素提供附加信息

2.HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息

3.属性总是以名称/值对的形式出现，比如：name="value"

4.属性总是在 HTML 元素的开始标签中规定

5.例如：<ahref="http://www.w3school.com.cn">This is a link</a>

二、HTML属性实例

1.标题居中：<h1 align="center">

2.背景颜色设置为黄：<body bgcolor="yellow">

三、属性值加引号

1.属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题

2.在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Bill "HelloWorld" Gates'

HTML 标题

一、HTML 标题

标题（Heading）是通过 <h1>~<h6> 等标签进行定义的。<h1> 定义最大的标题，<h6> 定义最小的标题

二、标题的重要性

1.请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题

2.搜索引擎使用标题为您的网页的结构和内容编制索引

3.因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的

4.应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推

三、HTML 水平线

1.<hr /> 标签在HTML 页面中创建水平线

2.hr元素可用于分隔内容

四、HTML 注释

1.可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们

2.注释是这样写的：，开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要

HTML 段落

一、HTML 段落

段落是通过<p> 标签定义的

二、不要忘记结束标签

忘记使用结束标签会产生意想不到的结果和错误

三、HTML换行

1.如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br />标签：<p>This is<br />apara<br />graph with line breaks</p>

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

四、HTML输出

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格

HTML 样式

一、HTML 的 style 属性

style 属性提供了一种改变所有 HTML 元素的样式的通用方法

二、不赞成使用的标签和属性

在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性

标签	描述
<center>	定义居中的内容。
<font> 和 <basefont>	定义 HTML 字体。
<s> 和 <strike>	定义删除线文本
<u>	定义下划线文本
属性	描述
align	定义文本的对齐方式
bgcolor	定义背景颜色
color	定义文本颜色

对于以上这些标签和属性：请使用样式代替

三、HTML 样式实例

1.背景颜色

（1）background-color 属性为元素定义了背景颜色，style 属性淘汰了“旧的” bgcolor 属性

（2）代码：

<html>

<h2style="background-color:red">This is a heading</h2>

<pstyle="background-color:green">This is a paragraph.</p>

</body>

</html>

（3）效果：

2.字体、颜色和尺寸

（1）font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸，style 属性淘汰了旧的 <font> 标签

（2）代码：

<html>

<body>

<h1 style="font-family:verdana">Aheading</h1>

<pstyle="font-family:arial;color:red;font-size:20px;">Aparagraph.</p>

</body>

</html>

（3）效果：

1.文本对齐

（1）text-align 属性规定了元素中文本的水平对齐方式，style 属性淘汰了旧的"align" 属性

（2）代码：

<html>

<body>

<h1 style="text-align:center">Thisis a heading</h1>

<p>The heading above is aligned tothe center of this page.</p>

</body>

</html>

（3）效果：

HTML 文本格式化

一、文本格式化、

1.文本格式化标签：

标签	描述
<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除字。
<s>	不赞成使用。使用 <del> 代替。
<strike>	不赞成使用。使用 <del> 代替。
<u>	不赞成使用。使用样式（style）代替。

2.文本格式化，例：

<html>

<body>

<br />

<strong>This text is strong</strong>

<br />

<br />

<em>This text is emphasized</em>

<br />

<i>This text is italic</i>

<br />

<small>This text is small</small>

<br />

This textcontains

<sub>subscript</sub>

<br />

This textcontains

<sup> superscript </sup>

</body>

</html>

3.删除字插入字，例：

<html>

<body>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>

</html>

二、预格式文本、“计算机输出”

1.“计算机输出“标签：

标签	描述
<code>	定义计算机代码。
<kbd>	定义键盘码。
<samp>	定义计算机代码样本。
<tt>	定义打字机代码。
<var>	定义变量。
<pre>	定义预格式文本。
<listing>	不赞成使用。使用 <pre> 代替。
<plaintext>	不赞成使用。使用 <pre> 代替。
<xmp>	不赞成使用。使用 <pre> 代替。

2.预格式文本标签：<pre> 、</pre>，保留文本的空格和换行，例：

<html>

<body>

<pre>

这是

预格式文本。

它保留了空格

和换行。

</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

3.”计算机输出”，例：

<html>

<body>

<code>Computer code</code>

<br />

<kbd>Keyboard input</kbd>

<br />

<tt>Teletype text</tt>

<br />

<samp>Sample text</samp>

<br />

<var>Computer variable</var>

<br />

<p>

<b>注释：</b>这些标签常用于显示计算机/编程代码。

</p>

</body>

</html>

三、地址、缩写和首字母缩写、文字方向、块引用

1.引用、引用和术语定义：

标签	描述
<abbr>	定义缩写。
<acronym>	定义首字母缩写。
<address>	定义地址。
<bdo>	定义文字方向。
<blockquote>	定义长的引用。
<q>	定义短的引用语。
<cite>	定义引用、引证。
<dfn>	定义一个定义项目。

2.在html中写地址，例：

<!DOCTYPE html>

<html>

<body>

Written by<a href="mailto:webmaster@example.com">DonaldDuck</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564,Disneyland<br>

USA

</address>

</body>

</html>

3.缩写和首字母缩写，例：

<html>

<body>

<abbrtitle="etcetera">etc.</abbr>

<br />

<acronymtitle="World Wide Web">WWW</acronym>

<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

<p>仅对于 IE 5 中的acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>

</html>

4.文字方向，例：

<html>

<body>

<p>

如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出(rtl)；

</p>

<bdodir="rtl">

Here is someHebrew text

</bdo>

</body>

</html>

5.块引用，例：

<html>

<body>

这是长的引用：

这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

</blockquote>

这是短的引用：

<q>

这是短的引用。

</q>

<p>

使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

</p>

</body>

</html>

HTML引用

一、HTML<q> 用于短的引用

1.HTML <q>元素定义短的引用

2.浏览器通常会为 <q> 元素包围引号

二、用于长引用的HTML <blockquote>

1.HTML <blockquote> 元素定义被引用的节

2.浏览器通常会对 <blockquote> 元素进行缩进处理

三、用于缩略词的 HTML <abbr>

1.HTML <abbr> 元素定义缩写或首字母缩略语

2.对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息

四、用于定义的 HTML <dfn>

1.HTML <dfn>元素定义项目或缩写的定义

2.<dfn>的用法，按照 HTML5标准中的描述，有点复杂：

(1)如果设置了 <dfn> 元素的 title 属性，则定义项目：

<p>The<dfntitle="World Health Organization">WHO</dfn> was founded in1948.</p>

(2)如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目：

<p>The<dfn><abbrtitle="World Health Organization">WHO</abbr></dfn> wasfounded in 1948.</p>

(3)否则，<dfn> 文本内容即是项目，并且父元素包含定义：

<p>The<dfn>WHO</dfn>World Health Organization was founded in 1948.</p>

五、用于联系信息的HTML <address>

1.HTML<address>元素定义文档或文章的联系信息（作者/拥有者）

2.此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行

六、用于著作标题的HTML <cite>

1.HTML <cite> 元素定义著作的标题

2.浏览器通常会以斜体显示<cite> 元素

七、用于双向重写的HTML <bdo>

1.HTML <bdo>元素定义双流向覆盖（bi-directional override）

2.<bdo> 元素用于覆盖当前文本方向

<bdodir="rtl">

This line will bewritten from right to left

</bdo>

HTML 计算机代码元素

一、HTML计算机代码格式

通常，HTML 使用可变的字母尺寸，以及可变的字母间距，在显示计算机代码示例时，并不需要如此。<kbd>, <samp>, 以及 <code>元素全都支持固定的字母尺寸和间距

二、HTML键盘格式

HTML <kbd>元素定义键盘输入

<!DOCTYPE html>

<html>

<p>HTML kbd 元素表示键盘输入：</p>

</body>

</html>

三、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代码格式

1.HTML <code>元素定义编程代码示例

<code>

var person = {firstName:"Bill", lastName:"Gats",age:50}

</code>

2.<code> 元素不保留多余的空格和折行

<code>

varperson = {firstName:"Bill", lastName:"Gats", age:50}

</code>

解决办法：在 <pre> 元素中包围代码

<code>

<pre>

var person = {

firstName:"Bill",

lastName:"Gates",

age:50,

eyeColor:"blue"

}

</pre>

</code>

五、HTML变量格式化

HTML <var> 元素定义数学变量

HTML注释

一、语法

二、条件注释

<!--[if IE 8]>

.... some HTMLhere ....

<![endif]-->

条件注释定义只有 Internet Explorer 执行的 HTML 标签

三、软件程序标签

各种 HTML 软件程序也能够生成 HTML 注释，例如  标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持

HTML CSS

一、概念

通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表

二、如何使用样式

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

1.外部样式表：

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

<head>

</head>

2.内部样式表：

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

<head>

<styletype="text/css">

body{background-color: red}

p{margin-left: 20px}

</style>

</head>

3.内联样式：

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

This is aparagraph

</p>

三、标签

标签	描述
<style>	定义样式定义。
<link>	定义资源引用。
<div>	定义文档中的节或区域（块级）。
<span>	定义文档中的行内的小块或区域。
<font>	规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont>	定义基准字体。不赞成使用。请使用样式。
<center>	对文本进行水平居中。不赞成使用。请使用样式。

HTML链接

一、概念

HTML 使用超级链接与网络上的另一个文档相连，几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面

二、HTML超链接

1.超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。我们通过使用 <a> 标签在HTML 中创建链接

2.有两种使用 <a> 标签的方式：

(1)通过使用 href 属性 - 创建指向另一个文档的链接

(2)通过使用 name 属性 - 创建文档内的书签

三、HTML链接语法

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

href 属性规定链接的目标，开始标签和结束标签之间的文字被作为超级链接来显示

2. "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接

四、HTML链接 - target属性

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

2.如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开，下面的这行会在新窗口打开文档：

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

五、HTML链接 – name属性

1.name 属性规定锚（anchor）的名称，您可以使用 name 属性创建 HTML 页面中的书签，书签不会以任何特殊方式显示，它对读者是不可见的，当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了

2. 命名锚的语法：<a name="label">锚（显示在页面上的文本）</a>，您可以使用 id 属性来替代 name 属性，命名锚同样有效

六、链接标签

标签	描述
<a>	定义锚。

HTML图像

一、图像标签（<img>）和源属性（src）

1.在HTML中，图像由<img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指"source"。源属性的值是图像的URL 地址

2.定义图像的语法是：<imgsrc="url" />

URL指存储图像的位置。如果名为 "boat.gif" 的图像位于www.w3school.com.cn 的images目录中，那么其URL为http://www.w3school.com.cn/images/boat.gif。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段

二、替换文本属性（alt）

1.alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<imgsrc="boat.gif" alt="Big Boat">

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

三、排列属性（align）不赞成使用

属性值：

(1)“left”：把图像对齐到左边

(2)“right”：把图像对齐到右边

(3)“middle”：把图像与中央对齐

(4)“top”：把图像与顶部对齐

(5)“bottom”：把图像与底部对齐

四、图形映像（usemap属性、map标签、area标签 | ismap属性）

1.创建一个图形地图，不同的区域是不同的链接

<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap"

alt="Planets"/>

<mapname="planetmap" id="planetmap">

<area shape="circle" coords="180,139,14"

href="/example/html/venus.html" target ="_blank" alt="Venus" />

<area shape="circle" coords="129,161,10"

href="/example/html/mercur.html" target ="_blank" alt="Mercury" />

<area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html"

target="_blank" alt="Sun"/>

</map>

img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了"id" 和 "name" 属性

2.鼠标移动到图片状态栏显示坐标：

<ahref="/example/html/html_ismap.html">

<imgsrc="/i/eg_planets.jpg" ismap />

</a>

五、标签

标签	描述
<img>	定义图像。
<map>	定义图像地图。
<area>	定义图像地图中的可点击区域。

HTML表格

一、表格

1.表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td> 标签定义）。

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

<tableborder="1">

<tr>

</tr>

<tr>

</tr>

</table>

二、边框属性（<table>的border）

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

<tr>

</tr>

</table>

三、表头（<th>）

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

<tr>

<th>Heading</th>

<th>AnotherHeading</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

四、空单元格

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

<tableborder="1">

<tr>

</tr>

<tr>

</tr>

</table>

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

<tableborder="1">

<tr>

</tr>

<tr>

</tr>

</table

五、标题（<caption>）

<tableborder="6">

<tr>

</tr>

<tr>

</tr>

</table>

六、跨行、跨列的单元格（跨列：<th>的colspan，跨行：<th>的rowspan）

<h4>横跨两行的单元格：</h4>

<tableborder="1">

<tr>

<td>Bill Gates</td>

</tr>

<tr>

<throwspan="2">电话</th>

</tr>

<tr>

</tr>

</table>

七、单元格边距（<table>的cellpadding）

1.单元格边距是单元格内容与边框的距离

2.<tableborder="1" cellpadding="10">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

八、单元格间距（<table>的cellspacing）

1.单元格间距是单元格之间的距离

2.<tableborder="1" cellspacing="10">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

九、为表格添加背景颜色或背景图像（<table>的bgcolor和background）

1.背景颜色：

<tableborder="1" bgcolor="red">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

2.背景图像：

<tableborder="1" background="/i/eg_bg_07.gif">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

十、为表格单元添加背景颜色或背景图像（<td>的bgcolor和background）

同上

十一、在表格单元中排列（<td>的align）

<tablewidth="400" border="1">

<tr>

</tr>

<tr>

<tdalign="right">$241.10</td>

<tdalign="right">$50.20</td>

</tr>

<tr>

<tdalign="right">$30.00</td>

<tdalign="right">$44.45</td>

</tr>

<tr>

<tdalign="right">$730.40</td>

<tdalign="right">$650.00</td>

</tr>

<tr>

<thalign="right">$1001.50</th>

<thalign="right">$744.65</th>

</tr>

</table>

十二、frame框架属性（<table>的frame）

<p>Tablewith frame="box":</p>

<tableframe="box">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

<p>Tablewith frame="above":</p>

<tableframe="above">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

<p>Tablewith frame="below":</p>

<tableframe="below">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

<p>Tablewith frame="hsides":</p>

<tableframe="hsides">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

<p>Tablewith frame="vsides":</p>

<tableframe="vsides">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

十三、表格标签

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

HTML列表

一、无序列表

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

2.无序列表始于 <ul> 标签。每个列表项始于 <li>

<ul>

<li>Coffee</li>

</ul>

二、有序列表

1.有序列表也是一列项目，列表项目使用数字进行标记

2.有序列表始于 <ol> 标签。每个列表项始于 <li> 标签

<ol>

<li>Coffee</li>

</ol>

三、定义列表

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

2.自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

四、列表标签

标签	描述
<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。

HTML <div> 和 <span>

一、HTML块元素

1.大多数 HTML 元素被定义为块级元素或内联元素

2.块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：<h1>, <p>, <ul>, <table>

二、HTML内联元素

内联元素在显示时通常不会以新行开始。例子：<b>, <td>, <a>, <img>

三、HTML <div>元素

1.HTML<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

2.<div> 元素没有特定的含义。

3.由于它属于块级元素，浏览器会在其前后显示折行

4.如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性

5.<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据

四、HTML <span> 元素

1.HTML<span> 元素是内联元素，可用作文本的容器

2.<span>元素也没有特定的含义

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

五、HTML分组标签

标签	描述
<div>	定义文档中的分区或节（division/section）。
<span>	定义 span，用来组合文档中的行内元素。

HTML类

一、分类块级元素

HTML<div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：

二、分类行内元素

HTML<span> 元素是行内元素，能够用作文本的容器。设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式

<!DOCTYPEhtml>

<html>

<head>

<style>

span.red{

color:red;

}

</style>

</head>

<body>

</body>

</html>

HTML布局

一、使用 <div> 元素的 HTML 布局

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

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

<html>

<head>

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

</head>

<body>

<divid="header">

<h1>CityGallery</h1>

</div>

<divid="nav">

London<br>

Paris<br>

Tokyo<br>

</div>

<divid="section">

<h2>London</h2>

<p>

London is thecapital city of England. It is the most populous city in the United Kingdom,

with ametropolitan area of over 13 million inhabitants.

</p>

<p>

Standing onthe River Thames, London has been a major settlement for two millennia,

its history goingback to its founding by the Romans, who named it Londinium.

</p>

</div>

<divid="footer">

</div>

</body>

</html>

蓝字为CSS

二、使用HTML5的网站布局

1.HTML5的语义元素：

header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

2.实例：

<!DOCTYPEhtml>

<html>

<head>

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

</head>

<body>

<h1>CityGallery</h1>

</header>

<nav>

London<br>

Paris<br>

Tokyo<br>

</nav>

<h1>London</h1>

<p>

London is thecapital city of England. It is the most populous city in the United Kingdom,

with ametropolitan area of over 13 million inhabitants.

</p>

<p>

Standing onthe River Thames, London has been a major settlement for two millennia,

its historygoing back to its founding by the Romans, who named it Londinium.

</p>

</section>

CopyrightW3Schools.com

</footer>

</body>

</html>

三、使用表格的HTML布局

1.<table>元素不是作为布局工具而设计的，<table>元素的作用是显示表格化的数据，而使用 <table> 元素能够取得布局效果，是因为能够通过 CSS 设置表格元素的样式

2.实例：

<html>

<head>

<style>

table.lamp{

width:100%;

border:1px solid #d4d4d4;

}

table.lampth, td {

padding:10px;

}

table.lampth {

width:40px;

}

</style>

</head>

<body>

<tableclass="lamp">

<tr>

<th>

</th>

<td>

The table element was not designed to be alayout tool.

</td>

</tr>

</table>

</body>

</html>

HTML 响应式 Web 设计

一、自己创建响应式设计

<htmllang="en-US">

<head>

<style>

.city {

float: left;

margin: 5px;

padding: 15px;

width: 300px;

height: 300px;

border: 1pxsolid black;

}

</style>

</head>

<body>

<h1>W3SchoolDemo</h1>

<h2>Resizethis responsive page!</h2>

<br>

<divclass="city">

<h2>London</h2>

<p>Londonis the capital city of England.</p>

<p>It isthe most populous city in the United Kingdom,

with ametropolitan area of over 13 million inhabitants.</p>

</div>

<divclass="city">

<h2>Paris</h2>

<p>Parisis the capital and most populous city of France.</p>

</div>

<divclass="city">

<h2>Tokyo</h2>

<p>Tokyois the capital of Japan, the center of the Greater Tokyo Area,

and the mostpopulous metropolitan area in the world.</p>

</div>

</body>

</html>

二、使用 Bootstrap框架

<html>

<head>

</head>

<body>

<divclass="container">

<divclass="jumbotron">

<h1>W3School Demo</h1>

<p>Resize this responsivepage!</p>

</div>

<divclass="container">

<divclass="row">

<h2>London</h2>

<p>London is the capital city ofEngland.</p>

<p>It is the most populous city inthe United Kingdom,

with a metropolitan area of over 13 millioninhabitants.</p>

</div>

<h2>Paris</h2>

<p>Paris is the capital and mostpopulous city of France.</p>

</div>

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan, thecenter of the Greater Tokyo Area,

and the most populous metropolitan area inthe world.</p>

</div>

</body>

</html>

HTML框架

一、框架

1.通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架

2.使用框架的坏处：开发人员必须同时跟踪更多的HTML文档、很难打印整张页面

二、标签

1.框架结构标签（<frameset>）：

(1)定义如何将窗口分割为框架

(2)每个 frameset 定义了一系列行或列

(3)rows/cols 的值规定了每行或每列占据屏幕的面积

(4)frameset 标签也被某些文章和书籍译为框架集

2.框架标签（Frame）

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

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

<framesetcols="25%,75%">

</frameset>

三、注意事项

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

<html>

<framesetcols="50%,*,25%">

<framesrc="/example/html/frame_a.html" noresize="noresize"/>

<framesrc="/example/html/frame_b.html" />

<framesrc="/example/html/frame_c.html" />

</frameset>

</html>

此时Frame A的边框不能拖动

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

<html>

<framesetcols="25%,50%,25%">

<framesrc="/example/html/frame_b.html">

<framesrc="/example/html/frame_c.html">

<body>您的浏览器无法处理框架！</body>

</noframes>

</frameset>

</html>

四、实例

1.混合框架结构：

<html>

<framesetrows="50%,50%">

<framesrc="/example/html/frame_a.html">

<framesetcols="25%,75%">

<framesrc="/example/html/frame_b.html">

<framesrc="/example/html/frame_c.html">

</frameset>

</html>

2.导航框架：名为"contents.htm" 的文件包含三个链接

<html>

<framesetcols="120,*">

<framesrc="/example/html/frame_a.html" name="showframe">

</frameset>

</html>

3.内联框架：

<html>

<body>

<iframesrc="/i/eg_landscape.jpg"></iframe>

<p>一些老的浏览器不支持 iframe。</p>

<p>如果得不到支持，iframe 是不可见的。</p>

</body>

</html>

4.跳转至框架内的一个指定的节：本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C10"> 进行标识

<html>

<framesetcols="20%,80%">

<framesrc="/example/html/frame_a.html">

<framesrc="/example/html/link.html#C10">

</frameset>

</html>

5.使用框架导航跳转至指定的节：本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节

<html>

<framesetcols="180,*">

<framesrc="/example/html/content.html">

<framesrc="/example/html/link.html" name="showframe">

</frameset>

</html>

HTML iframe（内联框架）

一、概念

iframe用于在网页内显示网页

二、添加iframe的语法

<iframesrc="URL"></iframe>

三、设置高度和宽度

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

<iframesrc="/example/html/demo_iframe.html" width="200"height="200"> </iframe>

四、删除边框

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

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

五、使用iframe作为链接的目标

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

<html>

<body>

<iframesrc="/example/html/demo_iframe.html"name="iframe_a"></iframe>

<p><ahref=http://www.w3school.com.cntarget="iframe_a">W3School.com.cn</a></p>

<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>

</body>

</html>

HTML背景

一、背景颜色（<body>的bgcolor）

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

二、背景（<body>的background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制

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

三、注意事项

1.<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性

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

HTML脚本

一、HTML script元素

1.<script>标签用于定义客户端脚本，比如JavaScript

2.script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件

3.必需的 type 属性规定脚本的 MIME 类型

4.JavaScript 最常用于图片操作、表单验证以及内容动态更新

5.实例：下面的脚本会向浏览器输出“Hello World!”

<scripttype="text/javascript">

document.write("HelloWorld!")

</script>

二、<noscript>标签

1.<noscript>标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

2.noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容

<scripttype="text/javascript">

document.write("HelloWorld!")

</script>

三、如何应付老式的浏览器

如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内

JavaScript:

<scripttype="text/javascript">

<!--

document.write("HelloWorld!")

//-->

</script>

四、标签

标签	描述
<script>	定义客户端脚本。
<noscript>	为不支持客户端脚本的浏览器定义替代内容。

HTML 头部元素

一、HTML <head> 元素

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

二、HTML <title> 元素

1.<title>标签定义文档的标题

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

3.title 元素能够：

(1)定义浏览器工具栏中的标题

(2)提供页面被添加到收藏夹时显示的标题

(3)显示在搜索引擎结果中的页面标题

4.一个简化的HTML文档

<!DOCTYPEhtml>

<html>

<head>

<title>Titleof the document</title>

</head>

<body>

The content ofthe document......

</body>

</html>

三、HTML <base>元素

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

<head>

<basehref="http://www.w3school.com.cn/images/" />

<basetarget="_blank" />

</head>

四、HTML <link>元素

1.<link>标签定义文档与外部资源之间的关系

2.<link>标签最常用于连接样式表：

<head>

<linkrel="stylesheet" type="text/css"href="mystyle.css" />

</head>

五、HTML <style>元素

<head>

<styletype="text/css">

body{background-color:yellow}

p{color:blue}

</style>

</head>

六、HTML <meta> 元素

1.元数据（metadata）是关于数据的信息，<meta> 标签提供关于 HTML 文档的元数据

2.元数据不会显示在页面上，但是对于机器是可读的，典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据

3.<meta>标签始终位于 head 元素中。

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

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

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

<metaname="keywords" content="HTML, CSS, XML" />

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

七、HTML <script>元素

八、HTML头部元素

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

HTML 字符实体

一、HTML实体

1.HTML 中的预留字符必须被替换为字符实体

2.如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（实体名称或实体编号），例如：显示小于号，我们必须这样写：< 或 <

二、不间断空格（non-breaking space）

HTML 中的常用字符实体是不间断空格( ) 。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体

三、HTML中常用的字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

HTML 统一资源定位器（URL）

一、URL

1.URL也被称为网址

2.URL可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆

二、URL语法规则

scheme://host.domain:port/path/filename

解释：

scheme- 定义因特网服务的类型。最常见的类型是 http

host- 定义域主机（http 的默认主机是 www）

domain- 定义因特网域名，比如w3school.com.cn

:port- 定义主机上的端口号（http的默认端口号是 80）

path- 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）

filename- 定义文档/资源的名称

三、URL常用的scheme

Scheme	访问	用于...
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页。加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

HTML URL字符编码

一、URL编码

1.URL 只能使用 ASCII 字符集来通过因特网进行发送

2.由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式

3.URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符

4.URL 不能包含空格。URL 编码通常使用 + 来替换空格

二、URL编码示例

字符	URL 编码
€	%80
£	%A3
©	%A9
®	%AE
À	%C0
Á	%C1
Â	%C2
Ã	%C3
Ä	%C4
Å	%C5

HTML 颜色

一、颜色值

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

二、颜色名

大多数的浏览器都支持颜色名集合。仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue,fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,white, yellow。如果需要使用其它的颜色，需要使用十六进制的颜色值，示例：

Color	Color HEX	Color Name
	#F0F8FF	AliceBlue
	#FAEBD7	AntiqueWhite
	#7FFFD4	Aquamarine
	#000000	Black
	#0000FF	Blue
	#8A2BE2	BlueViolet
	#A52A2A	Brown

HTML 文档类型

一、<!DOCTYPE>

1.<!DOCTYPE> 声明帮助浏览器正确地显示网页

2.Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档

3.HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面

4.<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的

二、常用的声明

1.HTML5：<!DOCTYPE html>

2.HTML 4.01：<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3.XHTML 1.0：<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.01 快速参考

一、HTML Basic Document

<html>

<head>

<title>Document name goes here</title>

</head>

<body>

Visible text goes here

</body>

</html>

二、Text Elements

<p>This is a paragraph</p>

<br> (line break)

<hr> (horizontal rule)

<pre>This text is preformatted</pre>

三、LogicalStyles

<em>This text is emphasized</em>

<strong>This text is strong</strong>

<code>This is some computer code</code>

四、PhysicalStyles

<b>This text is bold</b>

<i>This text is italic</i>

五、Links,Anchors, and Image Elements

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

六、Unorderedlist

<ul>

<li>First item</li>

<li>Next item</li>

</ul>

七、Orderedlist

<ol>

<li>First item</li>

<li>Next item</li>

</ol>

八、Definitionlist

<dl>

<dt>First term</dt>

<dd>Definition</dd>

<dt>Next term</dt>

<dd>Definition</dd>

</dl>

九、Tables

<table border="1">

<tr>

  <th>someheader</th>

  <th>someheader</th>

</tr>

<tr>

  <td>sometext</td>

  <td>sometext</td>

</tr>

</table>

十、Frames

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

  <frame src="page1.htm">

  <frame src="page2.htm">

</frameset>

十一、Forms

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

十二、Entities

&lt; is the same as <

&gt; is the same as >

&#169; is the same as ©

十三、OtherElements

<!-- This is a comment -->

<blockquote>

Text quoted from some source.

</blockquote>

<address>

Address 1<br>

Address 2<br>

City<br>

</address>

GEVIN313

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

HTML 元素一、HTML 元素HTML 元素指的是从开始标签（starttag）到结束标签（end tag）的所有代码二、HTML 元素语法1.HTML 元素以开始标签起始，HTML 元素以结束标签终止2.元素的内容是开始标签与结束标签之间的内容3.某些 HTML 元素具有空内容（empty content）4.空元素在开始标签中进行关闭（以开始标签的结束而结束）5.大多数 HTML 元素可拥有...
复制链接

扫一扫