HTML自学笔记#1

最新推荐文章于 2025-03-02 21:12:06 发布

Zerg Wang

最新推荐文章于 2025-03-02 21:12:06 发布

阅读量356

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web Development

转载请注明出处，谢谢合作！

本文链接：https://blog.youkuaiyun.com/Zerg_Wang/article/details/90668650

Web Development 专栏收录该内容

3 篇文章

订阅专栏

环境：VS Code

插件：HTML Snippets、open in browser

一些概念

HTML：Hyper Text Markup Language，超文本标记语言，是一种描述网页内容的语言，不被视作编程语言。

元素：网页由元素构成，元素内容即开始标签与结束标签之间的代码。有些元素没有内容，且无开始、结束标签，自成一体，如<br/>以及<hr/>，本身就是一个完整的元素，这些叫空元素。

属性：为元素提供附加信息，一般在开始标签中定义，如：（居中显示标题）

<h1 align="center">this is my title</h1>

样式

即style，是用于改变元素样式的属性。

style的使用越来越广泛，可普遍用于多数元素中，取代了一些旧的属性，例如：

<body bgcolor="red">
</body>

被替换为

<body style="background-color:yellow">
</body>

也可用style定义文本对齐方式：

<h1 style="text-align:center">This is a heading</h1>

文字效果

文字显示

<b>     粗体
<strong>加重语气
<em>	强调
<i>     斜体
<big>	大号字
<small>	小号字
<sub>	下标
<sup>	上标
<ins>	插入字
<del>	删除字
<bdo dir="rtl">   反向字（就是翻转输出为“字向反”）

对应效果：

不难发现，粗体和加重语气字体样式是一样的，实际上，<strong>是逻辑标签，<b>是实体标签，对于搜索引擎在检索网页时会更看重逻辑标签，相同的还有<em>和<i>，其中<em>也是逻辑标签。

代码显示

<kbd>、<samp>、<code>分别模拟键盘输入字符、计算机输出字符、源代码的样式，若不加属性修饰，则表现一致。

如果要使用<code>在网页上显示代码，应配合<pre>使用，因为<pre>会保留多余的空格和空行。

<p>C++ Code:</p>
<code><pre>
    #include <stdio.h>
    int main()
    {
        printf("Hello World");
        return 0;
    }         
</pre></code>

然而，stdio.h却不见了，这是因为在HTML中<和>为特殊符号，要显示这两个符号，则需要用写成：#include <stdio.h>

这与某些编程语言中的转义字符类似，但不是通过在要输入字符加特殊符号，而是直接使用特定字符串代替，例如“<”用“<”替代。（注意分号也是其中一部分，引号不是）

引用

<cite>：书名引用，效果：

<p><cite>The Great Gatsby</cite> by Fitzgerald</p>

<q>：短引用，自动添加双引号：

<p>洪世贤：<q>你好骚啊！</q></p>

<blockquote>：长引用，会对缩进进行处理：

<p>古语有云：</p>
<blockquote>大道之行也，天下为公，选贤与能，讲信修睦。
    故人不独亲其亲，不独子其子，使老有所终，壮有所用，
    幼有所长，矜、寡、孤、独、废疾者皆有所养，男有分，女有归。
    货恶其弃于地也，不必藏于己；力恶其不出于身也，不必为己。
    是故谋闭而不兴，盗窃乱贼而不作，故外户而不闭，是谓大同。
</blockquote>

<abbr>：缩写，鼠标移到缩略词上会显示全称。

<abbr title="Hyper Text Markup Language">HTML</abbr>

<address>：显示作者、网站编辑者等人的信息：

<address>
    Zerg Wang<br/>
    zergwang@example.com<br/>
    Guangzhou, China
</address>

链接

target使用

<a href="https://www.bilibili.com" target="_blank">访问同性交友网站</a>

没有target属性，单击链接则在当前页跳转，若target为_blank，单击链接则在新标签页打开。

命名锚的用法

假如说某个页面内容很多，要找到自己所需内容较为麻烦，这时可通过命名锚快速定位，例如说我要快速跳转到第三章，则有以下两个步骤：

1. 首先在第三章标题处，我们设置一个定位符（也可以叫锚），定位符名为C3，之后我们通过这个定位符来跳转。

