poetries
poetries

DIV+CSS学习笔记总结篇

转载请声明 原文链接地址

第一部分 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>

  • 不成对出现的标签

  • HTML 基本标签的讲解：

    • 标签

    • —-
      仅仅用于标题文本，不要为了产生粗体文本使用它们

    • 标签 段落标签

    • 标签

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

      • 用于强调文本，强度更深，表示重要文本—>用于SEO优化
      • 只是视觉加粗效果—>单纯为了产生加粗

    • 标签

    • em用于强调文本
    • i只是视觉斜体效果
    • 比强调更强
    • 特殊符号：
    •  ; —->空格
    • >; —>大于号
    • <；—>小于号
    • "；—>引号

- ©;–>版权号

第三章 html基本标签

<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()>marquee>
  • direction 表示滚动方向，取值有（left,right,up,down,默认left）
  • loop表示滚动循环的次数，默认为无限循环
onmouseover=this.stop()  onmouseover=this.start()  scrollamout="1"(滚动速度)
  • 表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动

第四章 img图片标签与路径

  • 图片标签与路径：

    • 常见图片格式 jpg png gif
    • Gif （只支持全透明）
    • Jpeg /jpg
    • Png 半/全透明都支持

  • 图片标签写法 ：

  • 图片四要素：

    • src="" 图片路径
    • alt="" 图片含义
    • width="" 图片宽度 和图片大小保持一致
    • height="" 图片高度 和图片大小保持一致
    • title=""

  • 路径知识：

    • 相对路径、绝对路径：

      • 相对路径：(Relative Path) 相对于该文件的路径；
      • 绝对路径：(Absolute Path) 从磁盘出发的路径；

    • align属性–设置图片与后面文字的位置关系
      值–top、bottom、middle、absmiddle、left、right

  • 在静态页面中：

    • /开头表示根目录；

    • ./表示当前目录；（斜画线前面一个点）

    • ../上级目录；（斜画线前面两个点）

    • 直接用文件名不带/也表示同一目录

    • 这些都是相对于当前文件的位置来说的，如果用绝对路径的话就是写全了。

第五章 三种列表的讲解

  • 三种列表的知识讲解：
      • 无序列表
        • 无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识
    <ul>
   <li>li>
   <li>li>
   <li>li>
ul>
      1. 有序列表
      • 有序列表也是一列项目，只是列表项目使用的是数字进行标记。 有序列表始于
          标签。每个列表项始于
        1. 标签。
    <ol>
   <li>内容一li>
   <li>内容二li>
   <li>内容三li>
ol>

    • 列表符号

      • 无序列表-列表符号:

      • type="circle" 空心圆 type=“disc” 实心圆 默认值 type="square" 方块符

      • 有序列表-列表符号

      • type="A" A B C D
      • type="a" a b c d

      • type="1" 1 2 3 4 默认值type=”I” I II III type=”i” i ii iii

      • 列表嵌套

      • 无序列表-嵌套

    <ul>
 <li>柚子
  <ul>
   <li>沙田柚li>
   <li>蜜柚li>
  ul>
 li>
 <li>荔枝li>
 <li>苹果li>ul>
    • 有序列表-嵌套
    <ol>
 <li>茶
  <ul>
   <li>红茶li>
   <li>绿茶li>
  ul>
 li>
 <li>果汁li>
 <li>牛奶li>ol>
    • 定义列表
      • 定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表以
        标签开始。每个定义列表项以
        开始。每个自定义列表项的定义以
        开始。
    <dl>  
     <dt>pc网页制作dt>  
     <dd>学习DIV+CSS JS JQ 项目实战dd>  
     <dt>手机网页制作dt>  
     <dd>手机网页制作实战dd>
dl>

    • dd是对dt的解释

      • < dl>< /dl>用来创建一个普通的列表,
      • < dt>< /dt>用来创建列表中的上层项目，
      • < dd>< /dd>用来创建列表中最下层项目，
      • < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。
    <dl>
    <dt>中国城市dt>
    <dd>北京 dd>
    <dd>上海 dd>
    <dd>广州 dd>
    <dt>美国城市dt>
    <dd>华盛顿 dd>
    <dd>芝加哥 dd>
    <dd>纽约 dd>
dl>
    • dl是definition list的缩写
    • dt是definition title的缩写

    • dd是definition description的缩写

    • list-style属性具有三个属性分量：

    • list-style-position ：设置列表项图标的位置，位于文本内或者文本外
    • list-style-type： 设置列表项图标的类型
    • list-style-image：使用图像设置列表项图标

    第六章 表单元素(上)

    • 表单标签:

      • 表单标签

      • 表单是一个包含表单元素的区域，包括起来的都是表单的内容

    <form>
 <input type="text"/>
form>
    • HTML标签 - Action和确认按钮：
      • 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
    "html.do" method="get">    
        username:  type="text" name="user" />   
        type="submit" value="提  交" />

    • HTML标签 - 隐藏域隐藏标签：

    • 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器

    <form>        
     <input type="hidden" name="hid" value="value">
form>

    • 标签的掌握

      • 常用type类型：

        • type="text" 单行文本输入框
        • type="password" 密码（maxlength=""）
        • type="radio" 单项选择（checked="checked"）
        • type="checkbox" 多项选择
        • type="button" 按钮
        • type="submit" 提交 type="image"图片提交
        • type="file" 上传文件
        • type="reset"重置
        • type="hidden" 隐藏

    • 关于表单中的设置默认值：

    type="text" name="" value="今天心情不错" />
type="radio" name="" value="" checked="checked">
type="checkbox" name="" value="" checked="checked">
    <select name="" >
 <option  value="">option>
 <option  value="" selected="selected">option>
<select>

    • textarea没有默认值

    • 标签的使用

      • label 元素不会向用户呈现任何特殊效果。
      • 不过，它为鼠标用户改进了可用性。
      • 如果您在 label 元素内点击文本，就会触发此控件。

      • 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

      • 标签的for 属性应当与相关元素的 id属性相同。

      • 例子：（重要—注册表单–用户体验–必做）

    <p>单向选择p>
<label for="male">男：label><input type="radio" name="sex" id="male"/>
<label for="nv">女：label><input type="radio" name="sex"checked="check"/>

    第七章 表单和表格(下)

    • 表单和表格标签：
      • 是文本域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols

    • 注意：

      • rows表示这个文本域有多少行
      • cols表示这个文本域有多少列

    • 除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）

    • 表单数据提交给服务器时包括 name属性

<form>      
    <select name=""  id="">
         <option value="1">1月option>  
          <option value="2">2月option>      
select>
form>