html+css注意语句

1、table与div区别

2、span

3、align与valign区别

align和valign分别用于设定水平位置和垂直位置。align的默认值是center；valign的默认值是middle。

align三个选项：left | center | right。

分别表示在水平方向上向左对齐，居中对齐，向右对齐。

valign三个选项：top | middle | bottom。

分别表示在垂直方向上向顶端对齐，向中间对齐，向底部对齐。

div用法

div也是图层的用法

图层的属性

5、列表的创建

列表类型	标记符号
定义列表	dl
无序列表	ul
目录列表	dir
有序列表	ol

< li>…< /li>来进行列表展示

6、表格的创建

标签	说 明
< table>	表格标记
< tr>	行标记
< td>	列表记
< th>	表头标记
< caption>	表格标题

设置边框的样式----frame、rules

frame常见属性

属性值	说明
above	显示上边框
border	显示上下左右边框
below	显示下边框
hsides	显示上下边框
lhs	显示左边框
rhs	显示右边框
void	不显示边框
vsides	显示左右边框

rules常见属性

属性值	说明
all	显示所有内部边框
groups	显示介于行列边框
none	不显示内部边框
cols	仅显示列边框
rows	仅显示行边框

行水平对齐-----align

left
right
center

行垂直对齐-----valign

属性值	说明
top	顶端对齐
middle	居中对齐
bottom	底部对齐
baseline	基线

跨列—colspan;跨行-----rowspan

7、css中#与.的区别

.用于id
#用于class属性

<style>
    .con {
        color: #39f;
    }
    #con {
        background-color: #f00;
    }
</style>
<div class="con">HTML5中文网</div>
<div id="con">HTML5中文网</div>

id属性一般在一个页面中只可以使用一次，而class可以被多次引用。

id标签中出现class情况

<div id="link2">
						<ul>
							<li><a href="#">作品1</a>&nbsp;&lt;<a class="author" href="#">作者1</a>&gt;</li>
													</ul>
						<p><a href="#">OPML</a>&nbsp;&nbsp;<a href="#">更多</a></p>
					</div>
<style>
#links a.author{color: #37d2fc;}
</style>

class中出现id情况

<div class="home-header-waichu">
			<dd>
				<a href="" class="tag">外出申请</a>
				<a href="index1.html" class="tag">
					 <font color="black">外出记录</font>
				</a>
			</dd>
		</div>
<style>
.home-header-waichu dd .tag{
	color: #6ffffb;
}
</style>

class中出现图片处理时

方法一：

<div class="home-header">
			<dl>
				<dt>
					<img src="img/none.png" alt="">
				</dt>
			</dl>
		</div>

<style>
.home-header dt > img{
	width: 20%;
}
</style>

方法二：

<div class="home-categories">
			<!--下面为dl的用法，可以查找dl,dt,dd的用法-->
			<dl>
				<dt>
					<img src="img/ld2.png" alt="">
				</dt>
			</dl>
		</div>

<style>
.home-categories dt img{
	margin-right: 1rem;  /*让图片和字横向设置间距*/
}
</style>

class中出现class时

<div class="home-footer">
			<!--注意p标签的用法-->
			<p>请向校方检察人员出示二维码，扫码进出</p>
			<p class="xiao">校~</p>
		</div>

<style>
.xiao{padding-left: 7rem;} 
</style>

id中出现id

<div id="home-footer">
			<!--注意p标签的用法-->
			<p>请向校方检察人员出示二维码，扫码进出</p>
			<p id="xiao">校~</p>
		</div>

<style>
#xiao{padding-left: 7rem;} 
/*这里不需要写为home-footer #xiao{} 的形式*/
</style>

8、css中height和line-height的区别

height：表示这个块级元素或行内元素的高度

line-height：表示里面假如需要输入文本，则这个就是给这个文本的空间大小，相当于 word 文档中的行高

font-size：表示文本的大小，这个大小的高度尽量不要超过 line-height 的高度，如果超过了将会导致第二行的文字和第一行的文字发生重叠
参考：【真正的能理解CSS中的line-height，height与line-height】