web前端新人第一课：html基础知识，你能学会吗？

r囧r小猫 2023-03-14 05:55 2阅读 0赞

**什么是 HTML？**  
HTML即超文本标记语言 (Hyper Text Markup Language)， 是用来描述网页的一种语言。  
超文本标记语言的结构包括"头"部分（外语：Head）、和"主体"部分（外语：Body），其中"头"部提供关于网页的信息，"主体"部分提供网页的具体内容。  
标记语言是一套标记标签 (markup tag)  
HTML 使用标记标签来描述网页  
**如下代码：**

<html>
    <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    </body>
    </html>

**例子解释:**

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

**HTML 元素**  
HTML 文档是由 HTML 元素定义的。  
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。  
![在这里插入图片描述][20200516135042397.png]  
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag），大多数 HTML 元素可拥有属性。  
**空的 HTML 元素：**  
没有内容的 HTML 元素被称为空元素。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。  
在开始标签中添加斜杠，比如:  
就是没有关闭标签的空元素, 而  
是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。  
即使  
在所有浏览器中都是有效的，但使用  
其实是更长远的保障。  
**HTML 提示：使用小写标签**  
HTML 标签对大小写不敏感：`<P>` 等同于`<p>`。许多网站都使用大写的 HTML 标签。  
W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。  
**HTML 属性**  
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。  
属性总是以名称/值对的形式出现，比如：name=“value”。  
属性总是在 HTML 元素的开始标签中规定。  
属性实例:  
HTML 链接由 标签定义。链接的地址在 href 属性中指定：

注释：属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘Bill “HelloWorld” Gates’。  
HTML 提示：使用小写属性  
属性和属性值对大小写不敏感。  
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。  
而新版本的 (X)HTML 要求使用小写属性。  
**一些常见HTML属性:**  
![在这里插入图片描述][20200516135412806.png]  
**HTML 编辑器**  
使用 Notepad 或 TextEdit 来编写 HTML  
可以使用专业的 HTML 编辑器来编辑 HTML：  
Adobe Dreamweaver  
Microsoft Expression Web  
CoffeeCup HTML Editor  
**HTML 标题**

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

<h1>This is a heading</h1><h1>定义最大的标题。
    <h6>This is a heading</h6><h6> 定义最小的标题。

注释：浏览器会自动地在标题的前后添加空行。  
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。  
练习题

1.以下关于标题的说法哪种是错误的？

A默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行  
B使用标题仅仅是为了产生粗体或大号的文本  
C搜索引擎使用标题为您的网页的结构和内容编制索引

2.下面几个标题哪个权重最高，最主要？

A<h1>This is a heading</h1>
    B<h2>This is a heading</h2>
    C<h3>This is a heading</h3>

3.默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行,这个说法对吗？  
A对  
B错

4.以下关于段落的做法哪种是正确的？

A<p>This is a paragraph
    B使用空的段落标记 <p></p> 去插入一个空行
    C<p>This is a paragraph

以上就是我的分享，希望对你有所帮助，另外我自己也从事前端开发多年，  
自己对于前端也做了一些学习的总结，也录制了基础的精讲视频和学习方法，  
如果你这边需要的话，可以点此链接：[前端精讲学习视频和学习路线 分享][Link 1]

[20200516135042397.png]: /images/20230312/f3442ac15aa949c9bd65e10e71cdf348.png
[20200516135412806.png]: /images/20230312/cb64beaf498d425fa136f150def7c255.png
[Link 1]: https://docs.qq.com/doc/DUEJhRnRvZ3V2VEdp