HTML学习

最新推荐文章于 2022-07-10 02:07:49 发布

lbk1998

最新推荐文章于 2022-07-10 02:07:49 发布

阅读量236

点赞数

本文链接：https://blog.csdn.net/lbk1998/article/details/74779582

版权

0x00 什么是 HTML？

HTML 是用来描述网页的一种语言。

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

0x01 HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

0x02 HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

0x03 HTML 基础

(1) HTML标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

例：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

（2）HTML段落

HTML 段落是通过 <p> 标签进行定义的。

例：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

（3）HTML链接

HTML 链接是通过 <a> 标签进行定义的。

例：

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

0x04 HTML元素

（1）HTML 元素

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

（2）HTML 元素语法

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

（3）嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成

例：

<html>

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

</html>

（4）空的 HTML 元素

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

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

0x05 HTML属性

HTML 属性

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

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

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

例：

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

属性例子 1:

<h1> 定义标题的开始。

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

属性例子 2:

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

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table> 定义 HTML 表格。

<table border="1"> 拥有关于表格边框的附加信息。

0x06 HTML标题

HTML 标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

例：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

标题很重要

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

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

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

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

HTML 水平线

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

hr 元素可用于分隔内容。

例：

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

HTML 注释

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

例：

<!-- This is a comment -->

0x07 HTML段落

HTML 段落

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

例：

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

例：

<p>This is<br />a para<br />graph with line breaks</p>

0x08 HTML样式

HTML 的 style 属性

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

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>

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>

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>

0x09 HTML格式化

实例见http://www.w3school.com.cn/html/html_formatting.asp

0x10 HTML引用

（1）HTML <q> 用于短的引用

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

例：

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

（2）用于长引用的 HTML <blockquote>

HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。

例：

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

（3）其他

用于缩略词的 HTML <abbr>

例：

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

用于定义的 HTML <dfn>

例：

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

用于联系信息的 HTML <address>

例：

<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

用于著作标题的 HTML <cite>

例：

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

用于双向重写的 HTML <bdo>

例：

<bdo dir="rtl">This text will be written from right to left</bdo>

0x11 计算机代码

计算机代码

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}

HTML 计算机代码格式

通常，HTML 使用可变的字母尺寸，以及可变的字母间距。

在显示计算机代码示例时，并不需要如此。

<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

HTML 键盘格式

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

实例

<p>To open a file, select:</p>

<p><kbd>File | Open...</kbd></p>

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

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

实例

<code>
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
</code>

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

实例

<p>Coding Example:</p>

<code>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</code>

如需解决该问题，您必须在 <pre> 元素中包围代码：

实例

<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

HTML 变量格式化

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

实例

<p>Einstein wrote:</p>

<p><var>E = m c<sup>2</sup></var></p>

lbk1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

0x00什么是 HTML？HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页0x01HTML 标签
复制链接

扫一扫