HTML基础知识

一、HTML基本结构

1.红框部分用于声明这是一个html文档，是一个固定开头
2.黑框为完整的html页面，相当于一整个人，其中< html >和< /html >为html页面的根标签，其余所有html标签都应写在这两个标签之间
3.蓝框为头部元素，类比一个人的头部，用于设置标题，编码格式等等
4.绿框为可见的页面内容，类比一个人的身体，网页上的内容在这里编写

二、HTML基本语法
HTML中有两类标签，一种是双标签，另一种是单标签

• 双标签
  
  如图所示为段落标签，我们可以看到前后两个标签，分别是< p >和< /p >，其中不带"/"的是开始标签，带"/"的是结束标签，两个标签之间的部分为内容，即我们要显示在网页上的东西。
  像这样由开始和结束两个标签构成，且中间需要插入内容的标签称为双标签。
  对于双标签我们还可以在开始标签中加入属性，例如：
  
  通过上面的例子，我们可以将双标签语法概括为:
  
  如果想要给标签加上属性，语法为：
  
  切记属性放在开始标签内，并且要用一个空格隔开，空格是分隔符

• 单标签
  
  如图所示，样例中为换行标签，该类标签不需要像双标签那样插入内容。其严格意义上的基本语法为：
  
  "/"前有个空格。但是注意，html5对单标签的自闭合斜杠 / 并不强制，可以写为< 标签名 >而省略"/"，这就是为什么样例中的换行标签写为< br >而没有写为< br / >
  如果要加上属性，语法为：
  
  该语法中html5仍然可以省略"/"
  三、通过html编写网页
  首先新创一个文本文件，改后缀为html。先写出html的基本框架，然后在< body >和< /body >中写内容。示例如下
  1.编写一段内容：
  < p >标签表示段落
  
  保存并双击html文件，通过一个浏览器打开：
  

2.在网页的内容中添加标题
html总共有6个标题标签，分别为< h1 >、< h2 >、< h3 >、< h4 >、< h5 >、< h6 >，分别对应一级标题、二级标题、...、六级标题

3.为网站添加超链接
什么是超链接？用百度举个例子：

在百度热搜中可以看到几段文字，点开就跳转到相应网页，这就是超链接。
< a href="" >超链接名字< /a >用于添加超链接，其中href属性填写网址：


我们点开超链接会发现是在本页上跳转的，如果我们想在新的窗口上跳转，则可以添加一个target属性：


target属性用于指定跳转的窗口，target="_blank"就是在新的窗口上跳转。如果不写target属性，则默认在本页跳转

4.添加图片
添加图片使用< img src="" alt="" >标签。src属性写图片的路径，可以是绝对路径也可以是相对路径，路径不能省略；alt属性中写一段文字，假如图片由于路径错误等问题无法显示，就会显示alt的内容
例如我在样例中的html文件同一个文件夹下有一个图片666.jpg，此时我们可以写相对路径：


如果故意输错图片路径，则显示alt属性的内容

如果图片太大，还可以使用width和height属性来设置图片的宽和高，这里不再演示

5.修改网页名称
差点忘了介绍< title >标签

在< head >中有一个< title >标签，这个标签用来写网页名称，默认是Document

我们可以改成其他名字，例如改成"hacker!"：

通过html编写网页就是使用相应的标签，本文就只介绍以上几类及其基础的标签，仅帮助入门，读者可自行查阅其他标签