发表于: 2018-09-05 23:46:10

1 709


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

今天完成了任务五的布局,不过对于一些语义化的标签还是掌握的不够,我准备完成下更多的标签学习

这次我的标签都是用的以前的标签,什么div啊,什么span等等这些的
明天计划的事情:(一定要写非常细致的内容) 

明天多看多记一些标签,开始尝试新的运用
遇到的问题:(遇到什么困难,怎么解决的) 

关于用CSS画图的问题,该如何去去理解这些的概念
收获:(通过今天的学习,学到了什么知识)

PS如果说没有办法打开左边的工具栏的时候,可以在,窗口找到工具就可以了

PS如果有很多的参考线,然后你又不知道怎么办的时候,可以在上面的视图,清除参考线

每一个标签都有它本身的意义,这个是我们应该去掌握的,就和我们的语文一样。表达对方的方式有,你,我,它,他。她,您,贵公司。贵先生。这每一个单词,每一个字,都是有它本身意义的,所以标签也一样,不同的标签在不同的场景下都是有不一样的意义的,这个就是语义化的标签,也有很多废除的标签,像孔乙己里面的,茴香豆的四种写法,但是除了茴以外,剩下的三种写法都没有人写了,没人用了,大家认可的都是茴这个字,那么标签也一样,有一些废除的标签了解一下就好,不用去记。我们只要记住要常用的标签这样就行了

列表标签分为三种。

1、无序列表<ul>,无序列表中的每一项是<li>

英文单词解释如下:

ul:unordered list,“无序列表”的意思。

li:list item,“列表项”的意思。

注意:

li不能单独存在,必须包裹在ul里面;反过来说,ul的“儿子”不能是别的东西,只能有li。

我们这里再次强调,ul的作用,并不是给文字增加小圆点的,而是增加无序列表的“语义”的。

3、定义列表<dl>

定义列表的作用非常大。

<dl>英文单词:definition list,没有属性。dl的子元素只能是dt和dd。

<dt>:definition title 列表的标题,这个标签是必须的

<dd>:definition description 列表的列表项,如果不需要它,可以不加

备注:dt、dd只能在dl里面;dl里面只能有dt、dd。

1)是一个列表,列出了几个dd项目

(2)每一个词儿都有自己的描述项。

备注:dd是描述dt的。

定义列表用法非常灵活,可以一个dt配很多dd:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="task5.css">
</head>
<body>
<header class="box">
<a class="return"></a>
<span>个人主页</span>
</header>
<div class="box2">
<div class="doctor"></div>
<div class="head portrait"></div>
<span class="name">高素雅</span>
<span class="age">51岁</span>
<span class="site">北京.通州.果园</span>
</div>
<div class="box3">
<div class="skill">
<span>专业技能</span>
</div>
<div class="require">
<span class="require1">住家</span>
<span class="require2">不含餐</span>
</div>
<div class="experience">
<span class="experience1">工作年限</span>
<span class="experience2">0~3年</span>
</div>
<div class="time">
<span class="time1">工作时间</span>
<span class="time2">全天</span>
</div>
<div class="price">
<span class="price1">服务价格</span>
<span class="price2">25元/小时</span>
</div>
<div class="introduce">
<span class="introduce1">自我介绍</span>
<span class="introduce2">可以洗衣、做饭、照顾老人。在护
工方面有5年的经验,经验丰富。</span>
</div>
<div class="connection">
<a class="leave word">留言</a>
<a class="phone">电话联系</a>
</div>
</div>
</body>
</html>

最后附上自己的HTML 的布局把


返回列表 返回列表
评论

    分享到