发表于: 2017-04-19 22:28:28

1 1055


今天完成的事情:

调整任务8第一个界面响应式

  

明天计划的事情:

  继续css-task8

 

    

遇到的问题:   

1.调整昨天完成界面响应式界面,如下图所示,解决这个问题的时候,先后隐藏了footer,main,head。查到问题在head中,nav的头部宽度多出一块。

  

2.如何学习的界面,采用了弹性布局。

3.优秀学员的部分,设置了4个栅格,每个栅格里面在设置一个div,div设置样式。

  

收获:  第一个界面中还有合作企业部分没有调整好,需要学习边框阴影的相关知识。



小课堂知识:

【CSS-task5】

title与h1、b与strong、i与em、img的alt与title、src与href有什么区别?

小课堂【成都第85期】

分享人:王帅

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.拓展思考

7.参考文献

8.更多讨论

1.背景介绍

HTML自1991年发展至今,经过多个版本的更改和补充,可使用的标签数量越来越多,其中有些标签在使用中表象相同,实际代表的意义不同。 本次小课堂针对文本格式、图像的文字注释和替代、链接的一些属性,对他们进行区分学习

2.知识剖析

2.1 title与h1的区别

定义:title是网站标题,h1是文章主题

作用:title概括网站信息,可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的,是显示在网页Tab栏里的;h1突出文章主题,面对用户,更突出其视觉效果,指向页面主体信息,是显示在网页中的

2.1代码实战


                    
                    

我是文本标题

我是文本标题

2.2 b与strong的区别

定义:b(bold)是实体标签,用来给文字加粗,而strong是逻辑标签,作用是加强字符语气

区别:b标签只是加粗的样式,没有实际含义,常用来表达无强调或着重意味的粗体文字,比如文章摘要中的关键词、评测文章中的产品名称、文章的导言; 而strong表示标签内字符重要,用以强调,其默认格式是加粗,但是可以通过CSS添加样式

建议:为了符合CSS3的规范,b应尽量少用而改用strong,字体如果需要加粗,用CSS添加样式,要着重语句,用strong

2.2代码实战


                    

我是原文字

我是bold                    我是strong                

我是原文字

我是bold
我是strong

2.3 i与em的区别

定义:i(italic)是实体标签,用来使字符倾斜,而em(emphasis)是逻辑标签,作用是强调文本内容

区别:i标签只是斜体的样式,没有实际含义,常用来表达无强调或着重意味的斜体,比如生物学名、术语、外来语;而em表示标签内字符重要,用以强调,其默认格式是斜体,但是可以通过CSS添加样式

建议:为了符合CSS3的规范,i应尽量少用而改用em

2.3代码实战


                    

我是原文字

我是斜体i                    我是em                    

我是原文字

我是斜体i
我是em

2.4 img中的alt与title属性

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方

title属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,有点类似jQuery的hover

2.4代码实战

                 
                     火锅图示
                     火锅店不在了
                 
             
火锅图示 火锅店不在了

2.5 src与href的区别

定义:href指定网络资源的位置建立链接或关系,用在link和a等元素上。src将外部资源嵌入到当前标签所在位置,如img图片和js脚本等

区别:我们在可替换的元素上使用src,然而把href用于在涉及的文档和外部资源之间建立一个关系。 浏览器解析src属性时,会暂停其他资源的下载和处理,直至将该资源加载,编译,执行完毕。 浏览器解析到href的时候会识别该链接内容,对其进行下载不会停止对当前文档的处理

3.常见问题

如何在代码中使用链接属性添加样式或者JS文件?

4.解决方案

href (Hypertext Reference)指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。当我们写下:

浏览器明白当前资源是一个样式表,页面解析不会暂停(由于浏览器需要样式规则去画或者渲染页面,渲染过程可能会被暂停)。 这与把css文件内容写在style标签里不相同,因此建议使用link标签而不是"@import"来把样式表导入到html文档里

src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置。当浏览器找到

在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。 这个过程与把js文件放到script标签里类似。这也是建议把JS文件放到底部加载的原因。当然,img标签页与此类似。浏览器暂停加载直到提取和加载图像。

5.代码实战

6.拓展思考

如何使用这些标签并尽量符合编码规范呢?

以下是W3C中相关的一段话

注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 b 标签作为最后的选项。HTML5 规范声明:应该使用 h1 - h6 来表示标题,使用 em 标签来表示强调的文本,应该使用 strong 标签来表示重要文本,应该使用 mark 标签来表示标注的/突出显示的文本。

提示:您也能够使用 CSS "font-weight" 属性来设置粗体文本。

7.参考文献

参考一:HTML5 中的 b/strong,i/em 有什么区别?

参考二:url、href、src 详解

参考三:HTML中href、src区别

鸣谢

感谢大家观看

BY : 王帅



返回列表 返回列表
评论

    分享到