<!--整个页面的根标签,一个页面只需要一个,由头和体组成。-->
<html>
<!--头标签,用于引入脚本、导入样式等。一般情况下头标签的内容在浏览器端都不显示。-->
<head>
<!--子标签,用于显示浏览器标题。-->
<title>这是标题</title>
</head>
<!--体标签,是整个网页的主体,我们编写的html代码基本都在此标签体内。-->
<body>
这是正文
</body>
</html>
案例相关的标签
<h1></h1> 标题标签
<h1> 定义最大的标题。<h6> 定义最小的标题。
<hn>标题标签</hn>n的取值1-6
<hr />水平线标签
<hr /> 标签在 HTML 页面中创建一条水平分隔线。
size属性: 水平线的高度,单位像素:px
noshade属性: 没有阴影,取值:noshade,表示显示纯色
<font>字体标签
<font size="1">我个子最小</font>
<font size="3">可能的值:从 1 到 7 的数字。浏览器默认值是 3。</font>
<font size="8">我个子最大</font>
<font color="#c00FFFF">未知颜色1号</font>
<font color="#F00">未知颜色1号</font>
<font color="blue">我是蓝色</font>
<font face="微软雅黑">微软雅黑字体</font>
<font face="黑体">黑体</font>
<b></b>加粗标签
<b>我是粗体标签</b>
<i></i>斜体标签
<i>我是斜体标签</i>
<p></p>段落标签
<br />换行标签
<p>前面P与P之间是段落标记<br/>而前面的br/标志是代表着换行</p>
特殊字符标签
符号名称HTML页面展示
空格符
<小于号<
>大于号>
©版权符©
¥元(yen)¥
图片标签
<img src="图片的路径地址" />
1)src:表示图片的路径,一般使用当前服务器,也可以使用其它服务器。不能使用本地地址。
属性名称含义作用
src图片的路径地址表示图片的路径,一般使用当前服务器,也可以使用其它服务器。不能使用本地地址。
width宽度如果只设置其中一项,那么图片会等比例缩放
height高度
title提示文本鼠标悬停在图片上方会出现的文字信息
alt替换文本图片加载失败的时候才会出现的文字信息
border边框只能定义边框的粗细
5、网站列表页展示
5.2、相关知识点
5.2.1、列表标签:<ul><ol>
5.2.1.1、无序列表<ul>
<ul type="disc">
<li>内容一</li>
<li>内容二</li>
</ul>
ul无序列表的属性:
名称含义
type="circle"空心圆
type="disc"默认值,实心黑色圆
type="square"实心黑色正方形
5.2.1.2、有序列表<ol>
<ol type="1">
<li>内容一</li>
<li>内容二</li>
</ol>
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...
5.2.2、超链接标签:<a>
<a> 标签是超链接。页面中必不可少的一个标签,互联网正是因为有了超链接而变得丰富多彩,我们可以通过超链接跳转页面、跳转图片等相应的操作。
<a href="跳转的路径地址"></a>
超链接的属性:
名称作用取值
href用于确定需要显示页面的路径(URL)必写属性
target确定以何种方式打开href所设置的页面_blank 新窗口打开
_self 在自己的页面中打开,将原来页面覆盖。
默认打开方式
5.2.2.2、空连接
如果我们希望这是一个链接,但是用户单击之后又不需要跳转,那么这种称之为空链接,也叫做假链接。
<a href="#"></a>
<a href="javascript:;"></a> √建议使用这个
<a href="javascript:"></a> √建议使用这个
<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>
锚点链接
用法:
1、首先创建点击跳转的链接a标签,href写上 #锚点名 实现一个绑定的操作。
2、定义一个锚点a标签,定义一个name属性,name的值要与锚点名一致,这个操作也称之为抛锚。
<a href="#锚点名">点击跳转</a>
<a name="锚点名">目标区域</a>
6.2.1.1、表格标签<table><tr><td>
HTML表格由<table>标签以及一个或多个<tr>、<th>(表头)或<td>标签组成
<table> 是父标签,相当于整个表格的容器。
table标签的属性:
名称作用
border表格边框的宽度
width表格的宽度
height表格的高度
cellpadding单元格边沿与其内容之间的空白
cellspacing单元格之间的空白
bgcolor表格的背景颜色
<tr>标签用于定义行
tr标签的属性:
名称作用
align单元格内容的水平对齐方式,
取值:left 左 、right 右、center 居中
<td>标签用于定义表格的单元格(一个列)
td标签的属性:column 列 row 行
名称作用
colspan单元格可横跨的列数(横向合并单元格)
rowspan单元格可横跨的行数(纵向合并单元格)
align单元格内容的水平对齐方式,
取值:left 左 、right 右、center 居中
<!--表格的属性:边框宽度 表格宽度 表格高度 -->
<table border="1px" width="400px" height="300px"
<!--单元格间距 单元格边距 背景颜色排列方式 居中-->
cellspacing="0" cellpadding="0" bgcolor="blue" align="center">
注意:表格属性也可以单独设置为列属性行属性
1)表格默认是没有边框的,需要手动添加border的属性,每一个单元格的大小是根据内容自动适配的,
同样可以给表格标签设置整体的大小。
2)改变table表格的背景颜色,在table标签中添加一个属性 bgcolor,然后设置属性值即可。
3)通过添加表格边框我们发现单元格和单元格之间具有缝隙,如果想把单元格之间的距离以及
单元格和内容之间的距离清除,那么需要在table表格标签上加上cellspacing(单元格之间
的空白)和cellpadding(单元格边沿与其内容之间的空白)分别设置为0。
<tr align="center">
4)另外还有一个属性align水平对齐方式,加在tr身上是改变这一行里面所有单元格的内容,
如果加在td身上就是改变这一个单元格内容。
6.2.3、带有表头的表格
如果希望某一个单元格是一个标题,可以把单元格标签td改写成th,
标题自带加粗和居中的页面显示效果。
6.2.4、合并单元格
表格可以合并单元格的操作,通过跨行和跨列的标签属性进行合并,
但是要注意被合并的单元格标签需要手动删除才可以。
1)跨行使用td标签中的rowspan属性可以实现纵向合并单元格。(合并行)
2)跨列使用td标签中的colspan(横向合并单元格)。 (合并列)
<table border="1" width="400" cellspacing="0" cellpadding="10" align="center">
<tr>
<th>姓名</th>
<th colspan="4">手机号</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>13800000000</td>
<td>13800000001</td>
</tr>
<tr>
<td>合并行专用</td>
<td>合并行专用</td>
</tr>
<tr>
<td>李四</td>
<td>13800000000</td>
<td>13800000001</td>
</tr>
</table>
6.2.5、关于table表格的标签补充
标签名作用
caption整个表格的标题
tbody表格主体,无论有没有写tbody,浏览器都会在解析的时候生成一个tbody标签