前端基础之HTML
前端基础之HTML
一、什么是HTML
- HTML：是一种超文本标记语言(Hypertext Markup Language，HTML)，是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器更具规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。(兼容问题)
- 网页文件的扩展名：.html或.htm(在文件后缀名只有能是三位的时候使用，现在基本不用)
- HTML是标记语言，不是编程语言，使用标签来描述网页。
二、HTML文档结构
最基础的HTML文档：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
- <!DOCTYPE html> 声明为HTML5文档。
- <html> </html>是文档的开始标记和结束标记。是HTML页面的根元素，在它之间是文档的头部(head)和主体(body)。
- <head> </head>定义了HTML文档的开头部分。他们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
- <title> </title>定义了网页标题，在浏览器标题栏显示。
- <body> </body>之间的文本时可见的网页主体内容
注意：对于中文网页需要使用<meta charset="UTF-8">声明编码，否则会出现乱码。有些浏览器会设置GBK为默认编码，则你需要设置为<meta charset="GBK">.
2.1HTML标签格式
- HTML标签是由尖括号包围的关键字，如：<body> <html>等
- HTML标签通常是成对出现的，比如：<body> </body>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
- 也有一部分标签是单独呈现的，比如：<br/> <hr/>等。
- 标签里面可以有若干属性，也可以不带属性
2.1.1标签的语法
- <标签名 属性1=“属性值1” 属性2="属性值2" ......>内容</标签名>
- <标签名 属性1=“属性值1” 属性2="属性值2" ......>
2.1.2几个重要的属性
- id：定义标签的唯一ID，HTML文档中唯一
- class：为HTML元素定义一个或多个类名(classname)(CSS样式类名)
- style：规定元素的行内样式(CSS样式)
2.2HTML注释
<!--注释内容-->
三、HTML常用标签
3.1head内常用的标签
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入JS文件 |
| <link/> | 引入外部样式表文件或网站图标 |
| <meta/> | 定义网页元信息 |
Meta标签介绍：
- <meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词
- <meta>标签位于文档的头部，不包含任何内容。
- <meta>标签的属性定义了与文档相关联的名称/值对。
meta标签的组成：meta标签共有两个属性，它们分别是name 属性和http-equiv 属性。
- http-equiv 属性：相当于HTTP的文件头作用，他可以向浏览器传回一些有用的信息，以帮助正确的显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
- name属性：主要用于描述网页，与之对应的属性值为content，content中的内同主要是便于搜索引擎机器人查找信息和分类信息用的
<meta name="keywords" content="meta总结，meta属性">
<meta name="description" content="yyyyyyyyyyyy">
