HTML学习笔记（1）

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

toris181

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

阅读量1.1k

点赞数 29

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/toris181/article/details/135447355

版权

本（系列）文章作作为备份与分享学习HTML的过程。

网站为W3Schools Online Web Tutorials

这是个很好的学编程的网站。对应的中文网站为w3school 在线教程

1简介与基础

HTML代表超文本标记语言

HTML是创建网页的标准标记语言

HTML描述了网页的结构

HTML由一系列元素组成

HTML告诉浏览器如何显示内容

HTML用于标记内容的不同部分，例如“这是一个标题”，“这是一个段落”，“这是一个链接”等。

一个典型的HTML代码结构如下图所示。

注意<html>与</html>、<head>与</head>、<body>与</body>均成对出现。

可以使用记事本编写HTML代码，将后缀由txt改为html即可浏览器打开以查看代码效果（另一个比较常见的IDE是Adobe Dreamweaver）。可以在调整控制面板里的选项“显示或隐藏文件扩展名”，以方便更改和检查后缀名。ctrl+u可以查看网页源代码。

上图的完整HTML代码如下

<!DOCTYPE html>
<html>
<body>

<h1>This is a heading</h1>

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

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

</body>
</html>

这里<!DOCTYPE>仅出现一次，在页面的顶部（任何HTML标记之前）。用于声明文档类型，并帮助浏览器正确显示网页。

HTML有六档不同大小的标题栏，为h1至h6。h1最大。

ps：将鼠标停留在csdn发布文章的标题选择栏，会显示对应的h1至h6。如下图

<p>用于指定段落。具体使用见上文。

<html>，<body>，<h1>和<p>可以嵌套。

即使不输入结束符（例如</h1>和</p>），HTML显示可能也没有问题。但是，不要依赖这一点！如果忘记闭合标签，可能会导致意外的结果和错误！

<br>为换行符（break），它没有对应的结束符。

HTML不区分大小写，但是建议用小写。

2属性

所有的HTML元素都可以有属性，以提供有关元素的附加信息。属性总是在开始符号中指定，通常以名称/值成对对的形式出现，例如：name="value"。这里不使用引号也可以，但是建议使用双引号。当你的引用包含引用时，内层引用使用单引号。

2.1 显示超链接

<a>标签定义超链接。href属性指定链接指向的页面的URL。eg：

<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>

<p><a>标签定义超链接。href属性指定链接指向的页面的URL：</p>

<a href="https://www.w3schools.com">Visit W3Schools</a>

</body>
</html>

2.2 显示图像

<img>标签用于在HTML页面中嵌入图像。src属性指定要显示的图像的路径。width 和 height以像素为单位指定图片大小。alt用于指定图像无法显示的替代文本。

<!DOCTYPE html>
<html>
<body>

<h2>宽、高标签与替代显示</h2>


<img src="img_girl.jpg" width="500" height="600">

<br>
<br>

<img src="不存在的.jpg" alt="Girl with a jacket">

<p>如果照片不存在，alt标记的内容将被显示。 </p>

</body>
</html>

2.3 style 属性

style属性用于为元素添加样式，例如颜色、字体、大小等。

以下代码将示例如何添加背景颜色，字体颜色、字体、文本尺寸与对其方式。

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1 style="color:blue; font-family:Arial;font-size:500%;">1.这是标题</h1>
<p style="color:red; font-family:courier;font-size:500%;">2.第一段</p>
<p style="color:red; text-align:center;">3.下一段</p>
<p style="border:2px solid Tomato;">4.第四段</p>


</body>
</html>

注意：

1.HTML中，一个元素只能有一个style属性。应该将多个样式合并成一个style属性，或者使用CSS样式表来定义样式。

2.如果没有安装代码内指定的字体，浏览器可能无法正确显示文本。

2.4 lang 属性

使用lang属性，声明Web页面的语言。以便搜索引擎和浏览器显示。支持的语言见以下链接HTML ISO Language Code Reference (w3schools.com)

2.5 title 属性

当鼠标悬停在元素上时，title属性的值将作为提示显示。

2.6 标题

搜索引擎使用标题来索引网页的结构和内容。

用户经常通过标题来浏览页面。使用标题来展示文档结构非常重要。

应该使用<h1>标签作为主要标题，然后是<h2>标签作为次级标题，以此类推，较不重要的标题可以使用<h3>标签等。

注意：浏览器会自动在标题前后添加一些空白（边距）。

请只将HTML标题用于标题。不要使用标题来使文本变大或加粗。

2.7 段落

使用<p>和</p>标记段落。

显示效果会自动适应屏幕尺寸。使用HTML时，不能通过在HTML代码中添加额外的空格或额外的行来更改显示。

当页面显示时，浏览器会自动删除任何额外的空格和行。

<hr>标签定义了HTML页面中的一个主题性分隔线，通常显示为水平线。

<hr>用于在HTML页面中分隔内容。与<br>一样没有结束符。

<pre>元素内部的文本以固定宽度字体（通常是Courier）显示，并且保留空格和换行.

<!DOCTYPE html>
<html>
<body>

<p>dear jhon:</p>

<p>
你  的  爱~~~

会  将  我

灌  醉
</p>

<hr>

<p>
我没有所谓

<br>

<br>

