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的基本概念——标签

1. 基本概念
   组成html计算机语言的基本单位，实现html计算机语言的功能和效果
   html — 标签
   汉语 — 汉字

2. 语法格式
   <>：定义符号/标识符；区别标签与文本内容。有<>的内容，会按照标签处理
   标签名称：必须是html规范标签名称
   标签属性：
   （1）全局属性：所有标签都支持的属性
   name：标签的名称
   id：标签的唯一标识符
   style：设定标签的css样式
   class：设定标签的类属性
   title：设定标签的提示框/对话框属性
   data-*：标签的自定义属性
   （2）布尔属性：html定义的标签属性与属性值相同
   （3）全局事件属性：配合JavaScript使用
   标签属性的属性值：属性值必须以属性相配合，定义错误的属性值，会执行默认属性值

四、代码的注释
被注释的内容,只存在于源代码中,不会被计算机程序执行,没有任何的效果,往往作为程序的解释和说明。
标识符：

sublime：ctrl+/ 默认是单行注释。如果需要注释多行内容，需要选中注释内容，再使用快捷键。

五、HTML的基本标签

1. 文本标签
   （1）标题标签（h1–h6）
   数值越大，文字越小；标签上下有垂直间距；内容文字会加粗显示。
   （2）加粗（b/strong）
   b标签和strong标签，显示效果相同，都是内容加粗
   strong标签带有语义化，语义为强调内容，加强内容
   语义化标签的作用：
   对浏览器和搜索引擎更加友好，可以提高搜索排名。相同情况下，推荐使用语义化标签。
   （3）斜体（i/em）
   em：着重阅读内容
   （4）删除线（s/del）
   del：不确定，删除内容
   （5）上标（sup）
   （6）下标（sub）
   如果有语义化需求，必须使用语义化标签实现，否则推荐使用css样式实现效果

2. 块元素（div/p）
   将页面内容，分块显示

3. 图片标签
   img：在页面中显示制定图片
   在html文件中,显示加载另一个图片文件，必须要让html文件,明确图片文件的位置

计算机语言中,路径分为3种
（1）根相对路径:从盘符设定的路径：web项目中,禁止使用
（2）绝对路径:网址，web项目中一般也不会使用（地址容易被修改；加载需要时间）
（3） 相对路径:从源文件到目标文件的路径过程.使用计算机语言描述
必须明确两个文件的位置,通过源文件(html),找到目标文件(图片)
源文件:正在编辑的文件(html)
目标文件:需要加载显示的文件(图片)

属性：
（1）src：设定图片的路径(描述图片文件的位置)
文件名：表示找到目标文件，源文件和目标文件在同一个文件夹中。
文件夹名称/：表示进入文件夹，源文件和目标文件在同一个文件夹中,但是目标文件有独立的文件夹。…/：表示返回上一级目录文件夹，源文件和目标文件,不在同一个文件夹中,有两个独立的文件夹。（2）alt：当图片加载失败时，显示替换内容
当图片路径错误,无法正常显示图片时,会显示alt设定的属性值
a. 忽悠用户型: 图片正在加载 图片加载失败,请检查您的网络
b. 说明类型:说明图片的内容,路径,便于维护和修改

宽度、高度：
宽高属性可以决定图片的大小,使用css样式设定
图片的两个属性宽度,高度,可以决定图片的大小
如果只设定一项属性,另一项属性会按照图片的原始比例自动缩放
为了保持图片的原始比例不失真

4. 图片常见的格式类型
   （1）JPG/JPEG：常见的图片格式，图片大小相对较小，适用于web项目
   （2）PNG：透明图
   （3）GIF：动图