HTML入门(基础篇) | 青训营笔记

120 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第1天。

1. HTML概述

      HTML的全称为HyperText Markup Language,即超文本标记语言,是用于描述网页的一种标记语言。HTML文本是由HTML命令组成的描述性文本,在HTML文本中通过HTML命令定义文字、动画、声音、表格、链接等。

2. HTML文档的基础构成

实例:

<!DOCTYPEhtml>
<html>
<head>  
   <metacharset="utf-8">
   <title>HTML文档的基础构成</title>
</head>
<body>  
   <h1>我的第一个标题</h1>
   <p>我的第一个段落。</p>
</body>
</html>

实例解析:

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8。
 <title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
 <h1> 元素定义一个大标题
<p> 元素定义一个段落

3. HTML标签分类

3.1 双标签

      <标签名> 内容 </标签名>

       该语法中“<标签名>”表示该标签的作用开始,一般称为“开始标签(start tag)”,“</标签名>” 表示该标签的作用结束,一般称为“结束标签(end tag)”。和开始标签相比,结束标签只是在前面加了一个关闭符“/”。

       比如 <body>我是文字 </body>

3.2 单标签

     <标签名 />

     单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。

     比如 <br />

4. HTML标签关系

4.1 父子关系----嵌套关系

实例:

<body>
   <h1>我的第一个标题</h1>
</body>

     <body>标签与<h1>标签为嵌套关系,一般称呼为父子关系。

4.2 兄弟关系----并列关系

实例:

<body>
   <h1>我的第一个标题</h1>
   <p>我的第一个段落。</p>
</body>

    <p>标签与<h1>标签为并列关系,一般称呼为兄弟关系。

5. HTML常用标签

5.1 标题标签

      为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即 <h1>、<h2>、<h3>、<h4>、<h5>和<h6>

      注意: h1 标签因为重要,尽量少用, 一般h1 都是给logo使用,或者页面中最重要标题信息。

实例:

  <h1>这是一个标题。</h1>
  <h2>这是一个标题。</h2>
  <h3>这是一个标题。</h3>

5.2 段落标签

        段落标签可以将网页中的文字有条理的显示出来,<p></p>标签是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

实例:

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

5.3 换行标签

      在HTML中,默认情况下,段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签 <br />

实例:

  <p>这个<br>段落<br>演示了换行标签的效果</p>

5.4 文本格式化标签

       在HTML中可以通过文本格式化标签为文字设置粗体、斜体或下划线等效果,使文字以特殊方式显示。

文本格式化标签包含:

5.5 图像标签

       HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就需要使用图像标签<img> ,想要使用图像标签在页面中显示图像,需要源属性(src),src的值为图像的URL地址。

图像标签相关属性:

实例:

<img src="info.gif" alt="info" width="42" height="42">

5.6 链接标签

       HTML使用标签 <a>来设置超文本链接,在标签<a> 中使用了href属性来描述链接的地址。

注意:

  1. 外部链接 需要添加 http:// xxxxx 。
  2. 内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
  3. 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
  4. 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

链接标签相关属性:

实例:

<a href="https://www.baidu.com">百度</a>

6.个人总结

      以上是新手在开始学习HTML中的常用的知识,具体的知识需要到官网或菜鸟教程等学习网站自行查找。新手在学习HTML过程中最重要的是上手敲代码,这样能加深印象,提高学习HTML的兴趣。