随 缘

陌上花开 缓缓归矣

『学习笔记』在w3school自学HTML

发布于 2020-08-21 | 分类于 学习笔记 、 笔记 、 退役的oier | 13分钟 | 2915字数 | 浏览量：

快速链接
完整的 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"
# 学习笔记 # 笔记 # 退役的oier
『文化杂谈』七夕节详解 下一篇
Powered by Gridea | © 2019-2020 Theme By HsxyHao 本站总访问量次
Powered by h_daniel
0%
召唤看板娘