1. HTML简介
1.1 HTML是什么？
- 超文本标记语言(Hyper Text Markup Language)，是一种用于创建网页的标记语言。
- 网页文件的扩展名：.html
1.2 HTML不是什么？
- HTML不是一种编程语言，而是一种标记语言(Markup Language)。
- HTML使用标签来描述网页。
1.3 HTML最基本的文档结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML最基本的文档结构</title> </head> <body> </body> </html>
注：
-
<!DOCTYPE html>声明为HTML5文档。
-
<html>、</html>是文档的开始标记和结束标记，是html页面的根元素。在它们之间是文档的头部(head)和主体(body)。
-
<head>、</head>定义了html的开头部分，它们之间的内容不会在浏览器的文档窗口显示，包含了文档的元(meta)数据。
-
<title>、</title>定义了网页的标题，在浏览器标题栏显示。
-
<body>、</body>之间的文本是可见的网页主体内容。
1.4 HTML标签格式
- HTML标签是由尖括号包围的关键字，如<head>、<body>
- HTML标签通常是成对出现的，例如<html>和</html>，第一个标签是开始，第二个标签是结束。结束标签有一个/。
- 也有一部分标签是单独出现的，例如<br>、<hr>、<img src="1.jpg">
- 标签里面可以有若干属性，也可以不带属性。大多数HTML标签拥有属性
1.4.1 标签的语法
-
<标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>
-
<标签名 属性1="属性值1" 属性2="属性值2">
1.4.2 几个很重要的属性
-
id：定义标签的唯一ID
-
class：为HTML元素定义一个或多个类名（classname）（CSS样式类名）
-
style：规定元素的行内样式（CSS样式）
1.5 HTML注释
<!--注释内容-->
1.6 <!DOCTYPE>标签
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
2. HTML常用标签
2.1 head内常用标签
| 标签 | 意义 |
| <title></title> | 定义网页标题(必须要有) |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link> | 引入外部样式表文件 |
| <meta> | 定义网页原信息 |
2.1.1 meta标签
meta标签介绍：
2.2 标题
标题(Heading)是通过<h1> - <h6>标签进行定义的.
<h1>定义最大的标题, <h6>定义最小的标题.
2.3 段落
2.4 文本格式化
2.5 框架 - iframe
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。简单来说,就是一个页面中又套了一个页面.
例如:
<!DOCTYPE html> <html> <head> <title>练习</title> <style> body { background-color: rgb(168, 168, 168); } </style> </head> <body> <iframe src="https://www.baidu.com" frameborder="0"></iframe> </body> </html>
2.5.1 iframe和a标签配合使用
例如:
<!DOCTYPE html> <html> <head> <title>练习</title> <style> body { background-color: rgb(168, 168, 168); } </style> </head> <body> <iframe name='baidu' src="" frameborder="0"></iframe> <a href="https://www.baidu.com" target='baidu'>百度</a> </body> </html>
iframe标签中要有name属性, a标签中的target的值为iframe中name的值. 最终效果如下: 点击百度链接, 则会在iframe框中显示百度网页.
点击前:
点击后:
