前端第一天

HTML基础

一、HTML基础语法

1.什么是HTML

HTML（Hypertext Markup Language）- 超文本标记语言。
标记语言 - 在不同的文本中加不同的标记让文本的意义和功能不同，例如：markdown；HTML大小不敏感。

2.标签

标签就是标记，不同的标签功能不一样。
语法：

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

3.标签的分类

从可见性来分：

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

head标签和非head中的标签：

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

二、head中可以使用的标签

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

1.link标签的使用

<link rel="stylesheet" type="text/css" href=""/>

• rel属性 - 设置导入文件的作用。stylesheet：外部样式表 icon：网页图标
• type属性 - 指定导入文件的类型和后缀。文件类型/文件后缀名
• href属性 - 设置被导入的文件的路径

2.文件路径的写法

绝对路径：文件在计算机中的全路径。
相对路径：

• 使用.表示当前目录（当前写代码的文件对应目录的地址表示当前目录）
  . - 表示当前目录
• 使用…表示当前目录的上层目录
• 使用…表示当前目录的上层目录的上层目录

三、文本标签

1.标题标签和段落标签

标题标签：h1 ~ h6（如果文本的意义是标题的时候就选标题标签）
段落标签：一个段落就对应一个p标签

2.其他的普通文字标签：font

<font size="" color=""></font>

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

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

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

4.列表

无序列表：ul-li

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

有序列表：ol-li

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

自定义列表

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

5.图片和超链接

图片标签：img

<img src="./img/baidu.ico" title="百度" alt="加载失败">

• src属性 - 图片地址； 可以是本地图片的相对路径；也可以是网路图片地址
• title属性 - 设置图片标题
• alt属性 - 图片加载失败的提示信息

超链接：a

<a href="https://www.huya.com/" target="_blank">虎牙</a>

• 标签内容 - 超链接可点击可看见的部分
• href属性 - 跳转目的地
  a.网页地址 - 直接跳转到指定网页
  b.本地的html文件路径 - 直接打开html文件对应的页面
  c.id选择器（id属性值前加#）- 将当前页面滚动到id选择器指定的位置
  d.空 - 刷新
• target属性 - self（默认值），在当前页面中加载新的页面;_blank,在新的窗口中加载新的页面

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

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

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

tr：

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

td：

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

7.不规则的表格

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