【HTML基础】HTML的基本结构
HTML结构
- 结构
- 1.基本结构
- 2.头部内容
- 3.主体内容
- 4.页面的开头
结构
1.基本结构
以下代码是HTML的基本结构:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="Generator" content=""><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>一个标题</title></head><body></body>
</html>
看起来有些复杂,我们可以去掉一些部分,看起来更简单:
<html><head><title>一个标题</title></head><body></body>
</html>
简化后,基本结构就变得十分明显。
HTML文档的开始代码,出现在第一句:
<html>
HTML文档的结束代码,出现在末尾:
</html>
其他所有HTML代码都位于这两个标记之间,这两个标记的作用就是告知浏览器这是一个Web文档,该按HTML语言规则来解释文档中的标记内容;
头部开始和结束标记:
<head>...</head>
在头部标记中,说明文件标题的标记:
(如果标题内容为空,标题显示的是文件本身的名字)
<title>...</title>
浏览器显示页面内容的主体:
<body>...</body>
2.头部内容
<head>...</head>
head标记是HTML文档的头部标记,头部信息不会在浏览器窗口的正文中显示;
…
<title>...</title>
可以插入在头部标记中,指定HTML文档的网页标题的标记。
…
<meta>
meta标记可用来描述不包含在标准HTML里的文档信息,例如显示字符集、开发工具、作者、网页关键字、网页描述、页面定时刷新及跳转等。
这些文档信息不会在浏览器页面显示,但用户可以通过检索这些信息来找到该网页。
<head><meta charset="UTF-8"><meta name="Generator" content=""><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>一个标题</title></head>
3.主体内容
<body>...</body>
body标记中填写的是页面中的所有内容,可有文字、图片、表格、表单、音频、视频、超链接等元素;
body标记有许多属性,用来控制文档的颜色,背景等。
body标记的属性介绍:
①bgcolor:
用来设置页面的背景颜色,可直接使用颜色的英文名称或对应十六进制数来表示需设置的颜色。
②background:
用来设置背景图像。
③alink:
用来规定文档中活动链接的颜色(鼠标指向链接时,链接所显示的颜色)。
④link:
用来规定文档中,所有链接的颜色。
⑤text:
用来规定文档中所有文本的颜色。
⑥vlink:
用来规定文档中所有被访问过的链接的颜色。
设置属性的语法格式:
直接在主体的开始标记内部说明
<body bgcolor="" background="" alink="" link="" text="" vlink=""></body>
属性与标记名之间需要一个空格来间隔。
属性的数据可以用 “ ” 符号括起来,也可以不括起来,直接写。
4.页面的开头
在文章开头,给出的HTML网页结构中,包含以下内容:
<!DOCTYPE html>
<html>
</html>
上面是HTML5简化后的声明代码
DOCTYPE标记常常被用来声明要使用什么风格的HTML或XHTML;
此标记使浏览器知道应当如何处理文档,让验证器知道应当按照什么样的标准来检查代码的语法,然后用html标记,表示实际代码的开始位置。
【HTML基础】HTML的基本结构相关推荐
- MongoDB基础教程系列--目录结构
MongoDB基础教程系列--目录结构
- Maven-学习笔记03【基础-Maven标准目录结构和常用命令】
Java后端 学习路线 笔记汇总表[黑马程序员] 黑马程序员(腾讯微云)Maven基础讲义.pdf Maven-学习笔记01[基础-Maven基本概念] Maven-学习笔记02[基础-Maven的安 ...
- 5G NR基础参数及帧结构
本篇主要讲述5G的基础知识--基础参数及帧结构 1.子载波间隔: 我们知道LTE中子载波间隔是固定的15kHz,但NR中采用了更加灵活的子载波间隔,如下表: 我们可以把它叫做numerology,也就 ...
- Python基础------几种循环结构详解
Python基础------几种循环结构详解 在所有的编程语言中,循环结构是必不可少了,Python也一样.在python主要有一下几种循环结构:for-in-.while.range()三种最为常见 ...
- Java基础语法_循环结构【多测师_何sir】
Java基础语法_循环结构 for 循环 while 循环 do-while 循环 Java 增强 for 循环 break 关键字 continue 关键字 for 循环 语法结构: for(初始化 ...
- Python基础入门—单分支结构
Python基础入门-单分支结构 if分支语句 if_else使用: if_elif_else的使用: if嵌套: 经典例题1: 经典例题2: if分支语句 Python中if语句的语法结构: if ...
- 【数据结构与算法】图论基础与图存储结构
前言 由于后续更新好几篇文章都涉及到 图 这种数据结构,因此打算先普及一下 图 的相关理论支持,如果后面的相关内容有些点不太容易理解,可以查阅此篇文章.本文不建议一口气阅读完毕,可以先浏览一遍,在后续 ...
- Python基础day02【if结构、if elif 结构、while循环、for循环、Break和continue、Debug 调试、三目运算、循环 else 结构】
视频.源码.课件.软件.笔记:超全面Python基础入门教程[九天课程]博客笔记汇总表[黑马程序员] Python基础day02 作业解析[6道 if 判断题.9道 循环题] 学习目标: 能 ...
- 结构体怎么赋值_c语言学习之基础知识点介绍:结构体的介绍
一.结构体的介绍 /* 语法:struct 结构体名{成员列表;};切记切记有分号!说明:成员列表就是指你要保存哪些类型的数据.注意:上面的语法只是定义一个新的类型,而这个类型叫做结构体类型.因为类型 ...
- 《算法笔记》——基础篇习题选择结构
<算法笔记>--基础篇习题 第二章 C/C++快速入门--2.3选择结构 [习题A] 一元二次方程求根 Problem Description Thinking Notes Code Im ...
最新文章
- 人造神经元成功操纵植物,让捕蝇草强行闭合,脑机接口新思路打开丨Nature子刊...
- python 仪表盘-python数据可视化:pyecharts
- 初学Java的那段日子
- LeetCode 922 Sort Array By Parity II 解题报告
- python中的urllib库_七、urllib库(一)
- SpringMVC框架--学习笔记(下)
- Linux 系统中的权限管理
- vue 点击div 获取位置_vue 点击元素滚动到指定位置
- asp.net 读取mysql数据库_asp.net访问MySQL数据库
- 聚类-----高斯混合模型
- java poi设置单元格格式为数值_java中导出excel设置单元格的样式为数字格式怎样设置?...
- 正尝试在 OS 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码,这样做会导致应用程序挂起。
- Jenkins搭建Maven项目集成开发环境(源码库 Gitlab)
- 什么是“蓝牙距离感应装置”
- 从牛顿定律到飞行器动力学
- Tensorflow图像识别-2
- 如何成为一名合格的数据科学家(IT专家网)
- 基于卷积神经网络的口罩佩戴识别与检测
- 委托交易怎么卖出开仓?买入开仓和卖出开仓要注意些什么?
- 计算机狐狸标志的程序,Firefox 推出新 logo,这只狐狸长这样子