目录

1. HTML 语法规范

1.1 基本语法概述

1.2 标签关系

2. HTML 基本结构标签

2.1 第一个 HTML 网页

2.2 第一个 HTML

2.3 基本结构标签总结​编辑

3. 网页开发工具

VSCode 的使用

VSCode 工具生成骨架标签新增代码

3.1 文档类型声明标签

3.2 lang 语言种类

3.3 字符集

3.4 总结


1. HTML 语法规范

1.1 基本语法概述

1.    HTML 标签是由尖括号包围的关键词,例如 <html>。

2.    HTML 标签通常是成对出现的,例如 <html> 和 </html> ,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。

3.    有些特殊的标签必须是单个标签(极少情况),例如 <br />,我们称为单标签。

1.2 标签关系

双标签关系可以分为两类:包含关系和并列关系 

2. HTML 基本结构标签

2.1 第一个 HTML 网页

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。

HTML页面也称为 HTML 文档。

2.2 第一个 HTML

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。

HTML 文档的的后缀名必须是 .html 或 .htm ,浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。

此时,用浏览器打开这个网页,我们就可以预览我们写的第一个 HTML 文件了。

2.3 基本结构标签总结

3. 网页开发工具

VSCode 的使用

1. 双击打开软件。

2. 新建文件(Ctrl + N )。

3. 保存(Ctrl + S ), 注意移动要保存为 .html 文件

4. Ctrl + 加号键 ,Ctrl + 减号键  可以放大缩小视图

5. 生成页面骨架结构。输入! 按下 Tab 键。

6. 利用插件在浏览器中预览页面:单击鼠标右键,在弹出窗口中点击“Open In Default Browser”。

VSCode 工具生成骨架标签新增代码

1.    <!DOCTYPE> 标签

2.    lang 语言

3.    charset 字符集

3.1 文档类型声明标签

<!DOCTYPE> 文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE  html>

这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页.

注意:

1. <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。

2. <!DOCTYPE>不是一个 HTML 标签,它就是 文档类型声明标签。

3.2 lang 语言种类

用来定义当前文档显示的语言。

1.    en定义语言为英语

2.    zh-CN定义语言为中文

简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页

其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文

这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的

3.3 字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

在<head>标签内,可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta  charset="UTF-8"  />

charset 常用的值有:GB2312 、BIG5 、GBK 和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所有国家需要用到的字符。

注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码,尽量统一写成标准的 "UTF-8",不要写成  "utf8" 或 "UTF8"。

3.4 总结

1.  以上三个代码 vscode 自动生成,基本不需要我们重写。

2.  <!DOCTYPE  html>文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面。

3.  <html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示。

4.  <meta  charset=“ UTF-8”  />  必须写.  采取  UTF-8来保存文字.  如果不写就会乱码.具体原理后面分析。

HTML 语法规范及其基本结构标签相关推荐

  1. 网页概念、常用浏览器及内核、Web标准、HTML语法规范和基本结构标签

    网页.常用浏览器及内核.Web标准.HTML语法规范和基本结构标签 一.网页 1.1.什么是网页? 1.2.什么是HTML?(重点) 1.3.网页的形成? 二.常用浏览器 三.浏览器内核 四.Web标 ...

  2. HTML(一、语法规范,二、结构标签,三、开发工具,四、HTML常用标签,五、注释和特殊字符)

    文章目录 前言 一.html语法规范 1. html基本语法规范 2. 标签关系 二.基本结构标签 1. 第一个 HTML 网页 2. 基本结构标签总结: 三.开发工具 1. vscode工具的创建工 ...

  3. HTML简介(网页的基本组成,什么是HTML,Web标准的三大组成部分),HTML标签(HTML语法规范,标签关系),HTML结构标签(第一个HTML)

    网页的基本组成 网页是构成网站的基本元素,通常由图片.链接.文字.声音.视频等元素组成,通常我们看见的网页都是.htm和.html后缀结尾的文件,因为都称为HTML文件 什么是HTML HTML是一种 ...

  4. JSLint检测Javascript语法规范

    前端javascript代码编写中,有一个不错的工具叫JSLint,可以检查代码规范化,压缩JS,CSS等,但是他的语法规范检查个人觉得太"苛刻"了,会提示各种各样的问题修改建议, ...

  5. HTML学习6~29(HTML语法规范)

    1 HTML语法规范 1.1 基本语法概述 HTML标签是由尖括号包围的关键词,例如<html>. HTML 标签通常是成对出现的,例如<html>和</html> ...

  6. 前端与移动开发-----CSS(语法规范+基础选择器+文本属性)

    CSS css简介 1,CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.. 2,有时我们也会称之为 CSS 样式表或级联样式表. 3,CSS 是也是一种标记语言 . ...

  7. HTML第一章 (WEB基础知识、 HTML入门、HTML的语法规则、HTML常用标签汇总、图片与超链接、HBuilder的快捷键)

    目录 一.WEB基础知识 二.HTML入门 三.HTML的语法规则 四.HTML标签 五.图片与超链接 六.HBuilder的快捷键 每日一句 一.WEB基础知识 我们可以做什么? WEB前端 大前端 ...

  8. 【编码经验】数据结构与语法规范、计算机算法、架构模式设计、代码重构

    系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录 前言 编码的三个层次 第一层:数据结构与语法规范层 0.clang-for ...

  9. CSS中一些语法规范和代码风格

    CSS:美化网页和布局页面 语法规范: (1)CSS规则由两个主要的部分构成,选择器以及一条或多条声明: 注意:选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式: 属性和属性 ...

最新文章

  1. Django视图之介绍、项目准备、URL、路由命名、reverse反解析和Postman测试
  2. Ztree节点增加删除修改和Icheck的用法
  3. 用eclipse在windows下搭建cocos2d-x开发环境
  4. 关于Go ROOT 和Go PATH的设置
  5. java获得一个空闲端口号_Python找出9个连续的空闲端口
  6. python中dict和lambda结合的小例子
  7. 计算机职称excel2007,职称计算机Excel2007中文电子表格考试大纲
  8. HTTP 头部字段 Cache Control max-age = 0 和 no-cache 的区别
  9. Codeforces 313
  10. 技术实践第二期|Flutter异常捕获
  11. 基于Linux和MiniGUI的嵌入式系统软件开发指南(六)
  12. 基于JAVA+SSH+MYSQL的大学生入学注册自助系统
  13. [SOA] Mule ESB 3.x 入门(二)—— 配置(spring, properties, log4j)
  14. 一文读懂数据湖 | 凌云时刻
  15. span 居中_H5元素的水平垂直居中布局总结
  16. 计算机照片文件大小,怎么把照片文件大于30k
  17. 高精度电压基准电路-TL431实现
  18. vue-自定义组件之组件的继承
  19. 休假管理系统的用况详情和用况表
  20. 小米互联网思维新思考20141220

热门文章

  1. 2020 最美最有意思辞职信
  2. 纤亿通的光模块通常需要经过哪些测试流程?
  3. C#游戏跨服架构进化之路
  4. revert与reset
  5. 使用浏览器访问服务器端页面
  6. 区块链研究生专业_“区块链大数据赋能低碳发展”高端研讨活动 在增城低碳总部举行...
  7. 23个 Web 开发中的侧边栏菜单练习实例
  8. (1)Artemis简介
  9. java poi row cell,使用POI进行Excel操作的总结一——创建Workbook,Sheet,Row以及Cell
  10. spark sql中的first函数在多个字段使用实例