HTML:超文本标记语言(HyperText Markup Language)
- “语言” 就是指人与计算机交互的工具。
- “标记” 就是使用标签的方式将需要的内容包括起来。例如:<a>www.itcast.cn</a> (xml)
- “超文本”就是指页面内可以包含图片、链接等非文字内容。
HTML用于编写网页。网页内容包含:HTML代码、CSS代码、JavaScript代码等内容。
- HTML代码: 结构层(一个妹子) 负责从语义的角度搭建页面结构
- JavaScript代码:行为层(一个愿意跟你聊天的妹子) 负责从交互的角度提升用户体验。
- CSS代码: 表现层(一个化了妆的妹子) 负责从审美的角度美化页面
HTML语言特点
- HTML文件不需要编译,直接使用浏览器解析即可。(.java---javac----.class)
- HTML文件的扩展名是*.html 或 *.htm。
- HTML结构都是由标签组成。
- 标签名预先定义好的,我们只需要了解其功能即可。
1)标签名不区分大小写,通常都是小写。<a></a> <A></A>
2)通常情况下标签由开始标签和结束标签组成。例如:<a>传智播客</a>
3)如果没有结束标签,建议以/结尾。例如:<img /><img>
- HTML结构包括两部分:头head和体body。
标题标签:<hn>
<hn>标题标签</hn> n的取值1-6
水平线标签:<hr/>
<hr /> 标签在 HTML 页面中创建一条水平分隔线,用于定义内容中的主题变化。
- size属性: 水平线的高度,单位像素(px)
- noshade属性: 没有阴影,取值:noshade,表示显示纯色
<hr size="5" noshade="noshade" />
字体标签:<font>
<font size="2" color="red" face="微软雅黑">字体的内容</font>
格式化标签:<b><i>
<b>要加粗的字体</b>
<i>要倾斜的字体</i>
段落标签:<p> <br/>
<p>段落内容</p>
<br /> <!-- 换行标签 -->
特殊字符标签
符号 | 名称 | HTML页面展示 |
| 空格符 | |
< | 小于号 | < |
> | 大于号 | > |
© | 版权符 | © |
标签图片
<img src="图片的路径地址" />
注意:图片名称不要使用中文。
img标签对应的属性:
属性名称 | 含义 | 作用 |
src | 图片的路径地址 | 必写属性,否则看不到图片 |
width | 宽度 | 如果只设置其中一项,那么图片会等比例缩放 |
height | 高度 | |
title | 提示文本 | 鼠标悬停在图片上方会出现的文字信息 |
alt | 替换文本 | 图片加载失败的时候才会出现的文字信息 |
border | 边框 | 只能定义边框的粗细 |
列表标签:<ul><ol>
1)无序列表<ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul type="circle">
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
<li>西游记</li>
</ul>
</body>
</html>
代码效果:
ul无序列表的属性:
名称 | 含义 |
type="circle" | 空心圆 |
type="disc" | 默认值,实心黑色圆 |
type="square" | 实心黑色正方形 |
注意:写在ul身上是所有li改变,写在li身上是单个改变 |
2)有序列表<ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ol type="1">
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
<li>西游记</li>
</ol>
</body>
</html>
代码效果:
ol有序列表的属性:
名称 | 形式 |
type="1" | 默认值,1、2、3... |
type="a" | 小写的英文字母,a、b、c... |
type="A" | 大写的英文字母,A、B、C... |
type="i" | 小写的罗马数字,i、ii、iii... |
type="I" | 大写的罗马数字,I、II、III... |
注意:写在ol身上是所有li改变,写在li身上是单个改变 |
超链接标签:<a>
<a href="跳转的路径地址"></a>
超链接的属性:
名称 | 作用 | 取值 |
href | 规定链接的目标 URL。 | 必写属性 |
target | 规定在何处打开目标 URL。 仅在 href 属性存在时使用 | _blank 新窗口打开 _self 默认打开方式 framename 框架的名称 |
name | 规定锚的名称 | 自定义 |
空链接(假链接)
<a href="javascript:;">空链接</a>
<a href="javascript:void(0);">空链接</a>
锚点链接
通过和name值做一个绑定,实现区域的跳转。
做法:
- 首先创建点击跳转的链接a标签,href写上 #锚点名 实现一个绑定的操作。
- 定义一个锚点a标签,定义一个name属性,name的值要与锚点名一致,这个操作也称之为抛锚。
<a href="#锚点名">点击跳转</a>
<a name="锚点名">目标区域</a>
表格标签<table><tr><td>
- <table>表格
- <tr>行
- <td>单元格
<table> 是父标签,相当于整个表格的容器。
table标签的属性:
名称 | 作用 |
border | 表格边框的宽度 |
cellpadding | 单元格边沿与其内容之间的空白 |
cellspacing | 单元格之间的空白 |
bgcolor | 表格的背景颜色 |
height | 表格的高度 |
width | 表格的宽度 |
<tr> 标签用于定义行
<td> 标签用于定义表格的单元格(一个列)
td标签的属性:
名称 | 作用 |
colspan | 单元格可横跨的列数(横向合并单元格) |
rowspan | 单元格可横跨的行数(纵向合并单元格) |
align | 单元格内容的水平对齐方式, 取值:left 左 、right 右、center 居中 |
<th>标签用于定义表头。单元格内的内容默认居中、加粗。
注:表格默认是没有边框的,需要手动添加border的属性,每一个单元格的大小是根据内容自动适配的,同样可以给表格标签设置整体的大小。
合并单元格
表格可以合并单元格的操作,通过跨行和跨列的标签属性进行合并,但是要注意被合并的单元格标签需要手动删除才可以。
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>跨行合并</h1>
<!--设置一个4行两列的单元格-->
<table border="1" cellspacing="0" cellpadding="10" width="300">
<tr><th>姓名</th><th>手机号</th></tr>
<tr><td rowspan="2">张三</td><td>1380000000</td></tr>
<tr><td>1380000001</td></tr>
<tr><td>李四</td><td>1390000000</td></tr>
</table>
<hr />
<h1>跨列合并</h1>
<table border="1" cellspacing="0" cellpadding="10" width="300">
<tr><th>姓名</th><th colspan="2">手机号</th></tr>
<tr><td>张三</td><td>1380000000</td><td>1380000001</td></tr>
<tr><td>李四</td><td>1390000000</td><td>1390000001</td></tr>
</table>
</body>
</html>
框架标签:<frameset><frame>
<frameset> frame框架 set集合 :框架集合
<frameset> 标签,是多个窗口页面整合在一起的一个集合(框架集:frameset)。每一个页面(框架:frame)都是单独文档(html),需要使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局,使用cols确定列数,使用rows确定行数。多个<frameset>可以嵌套使用。
需求:将页面先分成上下两个部分,在下部将页面再分成左右两个部分,一共三个部分。如图所示:
rows属性和cols属性取值:值1,值2,值3,….. 一个值表示一行(列),多值使用逗号分隔,值可以是 10px、10% 等,最后一个值如果不想计算可以使用*匹配剩余量。
演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--设置框架(frameset),先分成上下两个部分,rows:按照行分 20%上面部分,*:表示其他部分占比-->
<frameset rows="20%,*">
<frame src="top.html"/>
<!--<frame />-->
<!--将下半部分分成左右两个部分,因此,下半部分也是框架集合,需要frameset-->
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>
</html>
框架子标签:<frame>
<frame>标签,用于设置<frameset>框架集中的一个页面(框架)。
- src属性: 设置此框架要显示的网页名称或路径。此为必须设置的属性。
- name属性: 设置框架名称。(方便后期使用超链接,指定网页数据要显示的具体框架位置)
- noresize属性: 设置框架大小是否能手动调节。