首页

web前端

html教程

从零开始HTML（一 2016/9/19）

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 20, 2016 am 03:29 AM

1、属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。

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

属性例子 1:

定义标题的开始。

拥有关于对齐方式的附加信息。

属性例子 2:

定义 HTML 文档的主体。

拥有关于背景颜色的附加信息。

属性例子 3:

定义 HTML 表格。

拥有关于表格边框的附加信息。

完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：

HTML参考手册：http://www.w3school.com.cn/tags/index.asp

2.标题

标题（Heading）是通过

-

等标签进行定义的。

定义最大的标题。

定义最小的标题。

标签在 HTML 页面中创建水平线。可用于分割元素

3.段落

段落是通过

标签定义的。

① 使用空的段落标记

去插入一个空行是个坏习惯。用
标签代替它。

② 如果希望在不产生一个新段落的情况下进行换行（新行），使用
标签

4.样式

style 属性用于改变 HTML 元素的样式。

style 属性的作用是提供了一种改变所有 HTML 元素的样式的通用方法。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

background-color 属性为元素定义了背景颜色，如：

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸。

text-align 属性规定了元素中文本的水平对齐方式：

This is a heading

,可将center改为left,rght实现不同的效果。

5.引用

① HTML 元素定义短的引用。浏览器通常会为元素包围引号。

<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>

② 用于长引用的 HTML

，HTML
元素定义被引用的节。浏览器通常会对

元素进行缩进处理。

<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

③ 用于缩略词的 HTML HTML 元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

6.CSS样式引入方式

有以下三种方式来插入样式表：

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

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mystyle.css"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></span></span>

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

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
body </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> red</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
p </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">margin-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></span></span>

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

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color: red; margin-left: 20px"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This is a paragraph
</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>

7.链接

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

我们通过使用标签在 HTML 中创建链接。

有两种使用标签的方式：

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

① 使用 Target 属性，你可以定义被链接的文档在何处显示。如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。

<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.w3school.com.cn/"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="_blank"</span><span style="color: #0000ff;">></span>Visit W3School!<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></span>

② 链接到同一个页面的不同位置：给该位置的标题加name属性，然后添加链接，注意在添加链接时要在name的值前面添加"#",如：

<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#C4"</span><span style="color: #0000ff;">></span>查看 Chapter 4。<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 1<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 2<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 3<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="C4"</span><span style="color: #0000ff;">></span>Chapter 4<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 5<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 6<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 7<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 8<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 9<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 10<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 11<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 12<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 13<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 14<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 15<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 16<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Chapter 17<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This chapter explains ba bla bla<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

8.图像

图像标签（从零开始HTML（一 2016/9/19））和源属性（Src）。在 HTML 中，图像由标签定义。是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

语法：

<span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="url"</span> <span style="color: #0000ff;">/></span></span>

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

① 替换文本属性（Alt）

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

<span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="boat.gif"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="Big Boat"</span><span style="color: #0000ff;">></span></span>

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

② 设置图片背景

<span style="color: #0000ff;"><span style="color: #800000;">body </span><span style="color: #ff0000;">background</span><span style="color: #0000ff;">="/i/eg_background.jpg"</span><span style="color: #0000ff;">></span></span>

③ align属性可以设置图片的位置，如：

<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src </span><span style="color: #0000ff;">="/i/eg_cute.gif"</span><span style="color: #ff0000;"> align </span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span>

④ height,width属性设置图片大小，如：

<span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/i/eg_mouse.jpg"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="50"</span><span style="color: #0000ff;">></span></span>

⑤ 图像链接：

<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="/example/html/lastpage.html"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="/i/eg_buttonnext.gif"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></span></span>

⑥使图片不同区域链接不同网址：

map定义图像地图，将不同的区域量化

<span style="color: #0000ff;"><span style="color: #800000;">img
</span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/i/eg_planets.jpg"</span><span style="color: #ff0000;">
border</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> usemap</span><span style="color: #0000ff;">="#planetmap"</span><span style="color: #ff0000;">
alt</span><span style="color: #0000ff;">="Planets"</span> <span style="color: #0000ff;">/></span>

