今天的课程,老师主要介绍了div(盒子模型)更加系统性的一些知识以及标题标签和段落标签的相关知识。

       一、补足昨天遗落知识点。

       属性float(浮动)属性值有两个:left和right;

       属性clear(清除)属性值有三个:left、right和both;

      “clear:left;”表示:“我的左边不允许有任何东西”;

       在样式<style></style>中,正确写法:.clean{width:0px;height:0px;clear:both;}

       二、“id”与“class”的比较。

       1.“id”的唯一性更强;

       2.“id”与“class”同时出现,程序优先指向“id”;(在样式style中,“id”与“class”样式存在交集,“id”可以覆盖“class”相应内容,详见“居中田字格”编程内容)

       3.、“class”代表“一类”,、“id”代表“一个”,详见“居中田字格”编程内容

       三、div(盒子模型不一定是div,只是它具有代表性,它代表一切会换行的东西,代表一类)

       属性:border(边框)、margin(外边距)、padding(内边距);margin默认从上面开始,顺时针行走;"margin:20px 10px;"代表“margin-top:20px;margin-right:10px;margin-bottom:20px;margin-left:10px;”(给两个值,对边相等)

       四、default/index:默认网站首页。网址:www.51cto.com/index.html中“www.51cto.com 代表服务器中的一个文件夹。

       五、标题标签和段落标签。

       标题标签:<h2></h2>,字体大小h1~h6;段落标签:<p></p>;h标签和p标签都可以自动换行,类似div;换行:<br>。

       六、实体:在html中具有特殊意义的字符,如空格(&nbsp;)、大于(&gt;)、小于(&lt;)。(编程中符号不能直接打出来,想想是否是实体)

       七、居中田字格编程过程

 

wKioL1gh8CiB1orBAAFHSKKHphE202.png-wh_50

wKiom1gh8CmC6-02AAG2Erzc_zc852.png-wh_50

       八、居中四圆编程过程

wKiom1gh8kCiEB0PAAD3yXHvp_M030.png-wh_50

wKioL1gh8kHCLciQAAF0mHRMofE969.png-wh_50

       九、标题和段落编程过程

wKiom1gh9xrhhBR1AAOLU5iQgHA304.png-wh_50

wKiom1gh9xvx4oP7AAFQZ3Gi7Pk969.png-wh_50