太过清醒
怎
么

</p>

<hr>

<pre>

   陶
   
   醉
   
</pre>

</body>
</html>

2.8 文本格式与注释

常见标签如下

2.8.1.<b>：将文本加粗显示。不推荐在语义上需要强调的文本上使用，应该使用<strong>。

2.8.2.<strong>：表示文本的重要性。与<b>标签不同的是，<strong>标签具有语义意义，用于传达文本的重要性，而不仅仅是视觉上的加粗效果。

2.8.3.<i>：将文本以斜体字样式显示。不推荐在语义上需要强调的文本上使用，应该使用<em>。

2.8.4.<em>：表示强调文本。与<i>标签不同的是，<em>标签具有语义意义，用于传达文本的重要性，而不仅仅是视觉上的斜体效果。

2.8.5.<mark>：将文本标记为高亮显示。通常用于突出显示重要或关键的内容。

2.8.6.<small>：将文本缩小显示。通常用于辅助性文本或注释。

2.8.7.<del>：将文本标记为删除。通常用于展示被删除的内容，例如在文本编辑器中的"删除线"。

2.8.8.<ins>：将文本标记为插入。通常用于展示插入的内容，例如在文本编辑器中的"下划线"。

2.8.9.<sub>：将文本设置为下标。

2.8.10.<sup>：将文本设置为上标。

2.8.11.：插入注释。

条件注释：

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->
上述注释只有使用Internet Explorer打开HTML时会执行。

<!DOCTYPE html>
<html>
<body>

<p>1.正常文本</p>

<p><b>2.加粗！</b></p>

<p><strong>3.语义强调!</strong></p>

<p><i>4.这是斜体</i></p>

<p><em>5.斜体语义强调!</em></p>

<p><small>6.缩小文本</small></p>

<p>7.<mark>mark</mark>是高亮显示。</p>

<p>8.del表示<del>高亮显示</del> 划线删除。</p>

<p>9.我们正在学的编程是<del>C</del> <ins>HTML</ins>。</p>

<p>10.这是<sub>下标</sub> 和<sup>上标</sup></p>

<p>11.</p>

<!-- 这是一段注释 -->

</body>
</html>

2.9 引用

2.9.1. <blockquote> 定义了一个引用自其他来源的区块。

浏览器通常会对 <blockquote> 标记的内容进行缩进。

2.9.2. <q> 标记定义短的引用。

浏览器通常会为 <q> 元素包围引号。

2.9.3.HTML <abbr> 定义缩写或首字母缩略语。鼠标停留在其上方会显示完整内容。

2.9.4.<dfn> 定义项目或缩写的定义。

2.9.5.<address> 定义文档或文章的联系信息（作者/拥有者）。

此元素通常以斜体显示。大多数浏览器会在此元素前后添加空行。

2.9.6.<cite> 定义著作的标题。

浏览器通常会以斜体显示 <cite> 元素。

2.9.7.<bdo> 元素用于反向文本方向。

<!DOCTYPE html>
<html>
<body>

<p>1.这是摘自 WWF 网站的引文：</p>

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


<p>2.浏览器通常会在 q 元素周围包围引号。</p>

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

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

<p>4.The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>



<br>

<address>
5.
由toris181创作<br> 
地址:<br>
联系方式:<br>
邮编:<br>
CHN
</address>

<p>6.<cite>天使与魔鬼</cite> by 丹.布朗。</p>


<bdo dir="rtl">
从左往右.7
</bdo>

</body>
</html>

2.10 颜色

可以使用RGB、RGBA、16进制、HSL、HSLA指代颜色。

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

<p>在 HTML 中，颜色可以使用十六进制值来指定，其中 rr（红色）、gg（绿色）和 bb（蓝色）的取值范围是从 00 到 ff（与十进制的 0-255 相同）。<br>

例如，#ff0000 显示为红色，因为红色的值设置为最大值（ff），而其他两个颜色（绿色和蓝色）设置为 00。<br>

另一个例子，#00ff00 显示为绿色，因为绿色的值设置为最大值（ff），而其他两个颜色（红色和蓝色）设置为 00。<br>

要显示黑色，将所有颜色参数设置为 00，如：#000000。<br>

要显示白色，将所有颜色参数设置为 ff，如：#ffffff。</p>

<h1 style="background-color:#123456;">#123456</h1>

<p>在 HTML 中，可以使用色调、饱和度和亮度（HSL）来指定颜色，格式如下：<br>

<mark>hsl(色调, 饱和度, 亮度)</mark><br>

色调是从 0 到 360 的颜色轮上的角度。0 表示红色，120 表示绿色，240 表示蓝色。<br>

饱和度是一个百分比值。0% 表示灰色阴影，50% 表示50% 的灰色，100% 表示完全饱和的颜色。<br>

亮度也是一个百分比值。颜色的亮度可以描述为你希望给予颜色多少光线，其中 0% 表示没有光（黑色），50% 表示 50% 的光（既不暗也不亮），而 100% 表示完全亮度（白色）。</p>
<h1 style="background-color:hsl(50, 80%, 64%);">hsl(50, 80%, 64%)</h1>

<p>透明度（alpha通道）:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.7);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.3);">hsla(9, 100%, 64%, 0.5)</h1>

</body>
</html>