前端 HTML文档结构介绍
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
解释一下上面的代码:
1.首先,<!DOCTYPE HTML>是HTML文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。
2.<html></html> 称为HTML根标签,所有的网页标签都在<html></html>中。
3.<head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签。
4.在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在<body>标签中的内容(图中淡绿色部分内容)最终会在浏览器中显示出来。
HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性。

<html>:开始标签 ; </html>:闭合标签,闭合标签和开始标签不同,在于前面多了/
html中的标签都是 闭合标签,
<!-- 声明HTML文档的类型,标记该文档为HTML5的文件-->
<!DOCTYPE html> <!-- 页面根节点开始-->
<!-- html中的标签都是 闭合标签 闭合标签包含 双闭合和单闭合
双闭合有:<html></html>
单闭合有:<meta> 或者这样写<meta/>也可以
--> <html></html>
<!-- 页面根节点结束-->
闭合标签包含 双闭合和单闭合
双闭合有:<html></html> 就是有开头,有结尾
单闭合有:<meta> 或者这样写<meta/>也可以 ,只有一个标签就是单闭合标签 编写HTML,记得缩进,不然看起来很乱
<!-- 声明HTML文档的类型,标记该文档为HTML5的文件-->
<!DOCTYPE html> <!-- 页面根节点开始-->
<!-- html中的标签都是 闭合标签 闭合标签包含 双闭合和单闭合
双闭合有:<html></html>
单闭合有:<meta> 或者这样写<meta/>也可以
--> <html>
<!-- 页面字节点开始区域-->
<head>
<!-- 包含头部信息 是一个容器 包含 style title meta script link等标签-->
</head>
<body>
<!-- 包含浏览器显示的内容标签div p a img input等标签 --> 这是我们的文档
</body> <!-- 页面字节点结束区域-->
</html>
<!-- 页面根节点结束-->
上面的代码用浏览器打开出现乱码,让浏览器显示中文 在<head>里面加上<meta>标签 ,<meta>声明头部的元信息,<meta>是单闭合标签, 可以<meta/>这样写
规定编码格式为utf-8
<!-- 声明HTML文档的类型,标记该文档为HTML5的文件-->
<!DOCTYPE html> <!-- 页面根节点开始-->
<!-- html中的标签都是 闭合标签 闭合标签包含 双闭合和单闭合
双闭合有:<html></html>
单闭合有:<meta> 或者这样写<meta/>也可以
--> <html>
<!-- 页面字节点开始区域-->
<head>
<!-- 声明头部的元信息,对我们HTML文档 规定编码格式-->
<meta charset="utf-8">
<!-- 包含头部信息 是一个容器 包含 style title meta script link等标签-->
</head>
<body>
<!-- 包含浏览器显示的内容标签div p a img input等标签 --> 这是我们的文档
</body> <!-- 页面字节点结束区域-->
</html>
<!-- 页面根节点结束-->
前端 HTML文档结构介绍的更多相关文章
- Poi之Word文档结构介绍
1.poi之word文档结构介绍之正文段落 一个文档包含多个段落,一个段落包含多个Runs,一个Runs包含多个Run,Run是文档的最小单元 获取所有段落:List<XWPFParagraph ...
- Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构
分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...
- MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系
MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...
- HTML5的文档结构
HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性 1. header 元素 <header> 标签定义文档或者文档 ...
- 4. svg学习笔记-文档结构元素和样式的使用
svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...
- html 初识 文档结构 常用标签
HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一 ...
- HTML5的文档结构和新增标签
一.HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...
- Mongodb:修改文档结构后出现错误:Element '***' does not match any field or property of class ***.
Mongodb:修改文档结构后出现错误:Element '***' does not match any field or property of class ***. Mongodb是一种面向文档的 ...
- 读取XML文档结构并写入内容
1.在项目中新建XML文档结构.xsd文件,在其中添加相应的节点. 2.读取文档结构并写入内容 string initFileName = @"D:\Config.xml"; Da ...
随机推荐
- WINDOWS消息和窗口简介
一.WINDOWS的消息和窗口简介:1.什么是windows在这里我就不介绍了,但是作为一个程序员我们要知道WINDOWS最重要的一个也是我们程序员常用的一个东西就是消息.窗口是以消息的形式输入的,窗 ...
- mysql存储过程中使用事务
DROP PROCEDURE IF EXISTS test_sp1 CREATE PROCEDURE test_sp1( ) BEGIN ; ; START TRANSACTION; INSERT I ...
- cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration的解决
导入了一个工程,编译什么的都还好,但是报了一个XML的错误. cvc-complex-type.2.4.c: The matching wildcard is strict, but no decla ...
- VMware Workstation 14 黑屏的一个解决办法
近期很多朋友遇到了VMware Workstation 14开启或新建虚拟机后黑屏的现象,同时发现如果挂起虚拟机,可以显示挂起前最后的画面.显然,虚拟机核心是正常工作的,只是“显示”方面出现了问题. ...
- Win8交互UX——用于 Windows 的触摸交互
用于 Windows 的触摸交互 Windows 8.1 提供一组在整个系统中使用的简单触摸交互功能.一致地应用此触摸语言可让用户对你的应用感觉已经很熟悉.通过让你的应用更容易学习和使用,可提高用 ...
- java基础---->数组的基础使用(二)
这里对List(jdk 1.7)列表里面的一些方法做一些简单的分析,以避免有些函数的误用.手写瑶笺被雨淋,模糊点画费探寻,纵然灭却书中字,难灭情人一片心. List中注意的方法 一.Arrays.as ...
- 【线程】Volatile关键字
Volatile变量具有 synchronized 的可见性特性,但是不具备原子特性.这就是说线程能够自动发现 volatile变量的最新值.Volatile变量可用于提供线程安全,但是只能应用于非常 ...
- ios-toolchain-based-on-clang-for-linux
https://github.com/tpoechtrager/cctools-port.git https://www.embtoolkit.org
- 解决win764位安装pycrypto遇到unable to find vcvarsall.bat 问题
今天安装pycrypto的库.安装中遇到一些问题,这里简单记录下来. 首先安装python,pycrypto是基于python的一个库. 第一种:搜索关键字pycrypto,找到pycrypto的官方 ...
- How to Use Postman to Manage and Execute Your APIs
How to Use Postman to Manage and Execute Your APIs Postman is convenient for executing APIs because ...

