前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

DIV+CSS系统学习笔记回顾

首页
2016-09-06 18:24:08
Front-End
CSSXHTML

# 第一部分 HTML


# 第一章 职业规划和前景


  • 职业方向规划定位:

    • web前端开发工程师
    • web网站架构师
    • 自己创业
    • 转岗管理或其他
  • web前端开发的前景展望:

    • 未来IT行业企业需求最多的人才
    • 结合最新的html5抢占移动端的市场
    • 自己创业做老板
    • 随着互联网的普及web开发成为企业的宠儿和核心
  • web职业发展目标:

  • 第一、梳理知识架构

    • 负责内容的HTML
    • 负责外观的css(层叠样式表)
    • 负责行为的js
    • ps切图
  • 第二、分解目标(起步阶段、提升阶段、成型阶段)

    • 起步阶段:

      • 基本知识的掌握
      • 常用工具的掌握
      • 沟通技巧的掌握(围绕客户的需求)
      • 良好的开发习惯(加注释、对齐方式)
    • 提升阶段:

      • 熟悉掌握HTML基本标签和属性
      • 熟练掌握css的基本语法和使用
      • 浏览器兼容和w3c标准的掌握
      • 结合html+css+js开始系统项目的开发
    • 成型阶段:

      • 精通DIV+CCS布局
      • 精通css样式表控制html标签
      • 熟悉运用js制作动态网站的效果
      • 能独立开发完成网站

# 第二章 html基本结构


  • 认识HTML:

    • html不是一种编程语言,是一种标志语言
    • 标记语言是由一套标识标签组成的
    • html使用标签来描述网页
  • html结构:

<html>
    <head></head>
    <body></body>
</html>
@前端进阶之旅: 代码已经复制到剪贴板
  • 不成对出现的标签 <br> <hr> <meta> <img> <input..> <option..> <link>

  • HTML 基本标签的讲解:

    • <html> <head> <body>标签

    • <h1>----<h6> 仅仅用于标题文本,不要为了产生粗体文本使用它们

    • <p>标签 段落标签

    • <strong><b>标签

    • 都会让文字产生加粗效果

      • <strong>用于强调文本,强度更深,表示重要文本—>用于SEO优化
      • <b>只是视觉加粗效果—>单纯为了产生加粗
  • <em> <i>标签

    • em用于强调文本
    • i只是视觉斜体效果
    • <strong>比<em>强调更强
  • 特殊符号:

    • &nbsp; ---->空格
    • &gt; —>大于号
    • &lt;—>小于号
    • &quot;—>引号
    • &copy;–>版权号

# 第三章 html基本标签


  • HTMl基本标签:
    • span标签

      • 对被用来组合文档中的行内元素
      • 注意:span没有固定的格式表现,当对它应用样式时,才会产生视觉上的变化
    • <pre>标签

      • 文字的格式按源码的排版来显示,我们称之为预处理格式
    • <a>标签—>他有一个必不可少的属性 href

      • target属性:
      • _self(在原来页面打开)
      • _blank(新窗口打开)
      • _top(打开时忽略所有的框架)
      • _parent(在父窗口中打开)
    • 创建锚点和锚链接

      • 锚点也是一种超链接,是页面内进行跳转的超链接
        • 第一步:创建锚点 <a name="锚点名称"></a>
        • 第二步:使用创建好的锚点名称 <a href="#锚点名称">内容</a>
    • marquee标签

      • 可以创建一个内容滚动效果
<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
fe
  • 第一部分 HTML
    • 第一章 职业规划和前景
    • 第二章 html基本结构
    • 第三章 html基本标签
    • 第四章 img图片标签与路径
    • 第五章 三种列表的讲解
    • 第六章 表单元素(上)
    • 第七章 表单和表格(下)
  • 第二部分 CSS
    • 第八章 css基础知识
    • 第九章 css选择器(上)
    • 第十章 css选择器(下)
    • 第十一章 背景属性
    • 第十二章 文字文本属性
    • 第十三章 盒子模型
    • 第十四章 块元素、行元素与溢出
    • 第十五章 定位
    • 第十六章 框架
    • 第十七章 css高级属性
  • 第三部分 附录
    • 附录一 DIV命名规范
    • 附录二 CSS精灵
    • 附录三 一些tips解决方案
      • 页面优化实践
      • 写DIV+CSS 的一些常识
      • 常用代码片段
      • 一些总结
      • 一些概念
      • 方案荟萃扩展阅读
    • 附录四 部分工具资源
    • 附录五 编码规范
    • 附录六 进阶学习
    • 附录七 其他资源
    • 附录八 常见问题
    • 其他

← CSS中的BFC标准盒子模型和IE盒子模型 →