本文详细介绍了HTML的基本概念，包括HTML、CSS和JavaScript的关系，以及HTML的语法规则。重点讲述了HTML标签的使用，如段落、标题、列表、表格等，并提供了相关示例。同时，提到了CSS和JavaScript在网页制作中的作用，以及学习HTML的进阶路径。
html简介
1.html概述
网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
（1）HTML是什么？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
（2）CSS
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
（3）JavaScript
JavaScript是一门脚本语言。
学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）；
2.html语法规则
1.html结构：包括head body
2.html标签是以尖括号包围的关键字
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 定义页面所有链接的基础定位（用得很少） |
3.html标签
(一)、段落标签
(1)、段落与文字标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <h1>~<h6> | header | 标题 |
| <p> | paragraph | 段落 |
| <br> | break | 换行 |
| <hr> | horizontal rule | 水平线 |
| <div> | division | 分割（块元素） |
| <span> | span | 区域（行内元素） |
代码：
简介：<h1></h6>标题标签(双标签)
标题（H1-H6）标签是指网页html 中对文本标题所进行的着重强调的一种标签，以标签<h1>、<h2>、<h3>到<h6>依此显示重要性的递减，制作<h>标签的主要意义是告诉搜索引擎这个是一段文字的标题，起强调作用。
简介：<p></p>段落标签（双标签）
标签定义的段落文本与上下相邻文本均有一定的间距。
简介：<br>换行标签（单标签）
进行文字换行。
DIV与span的区别
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
(2)、文本格式化标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <strong> | strong（加强） | 加粗 |
| <em> | emphasized（强调） | 斜体 |
| <cite> | cite（引用） | 斜体 |
| <sup> | superscripted（上标） | 上标 |
| <sub> | subscripted（下标） | 下标 |
(3).Html3种列表
列表有3种：有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，请大家重点掌握。
目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。
(1)、有序列表
| 1 2 3 4 5 |
|
(2)、无序列表
无序列表是三个列表中最为重要的列表。
语法：
| 1 2 3 4 5 |
|
4、表格
(1)、表格语义记忆
通过语义化记忆表格标签：
| 标签 | 语义 | 说明 |
|---|---|---|
| table | table（表格） | 表格 |
| tr | table row（表格行） | 行 |
| td | table data cell（表格单元格） | 单元格 |
表格结构标签
| 标签 | 语义 | 说明 |
|---|---|---|
| thead | table head | 表头 |
| tbody | table body | 表身 |
| tfoot | table foot | 表脚 |
| th | table header | 表头单元格 |
1. 表格的定义
<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构；其中： <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格，具体在本文都有讲解；
2. 表格的标签
在HTML定义表格的时候，有以下标签供我们使用
NO 表格标签 用处
1 <table> 定义表格，生成的表格在一对<table></table>中；
2 <caption> 定义表格标题，当表格需要标题时，使用<caption>表格标题</caption>
3 <thead> 定义表格的页眉
4 <tbody> 定义表格的主体
5 <tfoot> 定义表格的页脚
6 <th> 定义表格的表头，一般是表头中的内容会被加黑；
7 <tr> 定义表格的行
8 <td> 定义表格单元格
9 <col> 定义用于表格列的属性
10 <colgroup> 定义表格列的组
3. 单元格边框(border)
表格边框：在使用<table border="1"></table> 的方式来定义，其中：数字表示边框的宽度，单位为像素；以下举三个边框的例子；
<!--无边框-->
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>桃花公主</td>
<td>女</td>
</tr>
</table>
<br>
<!--边框宽度为2-->
<table border="2">
<tr>
<th> 编号 </th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>桃花公主</td>
<td>女</td>
</tr>
</table>
<br>
<!--边框宽度为10-->
<table border="10">
<tr>
<th> 编号 </th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>桃花公主</td>
<td>女</td>
</tr>
</table>
4. 合并单元格
合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格），举例如下：
4.1 合并行单元格(colspan)
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
