关于HTML和CSS的需要注意的小细节

65 阅读 0 评论 43 点赞

我是靠谱客的博主无奈缘分，最近开发中收集的这篇文章主要介绍关于HTML和CSS的需要注意的小细节，觉得挺不错的，现在分享给大家，希望可以做个参考。

1.Web组成：结构（HTML、XHTML）表现（css）行为（js）

2.<!DOCTYPE>声明文档类型，DOCument TYPE

如果没有<!DOCTYPE html>浏览器会变成怪异盒模型

标准盒模型：margin+border +content +padding
怪异盒模型：margin+content(border+padding)

（只有IE会出现怪异盒，不会撑大盒子就不需要做加减法）

标准盒和怪异盒之间相互转换的属性：
box-sizing的值为border-box时为怪异模型，为content时为标准盒模型。

3.如果出现乱码，一定是编码格式 <meta charset =“utf-8”>出错

4.URL统一资源定位符包括协议，域名，端口号，路径

5.单标签有结束的反斜杠指的是XHTML，没有的是HTML
例如，<br /> <hr />是XHTML
<br> <hr>是HTML

6.常用的布局标签：
Div 是网页模块
Span 是网页中的某个节点

7.<img alt=“替换文本” title=“提示信息”> alt和title都有利于SEO（搜索引擎的优化）

8.<a href="#" target="_blank">空链接<a/>

9.去掉列表的小圆点用 list-style:none;

10.两个盒子想在一排显示 float （都写，注意宽度）

11.去掉图片向下撑大的3px : img{vertical-align:middle;}

12.属性设置元素的垂直对齐方式 vertical-align:top;middle;bottom;

13.只有一行文字的时候，如果使用padding或margin向上或向下撑大盒子，最好设置一个line-height=1

14.HTML中的数字没有单位，CSS有“px”

15.外部样式表：（想要在html文件中插入css的写法）

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

rel 属性指示被链接的文档是一个样式表，rel=“stylesheet” 这句话必须有，建立文档关联性

<style>
	@import url(style.css) /*一定放在第一位*/
</style>

16.margin:0 auto;可以实现盒子（块）的居中

17.对于a标签，要写float:left;这句，width：100px才会生效

18.上下的margin会发生重叠，取大的值

一般能用padding不用margin

19.如果两个元素都float，margin此时上下做加法

20.不想出现滚动竖条的时候：

html,body{
	height:100%;
	overflow:hidden;
	}

21.三角形

	width:0;
	border:10px solid transparent;
	border-top-color: yellow;

以上就是无奈缘分为你收集整理的关于HTML和CSS的需要注意的小细节的全部内容，希望文章能够帮你解决关于HTML和CSS的需要注意的小细节所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。