技术等级】初级
【承接文章】《CSS文本属性,让你的段落更加美观,前端之路更进一步》
本文重点讲解CSS技术中文本样式的text-align属性以及”块级元素”和“内联元素”的使用。本文属于前端开发的初级教程,适合于刚刚开始接触CSS技术的学习者。
一、设置对齐方式:
CSS技术利用text-align属性来设置对齐方式
首先,在使用该属性的同时,要明确这是谁相对于谁的对齐方式。让我们一起来看下列代码。
<div>
<p style=”text-align:center”></p>
</div>
上述代码中使用了text-align属性的标记对是<p></p>标记对。那么,是谁相对于谁垂直居中了呢?下面列举了两种可能的情况:
<p>标记对相对于它的容器<div>标记对垂直居中
<p>标记对的内容(即“”文字)相对于<p>标记对本身垂直居中。
请大家仔细想一想,应该是上述那种情况?
正确答案是第二种。也就是说:使用了text-align属性的标记对,是这个标记对的内容在该标记对内部实现了对齐效果,而不是这个标记对在其容器内部实现了对齐效果。
其次,要想实现文本相对于自身的对齐方式,那么自身的标记对必须具备一定的宽度和高度。以上述代码来说,<p>标记对默认情况下的宽度为整个页面的宽度,也就是说这个标记对自身是有一定的宽度的,同时内部的文本数量又比较少,所以text-align在使用的过程中是可以看到效果的。
综合上述的内容,可以说text-align属性在使用时要注意以下两点:
对齐效果是自身内部的文本内容相对于自身这个容器的对齐方式。
标记对自身必须具备一定的宽度。
text-align属性可以有多种取值:
left,左对齐。内部文本在自身容器中左对齐
center,居中对齐。内部文本在自身容器中居中对齐。
right,右对齐。内部文本在自身容器中右对齐。
justify,两端对齐。内部文本在自身容器中两端对齐,即整个段落的左侧是整齐的,右侧也是整齐的。这种对齐方式和左对齐是有区别的。左对齐可以明显的观察出段落的右侧是不整齐的。
左对齐和两端对齐的区别
从上图中可以看出,两端的最右侧,也就是深色直线比对的位置。采用的左对齐的段落这条线附近的段落文本是没有对齐的;而采用了两端对齐的这条线附近的段落文本是对齐的。
二、块级元素与内联元素
我们将HTML的各个标记,根据在页面中展示内容的外观,分为两类:一类叫做“块级元素”,另一类叫做“内联元素”。
典型的“块级元素”是<div></div>标记对。
典型的“内联元素”是<span></span>标记对。
这两个标记对本身没有任何外观效果,内部可以盛放任何HTML标记对,是网页布局时常用的两个容器。 默认情况下,<div></div>标记的宽度为页面的整宽,即一个<div></div>标记占一行,被称为“块级元素”。<span></span>标记的宽度为内部内容的宽度,多个<span></span>标记的内容可以在一行内显示,被称为“行内元素”或“内联元素”。
常用的块级元素标记还包括:<p></p> <ul></ul> <ol></ol> <li></li> <table></table> <form></form>
常用的内联元素标记还包括:<a></a> <img /> <input /> <select></select> <textarea></textarea>
三、块级元素与内联元素的区别:
块级元素和内联元素的的区别可以从下图中看到。
“块级元素”和“内联元素”的区别
四、学习两个新的CSS属性
我们这里学习两个简单的CSS属性,分别为width和height属性。
width,为块级元素设置宽度。
height,为块级元素设置高度。
这两个属性的取值必须是带有单位的数值。
例:div{width:200px; height:30px;}
上述代码将页面中所有的<div></div>标记对都设置为了宽度200像素、高度30像素的矩形。也就是说这样一来,<div></div>标记对再也不占有整个页面的整宽了,但是仍然为独占一行的情况。
这两个属性是用来设置元素的宽度和高度的,但是只能适用于块级元素。这也是内联元素没有宽度的一个重要原因:因为利用width属性为内联元素设置宽度是没有效果的。
下一篇文章中,小海老师会为大家从细节上深入剖析line-height属性以及该属性的用法。对于渴望在前端开发道路上前进的你一定不能错过!
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容,可以私信我,我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你,帮助你在前端开发的道路上阔步前行。
在头条上也已经写了有十篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章,逐步学到一定的知识,甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验,每写一篇时我都尽量把握好措辞,用简单易懂的语言描述,同时精心设计版面,让版面更加丰富,激发阅读兴趣。所以,每一篇文章可能篇幅不长,但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”,因为这些文章都是连载的,并且是经过我系统的归纳过的。关注“小海前端”,我会继续为大家奉上更加深入的前端开发文章,也希望更多的初学者跟着学下去,我们共同将前端开发的路努力坚持的走下去。
众号【传智播客博学谷】回复关键词:前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料!
一、HTML
1、<image>标签上title属性与alt属性的区别是什么?
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》
2、分别写出以下几个HTML标签:文字加粗、下标、居中、字体
加粗:<b>、<strong>
下标:<sub>
居中:<center>
字体:<font>、<basefont>、参考《HTML标签列表》
3、请写出至少5个html5新增的标签,并说明其语义和应用场景
section:定义文档中的一个章节
nav:定义只包含导航链接的章节
header:定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer:定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
参考《HTML5 标签列表》
4、请说说你对标签语义化的理解?
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
5、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。
在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、你知道多少种Doctype文档类型?
标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,
Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
7、HTML与XHTML——二者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
参考《XHTML 与 HTML 之间的差异》
8、html5有哪些新特性、移除了那些元素?
a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签(header,nav,footer,aside,article,section)
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件,calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素:
a. 纯表现的元素:basefont,big,center, s,strike,tt,u;
b. 对可用性产生负面影响的元素:frame,frameset,noframes;
9、iframe的优缺点?
优点:
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点:
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面,不容易管理。
参考《iframe的一些记录》
10、Quirks模式是什么?它和Standards模式有什么区别?
在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。
区别:总体会有布局、样式解析和脚本执行三个方面的区别。
a. 盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。
b. 设置行内元素的高宽:在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。
c. 设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用
d. 设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。
11、请阐述table的缺点
a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
参考《为什么说table表格布局不好?》
12、简述一下src与href的区别
src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接
公众号【传智播客博学谷】回复关键词:前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料!
eb前端基础,Web前端教程
块元素又名块级元素(blockelement),和其对应的是内联元素(inlineelement),都是html规范中的概念。大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)。
如果介绍HTML网页基本标签的嵌套规则,首先要说的就是元素的分类。元素可以划分为块级元素和行级元素,块级元素是什么?它可以独占一行,可以设置宽高度,默认是100%;行级元素与之相反,它的内容决定它的宽高度,至于特殊字符就当成是文字来看
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>HTML块级、行级元素,特殊字符,嵌套规则</title>
</head>
<body>
<!--块元素:独占一行,可以设置宽高、默认宽度100%-->
块元素分为文字类和容器类
文字类块元素:p、h1——h6
容器类块元素:div、table、tr、td、frame、ul>li、ol、dl、dt、dd(序列)
<!--行元素:不独占一行,宽高度取决于内容-->
行元素:aimginputstrongemdelspan
特殊字符:文字br hr
</body>
</html>
嵌套规则总结如下几点:
1.块元素可以嵌套行元素2.行元素可以嵌套行元素3.行元素不可以嵌套块元素4.文字类块元素不可以嵌套块元素5.容器类块元素可以嵌套块元素
块元素和内联元素的基本差异是块元素一般都从新行开始,相邻的块级元素将会在不同行显示。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列。
*请认真填写需求信息,我们会在24小时内与您取得联系。