1.HTML概述
-
Hyper Text Markup Language 超文本标记语言
-
超文本:
超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
-
标记语言:
由标签构成的语言。<标签名称> 如 html,xml
标记语言不是编程语言
2.HTML快速入门
-
html文档后缀名 .html 或者 .htm
-
标签分为
*围堵标签:有开始标签和结束标签。如
<html> </html>
*自闭和标签:开始标签和结束标签在一起。如
<br/>
-
标签可以嵌套: 需要正确嵌套,不能你中有我,我中有你 错误:
<a><b></a></b>
正确:<a><b></b></a>
-
在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
-
html的标签不区分大小写,但是建议使用小写。
例如
<html>
<head>
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>
3.HTML标签的学习
3.1文本标签:和文本有关的标签
标签名称 | 标签介绍 |
---|---|
<!-- 注释内容 --> | 注释 |
<h1> to <h6> | 标题标签 h1~h6:字体大小逐渐递减 |
<p> | 段落标签 |
<br> | 换行标签 |
<hr> | 展示一条水平线 |
<b> | 字体加粗 |
<i> | 字体斜体 |
<font> | 字体标签,已废弃 |
<center> | 文本居中,已废弃 |
3.2图片标签
标签名称 | 标签介绍 | 常用属性介绍 |
---|---|---|
<img /> | 在网页上展示一张图片 | src : 图片的URL路径 alt:图片加载失败的替换文本 width: 图片展示的宽度 height:图片展示的高度 |
代码展示
<!--展示一张图片 img-->
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
<!--
相对路径
* 以.开头的路径
* ./:代表当前目录 ./image/1.jpg
* ../:代表上一级目录
-->
<img src="./image/photo_1.jpg">
<img src="../image/photo_1.jpg">
3.3列表标签
标签名称 | 标签介绍 |
---|---|
<ol> | 有序列表 |
<ul> | 无序列表 |
<li> | 列表项 |
代码展示
<!--有序列表 ol-->
早上起床干的事情
<ol type="A" start="5">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ol>
<!-- 无序列表 ul-->
早上起床干的事情
<ul type="disc">
<li>睁眼</li>
<li> 看手机</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ul>
3.4链接标签
标签名称 | 标签介绍 | 常用属性介绍 |
---|---|---|
<a> | 超链接标签 | href: 指定访问资源的URL(统一资源定位符) target:指定打开资源的方式 _self :默认值,在当前页面打开 _blank :在空白页面打开 |
代码展示
<!--超链接 a-->
<a href="http://www.baidu.com">点我</a>
<br>
<a href="http://www.baidu.com" target="_self">点我</a>
<br>
<a href="http://www.baidu.com" target="_blank">点我</a>
<br>
<a href="./5_列表标签.html">列表标签</a><br>
<a href="mailto:itcast@itcast.cn">联系我们</a>
<br>
<a href="http://www.itcast.cn"><img src="image/photo_1.jpg"></a>
3.5块标签
标签名称 | 标签介绍 |
---|---|
<div> | 块级标签,每一个div占满一整行。 |
<span> | 行内标签,文本信息在一行展示 |
代码展示
<span>百度</span>
<span>谷歌</span>
<hr>
<div>百度</div>
<div>谷歌</div>
3.6语义化标签:html5中为了提高程序的可读性,提供了一些标签。
标签名称 | 标签介绍 |
---|---|
<header> | 说明当前位置是页眉部分 |
<footer> | 说明当前位置是页脚部分 |
3.7表格标签
标签名称 | 标签介绍 | 属性描述 |
---|---|---|
<table> | 定义表格 | width :宽度 height : 高度 border :边框 cellpadding :定义内容和单元格的距离 cellspacing :定义单元格之间的距离。如果指定为0,则单元格的线会合为一条 bgcolor :背景色 align :对齐方式 |
<tr> | 定义行 | bgcolor :背景色 align :对齐方式 |
<td> | 定义单元格 | colspan :合并列 rowspan :合并行 |
<th> | 定义表头单元格 | 表头单元格的内容默认加粗且居中 |
<caption> | 表格标题 | ... |
<thead> | 表示表格的头部分 | ... |
<tbody> | 表示表格的体部分 | .. |
<tfoot> | 表示表格的脚部分 | ... |