前言

其实前两周我就开始学习前端了，但是忘了做笔记....所以重新来过吧，加油！

笔记

标题标签

标签语义：作为标题使用，并且依据重要性递减
特点：
1.加了标题的文字会变粗，字号也会依次变大。
2.一个标题独占一行

代码

标题标签

标题一共六级选，

文字加粗一行显。

由大到小依次减，

从重到轻随之变。

语法规范书写后，

具体效果刷新见。

段落标签

标签语义：可以把 HTML 文档分割为若干段落。
特点：

1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。
   说明：在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，

   标签用于定义段落，它可以将整个网页分为若干个段落。

<p>标签为单词 paragraph [ˈpærəgræf] 的缩写，意为段落。

代码

<p>我是第一个段落</p>
<p>我是第二个段落</p>

换行标签

标签语义：强制换行。
特点：

1. <br/> 是个单标签。

2. <br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
   说明：在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br/>(一般会在/前面打上一个空格，但是在Markdown编辑器里加上空格就直接转换成换行符了，所以去掉了，切记！！)。

   代码

在一个清晨，他趁厨师不在，偷偷地溜进厨房自己动手做菜吃，但他把盐当成了
糖，把油看成了醋，就这样糊里糊涂地做。过了一会儿，国王听到了厨师的脚步声，于是，慌乱中逃跑了，走时他忘记把火关掉，火越烧越大。当厨
师回来了，双手推开门，眼前熊熊烈火，一片狼藉，焦急万分。

案例1

体育新闻：https://blog.muxiaoguo.cn/classcase/1.html

文本格式化标签

标签语义：突出重要性，比普通文字更重要
说明：在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

<div>标签和<span>标签

标签语义：<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。 特点：

1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
2. <span> 标签用来布局，一行上可以多个 <span>。小盒子

代码

div标签：

<div>我是div标签，我一个人单独占一行<div>
<div>我是div标签，我一个人单独占一行<div>

span标签：

<span>新浪</span>
<span>百度</span>
<span>搜狐</span>

图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
单词 image 的缩写，意为图像。
src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。

代码

<img src="图像URL" />

1.图像标签的属性

图像标签的其他属性：

图像标签属性注意点

1. 图像标签可以拥有多个属性，必须写在标签名的后面。
2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3. 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

重点知识

1. 图像标签的必须属性是什么?
2. 图像标签的alt和title有什么区别？

2.图像标签的路径

路径

页面中的图片会非常多， 通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为：

1. 相对路径
2. 绝对路径

路径之相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，图片相对于 HTML 页面的位置

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是图片相对于 HTML 页面的位置。

路径之绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。

3.超链接标签

链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

单词 anchor [ˈæŋkə(r)] 的缩写，意为：锚。
两个属性的作用如下：

链接分类

1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 。
3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置

• 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如 第2集
• 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：

  第2集介绍

4.注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“”结束。

快捷键: ctrl + /
一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的.
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

5. 特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

案例2

圣诞老人：https://blog.muxiaoguo.cn/classcase/2.html

表格标签

表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
Pink老师总结: 表格不是用来布局页面的,而是用来展示数据的.

代码

<table>
  <tr  align="center">
    <td>支出项目</td>
    <td>单价（元）</td>
    <td>数目</td>
    <td>金额（元）</td>
  </tr>
  <tr align="center">
    <td>垃圾箱</td>
    <td>30</td>
    <td>12</td>
    <td>360</td>
  </tr>
  <tr align="center">
    <td>垃圾牌</td>
    <td>100</td>
    <td>12</td>
    <td>1200</td>
  </tr>
  <tr align="center">
    <td>宣传单</td>
    <td>0.08</td>
    <td>400</td>
    <td>32</td>
  </tr>
  <tr align="center">
    <td>宣传小册子</td>
    <td>3</td>
    <td>250</td>
    <td>750</td>
  </tr>
  <tr align="center">
    <td>合计</td>
    <td>——</td>
    <td>——</td>
    <td>2342</td>
  </tr>
</table>

表格的基本语法

实际书写代码时删除 {防转义} 字样即可

<table>
 <tr>
 <td>单元格内的文字</td>
 ...
 </tr>
 ...
</table>

1. <table> </table> 是用于定义表格的标签。
2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容。

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

<th> 标签表示 HTML 表格的表头部分(table head 的缩写)

<table>
 <tr>
 <th>姓名</th>
 ...
 </tr>
 ...
</table>

表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置.
目的有2个:

1. 记住这些英语单词,后面 CSS 会使用.
2. 直观感受表格的外观形态.

案例3

表格：https://blog.muxiaoguo.cn/classcase/3.html

表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分.
在表格标签中，分别用：标签 表格的头部区域、标签 表格的主体区域. 这样可以更好的分清表
格结构。

1. ：用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。
2. ：用于定义表格的主体，主要用于放数据本体 。
3. 以上标签都是放在 标签中。

代码

<table>
<thead>
<tr>
<td>表头1</th>
<td>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>

合并单元格

特殊情况下,可以把多个单元格合并为一个单元格, 这里学会最简单的合并单元格即可.

1. 合并单元格方式
2. 目标单元格

3. 合并单元格的步骤
   ![L{(T0UKG{05UG0%3N]A)T~K.png][1]

   合并单元格方式：

• 跨行合并：rowspan="合并单元格的个数"
• 跨列合并：colspan="合并单元格的个数"
  

目标单元格：(写合并代码)

• 跨行：最上侧单元格为目标单元格, 写合并代码
• 跨列：最左侧单元格为目标单元格, 写合并代码
  

合并单元格三步曲

1. 先确定是跨行还是跨列合并。
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：。

3. 删除多余的单元格。

   代码

   <table align="center" border="1" cellspacing="0" winth="800" height="200">
   <thead>
   <tr>
   <th>表头1</th>
   <th>表头2</th>
   <th>表头3</th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td colspan="2" rowspan="2"></td>
   <td></td>
   </tr>
   <tr>
   <td></td>
   </tr>
   <tr>
   <td></td>
   <td colspan="2"></td>
   </tr>
   </tbody>
   </table>
   

效果

表格学习整体可以分为三大部分

1. 表格的相关标签
2. 表格的相关属性
3. 合并单元格

表格的相关标签

我们学习了 table 标签 tr 行 标签 td 单元格 标签 th 表头单元格 标签 thead 表格头部区域标签