WEB前端学习笔记-HTML(上)

最新推荐文章于 2024-08-12 22:06:26 发布

w343516704

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量682

点赞数 3

分类专栏： web前端文章标签： web前端 css html

本文链接：https://blog.csdn.net/w343516704/article/details/73465650

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

以下大部分学习资料都来自于http://www.w3school.com.cn/tags/index.asp，简单的学习一下html、css、javascript

HTML

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

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

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

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

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

上面的内容展示的意思：

<html> 与 </html>之间的文本描述网页
<body> 与 </body>之间的文本是可见的页面内容
<h1> 与 </h1>之间的文本被显示为标题
<p> 与 </p>之间的文本被显示为段落

HTML 编辑器

使用 Notepad 或 TextEdit 来编写 HTML
可以使用windows的Notepad 或者mac的textedit，我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。

基本的 HTML 标签 - 四个实例

HTML 标题

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

HTML 段落

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

HTML 链接

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

HTML 图像

HTML 图像是通过 <img>标签进行定义的。

HTML 元素

HTML 文档是由 HTML 元素定义的。

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
这里写图片描述
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

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

嵌套的 HTML 元素

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

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

HTML 文档实例

<html>

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

</html>

上面的例子包含三个 HTML 元素:①html，该元素定义了整个html文档，包含一个<html>和一个</html>,在本例中，该元素的内容是body元素。
②body，该元素定义了html文档的主体，它也有一个开始标签和一个结束标签。
③p，它定义了html文档中的一个段落，它也有一个开始标签和一个结束标签，元素的内容是This is my first paragraph.

不要忘记结束标签

需要注意的是，即使你忘记使用一个元素的结束标签，大多数浏览器还是会正确的去显示你想要的东西。但不要依赖这种做法，在将来的html版本可能会不允许使用这种没有闭合的标签。

空的 HTML 元素

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

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

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

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

即使 <br> 在所有浏览器中都是有效的，但使用 <br />其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

业界标准是使用小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 属性(attribute)

属性为 HTML 元素提供附加信息。

HTML 属性

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

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

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

属性实例

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

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

上面的href就是a标签的属性。

更多 HTML 属性实例

属性例子 1:

<h1> 定义标题的开始。

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

属性例子 2:

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

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

属性例子 3:

<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

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

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。这个和javascript中的string类型的要求是一样的，没有一个同一的使用标准，感觉很恶心。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

HTML 属性参考手册

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

这是一个 HTML属性的链接，您可以点击进行详细的查阅。

下面列出了适用于大多数 HTML 元素的属性：
这里写图片描述

如需更多关于标准属性的信息，请访问：HTML标准属性参考手册

HTML 标题

在 HTML 文档中，标题很重要。

HTML 标题

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

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

标题很重要

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

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

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

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

HTML 水平线

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

可以看到一条线吧？

hr 元素可用于分隔内容。
提示：使用水平线 (<hr>标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

HTML 注释

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

注释是这样写的：

<!-- This is a comment -->

HTML 段落

可以把 HTML 文档分割为若干段落。

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

注释：浏览器会自动地在段落的前后添加空行。（<p>是块级元素）

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

HTML 折行

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

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

<br />元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

<br> 还是 <br />

您也许发现<br> 与 <br /> 很相似。

在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。

即使 <br>在所有浏览器中的显示都没有问题，使用<br />也是更长远的保障。

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

w343516704

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
WEB前端学习笔记-HTML(上)

以下大部分学习资料都来自于http://www.w3school.com.cn/tags/index.asp，简单的学习一下html、css、javascriptHTML什么是 HTML？ HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)
复制链接

扫一扫

专栏目录