陈沫沫
陈沫沫

陈沫沫-初识HTML之基础篇

前端认知

** 一、公司开发流程**
1、 产品需求(产品经理给需求文档)
2、项目设计(视觉设计师给PSD文件，交互设计师配合)
3、前端开发
4、后端开发
5、测试
6、上线运营

二、前端开发的核心语言
**HTML ** 超文本标记语言 （负责页面结构）
**CSS ** 层叠样式表 （负责页面样式）
**JS ** 脚本语言 （负责页面行为）

HTML的基本结构

    /*文档头声明*/
   /*HTML中的根元素*/
     /*head标签内部的内容绝大部分是不可见的*/
       /*定义html页面的元数据，meta中的charset属性，针对搜索引擎和解析格式的属性*/
    Document  /*定义文档的标题，在页面中可见 */


    /*主要书写页面中的内容*/
  • direction 表示滚动方向，取向有（left，right，up，down，默认left）
  • loop 表示滚动循环的次数，默认为无线循环
onmouseover=this.stop( )  onmouseover=this.start( ) scrollamout="1"（滚动速度）

img标签的用法

  • img图片标签与路径
  • 常用的图片格式 jpg png gif
  • gif (只支持全透明的)
  • Jpeg / jpg
  • png(半透明/全透明都支持)
  • 图片四要素
  • src=" " 图片路径
  • alt=" " 图片含义
  • width=" " 图片宽度 尽量与图片大小保持一致
  • height=" " 图片高度 尽量与图片大小保持一致
  • 图片标签的写法
  • 关于路径的小知识
  • 相对路径：（Relative Path）相对于该文件的路径;
  • 绝对路径：（Absolute Path）从磁盘出发的路径;
  • / 开头表示根目录
  • ./ 表示当前目录；
  • ../ 上级目录
  • 直接用文件名不带 / 也表示同一目录

关于列表的用法

  • Number1
    • 无序列表
    • 无序列表顾名思义就是一个没有顺序项目的列表，此列表项默认粗体圆点
      
         
    • 
         
    • 
         
    •
    • Number2
        • 有序列表
        1. 有序列表也是一列项目，只是列表项目使用的是数字进行标记.
      
          
    1. 内容一
      2. 
          
    2. 内容二
      3. 
          
    3. 内容三
      4.
    • 列表嵌套
    • 无序列表--嵌套
      
        
    • 布朗熊
          
        
            
      • 海绵宝宝
        • 
            
      • 多啦A梦
        • 
       
      
     
      • 
     
    • 派大星
      • 
     
    • 海马
      •
    • 无序列表--嵌套
      
        
    1. 布朗熊
          
        
             
      1. 海绵宝宝
        2. 
             
      2. 多啦A梦
        3.
  • 派大星
  • 海马
    •
    • Number3
    • dl 定义列表
    • 定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表
      标签开始。每个定义列表项以
      开始。每个自定义列表项的定义以
      开始
    
      
    男装
    
      
    衬衫
    
      
    裤子
    
      
    女装
    
      
    卫衣
    
      
    裙子
    • 与
      都必须放在
      标签内部之间使用
    • dd是对dt的解释
    • 是用来创建一个普通列表
    • 是用来创建列表中的上层项目
    • 用来创建列表中最下层的项目

    表单

    • 表单标签
    • 表单标签
      • 表单是一个包含表单元素的区域，包含起来的都是表单的内容
    • 关于标签
      • type="text" 单行文本输入框
      • type="password" 密码 （maxlength=" " ）
      • type="radio" 单项选择（checked="checked"）
      • type="checkbox"多项选择
      • type="button" 按钮
      • type="submit" 提交 type="image" 图片提交
      • type="file" 上传文件
      • type="reset" 重置
      • type="hidden"隐藏
    • textarea 没有默认值
    • 标签的使用
      • 标签的 for属性应当与相关元素的id属性相同
      • 举个例子
    单选
    • 标签，可以在其中插入一段文字内容，它有两个经常使用的属性 rows 和 cols
    • rows 表示这个文本域有多少行
    • cols 表示这个文本域有多少列