前端 - HTML

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>

注：

  1. <!DOCTYPE html>声明为HTML5文档。

  2. <html>、</html>是文档的开始标记和结束标记，是html页面的根元素。在它们之间是文档的头部(head)和主体(body)。

  3. <head>、</head>定义了html的开头部分，它们之间的内容不会在浏览器的文档窗口显示，包含了文档的元(meta)数据。

  4. <title>、</title>定义了网页的标题，在浏览器标题栏显示。

  5. <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框中显示百度网页.

点击前:

点击后:

 

 

2.6 链接

 

2.7 表单

 

2.8 图像

 

posted @ 2019-04-28 21:42  李培冠  阅读(331)  评论(0)  编辑  收藏  举报