[前端老程]从零开始的HTML之旅（一）

零基础学前端从零开始的HTML之旅（一）前端老程

HTL课程目录零基础入门内容

什么是HTML
什么是HTML标签
HTML标签分类
HTML标签嵌套规则
HTML元素
HMTL文件格式
什么是HTML文档

1、什么是HTML？

HTML 是用来描述网页的一种语言

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言(有编译过程)，而是一种标记语言 (没有编译过程),HTML页面直接由浏览器执行
标记语言是一套标记标签 (markup tag) 、tag英文为标签的意思
HTML 使用标记标签来描述网页
通过浏览器解析标签来显示页面

HTML是一个纯文本文件（就是用txt文件改名而成）,用一些标签来描述文字
的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以
就是“超文本标记语言”了

HTML是由HTML元素构成的的文本文件
HTML元素是通过使用HTML标签进行定义的

2、HTML标签是什么？

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的,由开始标签和结束标签组成，比如和
某些HTML元素没有结束标签,也就是所谓的空标签,比如和
HTML里面标签不区分大小写,但为了严谨都使用小写,为下一代HTML也就是XHTML做准备,在XHTML中必须使用小写标签

3、HTML标签分类块状元素（block）
address - 地址、blockquote - 块引用、center - 居中对齐块、dir - 目录列表、div - 常用块级元素、dl - 自定义列表、fieldset - form控制组、form - 交互表单、h1~h6 - 标题、hr - 水平分隔线、isindex - input prompt、menu - 菜单列表、noframes - frames可选内容、noscript - 可选脚本内容、 ol - 有序列表、p - 段落、pre - 格式化文本、table - 表格、ul - 无序列表

特点：块状元素会独占一行，其宽度自动填满其父元素宽度，可以设置高度、宽度、内外边距等属性，设置了宽度还是占一行

作用：用于搭建网站结构、网页布局、承载内容

内联元素（inline）

a - 锚点、abbr - 缩写、acronym - 首字、acronym - 首字、b - 粗体(不推荐)、bdo - bidi override、big - 大字体、br - 换行、cite - 引用、code - 计算机代码、dfn - 定义字段、em - 强调、font - 字体设定(不推荐)、i - 斜体、img - 图片、input - 输入框、kbd - 定义键盘文本、label、q - 短引用、s - 中划线(不推荐)、samp - 定义范例计算机代码、select - 下拉列表、small - 小字体文本、span - 常用内联容器，定义文本内区块、strike - 中划线、strong - 粗体强调、sub - 下标、sup - 上标、textarea - 多行文本输入框、tt - 电传文本、u - 下划线、var - 定义变量

特点：和其他内联元素在一行显示，宽度就是它所容纳的文字或图片的宽度，不可改变，水平方向可以设置内外边距，竖直方向设置无效。

作用：用于加强内容显示,控制细节

4、HTML标签嵌套规则

不标准的嵌套，虽然功能实现了，但是对于浏览器渲染引擎的性能还是有些影响
1、块状元素可以包含内联元素或某些块元素，但是内联元素不能包含块元素，它只能包含其他的内联元素
2、有几个特殊的块状元素只能包含内联元素，不能再包含块状级元素，这几个特殊的标签是：h1~h6、p、dt
3、块状元素不能放在标签p里面
4、li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器（包含ul ol等）
5. 块级元素与块级元素并列、内联元素与内联元素并列

嵌套的时候注意代码的缩进，有助于提高阅读代码的效率

正确的嵌套方式能提高浏览器渲染引擎的性能和速度

5、HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码
HTML元素语法

      HTML 元素以开始标签起始,结束标签终止
      元素的内容是开始标签与结束标签之间的内容
      某些 HTML 元素具有空内容（empty content）
      空元素在开始标签中进行关闭（以开始标签的结束而结束）
      大多数 HTML 元素可拥有属性

6、HTML文件格式与文档

HTML文件格式1、文件后缀名为.htm或.html
2、web服务器对中文文件名不能很好的支持，所以文件名尽量不
HTML文档=网页页面顾名思义HTML文档就是用HTML编写的超文本文档
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是解析标签来显示页面的内容

嵌套的HTML元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）
HTML 文档由嵌套的 HTML 元素构成

添加零基础学前端，零起步快速入门