🌏HTML文档结构与标签语法
引入
在上一篇我们介绍了HTML是一种超文本标记语言, 主要负责编辑文本结构和文本内容, 以便浏览器能正常显示, 浏览器的解析顺序自上而下, 下面对HTML的文档结构展开介绍
- Pycharm中输入 :
html:5+ Tab 或者!+ Tab
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
一.<!doctype html>
HTML5的标准网页声明, 不是html标签, 支持HTML5标准的主流浏览器都可识别这个声明, 表示该网页采用HTML5
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前, 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范
而<!DOCTYPE> 不是 HTML 标签, 它为浏览器提供一项信息(声明), 即 HTML 是用什么版本编写的
二.<html> 标签
主要作用告知浏览器这是一个HTML文档，该标签是除 <!DOCTYPE> 外所有其他 HTML 元素的容器
在上面标签中添加了
lang="en", 这个属性, 定义该网页为英文页面, lang 是 language 的简写, 定义为中文页面可以写成 :lang="zh"
三.<hand> 标签
该标签是所有头部元素的标签, 其中头部元素必须包含文档标题标签 <title>, 可以包含 js 脚本 <script> 以及 CSS 样式 <style>、<meta>信息等等
四.<title>标签
该标签它可以用来给 html 文档添加一个标题
它与<body>中的<h1>标题不同, 它是定义浏览器工具栏中的标题, 也可以是提供页面被添加到收藏夹时的标题和显示在搜索引擎结果中的页面标题
并且一个<html>文档只能有一个<title>标题
五.<meta>标签
<meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词
元数据不会显示在客户端, 但是会被浏览器解析
-
charset 属性(页面编码)
<meta charset="UTF-8"> # 告诉浏览器是什么编码 -
http-equiv 属性(刷新和跳转)
<meta http-equiv="refresh" content="3,http://www.baidu.com"> # 3秒后跳转指定网页 <meta http-equiv="refresh" content="3"> # 3秒后跳转当前所在的网页 -
name 属性
<meta name="keywords" content="网上购物,京东,支付"> # 关键字,便于搜索引擎查找分类以及seo优化 <meta name="description" content="这是一个网上购物平台"> # 描述
六.<body>标签
该标签定义文档的主体, 称为内容主体标签, 一般网页内容均放入到该标签组中
通常我们在浏览器中看到的内容体都是在该标签内的
该标签元素包含文档的所有内容, 比如文本、超链接、图像、表格和列表等等
七.注释
- 单行注释
<!--单行注释-->
- 多行注释
<!--
多行注释1
多行注释2
多行注释3
-->
- 使用注释标志开始和结束位置
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
八.标签分类
1.双标签
<h1>...</h1>
<p>...</p>
<a href="#">...</a> # 等等
2.单标签(自闭合标签)
<img src="" alt="">
<br> # 等等
九.HTML特殊字符符号
1.常用
©版权 ©
®商标 ®
空格  
¥ ¥
$ $
& &
> >
< <
