HTML学习笔记-01
一、什么是HTML？
HTML：超文本标记语言（HyperText Markup Language）——编辑页面,实现页面内容的计算机语言
HyperText ：超文本
Markup：标记
Language：语言
知识点：
超文本：超越文本，可以包含除文字(文本)之外,其它类型的内容。例如：超链接,图片,视频,音频,动画…
标记语言：计算机语言的一种。特点：简单直观
规范：W3C万维网联盟，制定和维护web规范的组织
HTML文件拓展名：.html
二、HTML基本框架
1.说明
<>：标识符，区别内容与标签的符号
meta：标签名称，必须是html语言规定的标签名称
charset：标签属性，定义标签的功能和效果的执行
UTF-8：属性值，定义属性的具体内容
标签的属性有多种分类
2.lang=“en”与lang="zh-cn"
3. UTF-8
设定编码格式/字符集为UTF-8
计算机html语言，默认只支持英文、数组、符号等显示
如果需要页面显示中文，必须确保文件的编码格式和浏览器的显示编码格式都是UTF-8
GBK系列也支持显示中文
UTF-8是一款国际通用的编码格式，支持主流的文字语言的显示
是目前计算机语言中使用最广泛的编码格式
html、css、php、MySQL等等编码格式都是UTF-8
每个浏览器有默认的显示编码格式
sublime编辑器的默认编码格式，就是UTF-8
三、HTML的基本概念——标签
-
基本概念
组成html计算机语言的基本单位，实现html计算机语言的功能和效果
html — 标签
汉语 — 汉字 -
语法格式
<>：定义符号/标识符；区别标签与文本内容。有<>的内容，会按照标签处理
标签名称：必须是html规范标签名称
标签属性：
（1）全局属性：所有标签都支持的属性
name：标签的名称
id：标签的唯一标识符
style：设定标签的css样式
class：设定标签的类属性
title：设定标签的提示框/对话框属性
data-*：标签的自定义属性
（2）布尔属性：html定义的标签属性与属性值相同
（3）全局事件属性：配合JavaScript使用
标签属性的属性值：属性值必须以属性相配合，定义错误的属性值，会执行默认属性值
四、代码的注释
被注释的内容,只存在于源代码中,不会被计算机程序执行,没有任何的效果,往往作为程序的解释和说明。
标识符：
sublime：ctrl+/ 默认是单行注释。如果需要注释多行内容，需要选中注释内容，再使用快捷键。
五、HTML的基本标签
-
文本标签
（1）标题标签（h1–h6）
数值越大，文字越小；标签上下有垂直间距；内容文字会加粗显示。
（2）加粗（b/strong）
b标签和strong标签，显示效果相同，都是内容加粗
strong标签带有语义化，语义为强调内容，加强内容
语义化标签的作用：
对浏览器和搜索引擎更加友好，可以提高搜索排名。相同情况下，推荐使用语义化标签。
（3）斜体（i/em）
em：着重阅读内容
（4）删除线（s/del）
del：不确定，删除内容
（5）上标（sup）
（6）下标（sub）
如果有语义化需求，必须使用语义化标签实现，否则推荐使用css样式实现效果 -
块元素（div/p）
将页面内容，分块显示 -
图片标签
img：在页面中显示制定图片
在html文件中,显示加载另一个图片文件，必须要让html文件,明确图片文件的位置
计算机语言中,路径分为3种
（1）根相对路径:从盘符设定的路径：web项目中,禁止使用
（2）绝对路径:网址，web项目中一般也不会使用（地址容易被修改；加载需要时间）
（3） 相对路径:从源文件到目标文件的路径过程.使用计算机语言描述
必须明确两个文件的位置,通过源文件(html),找到目标文件(图片)
源文件:正在编辑的文件(html)
目标文件:需要加载显示的文件(图片)
属性：
（1）src：设定图片的路径(描述图片文件的位置)
文件名：表示找到目标文件，源文件和目标文件在同一个文件夹中。
文件夹名称/：表示进入文件夹，源文件和目标文件在同一个文件夹中,但是目标文件有独立的文件夹。
…/：表示返回上一级目录文件夹，源文件和目标文件,不在同一个文件夹中,有两个独立的文件夹。
（2）alt：当图片加载失败时，显示替换内容
当图片路径错误,无法正常显示图片时,会显示alt设定的属性值
a. 忽悠用户型: 图片正在加载 图片加载失败,请检查您的网络
b. 说明类型:说明图片的内容,路径,便于维护和修改
宽度、高度：
宽高属性可以决定图片的大小,使用css样式设定
图片的两个属性宽度,高度,可以决定图片的大小
如果只设定一项属性,另一项属性会按照图片的原始比例自动缩放
为了保持图片的原始比例不失真
- 图片常见的格式类型
（1）JPG/JPEG：常见的图片格式，图片大小相对较小，适用于web项目
（2）PNG：透明图
（3）GIF：动图