<h1><a name="C3">第三章</a></h1>

2. 接下来，我们写个跳转到第三章的链接即可：

<a href="#C3">跳转到第三章</a>

注意要在定位符前加上#号。

链接可在其所指之处的前面，也可以在后面，无所谓~

除了在当前页面跳转，也可以跨网页跳转，例如我在网页1，要跳转到网页2的A处，则要在A设置定位符（假设为C8），然后在网页1中：

<a href="网页2的网址#C8">跳转</a>

其他

路径

同其他编程语言的路径写法基本一致，文件夹间用“/”而不是Windows下的“\”。

标题

h1、h2、h3、h4、h5、h6分别对应的是一级标题、二级标题……而不是第一个标题、第二个标题。

此外，不应为了凸显某些正文内容而故意设置其为标题，这是因为搜索引擎会通过检索标题来编制网页索引。

图片

<img src="astronaut.jpg" width="100" height="100"/>

后面的width和height不是必须。若未规定width和height则按原图大小显示，若仅规定一个，按规定值成比例显示，若都规定，按规定值拉伸、压缩显示，不会截取部分显示图片。

可为图像添加alt属性，用于图片无法正常显示时的替代文本信息：

 <img src="123.jpg" alt="找不到了"/>

分割线

<hr/>，效果：

<h1>this is my title</h1>    
<hr/>
<p>somtheing I wanna say</p>

换行符

换行符<br/>，使用以及与另起一段的区别：

<p>12<br/>3</p>
<p>aab</p>

可以看出行距是不一样的，这是因为HTML默认会在段落、标题元素前后添加一个额外的空行。

注释

<!--这是注释-->

<!--这
    还
    是
    注
    释
-->

可单行也可多行。

HTML语法特点

在编写HTML发现，虽然其有严格、完善的语法，但浏览器对于HTML代码并不严格，即使是肉眼可见的严重错误，运行后可能也会一切正常……此外，HTML在编写上也有一些“不成文”规定，以下举几个例子：

属性简写

错误：<input checked />

正确：<input checked="checked" />

关闭标签

所有元素均有开始标签和关闭标签没有关闭标签，例如<html>和</html>，但有时不写关闭标签网页仍能正常工作。

对于空元素，也必须要关闭。例如换行，写<br>是不对的，应为<br/>，当然两者都能正常运行。

元素嵌套

<p><a href="index.html">这是一个链接</p></a>

这是一个错误的写法，但仍能正常运行……正确写法：

<p><a href="index.html">这是一个链接</a></p>

大小写

HTML对大小写不敏感，<h1>和<H1>均可，但一般都是纯小写。

引号

HTML对单双引号也不敏感，属性中的值可以用单引号，也可以用双引号，若值本身带有双引号，则必须用单引号引入。

然而，一般属性值，什么引号都不带，也能正常运行……

空白忽略

源代码中的连续多个空格只算一个，连续多个空行也只算一个空格，例如：

<h1>this        is my title</h1>    
<h1>this        
        
        is my 
               
                   title
</h1>

和<h1>this is my title</h1> 是一样的。

版本声明

HTML一路发展，有多个版本，不同版本之间，语法、元素不完全相同，因此需要版本声明语句<!DOCTYPE> 方便浏览器解析，例如HTML5版本的写法：

<!DOCTYPE html>

XML与XHTML

XML（Extensible Markup Language，可拓展标记语言）与HTML语法基本一致，但语法更为严格，上面提到的HTML的种种不规范写法，在XML中就行不通了（无法正常运行）。

功能上XML与HTML略有不同。两者都可定义网页内容（存储数据），然而，HTML更偏向于设计网页的布局、显示效果等等，而XML的使用目的是数据的交流与传输，或者说，HTML专注于数据的展示效果，XML则专注于数据的传输共享。网页在设计时，使用HTML定义网页的布局，数据部分不会像上面一样一股脑写在<body>中，而是通过连接到外部的XML中。如果涉及到数据的更改或、环境改变、网站变更等，直接动XML即可，无需对HTML中用于布局的代码大幅修改。

至于XHTML（可扩展超文本标签语言，Extensible Hyper Text Markup Language），按我的理解，就是遵从XML严格语法规则的HTML语言……