迷人的酋长
迷人的酋长

Web基础(08-29~08-30)

08-29

1. HTML简介

概述: Hyper Text MarkUp Language, 超文本标记语言.
    超文本:  
        比普通文本的功能更加强大, 里边可以放: 图片, 音频, 视频等.
    标记语言: 
        由标签组成, 可以被浏览器识别.
作用:
    用来设计(静态)页面的.
        静态页面: 指的是页面中的内容是固定不变的, 不管什么时候看到的内容都是一样的.
            //例如: html, js
        动态页面: 指的是页面中的内容是 由程序自动生成(读取数据库, 然后展示)   , 不同时间点看到的数据不一样.
            //例如: 12306卖票
            //JSP, Servlet这些技术是用来开发动态页面的.
特点:
    1) HTML不区分大小写, 但是为了阅读方便, 建议小写.
    2) HTMl是由标签组成, 可以被浏览器识别.
        //例如: 我是字体标签
    3) 上述的标签中, 前边的标签叫: 开始标签(也叫开放标签),  后边的标签叫结束标签(也叫闭合标签)
    4) 没有闭合标签的标签叫: 自闭合标签.
        //例如: 
, 

    5) 标签可以有属性, 属性值用引号引起来.  //单双引均可.
    6) html文件的后缀名可以是.htm, .html, 前者是老的命名规范, 后者是新的命名规范.
    7) HTML的基础格式是: 有标签包裹, 由头标签和体标签组成.
        
            
                这里写标题
            
            
                //俗称的页面的大白部分
                这里写的是给用户展示信息的地方
            
        
    8) HTML中注释的写法:
        
    9) 如果涉及到标签的嵌套了, 建议包裹嵌套, 不建议交叉嵌套.

2. HTML标签之字体标签: 

属性:
    size:   设置字体大小的, size的值的范围是:1-7, 字体最小的是1.
            //实际开发中, 我们都是通过样式去设置字体大小的, 上述的设置方式一般不用.
    color:  设置字体颜色.
            //可以通过 英文字母 进行设置.
            //也可以通过 RGB 三原色进行设置.  Red:红色, Green:绿色, Blue:蓝色
    face:   设置字体格式的.

3. HTML标签之排版标签:

:  标题标签, 数字的范围是:1-6

:        段落标签
:        加粗
:        斜体
:        下划线

      换行符

      分割线(自带换行功能)

4. HTML标签之列表标签:
    ,

    无序列表: 
      
    
        
        
      • 北京
        • 
        
      • 上海
        • 
        
      • 广州
        • 
    
      

type属性:
        disc:   实心圆点.
        circle: 空心圆点.
        square: 实心正方形.
        
有序列表: 
        
    
          
        
        1. 北京
          2. 
        
        2. 上海
          3. 
        
        3. 广州
          4. 
    
        

    属性:
        type:
            数字,
            大小写字母,
            大小写罗马数字.
            
        strat: 设置从哪个数字开始, 只针对数字类型有效.
    5. HTML标签之图片标签: 
    属性:
    src:    设置图片的路径.
        注意: 图片路径的问题.
            如果图片在该html文件的上级:    ../表示上一级.
            如果图片和该html文件在同一级: 直接文件名即可.
            如果图片是该html文件的子集:   也是直接写路径即可.
    border: 设置图片的边框.
    height: 设置图片的高度.
    width:  设置图片的宽度.
    alt:    图片不存在的时候显示的内容.
    6. HTML标签之超链接标签: 
    属性:
    href: 超链接的路径.
        相对路径:   跳转项目内部的页面.
        绝对路径:   跳转到外部页面. 需要写: http://
    
    target: 页面的打开方式
        _self:  在自身页面中打开.
        _blank: 新建页面打开.
        _parent:在指定的界面中打开.
            注意: parent是标签名字, 写哪个名字就在哪个标签中打开.
    7. HTML标签之表格标签: 
    属性:
    border:
    height:
    width:
    align: 设置表格居中(center),左对齐(left), 右对齐(right).
    bgcolor: 设置表格的背景色
    : 表示行
    : 表示列 colspan: 跨列. rowspan: 跨行. : 表示列, 在的基础上,多了居中和加粗的功能. 案例: 单表格标签的使用. 表格的嵌套使用.
    8. HTML标签之框架标签: 
    
属性:
    cols: 纵向切割.
    rows: 横向切割.
    
    : 切割后的每一个模块.

    
页面布局:
       空格
    >    大于号
    <    小于号


    08-30

    1. HTML标签之表单标签:

    概述: 就是将现实生活中的表单变为"页面形式"的表单.

    A: 表单标签是标签, 写在标签中的标签是: 表单项.
    B: 表单项必须放在标签中才能提交.

    表单项分类:
    1.输入项:  //输入项都是标签, 根据输入项的类型不同, 输入项也不同.
        //格式: 
        text: 文本框
        password: 密码框
        radio: 单选框      //根据name属性区分是否是同一组数据.
        checkbox: 复选框   //根据name属性区分是否是同一组数据.
        file: 文件框(就是让你选择文件的路径的)
        
        submit: 提交按钮
        reset: 重置按钮
        image: 图片按钮
        button: 普通按钮, 没有任何自带的功能, 功能需要用户自定义.
        hidden: 隐藏域, 例如: 某些信息是指向给后台(程序员)看, 不想提示给用户, 就可以用该输入项.

    2.下拉列表: 
            
            
            
        
    
    
    3.文本输入域: