目录
1 HTML概述
HTML文档的后缀名为.html和.htm,以上两种后缀名没有区别,都可以使用。
1.1 什么是HTML
HTML是超文本标记语言的缩写(HyperText Markup Language),作用是 利用HTML标记,告诉浏览器被标记的内容要如何摆放及内容的含义 ,如:< p>这是个段落元素< /p>,这里,被标记的内容是“这是个段落元素”这句话,而< p></ p>则是HTML的标记;当浏览器读取到这个标记时,就会知道这里的内容是一个段落文本,然后用相应的格式显示。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
注意,HTML语言为解释型语言,即写出来代码直接就能运行,而例如C语言、JAVA则为编译型语言,需要编译成二进制文件,计算机才能解释执行。
1.2 HTML的语法规则
要让页面正确的显示,就必须使用正确的HTML语法和HTML元素,如:对于标题应该使用< h1>、< h2>、< h3>…等标题元素,而对于一整段的文字内容则应该使用< p>元素。
一个规范的页面代码有利于维护和阅读,要想知道自己的HTML代码是否规范,可以使用w3school的HTML验证工具来检查,然后根据检查结果进行调整,直至通过验证为止。
2 HTML标签简介
2.1 HTML标签
HTML 是所有网页制作技术的核心和基础,也是每个网页制作者必须掌握的基本知识,而 html 标签是 html 语言中最基本的单位,是 HTML 最重要的组成部分。
HTML标签的特点:
- HTML 标签是由尖括号包围的关键词,比如 < html >
- HTML 标签分别双标签和单标签,标签中有属性,属性具有属性值。
- 比如 < b> 和 < /b>为双标签,标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签。
初学者首先要知道 HTML 标签的一些特点: HTML 标签是与大小写无关的,例如“< BODY>”跟< body>表示的意思是一样的,推荐使用小写。类似“< p>”这样由尖括号包关键字组成,例如:
<P>P 是段落标签,HTML标签不区分大小写</P>
<p>意思是一样的,推荐使用小写。</p>
2.2 HTML元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下为一个HTML元素:
<p>这是一个段落。</p>
HTML 元素以开始标签起始,以结束标签终止,元素的内容是开始标签与结束标签之间的内容。某些 HTML 元素具有空内容(empty content),空元素在开始标签中进行关闭(以开始标签的结束而结束)。大多数 HTML 元素可拥有属性
大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。HTML 文档由相互嵌套的 HTML 元素构成。如下实例
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
以上实例包含了三个 HTML 元素。
- 1)< p > 元素:
<p>这是第一个段落。</p>
这个 < p > 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 < p > 以及一个结束标签 < /p >。元素内容是: 这是第一个段落。
- 2)< body > 元素:
<body>
<p>这是第一个段落。</p>
</body>
< body > 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 以及一个结束标签 < /body >。元素内容是另一个 HTML 元素(p 元素)。
- 3)< html > 元素:
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
< html > 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 < html > ,以及一个结束标签 < /html >.元素内容是另一个 HTML 元素(body 元素)。
2.3 HTML实例
HTML文档结构:
头部:文档控制信息,包括整个页面的说明和编码等等
身体:真正显示文档内容的部分。
<html>
<head>
</head>
<body>
</body>
</html>
以下为一个简单的HTML实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
上述实例的解析如下:
- < !DOCTYPE html > 声明为 HTML5 文档
- < htm l> 元素是 HTML 页面的根元素
- < head > 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8。charset为标签的属性,用来告诉浏览器当前页面的编码格式。
- < title > 元素描述了文档的标题
- < body > 元素包含了可见的页面内容
- < h1 > 元素定义一个大标题
- < p > 元素定义一个段落
注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。
3 HTML常用标签
3.1 标题标签
<body>
<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>
</body>
#<h1></h1>:代表一级标题,级别高,字体 也最大,其他依次递减。
#<h6></h6>:级别最小,字体最小
属性:align ;定义标题中的文本水平方向的对齐方式。
属性值:left(左对齐)、right(右对齐)、center(居中对齐)
3.2 段落标签
<p>段落标签</p>
功能:用来定义网页中的一段文本,段落与段落之间换行。
属性:align ;定义段落中的文本水平方向的对齐方式。
属性值:left(左对齐)、right(右对齐)、center(居中对齐)
例子:
<html>
<head>
<meta charset="utf-8">
<title>
这是我的第一个网页
</title>
</head>
<body>
<h1>格言 </h1>
<p> 事实胜于雄辩 </p>
<p> 疗效战胜一切 </p>
没有对比,
就没有伤害
</body>
</html>
3.3 换行标签
<br/> :换行标签,指行与行之间换行,他是一个单标签。
例子:
<html>
<head>
<meta charset="utf-8">
<title>
这是我的第一个网页
</title>
</head>
<body>
<h1>格言 </h1>
<p> 事实胜于雄辩 </p>
<hr/>
<p> 疗效战胜一切 </p>
<hr/>
没有对比,<br/>
就没有伤害
</body>
</html>
< br/ >与< p > < /p >两者的区别:
- < br/ >:是单标签,小行换行提行;
- < p > < /p > :是双标签,大行换行分段;
3.4 < hr/ >水平线
< hr/ >:水平线
例子:
<html>
<head>
<meta charset="utf-8">
<title>
这是我的第一个网页
</title>
</head>
<body>
<h1>格言 </h1>
<p> 事实胜于雄辩 </p>
<hr/>
<p> 疗效战胜一切 </p>
<hr/>
没有对比,
就没有伤害
</body>
</html>
3.5 span标签和div标签
span标签和div标签是最常用的标签,主要对他们进行样式的应用来改变视觉上的变化。span标签和div标签的功能分别如下:
- span标签被用来组合文档中的行内元素。
- div可定义文档中的分区或节(division/section)
span标签和div标签的格式分别如下:
<span>我是span标签</span>
<div class="test">111111</div>
注意,< div > 是一个块级元素。 这意味着它的内容自动地开始一个新行 。实际上,换行是 < div > 固有的唯一格式表现。可以通过 < div > 的 class 或 id 应用额外的样式。
例子:
<html>
<head>
<meta charset="utf-8">
<title>
这是我的第一个网页
</title>
</head>
<body>
<h1>格言 </h1>
<p> 事实胜于雄辩 </p>
<hr/>
<p> 疗效战胜一切 </p>
<hr/>
没有<div style="background-color: green;">对比</div>,<br/>
就没有
<span style="color:red;font-size:30px;background-color: yellow;">伤害</span>
</body>
</html>
3.6 文字段落缩进标签
< blockquote >< /blockquote >:文字段落缩进,在标签中包含块级标签,而不是纯文本。
<blockquote>
<p>自动缩进p标签内的文本</p>
</blockquote>
3.7 文字特殊样式
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<big>放大</big>
<small>缩小</small>
<strong>加强强调</strong>
<em>强调倾斜</em>
3.8 超链接标签
< a >< /a >:超链接,即从一个页面跳转到另外一个页面。
属性:.
- href:连接地址;空连接可以用"#"代替;地址可以为绝对路径也可以为相对路径。
- target :定义打开方式,默认情况下可以不写,默认在当前页面打开。属性值为_self和_blank
①;_self在当前页面中打开;
②_blank在新的空白窗口打开。
例子:
<a href="http://www.baidu.com" target="_blank"></a>
#注意一定要写http或https,“http://www.baidu.com"为绝对路径
<a href="./login.html" target="_blank"></a>
#注意:./是指当前目录,不写./也为当前目录,“./login.html”为相对路径
3.9 图片标签
< img/ >:图片标签,在页面中插入标签。
属性:
- src:指定图片源文件,图片路径可以为相对路径也可以为绝对路径。
- alt :图片未加载成功的提示文字;
- width:指定图片的宽度;
- height:指定图片的高度;
- border:指定图片的边框样式;
- alghr:top/bottom/middle;图片位于两端文字在垂直方向的一个上/中/下的对齐方式;
#图片地址为绝对路径
<img src="http://img5.duitang.com/uploads/item/201610/31/20161031181100_TVEPU.jpeg"/>
#图片地址为相对地址
<img src="./style/img/PHP封面.png"/>
3.10 注释及特殊字符标签
注释及特殊字符:
<!--注释-->
空格: #若直接输入空格,无论输入多少个空格都只显示一个,采用特殊字符时,需要多少个空格,则输入多少个特殊字符
< :<
> :>
& :&
例子:
<html>
<head>
<meta charset="utf-8">
<title>
特殊字符
</title>
</head>
<body>
<p>让子弹 飞一会儿</p>
<p><再飞一会儿></p>
</body>
</html>
3.11 建立列表
3.11.1 建立无序列表
<ul type="circle">
<li>列表项</li>
<li>列表项</li>
</ul>
属性:type ;定义列表项的符号。
属性值:circle(空心圆)、disc(实心圆)、square(实心方块)
3.11.2 建立有序列表
<ol type="a">
<li>列表项</li>
<li>列表项</li>
</ol>
属性:type ;定义列表项的符号。 start:用来设置列表编号的起始数值。
属性值:a、A、i、I
3.11.3 建立自定义列表
<dl>
<dt>列表标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
3.12 表格标签
< table >< /table >:定义表格
< tr >< /tr >:定义行;
< td >< /td >:定义列;
<table>
<caption>表格标题</caption>
<tr>
<td>我是第一行的第一个单元格</td>
<td>我是第一行的第二个单元格</td>
</tr>
<tr>
<td>我是第二行的第一个单元格</td>
<td>我是第二行的第二个单元格</td>
</tr>
</table>
表格的表头是单元格的一种变体,实质上是一种单元格加粗和居中
table的属性:
- width:表格的宽度
- height:表格的高度
- align:表格的对齐方式
- border:表格的边框
- bordercolor:边框的颜色
- cellspaning:单元格之前的距离
- csllpadding:单元格与内容之间的距离
- bgcolor:表格的背景颜色
- background:表格的背景图片
tr的属性:
- height:行的高度
- bordercolor:边框的颜色
- bgcolor:表格的背景颜色
- background:背景图片
- align:文本水平对齐方式
- valign:文本垂直对齐方式
tr的属性:
- width:单元格的宽
- height:单元格的高度
- bordercolor:边框的颜色
- bgcolor:背景颜色
- background:表格的背景图片
- align:文本水平对齐方式
- valign:文本垂直对齐方式
- colspan:水平合并单元格(跨列)
- rowspan:垂直合并单元格(跨行)
完整的表格标记
如果使用thead、tfoot、tbody元素,就必须使用全部的元素。
跨列表格的实例:
html>
<head>
<meta charset="utf-8">
<title>
跨列表格
</title>
</head>
<body>
<h1>跨列表格</h1>
<table border="2">
<tr>
<td colspan="2">学生成绩 </td> <!--colspan="2"为跨列-->
</tr>
<tr>
<td>语文 </td>
<td>98 </td>
</tr>
<tr>
<td> 数学</td>
<td>95 </td>
</tr>
</table>
</body>
</html>
跨行表格的实例:
<html>
<head>
<meta charset="utf-8">
<title>
跨行表格
</title>
</head>
<body>
<h1>跨行表格</h1>
<table border="2">
<tr>
<td rowspan="2">张三 </td>
<td >语文 </td>
<td >98 </td>
</tr>
<tr>
<td>数学 </td>
<td>95 </td>
</tr>
<tr>
<td rowspan="2"> 李四</td>
<td>语文</td>
<td>88 </td>
</tr>
<tr>
<td>数学 </td>
<td>78 </td>
</tr>
</table>
</body>
</html>
3.13 表单标签
表单标签详见下一节【HTML基础-2】内容。
归纳
(1)了解什么是HTML
(2)掌握什么是HTML标签和HTML元素
(3)掌握常用的HTML标签及用法
(4)更多关于HTML语言及标签的教程可具体参考《HTML菜鸟教程》
(5)既可以在WAMP环境中练习HTML语言,也可以菜鸟在线练习上练习并查看显示结果