一、概述
一、概述
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>
扫一扫
951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
