目录
一、概述
1、什么是HTML
HTML是用来描述网页的一种语言
- HTML 指的是超文本标记语言（Hyper Text Markup Language）（h5 audio video）
- HTML 不是编程语言，是一种标记语言（markup language）
- 标记语言是一套标记标签（markup tag）
- HTML 使用标签来描述网页
2、HTML 的作用
web 浏览器的作用是读取 HTML 文档，并以网页形式来进行显示，浏览器不会显示 HTML 标签，而是显示使用标签来解释页面上的内容的信息
3、HTML 书写规范
【1】HTML 标签
- HTML 标签是由尖括号包围的关键字，比如<html>
- HTML 标签通常是成对出现的，比如<html>和</html>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 绝大多数的标签都具有属性，建议属性值使用引号引用，比如<body text="red">
- 大多数标签是可以嵌套的
- 有且只有一个根节点（标签）
- 对大小写不明感（标签建议小写）
【2】HTML 创建
- HTML 文件可以直接使用文本编辑器来创建，保存时，后缀名为 html 或 htm
- 整个是在 <html> 与 </html> 标签之间
- 在 <html> 与 </html> 标签之间有 <head> 与 <body> 字标签
<html>
<head></head>
<body></body>
</html>【3】空的 HTML 标签
- 没有内容的 HTML 元素被称为空元素，空元素是在开始标签中关闭的
- <br> 换行标签和 <hr> 线条标签就是没有关闭标签的空元素
- 一般书写直接在标签内结束，比如 <br/> <hr/>
二、HTML 基本标签
1、文件标签
【1】<html> 标签
- 整个文件都处于 <html> 标签中
- <html> 用以申明这是 HTML 文件，让浏览器认出并正确处理 HTML 文件
- 在 HTML 文件有两部分 <head> 与 <body>
【2】<head> 标签
- 用于加载一些重要的资讯
- 内容不会被显示，只有 <body> 的内容才会被显示
【3】<title> 标签
- <title> 只能出现于 <head> 中
- 表示的是标题
【4】<body> 标签
<body> 中的就是显示的内容，常用属性：
- text：用于设定文字颜色
- background：用于设定背景图片
- bgcolor：用于设定背景颜色
<html>
<head>
<title>我的主页</title>
</head>
<body bgcolor=#ff9933> <!-- 设置背景颜色 -->
</body>
</html>2、排版标签
【1】注释
- HTML 注释格式：<!-- 注释内容 -->
【2】<p> 标签
段落标签，可以将 HTML 文档分割成若干段落，浏览器会自动在段落前后添加空格，常用属性：
- align：用于设定对齐方式，可选 left、right、center，默认 left
【3】<br/> 标签
- 换行功能
【4】<hr> 标签
生成一条水平线，常用属性：
- align：设置水平线对齐方式，可选值：left、right、center
- size：设置水平线线条粗细，以像素为单位，默认值为 2
- width：设置水平线长度，可以是绝对值和相对值，默认为 100%
- color：设置水平线颜色，默认为黑色
【5】HTML 中数值单位
- 像素：默认单位是像素
- 百分比：总长度的百分比来表示
<html>
<head>
<title>我的主页</title>
</head>
<body>
<p>这是一个段落</p> <!-- 设置段落 -->
<br/> <!-- 设置换行 -->
<p>这是一个段落</p>
<hr align=left width="50%" size=5 color="red"/> <!-- 设置水平线，左对齐，50%的长度，粗细为5个像素，颜色为红色 -->
<p>这是一个段落</p>
</body>
</html>3、块标签
【1】<div> 标签
用于在文档中设定一块区域，属于块级元素，常用属性：
- align：left center right
【2】<span> 标签
用于强调信息，在行内设定一个块区域
div与span区别：
- div占用的位置是一行，
- span占用的是内容有多宽就占用多宽的空间距离
HTML中绝大多数元素被定义为块级元素或内联元素
- 块级元素：在浏览器显示时，通常会以新行来开始，比如 <div> <p>
- 内联元素：在浏览器显示时，通常不会以新行来开始，比如<span>
<html>
<head>
<title>我的主页</title>
</head>
<body>
<div right>活动经费</div>
<div right>活动经费</div>
<div right>活动经费</div>
<span>活动经费</span>
<span>活动经费</span>
<span>活动经费</span>
</body>
</html>4、字体标签
【1】<font> 标签
用于设置文本的字体、大小、颜色，常用属性：
- face：规定文本的字体
- size：规定文本的大小
- color：规定文本的颜色
【2】<h1-h6> 标签
- <h1>-<h6> 标签用于定义标题
- <h1> 最大标题
- <h6> 最小标题
<html>
<head>
<title>我的主页</title>
</head>
<body>
<font size=7 color="red">这就是生活！</font> <!--设置字体大小、颜色-->
<h1> 吃 </h1> <!--设置标题-->
<h2> 喝 </h2>
<h3> 玩 </h3>
<h4> 乐 </h4>
</body>
</html>5、列表标签
【1】<ul> 标签
表示一个无序列表，常用属性：
- type：规定列表的项目符号类型，可取值：disc、square、circle，默认为 disc
【2】<li> 标签
表示一个列表项，常用属性：
- type：只适用于无序列表，用于设定项目符号，默认值为 disc
- value：只适用于有序列表，用于设定列表的项目数字
【3】<ol> 标签
表示一个有序列表，常用属性：
- type：规定列表中使用的标记类型，可取值 1AaIi
- star：规定列表的起始值
【4】<dl> <dt> <dd>
定义描述标签，图文混排
<html>
<head>
<title>我的主页</title>
</head>
<body>
<h4>无序列表:</h4> <!--设置标题-->
<ul type=square> <!--设置列表格式-->
<li>吃</li> <!--设置标题的列-->
<li>喝</li>
<li>玩</li>
<li>乐</li>
</ul>
<h4>有序列表:</h4> <!--设置标题-->
<ol type=I> <!--设置列表格式-->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50"> <!--设置起始值-->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>6、图形标签
【1】<img> 标签
图形标签，用于在页面上引入图片，常用属性：
- src：用于设定要引入的图片的URL
- alt：用于设定图像的替代文字
- width：用于设定图片的宽度
- height：用于设定图片的高度
- border：用于设定图片边框厚度
- align：用于设定图片的文字对齐方式
<html>
<head>
<title>我的主页</title>
</head>
<body>
<h4>图片显示:</h4> <!--设置标题-->
<img src="main2.jpg" alt="主界面" width=800 height=480 border=5></img>
</body>
</html>7、链接标签
【1】<a> 标签
用于定义超链接，用于从一个页面跳转到另一个页面，常用属性：
- href：用于设定链接指向页面的 url
- name：用于设定锚的名称
页面内部的锚连接 <a href="#名称"></a>
页面间的锚连接 <a href="页面的地址#锚名"></a> - target：用于设定在何处打来链接页面
_self：自身打开页面（默认）
_blank：新窗口打开
_parent：父窗口
_top：顶窗口
<html>
<head>
<title>我的主页</title>
</head>
<body>
<a href="logon.html">下一页面</a> <!--默认当前页面打开-->
<br/>
<a href="logon.html" target="_blank">下一个页面</a> <!--新页面打开-->
<br/>
<a href="#">无页面打开</a> <!--无页面打开-->
<br/>
<a name="top">页面顶部</a> <!--页面顶部-->
<pre> <!--保留原格式输出-->
.....
</pre>
<a href="#top">回到页面顶部</a> <!--回到页面顶部-->
</body>
</html> 8、表格标签
【1】<table> 标签
用于定义表格，常用属性：
- align：用于设定表格对齐方式
- bgcolor：用于设定表格的背景颜色
- border：用于设定表格外边框的宽度
- width：用于设定表格的宽度
【2】<tr> 标签
用于定义表格的行，包含一个或多个 th 或 td 元素，常用属性：
- align：用于设定表格行的内容对齐方式
- bgcolor：用于设定表格中的背景颜色
【3】<td> 标签
用于定义表格单元，<td> 中的文本一般显示为正常字体且左对齐，常用属性：
- align：用于设定单元格内容的对齐方式
- bgcolor：用于设定单元格背景颜色
- height：用于设定单元格的高度
- width：用于设定单元格的宽度
- colspan：用于设定列合并
- rowspan：用于设定行合并
【4】<caption> 标签
- 用于定义表格标题
- <caption> 标签必须紧随 <table> 标签之后
- 一个表格只能有一个标题，通常这个标题会被居中于表格之上
【5】<th> 标签
- 用于定义表格的表头
- 内部的文本通常呈现为居中加粗文本
HTML 表格中有两种类型的单元格：
- 表头单元格 th：包含表头信息
- 标准单元格 td：包含数据
【6】<thead> 标签
- 用于定义表格的页眉
- 用于组合 HTML 表格的表头内容
- <thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用
注：<thead> 内部必须有 <tr> 标签
【7】<tbody> 标签
- 用于定义表格的主体
- 用于组合 HTML 表格中的表注内容
【8】<tfoot> 标签
- 用于定义表格的页脚
- 用于组合 HTML 表格中的表注内容
<html>
<head>
<title>我的主页</title>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>
<!--td：设置表的边框宽度、颜色、样式、长宽-->
<table border="2" bordercolor="red" cellspacing="0" width="300" height="50">
<caption>学生信息表</caption> <!--tr：设置表的标题-->
<thead>
<tr align="center"> <!--tr：设置表的行居中-->
<td>学号</td> <!--td：设置表的列-->
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>15450132</td>
<td>派大星</td>
<td>18</td>
</tr>
<tr>
<td>16450120</td>
<td>海绵宝宝</td>
<td>18</td>
</tr>
<tr>
<th>15450120</th> <!--th：设置表内容加粗和居中-->
<th>一颗星</th>
<th>18</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>3</th>
<th>3</th>
<th>3</th>
</tr>
</tfoot>
</table>
</body>
</html>【9】单元格合并
- rowspan：跨行合并
- colspan：跨列合并
<html>
<head>
<title>我的主页</title>
</head>
<body>
<!--td：设置表的边框宽度、颜色、样式、长宽-->
<table border="2" bordercolor="red" cellspacing="0" width="300" height="50">
<caption>学生信息表</caption> <!--tr：设置表的标题-->
<tr align="center"> <!--tr：设置表的行居中-->
<td colspan="3">学生信息</td> <!--td：设置表一行跨列-->
</tr>
<tr>
<td>15450132</td>
<td>派大星</td>
<td rowspan="3">18</td> <!--td：设置表一列跨行-->
</tr>
<tr>
<td>16450120</td>
<td>海绵宝宝</td>
</tr>
<tr>
<th>15450120</th> <!--th：设置表内容加粗和居中-->
<th>一颗星</th>
</tr>
</table>
</body>
</html>
9862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
