Java学习笔记-Day42 HTML概述
一、前端简介
HTML (Hyper Text Markup Language) 超文本标记语言，在浏览器中配合CSS样式表显示网页，配合ECMAscript（JavaScript）完成网页特效。
CSS(Cascading Style Sheets) 层叠样式表，是一种用来表现HTML元素显示方式的语言，包含元素的美观修饰、位置定位等。
ECMAScript（JavaScript ） 是浏览器可以解析并执行的语言，可以控制网页上元素，从而形成各种动态效果。 因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
ECMAScript与JavaScript 的关系：JavaScript 是一种基于 ECMAScript 规范的脚本语言，并在此基础上进行了自己的封装。ECMAScript 不是一种编程语言，仅仅是一种脚本语言规范，由欧洲计算机协会制定和发布，任何基于此规范实现的脚本语言都要遵守它的约定。所以，ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现。
浏览器是html、css、js的解析器、执行器。
Web前端的开发主要工具：
- Hbuilder：免费、轻量级，占用资源少，可作为移动端开发平台（打包工具），开发前端html、css、js、jquery等提示效果好，但对与nodejs需要下载插件，且下载后效果不佳。
- Visual Studio Code（VS code）：功能强大，免费，开源，轻量。
二、HTML 语言
1、简介
HTML 的全称是 Hyper Text Markup Language，即超文本标记语言，是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。
HTML 是一种建立网页文件的语言，通过标记式的指令，将影像、声音、图片、文字、动画、影视等内容显示出来。
每一个 HTML 文档都是一种静态的网页文件，这个文件里面包含了 HTML 指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言。
HTML 的普遍应用带来了超文本的技术（ 通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接）。
超文本（Hypertext）是指使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 超文本的页面内可以包含图片、链接，甚至音乐、程序等非文字元素。现在超文本都是以电子文档的方式存在，其中的文字包含有可以链结到其他位置或文档的连结，允许从当前阅读位置直接切换到超文本连结所指向的位置。超文本的格式有很多，比如HTML。
HTTP（超文本传输协议）规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作 。
2、HTML的编写规范
（1）在输入开始标签时同时输入结束标签。
（2）保证缩进格式（子标签或者内容都要缩进一个tab键）。
（3）主动添加注释（快捷键：选中后 Ctrl+/）。
3、HTML标签的声明
HTML标签的声明格式：<标签名 属性名=“属性值></标签名>
<a href="http://www.baidu.com">百度</a>
4、HTML的调试
开发者工具（快捷键F12）是前端工程师调试程序的工具，其中的 Elements 窗口用来调试html以及css程序，在右侧可以看到当前元素的样式和大小等。
可以通过检查功能可以快速定位选中的元素。
5、标记语言的特点
标记语言是描述 HTML 的语法格式，采用标签的方式描述网页内的元素。
标记语言将数据、媒体、文本内容以固定的层级格式排列起来进行编程。标记语言除了表示文字外，还可以表示图片、媒体等特殊信息。标记语言具有层级关系。
（1）封闭性
- 容器类标签要成对的出现。例如
<div></div>。 - 非容器类标签需要特殊声明。例如
<input />。
（2）嵌套性：标签存在层级关系。
（3）支持内置属性。 属性设置的格式为：<标签名 属性名=“属性值></标签名>。
6、头标签head
头标签包含当前网页的元数据描述，如搜索关键字、编码、引入外部文件等，头标签内的内容不会出现在网页显示区域。
头标签包含以下内容：
（1）title标签：用来声明网页的标题。
<title>标题</title>
（2）meta标签：用来描述 HTML网页文档的基本属性，例如作者、日期、网页描述、关键词等。
常用的元数据描述：
- keywords－关键字
<meta name=“Keywords” Content="vacation,greece">
- Description－简介
<meta name="Description" Content="网页的简述">
- Author－作者
<meta name="Author" Content="张三，[email protected]">
- 文档编码 - html5设定编码方式
<meta charset=“UTF-8”>
（3）style标签：用来内嵌css样式。
（4）link标签：用来引入css样式文件。
（5）script标签：用来引入javascript程序。
7、编码格式
网页编码格式取决于html代码保存的编码格式以及浏览器打开网页的编码格式。
Hbuilder的编码格式默认按照UTF-8格式保存。
浏览器打开网页的编码格式默认根据meta标签声明的编码格式打开，但可以修改。
保证网页程序不会乱码要牢记：
- 浏览器支持meta设定的编码。
- meta设定的编码与html文件保存的编码一致。
8、特殊字符
特殊字符是需要使用其他字符代替的字符，主要有如下两种使用场景：
- ① 使用频率较少且难以直接输入的符号，比如数学符号、单位符号、制表符等。
- ② 需要输入的符号是 HTML 的关键字符号如单引号、双引号、尖括号等。
| HTML 原代码 | 显示结果 | 描述 |
|---|---|---|
< |
< | 小于号或显示标记 |
> |
> | 大于号或显示标记 |
& |
& | 可用于显示其它特殊字符 |
" |
“ | 引号 |
® |
® | 已注册 |
© |
© | 版权 |
™ |
™ | 商标 |
  |
