卓音前端第一次讨论班_实例分析（涉及知识点：HTML、CSS基础）

卓音前端第一次讨论班_实例分析（涉及知识点：HTML、CSS基础）

一、 页面展示

• 主页

• 报名表

二、 页面分析

在我们拿到产品的 需求文档+原型图 后，应该先 （以前端开发的角度细读需求文档，列出模糊点，与产品商讨，）分析，有几个页面，每个页面是什么内容，每个页面应该分几个模块去做，（如果是团队开发，还应根据 需求模块 分工）

以本次案例为例（以上括号中的内容暂不涉及）：

• 整个网站有两个页面，主页（主要是工作室的相关介绍），报名表
• 主页，有导航栏、大图片、工作室介绍、部门介绍、风采展示五部分，可以分成5个div去做
• 报名表，有导航栏、报名表两部分，可以分成两个div去做

三、 “主页”页面

1. 导航栏

• div、span同为无语义标签，其作用主要为划分模块，为什么这里要用div？

  • div为块级元素，span为行内元素

  • 知识点：

    标签显示模式	是否可以设置宽高	是否独占一行	默认宽度
    块级元素	可以	独占一行	父级的100%
    行内元素	不可以	不独占一行	由内容决定
    行内块元素	可以	不独占一行	由内容决定

  • 显示模式的转化：

    display: block;				/* 转化为块级元素 */
    display: inline;			/* 转化为行内元素 */
    display: inline-block;		/* 转化为行内块元素 */
    

• 导航栏一般使用无序列表

  • 语义化标签，比如h1、p等等；无序列表 更符合导航栏的语义

  • 其他的标签（例如span等等）也可以实现，只是通常会使用无序列表

  • 补充知识点：

    list-style: none; 		/* 去掉无序列表的小圆点 */
    

    列表相关详见 4.2

• 超链接a

  • 如何去掉超链接的默认效果？

    color: black;				/* 修改字体颜色 */
    text-decoration: none;		/* 去掉下划线效果 */
    

  • 超链接的分类：

    • 外部链接：访问其他网址

      <a href="http://www.baidu.com/">外部链接</a>
      

    • 内部链接：跳转到另一个HTML文件

      <a href="./index.html">内部链接</a>
      

    • 锚点链接：跳转到同一页面的不同位置

      <a href="#idName">锚点链接</a>
      ......
      <div id="idName"></div>
      

    • 除此之外还有邮件链接、下载链接，，但是不常用

      <!-- 邮件链接 -->
      <a href="mailto:接收方邮件地址">邮件链接</a>
      <!-- 下载链接 -->
      <a href="文件路径" download>下载链接</a>
      

  • 空链接怎么写？图片链接怎么写？

    <!-- 空链接 -->
    <a href="#"></a>
    <!-- 图片链接 -->
    <a href="#"><img src=""/></a>
    

  • target属性（用来指定超链接打开的位置）

    • _self（ 默认值）：在当前页面中打开超链接
    • _blank:在一个新的页面中打开超链接
    • 其余值（_parent、_top和framename）基本已不再使用

  • title属性：鼠标悬停在链接上面的时候显示的文字

• css的三种写法

  • 行内样式：

    <div style=""></div>
    

  • 嵌套样式：

    <style>
        * {
             
            color: black;
        }
    </style>
    

  • 外联样式：

    <link rel="stylesheet" href="../css.css" />
    

• 四种基本选择器

  • 标签选择器（常用于清除默认效果）
  • 类选择器 （常用）
  • id选择器 （后期交互常用，css样式用得比较少）
  • 通配符选择器 （常用于清除默认效果）

• 鼠标悬浮的效果

  • 使用伪类选择器实现

  • 常用的伪类选择器：

    Selector:hover {
              }		/* 鼠标悬停时的样式，常用于增强用户体验  */
    Selector:active {
              }		/* 鼠标按下时触发的样式，常用于增加交互性  */
    Selector:visited {
              }		/* 访问过的链接的样式，常用于增强网站的导航体验  */
    Selector:focus {
              }		/* 获取焦点时的样式，常用于表单元素 */
    

• CSS相关属性：

  /* 字体相关 */
  font-size: 20px;
  font-weight: 700;   		/* normal/bold/400/700 */
  font-style: italic;			/* normal/italic */
  line-height: 100px;
  font-family: STHeiti;
  text-indent: 2em;			/* 注意单位 */
  text-align: center;			/* left/center/right */
  text-decoration: none;		/* none/underline/overline/line-through */
  color: black;
  font: italic bold 20px/50px STHeiti;
  /* 其他 */
  width: 100px;
  height: 100px;
  background-color: white;
  

2. 图片

• 第一周学习的内容无法完全用标签实现效果

  • img标签相关

    <img src=" " alt=" "/>
    <!-- src：图片的位置和名称（必须属性） 
    alt：图片无法显示时显示的文字
    title：鼠标悬停在图片上面的时候显示的文字 
    width：图片宽度（不常用） 
    height：图片长度（不常用） -->
    

• 路径：

  • 绝对路径：绝对路径是指文件在硬盘上真正存在的路径，从盘符出发
  • 相对路径：相对于自己的目标文件位置，从当前文件出发

• 使用背景图片来实现效果

  • CSS背景图片相关

    background-image: url(../img.png);
    background-repeat: repeat;				/* repeat/no-repeat/repeat-x/repeat-y */
    background-position: center center;		/* 第一个值是水平方向；第二个值是竖直方向；若只有一个值，第二个值默认center */
    background-size: cover;					/* 第一个值设置宽度，第二个值设置的高度/cover/contain */
    background-attachment: fixed;			/* fixed/scroll/local */	
    

• 标题标签系列默认效果有margin-top、margin-bottom（下周学习内容），所以本周先用其他标签

3. 工作室介绍

• 标题标签系列

  <!-- 字体加粗，字号逐渐减小，独占一行 -->
  <h1></h1>
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>
  

• 段落标签

  <!-- 独占一行，段落之间存在间隙 -->
  <p></p>
  

4. 部门介绍

• 并集选择器

  .class1 h1,
  .class2 h1 {
         }
  

• 文本格式化标签

  • 加粗（strong标签、b标签、css实现 font-weight: 700; ）
  • 倾斜（em标签、i标签、css实现 font-style: italic; ）
  • 下划线（ins标签、u标签、css实现 text-decoration: underline; ）
  • 删除线（del标签、s标签、css实现 text-decoration: line-through; ）

5. 风采展示

• 表格相关：

  <!-- 
  1. 表格默认没有边框，边框属性  border="1px"
  2. 表格高度height、宽度width （一般使用css调整高度宽度，不使用这两个属性）
  3. cellpadding每个单元格的内边距
  4. cellspacing单元格与单元格之间的间隙
  -->
  <table>
      <thead>
          <tr>
              <!-- 表头默认效果：加粗、居中 -->
              <th></th>