<span style="color: #0000ff;"><span style="color: #800000;">map </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="planetmap"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="planetmap"</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">area
</span><span style="color: #ff0000;">shape</span><span style="color: #0000ff;">="circle"</span><span style="color: #ff0000;">
coords</span><span style="color: #0000ff;">="180,139,14"</span><span style="color: #ff0000;">
href </span><span style="color: #0000ff;">="/example/html/venus.html"</span><span style="color: #ff0000;">
target </span><span style="color: #0000ff;">="_blank"</span><span style="color: #ff0000;">
alt</span><span style="color: #0000ff;">="Venus"</span> <span style="color: #0000ff;">/></span>

<span style="color: #0000ff;"><span style="color: #800000;">area
</span><span style="color: #ff0000;">shape</span><span style="color: #0000ff;">="circle"</span><span style="color: #ff0000;">
coords</span><span style="color: #0000ff;">="129,161,10"</span><span style="color: #ff0000;">
href </span><span style="color: #0000ff;">="/example/html/mercur.html"</span><span style="color: #ff0000;">
target </span><span style="color: #0000ff;">="_blank"</span><span style="color: #ff0000;">
alt</span><span style="color: #0000ff;">="Mercury"</span> <span style="color: #0000ff;">/></span>

<span style="color: #0000ff;"><span style="color: #800000;">area
</span><span style="color: #ff0000;">shape</span><span style="color: #0000ff;">="rect"</span><span style="color: #ff0000;">
coords</span><span style="color: #0000ff;">="0,0,110,260"</span><span style="color: #ff0000;">
href </span><span style="color: #0000ff;">="/example/html/sun.html"</span><span style="color: #ff0000;">
target </span><span style="color: #0000ff;">="_blank"</span><span style="color: #ff0000;">
alt</span><span style="color: #0000ff;">="Sun"</span> <span style="color: #0000ff;">/></span>

<span style="color: #0000ff;"></span><span style="color: #800000;">map</span><span style="color: #0000ff;">></span></span></span></span></span></span>

9.表格

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

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

下面是一个两行两列的表格：

<span style="color: #0000ff;"><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>row 1, cell 1<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>row 1, cell 2<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>row 2, cell 1<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>row 2, cell 2<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span>

① 如果不定义边框属性，表格将不显示边框。使用属性border来定义边框，如：

<span style="color: #0000ff;"><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span></span>

②表格的表头使用

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

<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>表头：<span style="color: #0000ff;"></span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>姓名<span style="color: #0000ff;"></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>电话<span style="color: #0000ff;"></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>电话<span style="color: #0000ff;"></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>Bill Gates<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>555 77 854<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>555 77 855<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>垂直的表头：<span style="color: #0000ff;"></span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>姓名<span style="color: #0000ff;"></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>Bill Gates<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>电话<span style="color: #0000ff;"></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>555 77 854<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>电话<span style="color: #0000ff;"></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>555 77 855<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

③空单元格问题：在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来，如：

<span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"> </span><span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span></span>

10.列表

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

① 无序列表：

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

无序列表始于

。

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>Coffee<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>Milk<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

② 有序列表：

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

有序列表始于

标签。

<span style="color: #0000ff;"><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>Coffee<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>Milk<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span></span></span></span>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

③ 定义列表：

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

自定义列表以

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

自定义列表项 开始。

<span style="color: #0000ff;"><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>Coffee<span style="color: #0000ff;"></span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>Black hot drink<span style="color: #0000ff;"></span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>Milk<span style="color: #0000ff;"></span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>White cold drink<span style="color: #0000ff;"></span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span></span></span></span></span></span>

④ 可以用type来改变每个列表项前面的标记：

<span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="disc"</span><span style="color: #0000ff;">></span><span style="color: #000000;">  实心圆点
</span><span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="circle"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 空心圆点
</span><span style="color: #0000ff;"><span style="color: #800000;">ol </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="A"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> A,B,C...
</span><span style="color: #0000ff;"><span style="color: #800000;">ol </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="i"</span><span style="color: #0000ff;">></span> 小写罗马</span></span></span></span>

11.块

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

①

HTML

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

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

如果与 CSS 一同使用，

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

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

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

②

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

元素也没有特定的含义。

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

12.类

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

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

① 分类块级元素

HTML

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

设置

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

元素设置相同的类：

实例：

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
.cities </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
    background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">black</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">white</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span> 
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cities"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>London<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">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.</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cities"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Paris<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Paris is the capital and most populous city of France.<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cities"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Tokyo<span style="color: #0000ff;"></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

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

实例：

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
  span.red </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">red</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>My <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">></span>Important<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> Heading<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。