当前位置: 代码迷 >> 综合 >> HTML基础查漏补缺(w3school)
  详细解决方案

HTML基础查漏补缺(w3school)

热度:20   发布时间:2024-02-11 10:53:32.0

1.什么是 HTML?
HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2.当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好。
3.HTML 图像
HTML 图像是通过 标签进行定义的。

实例:
<img src="w3school.jpg" width="104" height="142" />

注释:图像的名称和尺寸是以属性的形式提供的。

4.空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
5.在未来 (X)HTML 版本中强制使用小写。
6.属性为 HTML 元素提供附加信息。

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

属性总是以名称/值对的形式出现,比如:name=“value”。

属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

<a href=“http://www.w3school.com.cn”>This is a link</a>
更多 HTML 属性实例

  • 属性例子 1:

<h1> 定义标题的开始。

<h1 align=“center”> 拥有关于对齐方式的附加信息。

  • 属性例子 2:

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

<body bgcolor=“yellow”> 拥有关于背景颜色的附加信息。
bgcolor可以使用的暂时知道的是:body\table\tr\td\th

  • 属性例子 3:
定义 HTML 表格。(您将在稍后的章节学习到更多有关 HTML 表格的内容)

<table border=“1”> 拥有关于表格边框的附加信息。
注释:浏览器会自动地在标题的前后添加空行。

7.注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
8.HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

注释是这样写的:

实例
<!-- This is a comment -->
注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

提示:合理地使用注释可以对未来的代码编辑工作产生帮助。
9.<hr> 定义水平线。
10.

  • HTML 样式实例 - 背景颜色

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

<html>

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

</html>
style 属性淘汰了“旧的” bgcolor 属性。

  • HTML 样式实例 - 字体、颜色和尺寸

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

<html>

<body>
<h1 style=“font-family:verdana”>A heading</h1>
<p style=“font-family:arial;color:red;font-size:20px;”>A paragraph.</p>
</body>

</html>
style 属性淘汰了旧的 标签。

  • HTML 样式实例 - 文本对齐
    text-align 属性规定了元素中文本的水平对齐方式:

<html>

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

</html>

style 属性淘汰了旧的 “align” 属性。
11.文本格式化

<html><body><b>This text is bold</b><br /><strong>This text is strong</strong><br /><big>This text is big</big><br /><em>This text is emphasized</em><br /><i>This text is italic</i><br /><small>This text is small</small><br />This text contains
<sub>subscript</sub><br />This text contains
<sup>superscript</sup></body>
</html>

在这里插入图片描述
文本格式化标签

标签 描述
<br> 定义粗体文本
<big> 定义大号字
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<s> 用<del>代替
<strike> 用<del>代替
<u> 用(style)代替

预格式文本:使用 pre 标签对空行和空格进行控制。

<html><body><pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre><p>pre 标签很适合显示计算机代码:</p><pre>
for i = 1 to 10print i
next i
</pre></body>
</html>

在这里插入图片描述

不同的“计算机输出”标签的显示效果

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

在这里插入图片描述
“计算机输出”标签

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

在 HTML 文件中写地址

<!DOCTYPE html>
<html>
<body><address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address></body>
</html>

在这里插入图片描述

实现缩写或首字母缩写。

<html><body><abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym><p>在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。</p><p>仅对于 IE 5 中的 acronym 元素有效。</p><p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p></body>
</html>

在这里插入图片描述
改变文字的方向

<html><body><p>
如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);
</p><bdo dir="rtl">
Here is some Hebrew text
</bdo></body>
</html>

在这里插入图片描述

实现长短不一的引用语

<html><body>这是长的引用:
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>这是短的引用:
<q>
这是短的引用。
</q><p>
使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。
</p></body>
</html>

在这里插入图片描述

标记删除文本和插入文本

<html><body><p>一打有 <del>二十</del> <ins>十二</ins> 件。</p><p>大多数浏览器会改写为删除文本和下划线文本。</p><p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p></body>
</html>

在这里插入图片描述

  相关解决方案