一、HTML的定义
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
二、HTML示例
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>HTML示例</title>
</head>
<body>我的第一个标题
<p>我的第一个段落。</p>
</body>
</html>
在此说明以上示例各部分含义:
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- **** 元素定义一个大标题
- <p> 元素定义一个段落
注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。
三、HTML常见术语
HTML 标签: HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
-
HTML 标签是由尖括号包围的关键词,比如 <html>
-
HTML 标签通常是成对出现
-
标签对中的第一个标签是***开始标签***,第二个标签是***结束标签***
-
开始和结束标签也被称为***开放标签*** 和 闭合标签
HTML 元素: "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。
-
HTML 元素以开始标签起始
-
HTML 元素以结束标签终止
-
元素的内容是开始标签与结束标签之间的内容
-
某些 HTML 元素具有空内容(empty content)
-
空元素在开始标签中进行关闭(以开始标签的结束而结束)
-
大多数 HTML 元素可拥有属性
HTML 属性:属性是 HTML 元素提供的附加信息。
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,**比如:name="value"**。
四、HTML标题
HTML标题(Heading)是通过 <h1> - <h6> 标签进行定义的。
代码示例
<h1>这是一个标题。
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
效果展示 注意事项
- 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
- 搜索引擎使用标题为您的网页的结构和内容编制索引。
- 因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
- 应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
五、HTML 注释
注释: 开始括号之后(左边的括号)需要紧跟一个叹号 ! (英文标点符号),结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。
代码示例
<!-- 这是一个注释 -->
注意事项
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
六、HTML 段落
段落是通过 <p> 标签定义的。
代码示例
<!-- 带结束标签 -->
<p>这是一个段落 </p>
<p>这是另一个段落</p>
<!--不带结束标签 -->
<p>这是一个段落
<p>这是另一个段落
效果展示 注意事项 上面的不带结束标签例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误,在未来的 HTML 版本中,不允许省略结束标签。
七、HTML 折行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 代码示例
<p>这个<br>段落<br>演示了分行的效果</p>
效果展示 本期教程到此就结束了,如果对该教程感兴趣,欢迎关注,我将持续发布有关HTML+CSS+JS基础教程。