基础标签认识

<body></body>
background='图片路径'---表示背景图片
图片:.jpg .png(透明图片) .gif(动态图)。。。

路径---
绝对路径:相对于磁盘的路径,物理路径
相对路径:文件相对于网页源文件的位置
同级关系:直接引用文件名
上一级关系:../图片名
下一级关系:文件夹名/图片名
-------------------------------
一 文本格式标签
换行标签
<br/>
特殊字符标签
&lt; < (left)
&gt; > (right)
&nbsp; 空格
&quot; "
&copy; 版权号

计算机的单位
基本单位:字节(B) 一个字符占一个字节,一个汉字占两个字节
最小单位:位(bit)
1B=8bit
1kb(千字节)=1024B
1MB(兆字节)=1024kb

标题标签
<hn></hn>,n:1---6,逐级变小
<h1></h1>
特点:字体加粗,自动换行

段落标签
<p></p>
特点:自动换行
属性:
align="left/right/center",水平对齐方式

预编译标签
<pre></pre>
特点:原样输出,自动换行

水平分割线标签
<hr/>
属性:
color="颜色"
size="5px/5%",设置水平分割线的粗细
width="50px/50%",设置水平分割线的宽度
align="left(居左)/right(居右)/center(居中)",水平对齐方式
特点:自动换行

二 字符格式标签---不换行
<b></b>----文本加粗
<i></i>----文本倾斜
<u></u>----下划线
<s></s>----删除线
<small></small>---字体变小

<font></font>---字体标签
属性:
size=n,n:1----7,逐级变大,改变字体大小
color="颜色",改变字体颜色
face="黑体",设置字体类型,默认为宋体

图片标签
<img/>
属性:
src="路径",设置图片路径
width="100px",设置图片的宽度
height="100px",设置图片的高度
title="相关提示信息",设置鼠标悬停时显示的文字描述
alt="相关提示信息"

三 HTML的注释
<!-- 注释内容 -->
作用:
屏蔽不想在网页上看见内容
注释代码,方便日后维护查找

四 表格标签
<table>
<tr>
<td></td>
</tr>
</table>
tr:行标签
td:列标签

table的属性:
border="2px",设置表格的表框为2px
width="100%/500px",设置表格的宽度
height="20%/300px",设置表格的高度
bordercolor="颜色",设置表格的边框颜色
bgcolor="颜色",设置表格的背景颜色
bgcolor==>backgroundcolor
background="背景图的路径"
align="left(居左)/right(居右)/center(居中)",设置表格水平对齐方式
cellspacing="px/%",设置单元格与单元格之间的距离
cellpadding="px/%",设置单元格边框与内容之间的距离

如果要放置内容或者其他标签的话,必须要放在td标签里面


tr的属性:
bgcolor="颜色",设置某一行的背景颜色
align="left(居左)/right(居右)/center(居中)",设置某一行的水平对齐方式
valign="top(顶部)/middle(垂直居中)/bottom(底部)",设置某一行的垂直方向的对齐方式

td的属性:
align="left(居左)/right(居右)/center(居中)",设置某一个单元格的水平对齐方式
bgcolor="颜色",设置某一个单元格的背景色
width="100%/500px",设置单元格的宽度
height="20%/300px",设置单元格的高度
valign="top(顶部)/middle(垂直居中)/bottom(底部)",设置某一个单元格的垂直方向的对齐方式
rowspan="2",合并行
colspan="2",合并列


<table>
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>表内容</td>
</tr>
</tbody>
</table>

th:字体加粗,自动居中的效果
rowspan="2",合并行
colspan="2",合并列

 

posted on 2017-10-11 14:33  正在输入中  阅读(102)  评论(0编辑  收藏  举报