半个空白位 | |
  |
一个空白位 | |
|
不断行的空白 |
9、注释
注释：当前程序文字描述，用于提高程序的可读性。
HTML 注释的特点：
- 加载到客户端，从而影响网页打开速度。
- 不会被执行，不会影响加载后的执行。
- html、css、js的注释可以被第三方工具删除。
HTML 注释的编写方式：
<!--注释的文字-->
建议在程序开发中增加注释，提高代码的质量。
10、Body标签
Body标签：网页内容的容器，Body标签的子标签用来渲染网页显示，所有标签都是忽略大小写的，但推荐小写。
11、标签的闭合特性
闭合标签：由开始标签和结束标签组成。开始标签是被括号包围的元素名， 结束标签是被括号包围的斜杠和元素名。
<p>body子标签</p>
<a>body子标签</a>
非闭合标签：是被括号包围的元素名和斜杠。
<input/>
<img />
12、标签的层级特性
标签的层级特性：闭合的html标签内可以包含一个或多个子标签，因此html的标签是一个多叉树的数据结构，多叉树的根是html标签。
13、标签的属性描述
标签的属性描述：每个标签都具备一组公用或当前标签独有的属性，属性的作用是描述标签的外观行为或识别当前标签的标识。
属性的声明语法：<标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx</标签名>
标签的公用属性（所有标签都具备的属性）：
- class：规定当前元素所引用的样式类名称。
- id：规定当前元素在网页上的唯一标识，一般在css、js中会根据id检索当前元素。
- name：当前元素在文档上的名称，可以重复。
- style：规定当前元素的显示样式，取值为css样式表。
- title：规定当前元素的标题，类型为文本，可在工具提示中显示。
以上是html4标准常用的公用属性
14、标签的默认显示方式
标签的默认显示方式：每个标签都拥有默认的显示方式，每种显示方式呈现的效果不同。
默认的显示方式如下：
（1）块级元素（block）：独立占有一行，宽度缺省值为100%，大小、内边距、外边距可以调整。
（2）内联元素（inline）：不独立占有一行，大小、内边距、外边距不可以调整，取决于内容的大小。
（3）内联块级元素（inline-block）：不能独占一行，但大小、内边距、外边距可以调整。
14.1、块级元素的特点
块级元素的特点：块级元素总是在新行上开始，高度和宽度可以使用css定义（如果当前元素的子元素小于或超出父元素，默认情况下也不会影响父元素的大小），行高以及外边距和内边距都可使用css控制。
块级元素举例：div、p、h1、h2、h3、h4、form、ul、ol、dl标签等。
14.2、内联元素的特点
内联元素的特点：内联元素又称为文本模式，即一个挨着一个，都在同一行按从左至右的顺序显示。内联元素和其他元素都在同一行上，高度和宽度无法设定，即使使用css设定也不生效，高度和宽度取决于子元素的高度和宽度，行高以及外边距和内边距都无法由css控制。
内联元素举例：a、b、br、i、span标签等。
14.3、内联块级元素的特点
内联块级元素的特点：内联块级元素具备内联元素和块级元素的一部分特点。内联块级元素和其他元素都在一行上。但是高度、宽度可以设定，行高以及外边距和内边距都由css控制。
内联块级元素举例：input、select、option等。