html和css基础知识及部分上机操作指导

页面结构实训

div+css简单布局练习

 

 

根据页面效果做出页面结构图​

 

​案例讲解要点
1. 结构化标签 头部<header></header>  主导航<nav></nav>  底部<footer></footer>
2. 注释的添加
HTML    <!--head begin-->
CSS      /* height: 50px; */
3. 利用浮动实现多行整齐的排列
4. 背景样色
background: rgba(255, 255, 255, 0.8);
background-color: #ccc;
Background-color:red
5. :nth-of-type(n) 选择器匹配属于父元素的特定类型的第n个子元素的每个元素.
n的类型：
数字：
公式：an+b (n计数器从0开始 b偏移量)
关键字：odd奇数  even偶数

常用标签

1. <h1>~<h6>
2. <p>   换行<br />  特殊字符 &gt (>)  &lt(<)     &nbsp空格
3. 图像标签<img src="banner1.jpg" alt="涂鸦、T恤、精品女装" title="穿搭找我,靓丽出街" />
4. 列表
无序列表   <ul type="circle"><li></li><li></li><li></li><li></li></ul>
有序列表  <ol type="A" start="4"><li></li> <li></li><li></li><li></li> </ol>
自定义列表<dl>
<dt></dt>
<dd></dd>
<dd></dd>
 </dl>
 5. 表格  
基本标签<table><table/>、<tr></tr>、<th><th/>、<td></td>、<caption></caption>
最重要属性  colspan   rowspan
6. 超链接
站内链接  <a href="B.html" target="_blank">点我点我，我要调整到页面B</a>
站外链接  <a href="https://www.baidu.com/">百度</a>
图像链接  <a href="titanic.html"><img src="img/titanic.jpg"></a>
下载链接  <a href="图片素材.zip">图片素材下载</a>