块级元素:每个元素独占一行;支持所有的样式;不设置宽度时宽度等于父元素宽度;换行符不会解析;
常用的块状元素有:<div>,<p>,<h1>~<h6>,<ol>,<ul>,<dl>,<form>,<table>,<address>...
行内元素:在一行有空间时,多个元素可以在同一行显示;不支持宽高样式,使用上下margin和padding等样式会出现问题;宽度 由内容(文字图片等)撑开;换行符会被解析(不同浏览器下显示的宽度也不同);
常用的内联元素有:<span>,<br>,<a>,<em>,<b>,<i>,<strong>...
内联元素:(同时具备块级和行内元素的特点)元素都在一行上;元素的高度、宽度、行高以及顶和底边距都可设置!
常用的内联块状元素有:<img>,<input>,<td>
块状元素与内联元素的转换
display样式
1.block:当前元素转换为区块元素
2.inline:当前元素转换为内联元素
3.inline-block:当前元素转换为内联块元素
4.none:当前元素转换为不占位元素(既该元素隐藏)
href属性与src属性
href是a标签的属性,用于指定超链接目标的 URL。
绝对 URL - 指向另一个站点(比如 href="http://www.baidu.com")
相对 URL - 指向站点内的某个文件(href="index.html")
锚 URL - 指向页面中的锚(href="#top")
src属性是<link>,<script>标签的属性,用于规定外部脚本文件的 URL。
绝对 URL - 指向其他站点(比如 src="http://www.baidu.com")
相对 URL - 指向站点内的文件(比如 src="/scripts/example.js")
区别:
1 请求资源类型不同
(1)href 指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的联系。
(2)在请求 src 资源时会将其指向的资源下载并应用到文档中,比如 JavaScript 脚本,img 图片;
2 作用结果不同
(1)href 用于在当前文档和引用资源之间确立联系;
(2)src 用于替换当前内容;
3 浏览器解析方式不同
(1)若在文档中添加 ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS,而不是使用 @import 方式。
(2)当浏览器解析到 ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
alt和title的区别
1.alt是html标签的属性,而title既是html标签,又是html属性。
2.title作为属性时,用来为元素提供额外说明信息。例如,给超链接标签a添加了title属性,把鼠标移动到该链接上面是,就会显示title的内容,以达到补充说明或者提示的效果。
alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意,(alt是替代图像作用而不是提供额外说明文字的。)根据一些SEO人士的说法,使用alt属性还具有搜索引擎优化效果,因为搜素引擎是无法直接读取图像的信息的,alt可以为其提供文字信息所以对搜索引擎比较友好。