前端_HTML_02：HTML入门

最新推荐文章于 2024-11-07 10:38:40 发布

耳东er

最新推荐文章于 2024-11-07 10:38:40 发布

阅读量129

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/q734044429/article/details/117466541

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、什么是HTML

在这里插入图片描述

HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言：HyperText Markup Language
1. 超文本：比普通文本更牛逼的文本，不仅仅可以展示文字，还可以展示各种媒体内容
2. 一般由前端工作人员来完成，后台研发人员不需要编写
3. 标记：(标签/元素/标记)
  ——标记通常被称为 HTML 标签 (HTML tag)。
  
  • HTML 标签是由尖括号包围的关键词，比如<html>
  • 封闭类型标记（也叫双标记），必须成对出现,如<p></p>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
  • 非封闭类型标记，也叫作空标记，或者单标记，如<br/>
4. HTML 作用：通过使用 HTML 的各种标签，然后生成一个 HTML文件，这个文件可以被浏览器解析，浏览器内部有一个专门的HTML的解析器，解析后我们就可以看到炫酷的页面。(编写网页的超文本标记语言)
总结：
——我们学习 HTML 就是学习各种各样的标签，可以达到比普通文本更厉害的功能。那么后续浏览器可以对 HTML 文件做解析，就可以在浏览器上展示好看的效果。

二、HTML的标准结构

代码
```
<html>
	<head>
		<meta charset="utf-8">
		<title>head是头标签</title>
	</head>
	<body>
		<h1>body是体标签</h1>
	</body>
</html>
```
- <html>是根标签，最外层的标签，所有其他的标签都放入该标签中
  ——<html>根标签有两个一级子标签,分别是<head> <body>
- <head>中一般放的是不显示在网页上但是又比较重要的信息
- <body>中一般放的是显示在页面上的内容
效果

三、HTML基本结构

HTML 标签
——定义 HTML 文档，<html>这个元素我们浏览器看到后就明白这是个 HTML 文档了，所以其他元素要包裹在它里面，<html>标签限定了文档的开始点和结束点，在它们之间是文档的头部<head>和主体<body>。
- head 标签
  ——head 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
  - 下面这些标签可用在 head 部分：
    <title>——标题
    1. title 可以定义文档的标题
    2. 它显示在浏览器窗口的标题栏或状态栏上。
    3. title写和你网页相关的关键词有利于SEO优化
      ——SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。
    <meta>——标签的优化，元信息标签
    - 文档的头部经常会包含一些标签，用来告诉浏览器关于文档的附加信息。
    - meta 标签用来描述一个HTML网页文档的属性，此处的charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。
    - 元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
    - 常见的 meta 标签属性：
    1. charset属性 定义当前页面的字符集告诉浏览器以什么字符集解析当前页面
    2. name属性 一般用于定义当前网页的一些简单描述便于在搜索引擎上根据描述搜索到当前网页
      Keywords(关键字)　keywords用来告诉搜索引擎你网页的关键字是什么。
      description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。
      author作者 标注网页的作者
    3. content属性 上述name属性元素的内容
    <link>——链接（引入外部CSS样式文件）
    <style>——样式、风格、款式
    <script>——脚本（引入脚本语言文件）
  - 示例：
```
<!DOCTYPE html>
<html>	
	<head>
		
		<title>耳东Dr.园</title>
		
		<meta charset="UTF-8"/>
		<meta name="author" content="耳东Dr."/>
		<meta name="keywords" content="耳东，博士，家园"/>
		<meta name="description" content="这是耳东Dr.的网页，家园，创造基地，未来可期"/>
		
		
		
		
		 <link />
		 <script></script>
		 
	</head>

	<body bgcolor="aquamarine">
		
		<h2 align="center">耳东Dr.</h2>
		
		
	</body>
</html>
```