本文详细介绍了HTML的基础语法，包括标签、标签关系、基本结构和常用标签，如标题、段落、图像、链接等。进一步，文章深入探讨了CSS的使用，包括选择器、字体属性、文本属性、背景、浮动、定位等，以及CSS3的新特性。最后，提到了HTML5和CSS3的新功能，如语义化标签、多媒体标签、新输入类型和CSS3的过渡、变换与动画效果。
一、语法规范
1.标签
所有的标签都包括在尖括号里，并一般成对出现
例：<html></html>
单标签（极少情况）
例：<br />
2.标签关系
包含关系和并列关系
包含关系：
<head>
<title></title>
</head>
并列关系：
<head></head>
<body></body>
二、基本结构标签
<html> <!--根标签-->
<head> <!--头部标签-->
<title>标题</title>
</head>
<body>
内容
</body>
</html>
三、常用标签
1.标题标签
<h1></h1> - <h6></h6>
标题文字加粗，独占一行
2.段落标签
<p>段落标签</p>
把文档分成若干段落，段落之间保有空隙
<p>
第一段
</p>
<p>
第二段
</p>
3.换行标签
<br/>
强制换行
4.文本格式化标签
突出重要性
加粗
<strong></strong> 或 <b></b> <!--推荐前者-->
倾斜
<em></em> 或 <i></i> <!--推荐前者-->
删除线
<del></del> 或 <s></s> <!--推荐前者-->
下划线
<ins></ins> 或 <u></u> <!--推荐前者-->
5.盒子
div
<div></div>
独占一行，大盒子
span
<span></span>
一行可以有多个span，小盒子
6.图像标签
<img src="图像URL"/>
src是img标签的必须属性，它用于指定图像文件的路径和文件名
img的其他属性：
| 属性 | 说明 |
|---|---|
| alt | 替换文本，图像不能显示的文字 |
| title | 提示文本，鼠标放在图片上显示的文字 |
| width | 图像的宽度 |
| height | 图像的高度 |
| border | 图像的边框粗细 |
图像标签可同时拥有多个属性，必须写在标签名后面，如：
<img src="img.jpg" width="800" height="600"/>
属性先后无序，以空格分开
属性采取键值对的格式，即属性=“属性值”
路径
分为相对路径和绝对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径（图片相对于HTML文件的位置）
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件的同一级 如：src=“img.jpg” | |
| 下一级路径 | / | 图像文件位于HTML文件的下一级 如：src=“images/img.jpg” |
| 上一级路径 | …/ | 图像文件位于HMTL文件的上一级 如：src=“…/img.jpg” |
绝对路径：目录下的绝对位置
如**“D:/images/img.jpg”** 或 固定链接 “http://pic.yupoo.com/zzl-desu/40da6af5/a0aea100.jpg”
7.链接标签
<a href="跳转目标" target="目标窗口的弹出方式">内容</a>
href：链接地址或其他页面 如：
<a href="http://www.baidu.com"></a> 或 <a href="index.html"></a>
target：指定链接页面的打开方式，_self为在本页面打开超链接，_blank为在新窗口打开超链接
<a href="http://www.baidu.com" target="_self"></a>
<a href="http://www.baidu.com" target="_blank"></a>
空链接：用于没有确定链接目标
<a href="#"></a>
*如果href的地址是一个文件，则会下载这个文件
锚点标签
快速定位网页的某个位置
<!--在锚点标签的href属性值设置为"#名字"-->
<a href="#resourcepacks">资源包</a>
<!--在目标标签添加同名id属性-->
<h3 id="resourcepacks">资源包板块</h3>
<!--点击名为"资源包"的超链接，就能跳转到名为"资源包板块"的标题的位置上-->
8.注释
<!--注释-->
9.特殊字符
| 特殊字符 | 描述 | 代码 |
|---|---|---|
| " " | 空格 |  ； |
| “<” | 小于 | <； |
| “>" | 大于 | >； |
10.表格标签
展示数据
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
<!--其中 table标签表示定义表格-->
<!--tr标签用于定义表格中的行 必须嵌套在table中-->
<!--td标签用于定义表格中的列 必须嵌套在tr中-->
表头标签
位于表格的第一行或第一列，加粗居中显示（替换td）
<th></th>
例：
<table>
<tr> <th>标题</th> <th>歌手</th> <th>专辑</th> </tr>
<tr> <td>好きだ</td> <td>YOASOBI</td> <td>好きだ</td> </tr>
<tr> <td>夜撫でるメノウ</td> <td>Ayase</td> <td>幽霊東京</td> </tr>
<tr> <td>SWEET MEMORIES</td> <td>幾田りら</td> <td>SWEET MEMORIES</td> </tr>
</table>
效果如下
表格属性（可用CSS代替）
属性写在table标签里
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left/center/right | 规定表格相对周围元素的对齐方式（左对齐/居中/右对齐） |
| border | 1或"" | 规定表格单元是否拥有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
表格结构标签
将表格分割成表格头部和表格主体
<thead></thead> <!--表格的头部区域，内部必须拥有tr标签-->
<tbody></tbody> <!--表格的主体区域-->
例：
<table>
<thead>
<tr> <th>标题</th> </tr>
</thead>
<tbody>
<tr> <td>内容</td> </tr>
<tr> <td>内容</td> </tr>
</tbody>
</table>
合并单元格
方式：跨行合并/跨列合并
**跨行合并：**rowspan=“合并单元格的个数”，最上侧单元格为目标单元格，写合并代码
**跨列合并：**colspan=“合并单元格的个数”，最左侧单元格为目标单元格，写合并代码
步骤：
①确定跨行/跨列
②找到目标单元格，在标签中写合并代码，如
<td rowspan="2"></td>
③删除多余的单元格
11.列表标签
用于布局
无序列表
内容前面默认有小圆点
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ul>
<!--ul中只能嵌套li，但li中可以放任意元素-->
有序列表
内容前面自动添加序号
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ol>
<!--ol中只能嵌套li-->
自定义列表
<dl>
<dt>定义项目/名字</dt>
<dd>描述项目/名字</dd>
<dd>描述项目/名字</dd>
</dl>
<!--dl中只能包含
最低0.47元/天 解锁文章
扫一扫
990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
