这是我参与「第四届青训营 」笔记创作活动的第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属性来描述链接的地址。
注意:
- 外部链接 需要添加 http:// xxxxx 。
- 内部链接 直接链接内部页面名称即可 比如
< a href="index.html">首页</a >。 - 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
链接标签相关属性:
实例:
<a href="https://www.baidu.com">百度</a>
6.个人总结
以上是新手在开始学习HTML中的常用的知识,具体的知识需要到官网或菜鸟教程等学习网站自行查找。新手在学习HTML过程中最重要的是上手敲代码,这样能加深印象,提高学习HTML的兴趣。