前言：
本篇文章主要记录了学习html时的一些笔记
一、HTML简介
1.什么是HTML？
HTML指的是超文本标记语言，它是用来描述网页的一种语言。Web标准为结构+表现+行为。
HTML主要负责网页的结构。
注意：HTML不是一种编程语言，而是一种标记语言（标记语言是一套标记标签）。
2.HTML标签
HTML标记标签又称为标签。
2.1 基本语法概述
（1）HTML标签是由尖括号包围的关键词。
（2）HTML标签通常是成对出现的，比如<p>和</p>标签对中的第一个标签是开始标签，第二个标签是结束标签。
（3）有些特殊的标签必须是单个标签（极少情况），例如<br />
一个HTML元素包含了开始标签与结束标签。例如：
<h1>一级标题</h1>2.2 标签关系
双标签关系可以分为两类：包含关系和并列关系。
(01）包含关系
<head>
<title> </title>
</head>(02）并列关系
<head> </head>
<body> </body>3. HTML基本结构标签
3.1 第一个HTML网页
每个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写。
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
<html>
<head>
<title> 我der第一个页面 </title>
</head>
<body>
心怀澎湃
</body>
</html>二、HTML常用标签（上）
1.标签语义
每个标签的语义不同，语义简单来说可以理解为标签的含义，即这个标签的作用，我们需要做的就是记住每个标签的语义，根据语义的不同，选择合适的标签，使页面结构变清晰。
2.html常用标签
2.1 标题标签
标题标签会使网页更具有语义化。HTML主要有六个等级的网页标题。
<h1>字体最大，按重要性递减。
注意 加了标题的文字会自动加粗，字号也会随之变大。
一个标题独占一行
2.2 段落标签
段落标签<p></p>可以把HTML文档分为若干段，使文字更加有条理。
<p>我是一个段落标签</p>注意 1.被<p></p>标签框住的文字会根据浏览器窗口的大小自动换行
2.段落和段落间保有空隙
2.3 换行标签
强制换行标签<br />
注意 <br />是个单标签，与段落不同，换行后不插入间距
2.4 文本格式化标签
根据网页需要添加，突出重要性，使文本达到粗体，斜体，下划线等效果。
| 语义 | 标签 |
|---|---|
| 加粗 | <strong></strong>（更推荐使用）或<b></b> |
| 倾斜 | <em></em>（更推荐）或<i></i> |
| 删除线 | <del></del>（更推荐）或<s></s> |
| 下划线 | <ins></ins>（更推荐）或<u></u> |
2.5 图像标签和路径
2.5.1 图像标签
img标签用来定义HTML页面中的图像。
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
注意 图像标签中可以拥有多个属性，必须写到标签名的后方；属性之间部分先后顺序，标签名与属性，属性与属性间均以空格分开；属性采取取键值对的格式，属性=“属性值”
2.5.2 路径
路径是指在众多图片当中指定图像文件的位置，可以分为：1.相对路径 2.绝对路径
1.相对路径：
图片相对于HTML页面的位置。从代码所在文件夹出发去寻找目标文件的
2.绝对路径：
指目录下的绝对位置，直接到达目标位置。
2.6 超链接标签
在HTML中，超链接标签用来定义超链接，将一个界面衔接到另一个界面上。
<a href = "跳转目标" target = "目标窗口的弹出方式">若暂时无链接目标时，可以先用“#”代替跳转目标
<a href = "#">锚点链接：在同一个页面中，点击锚点链接，可以快速定位到页面中所对应的位置。
2.7 表格标签
2.7.1. 表格的基本语法
<table>是用来定义表格的标签，<tr>标签是用来定义表格中的行（必须嵌套在<table>标签中），<td>用来定义表格中的单元格（必须嵌套在<tr>标签中）
表格的基本语法：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>2.7.2 表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
<th> 标签表示HTML表格的表头部分
2.7.3 表格属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| align | left,center,right | 规定表格相对周围元素的对齐方式 |
| border | 1或“” | 规定表格单元是否拥有边框，默认为"",表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
2.7.4 表格结构标签
为了使结构更明显，将表格分为表格头部<thead>和表格主体<tbody>两大部分。
2.7.5 合并单元格
合并单元格分为两类，一类为 跨行合并（rowspan），一类为 跨列合并（coslpan）
合并单元格三步曲：
1.先确定跨行 or 跨列
2.找目标单元格（如跨行合并找最上头的，跨列合并找最左）
3.删去多余单元格
2.8 列表标签
列表标签与表格标签的不同之处是表格标签主要用来陈列数据，使数据更有逻辑化，列表标签则是多用来布局。主要分为 无序列表，有序列表 和 自定义列表。
2.8.1 无序列表（重点）
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项则使用<li>标签定义。
无序列表 的基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>注意 1. 无序列表中各个列表之间没有顺序级别之分，是并列关系 。
2.<ul>标签中中只能嵌套<li>标签
3.<li>标签则可以容纳所有元素
2.8.2 有序标签
有序列表意为将列表项按照一定顺序排列定义。
<ol>标签表示HTML页面中的无序列表，列表排序以数字显示，使用<li>标签来定义列表项。
有序列表 的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>注意 1.<ol>标签中中只能嵌套<li>标签
2.<li>标签则可以容纳所有元素
2.8.3 自定义列表
在HTML标签中，<dl>标签用于定义描述列表，该标签会与<dt>（用来定义项目名字）和 <dd>（描述 每一个项目名字）一起使用。类似一个大哥领着一群小弟。
其基本语法如下 ：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>注意 1.<dl>里面只能包含 <dt> 和 <dd>
2. <dt>和<dd>的个数没有限制，经常是一个<dt>对应多个<dd>
3.<dt>和<dd>是并列关系！！！
4273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
