为什么要学习HTML,学习HTML可以用来做什么?<详情猛戳>
通过链接了解对html的一些简单的认识,那么先简单概述一下
HTML概念
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
- HTML文档通过web浏览器来解析,显示所写内容
- HTML文档的后缀名一般是.html(推荐)
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 有一些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签:例如<br/>换行 <hr/> 下划线 <input /> <img />
1
|
<标签>内容< / 标签> |
HTML标签属性
- 通常是以键值对形式出现的. 例如 name="alex"
- 属性只能出现在开始标签 或 自闭和标签中.
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
<!DOCTYPE>标签声明
- <!DOCTYPE>声明有助于浏览器中正确显示网页。
- 网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
- doctype 声明是不区分大小写的
上述对HTML有了一些简单的认识,那么可以看一下简版html文档树形结构图(如图参考)
由图可得,根元素html分为俩部分元素head和元素body,又基于这俩部分进行一些甚至更多的拓展
又例如在IDE工具pycharm新建一个html文件,可以看到pycharm会为这个文件默认添加一些内容,即必须要有的。
接下来对head和body这俩部分进行阐释
head标签
<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
如图可得head标签下面有俩条内容,那么它们是什么呢?
下面这些标签可用在 head 部分(详情可点击):<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。
提示:应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签或 <frameset> 标签之前。
提示:请记住始终为文档规定标题!
如题,下面代码简单阐释了下head头部信息的一些标签(当然还有其它的)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<! DOCTYPE html> # 声明 < html lang="en"> < head > # 头部信息,包含的数据并不会真正作为内容显示给用户 < meta charset="UTF-8"> # 如果有中午,设定一下编码格式 < title >病毒尖er</ title > # 标题描述 <!--<meta http-equiv="Refresh" content="2;url=https://www.baidu.com">--> # 此代表刷新的概念,即过俩秒跳转到指定的url < meta http-equiv="Refresh" content="2"> # 即每俩秒自动刷新 < meta name="keywords" content="管道工,超级马里奥"> # 搜索关键词 < meta name="description" content="马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤、还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色"> # 描述内容 |