容易忽略的HTML基础知识点1

一：html中的url、href、src的区别

1、URL 是一个网页地址。URL - 统一资源定位器。Web浏览器通过URL从Web服务器请求页面。

URL：Uniform Resource Locators（统一资源定位器）的简写。

url不是属性，src和href是属性，src用于替换当前元素，href用于在当前文档和引用资源之间确立联系，
也就是说src引用的路径是img自己的路径，href引用的路径是要跳转到的地方。

2、href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：
<link href="reset.css" rel="stylesheet"/> 
浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

3、src是source的缩写，src的内容是页面必不可少的一部分，是引入src指向的内容会嵌入到文档中当前标签所在的位置。
常用的有：img、script、iframe。例如:

<script src="script.js"></script>  

当浏览器解析到该元素时，会暂停浏览器的渲染，等待该资源加载完毕在继续执行。
附： 若将js放在头部，必须是使用src引入外部js文件，使用defer=“defer”属性，会先等待html文档加载完再执行js代码，
但defer属性只能用于IE浏览器中。

二：px、em、rem的区别

1、PX特点
(1). IE无法调整那些使用px作为单位的字体大小；

(2). 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

(3).px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2、em特点 
(1).em的值并不是固定的；

(2).em会继承父级元素的字体大小。

(3).em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

(4).任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。
为了简化font-size的换算，需要在css中的body选择器中声明Fontsize=62.5%，这就使em值变为 16px*62.5%=10px, 
这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

3、rem特点 
rem是CSS3新增的一个相对单位（root em，根em），这个单位与em区别在于使用rem为元素设定字体大小时，
仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，
通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小。使用方法：

html{font-size:62.5% } //1rem = 10px;

p {font-size:12px; font-size:1.2rem;}

也可以写响应式布局，所有东西（包括文字大小）大小会随着屏幕的变化也变化，不需要媒体查询就能做到，如下代码即可

document.documentElement.style.fontSize || document.body.style.fontSize = innerWidth/16 + 'px';
window.onresize = function(){
document.documentElement.style.fontSize || document.body.style.fontSize = innerWidth/16 + 'px';
}
这样即可兼容响应式的布局，后面的innerWidth/16表示将屏幕的宽度分为16份，文字大小为一份即1rem，
拿iphone5来举例，它的宽度为320px，那么1rem = 20px;

三、行内元素，块级元素与空元素

​ 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:br、meta、hr、link、input、img

1、块级元素的特点：

(1).总在新行上开始，占据一整行
(2).默认情况下，其宽度自动填满其父元素宽度
(3).宽度始终是与浏览器宽度一样，与内容无关
(4).它可以容纳内联元素和其他块元素
(5).display属性为block

块级元素的垂直相邻外边距margin会合并。

2、行内元素的特点：

(1).和其他元素都在一行上
(2).高，行高及外边距和内边距部分可改变
(3).宽度只与内容有关
(4).行内元素只能容纳文本或者其他行内元素
(5).display属性为inline

水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，
但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。

3、空元素的特点：

没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
<br /> 就是没有关闭标签的空元素（<br /> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。