博客

前端语法重温从0到1入门

  • Post author:
  • Post category:其他

文章目录

前言

`为了顺利完成毕业设计，那就开始学习怎么搬砖？IT男超哥码代码永远在摸鱼中，话不多少，开始啦！

一、HTML是什么？

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

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

二、HTML标签

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

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

三、HTML文档=网页

  • HTML 文档可以用来描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也可以被称为网页
    **浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。**代码如下（示例）：
<!DOCTYPE html>
<html>
<body>

<h1>IT男超哥的个人网页</h1>

<p>Hello world！这是每个人一生中敲代码开始的第一个代码！</p>

<p>由此生成我的第一个段落。</p>

</body>
</html>

在这里插入图片描述
语法说明：

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

四、HTML编辑器

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

  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor

步骤一：启动记事本
如何启动记事本：

  1. 开始
  2. 所有程序
  3. 附件
  4. 记事本

步骤二：用记事本来编辑 HTML
在记事本中键入 HTML 代码：
在这里插入图片描述
步骤三：保存 HTML

  1. 在记事本的文件菜单选择“另存为”。
  2. 当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。
  3. 在一个容易记忆的文件夹中保存这个文件，比如 w3school。
    步骤四：在浏览器中运行这个 HTML 文件
    启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。
    在这里插入图片描述

五、HTML 标题

HTML 标题（Heading）是通过h1 – h6等标签进行定义的。
代码如下（示例）：

<!DOCTYPE html>
<html>
<body>

<h1>这是第一级标题</h1>

<h2>这是第二级标题</h2>

<h3>这是第三级标题</h3>

</body>
</html>

在这里插入图片描述

六、HTML 段落

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

七、HTML 链接

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

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

八、HTML 图像

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

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

九、HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
开始标签p和结束标签/p、单标签/a、br。

十、HTML 元素语法

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

十一、嵌套的 HTML 元素

  • 大多数 HTML 元素可以嵌套（可以包含其他 – HTML 元素）。
  • HTML 文档由嵌套的 HTML 元素构成。
  • HTML 文档实例
<!DOCTYPE html>
<html>
<body>

<p>这是我的第一个段落。</p>

</body>
</html>

在这里插入图片描述
实例解释：

  • 实例中出现的p是在HTML中定义的段落元素，他有开始标签和结束标签，是双标签。元素之间是所要表述的内容。
  • body元素是在HTML文档中定义的主体，该元素有开始标签和结束标签。一般写的是网页的正文内容。
  • html元素定义了整个HTML文档。该元素有开始标签和结束标签。它所包含的内容有head元素、body元素、p元素等。
  • 一般而言，不要忘记结束标签。即使我们忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。忘记使用结束标签会产生不可预料的结果或错误。
  • HTML 标签对大小写不敏感：P等同于p。许多网站都使用大写的 HTML 标签。

十二、空的 HTML 元素

  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
  • br就是没有关闭标签的空元素（br标签是用来换行的）。
  • 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
  • 在开始标签中添加斜杠，比如br /，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
  • 即使br在所有浏览器中都是有效的，但使用br /其实是更长远的保障。

十三、HTML 属性是什么

  1. HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
  2. 属性总是以名称/值对的形式出现，比如：name=“value”。
  3. 属性总是在 HTML 元素的开始标签中规定。

十四、HTML 提示：使用小写属性

  • 属性和属性值对大小写不敏感。
  • 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。

十五、始终为属性值加引号

  • 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
  • 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。

十六、HTML 属性实例

代码如下（示例）：

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<h1 align="center">This is heading1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta http-equiv="Content-Language" content="zh-cn" />

</head>

<body b>

<h2>快看改变了颜色背景。</h2>

</body>
</html>

十七、HTML标题

标题（Heading）是通过1-6等标签进行定义的。
h1定义最大的标题。h6定义最小的标题。
注释：

  1. 请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
  2. 搜索引擎使用标题为您的网页的结构和内容编制索引。
  3. 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
  4. 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
  5. 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>
</html>

在这里插入图片描述

十八、HTML 水平线

hr标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
示例如下：

<!DOCTYPE html>
<html>
<body>

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

<hr /><!--  hr定义水平线-->

<p>This is a paragraph.</p><!--  这是段落标记-->

<hr />

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

</body>
</html>

在这里插入图片描述

十九、HTML 注释

一般来说，浏览器不会显示注释的内容，而会忽略代码，注释代码如下：

<!-- This is a comment -->  开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

<!--这是一段注释。注释不会在浏览器中显示。-->

<p>这是一段普通的段落。</p>

注释的作用：对于 HTML 纠错也大有帮助，因为我们可以一次注释一行 HTML 代码，以搜索错误。

二十、条件注释

条件注释定义只有 Internet Explorer 执行的 HTML 标签。
实例：

<!-- [if IE 8]>
		... some HTML here ...
	<![endif]-->

二十一、软件程序标签

  • 各种 HTML 软件程序也能够生成 HTML 注释。
  • 例如
    标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。
  • 作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。

二十二、HTML 段落

段落标签是由p标签定义的。

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

即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来。

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

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

在这里插入图片描述

二十三、HTML 换行

如果我们希望在不产生一个新段落的情况下进行换行（新行），请使用 br标签。

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

<!DOCTYPE html>
<html>
<body>

<p>To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<h1>春晓</h1>

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

<p>需要注意的是，浏览器忽略了源代码的排版，即省略了好多的空行和换行</p>

</body>
</html>

在这里插入图片描述

二十四、HTML的style属性

style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。

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

二十五、HTML 样式实例 – 背景颜色

background-color 属性为元素定义了背景颜色。
代码实例：

<!DOCTYPE html>
<html>

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

<h2 style="background-color:yellow">This is a heading
</h2>

<p style="background-color:green">This is a paragraph.
</p>

</body>

</html>

在这里插入图片描述

二十六、HTML 样式实例 – 字体、颜色和尺寸

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

<!DOCTYPE html>
<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 属性规定了元素中文本的水平对齐方式。

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center">This is a heading.</h1>
<p>英文写的标题位于页面中间。</p>

</body>
</html>

在这里插入图片描述

二十八、HTML 文本格式化实例

文本格式化：此例演示如何在一个 HTML 文件中对文本进行格式化。

<!DOCTYPE html>
<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 />

<sub>This text contains subscript</sub>
<br />

<sup>This text contains superscript</sup>

</body>
</html>

在这里插入图片描述

预格式文本：此例演示如何使用 pre 标签对空行和空格进行控制。

<!DOCTYPE html>
<html>
<body>

<pre>
这是

预格式文本。

它保留了      空格

和换行。

</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>

</body>
</html>

在这里插入图片描述

计算机输出标签：此例演示不同的“计算机输出”标签的显示效果。

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

在这里插入图片描述

地址：此例演示如何在 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>

在这里插入图片描述

缩写和首字母缩写：此例演示如何实现缩写或首字母缩写。

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

在这里插入图片描述

文字方向：此例演示如何改变文字的方向。

<!DOCTYPE html>
<html>
<body>

<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>

在这里插入图片描述

块引用：此例演示如何实现长短不一的引用语。

<!DOCTYPE html>
<html>
<body>

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用：
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>

在这里插入图片描述

删除字效果和插入效果：此例演示如何标记删除文本和插入文本。

<!DOCTYPE html>
<html>
<body>

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>
</html>

在这里插入图片描述

二十九、HTML 颜色

颜色

由红色、绿色、蓝色混合而成。

颜色值

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

颜色名

大多数的浏览器都支持颜色名集合。

提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

如果需要使用其它的颜色，需要使用十六进制的颜色值。

Web安全色

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择的还是你自己。

颜色名列表

单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。

三十、总结

例如：以上就是今天重温回顾的内容，最终发现这篇文章好长啊！这真的是我第一次写得这么长的文章。
今天学的内容包括基本的HTML语法，如目录所呈现的那样。未完待续…
在这里插入图片描述在这里插入图片描述

版权声明：本文为wu6di6chao6ren原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。