『学习笔记』在w3school自学HTML

快速链接
完整的 HTML 参考手册
we3schoolHTML教程
w3school在线html编辑器
w3schoolHTML练习
w3schoolHTML测试


HTML是什么

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b></b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

如何编辑HTML

可以使用专业的 HTML 编辑器来编辑 HTML

  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor

推荐使用简单的txt应用
记事本 Notepad
打开txt
编辑
另存为.htm.html 扩展名
练习时可以使用w3school在线html编辑器


HTML大体主结构

<html>
<body>

***

</body>
</html>

HTML基础

本章通过实例向您演示最常用的 HTML 标签。

提示:不要担心本章中您还没有学过的例子,您将在下面的章节中学到它们。

提示:学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器,您可以任意编辑一段 HTML 源码,然后单击 TIY 按钮来查看结果。

HTML 标题

<h1> </h1>  <!--一级标题-->
<h2> </h2>  <!--二级标题-->
<h3> </h3>  <!--三级标题-->
<h4> </h4>  <!--四级标题-->
<h5> </h5>  <!--五级标题-->
<h6> </h6>  <!--六级标题-->
<!-- 示例 -->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<!-- ... -->

!备注:请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

HTML 段落

<p>qwq</p>
<p>段落</p>
<p>这是段落</p>
<p> </p> 

HTML 图像

<img src="https://www.w3school.com.cn/i/eg_w3school.gif" width="300" height="120" />

效果:

HTML 链接

<a href="http://www.w3school.com.cn">This is a link</a>

HTML 元素

HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

HTML 元素语法:

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

  • 大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
  • HTML 文档由嵌套的 HTML 元素构成。

例子

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

详情解释

<p> 元素:

<p>This is my first paragraph.</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
元素内容是:This is my first paragraph。


<body> 元素:

<body>
<p>This is my first paragraph.</p>
</body>

<body> 元素定义了 HTML 文档的主体。


<html>元素:

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<html>元素定义了整个 HTML 文档。


!注意:

不要忘记结束标签
即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:
<p>This is a paragraph
上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
注释:未来的 HTML 版本不允许省略结束标签。

空的 HTML 元素

没有内容的html标签被称作空元素
空元素没有结束标签,空元素是在开始标签中关闭的(在开始标签中添加斜杠)

例子

<br/>元素 :定义换行

HTML 提示:使用小写标签

html虽然暂无大小写标签规范,但标准的html建议使用小写


#HTML 属性

html标签可以拥有属性,html标签的属性提供html元素更多的信息
属性总是以名称/值对的形式出现 例:name="value"
属性总是在 HTML 元素的开始标签中规定。

属性实例

HTML 链接

<a href="http://www.w3school.com.cn"> This is a link </a>

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定


定义标题的开始(对齐方式)

<h1 align="center"> 

align定义关于对齐方式的附加信息。center定义居中对齐。
记忆:
a + li + gn
center 中心


定义 HTML 文档的主体。(背景颜色)

<body bgcolor="yellow"> 

有关背景颜色的定义 记忆:b ack g round color

HTML 提示:使用小写属性

HTML 全局属性手册

HTML 标题

html文档中,标题很重要

标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题

实例

<h1> </h1>  <!--一级标题-->
<h2> </h2>  <!--二级标题-->
<h3> </h3>  <!--三级标题-->
<h4> </h4>  <!--四级标题-->
<h5> </h5>  <!--五级标题-->
<h6> </h6>  <!--六级标题-->
<!-- 示例 -->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<!-- ... -->

!备注:请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

HTML 水平线(分割线)

<hr/> 标签

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

实例:

<p>这是一个html水平线实例</p>
<hr/>
<p>下(上)面是此实例效果</p>

效果:

这是一个html水平线实例


下(上)面是此实例效果

提示:使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。

HTML 注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
可以理解为C++中的 // FB中的'
实例:

<!--这里有东西,但在下面的效果中看不到qwq-->

效果:

⬆上面的确有东西/捂脸

HTML 提示 - 如何查看源代码

您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的?”
如果您想找到其中的奥秘,只需要单击右键,然后选择“查看源文件”(IE)或“查看页面源代码”(Firefox),其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。


HTML 段落

在html的编写中,我们可以将主要内容分为一个个段落
理解:作文分段

HTML 段落

<p> 标签定义
实例:

<p>这是一个片段的实例qwq</p>
<p>另一个没意义的片段</p>

效果:

这是一个片段的实例qwq

另一个没意义的片段

提示:使用空的段落标记 <p></p>; 去插入一个空行是个坏习惯。用 <br/>; 标签代替它!(但是不要用 <br/>标签去创建列表。不要着急,您将在稍后的篇幅学习到 HTML 列表。)

HTML 折行

在同一个段落中换行
使用 <br />
实例:

<p>这是一个实例 <br/> 一个带有换行的段落实例</p>

效果:

这是一个实例
一个带有换行的段落实例

HTML 输出格式 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
实例:

<p>春晓</p> <!--由于使用<h1></h1>一级标题会打乱目录,于是便使用段落展示实例-->

<p>
    春眠不觉晓,
      处处闻啼鸟。
        夜来风雨声,
          花落知多少。
</p>

<p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p>

效果:

春晓
春眠不觉晓, 处处闻啼鸟。 夜来风雨声, 花落知多少。
注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。

HTML样式

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

<html>
<body style="background-color:PowderBlue;">

<p>Look! Styles and colors</p>

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

</body>
</html>

效果:

Look! Styles and colors

This text is in Verdana and red

This text is in Times and green

This text is 30 pixels high

##(此处背景色无法修改,往后由于资料量增大,会少量出示实例,可以自行前往 教学中查看)教学链接见文章顶端。

不建议使用部分将被废弃的标签和属性进行样式的编辑,样式尽量可以使用css定义

style 属性部分实例(可用)

背景颜色

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

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

This is a heading

This is a paragraph.

### HTML 字体、颜色和尺寸 `font-family`、`color` 以及 `font-size` 属性分别定义元素中文本的字体系列、颜色和字体尺寸
<body>
<p style="font-family:verdana">A heading</p>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

A heading

A paragraph.

关于字体,个人觉得微软雅黑的兼容性比较高且好看,默认为宋体。 微软雅黑font-family:Micsoft YaHei

文本对齐

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

<body>
<p style="text-align:center">This is a heading</p>
<p>The heading above is aligned to the center of this page.</p>
</body>

This is a heading

The heading above is aligned to the center of this page.

----

总结:

背景颜色(全局)

<body style="background-color:XXX">

字体、颜色和尺寸

style="font-family:Micsoft YaHei;color:red;font-size:20px;"

文本对齐(居中)

style="text-align:center"