学习HTML的第一天

一、HTML基础语法

1.什么是HTML

HTML（Hypertext Markup Language） - 超文本标记语言
标记语言 - 在不同的文本中加不同的标记让文本的意义和功能不同, 例如：markdown、html
HTML大小不敏感： html == Html == HTML == hTMl (小写和大写功能一样)

2.标签 - 就是标记

标签是HTML的基本结构，不同的标签功能不一样
语法：
双标签(标准标签): <标签名 属性1=属性值1 属性2=属性值2 …>标签内容</标签名>
单标签: <标签名 属性1=属性值1 属性2=属性值2 …> 或者 <标签名 属性1=属性值1 属性2=属性值2 …/>

说明：
a.<>和/ - 固定写法
b.标签名 - 不是程序员自己命名，有哪些标签名是html规定好的。哪些标签是双标签哪些标签是单标签也是固定。
注意：标签名前后不能随意添加空格
c.属性 - 以 属性=属性值 的形式存在，多个属性之间用空格隔开; 不同的标签有哪些属性是确定的；属性值不管是什么值都必须放在""中
d.标签内容 - 双标签开始标签和结束标签中间的部分就是标签内容；标签内容很灵活可以是独立的文本，也可以是一个标签，还可以多个标签或者多个标签和文本的组合。

3.标签的分类

1）从可见性来分：

可见标签：p标签、a标签、 img标签
不可见标签：meta标签、style标签、script标签、link标签…

2)head中的标签和非head中的标签(body标签)

head中标签: meta、title、style、link、script、base
body标签：p、a、b、img、table、lable、 ul、ol、li等等、style、link、script、base

二、head中的标签

head中可以使用的标签： meta、title、link、style、script、base
meta标签 - 网页元数据，主要用来对网页进行基本设置，包括：设置文本编码方法、设置网页搜索关键字、网页简介、网页类型等
title标签 - 网页标题
link标签 - 导入外部文件(导入图片作为网页图标、导入外部样式表)

1.link标签的使用

rel属性 - 设置导入文件的作用。 stylesheet：外部样式表 icon：网页图标
type属性 - 指定导入文件的类型和后缀。 文件类型/文件后缀名
text/css: 导入一个后缀是.css的文本文件
image/png: 导入一个后缀是.png的图片文件
href属性 - 设置被导入的文件的路径

2.文件路径的写法

1.绝对路径:

文件在计算机中的全路径

2.相对路径:

1. 使用.表示当前目录(当前写代码的文件对应目录地址表示当前目录)
2. 使用…表示当前目录的上层目录
3. 使用…表示当前目录的上层目录的上层目录

三、文本标签

1.标题标签：h1~h6

如果文本的意义是标题的时候就选标题标签

<h1>一级标签</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

2.段落标签：p

一个段落就对应一个p标签

3.其他的普通文字标签：font 、span

font的size属性 - 设置字体大小
font的color属性 - 设置字体颜色

4.文本效果相关的标签和符号

html中手动敲回车无用，手动添加空格也没有用；
如果需要在内容中加换行，需要添加 br 标签。
如果需要在内容中加空格，需要使用html符号：& nbsp; - 空一个像素 & emsp; - 空一个空格
加粗：b标签、strong标签(有强调的意思)
倾斜：i标签、em标签(有强调的意思)

四、列表

1.无序列表: ul-li

ul标签 - 表示整个容器
li标签 - 列举容器中所有的元素，个数和元素的个数一致

2.有序列表: ol-li

ol - 表示整个列表
li - 表示列表中的元素

3.自定义列表: dl-dt-dd

dl - 表示整个列表
dt - 分类
dd - 每个分类中的元素

五、图片和超链接

1.图片标签： img

src属性 - 图片地址；可以是本地图片的相对路径；也可以是网络图片地址
title属性 - 设置图片标题（鼠标悬停在图片上的时候才会显示）
alt属性 - 图片加载失败的提示信息

2.超链接：a

1)标签内容 - 超链接可点击可看见的部分

2)href属性 - 跳转目的地

网页的地址 - 直接跳转到指定的网页
本地的html文件路径 - 直接打开html文件对应的页面
id选择器(id属性值前加#) - 将当前页面滚动到id选择器指定的位置
空 - 刷新（重新加载页面）

3)target属性

_self(默认值)，在当前页面中加载新的页面
_blank, 在新的窗口中加载新的页面

六、表格标签

1.表格标签：table-tr-td

table标签 - 表示整个表格
tr标签 - 表示一行
td 标签 - 表示一个单元格

table:

border属性：设置边框线的宽度（默认值是0）
cellspacing属性：设置单元格和单元格之间的间隙(默认是1)
bgcolor属性：设置整个表格的背景颜色
width属性：设置整个表格的宽度
height属性：设置整个表格的高度
cellpadding属性：设置表格内容和边框之间的距离
align属性：left/right/center; 设置整个表格在网页中的对齐方式方式

tr:

bgcolor属性：设置一行的背景颜色
height属性：设置整个一行的高度
align属性：center,设置一行中所有的单元格内容居中

td:

bgcolor属性： 设置一个单元格的背景颜色
width属性： 设置td所在的列的宽度
align属性：设置指定单元格中内容的对齐方式

七、不规则列表

colspan属性：列的合并
rowspan属性：行的合并