zoukankan      html  css  js  c++  java
  • html 前端 总结(一)

    前端 html 总结(一)


    基础部分:
    计算机原理 a: 是由运算器 控制器 内存组成
    储存器包括内存、外村
    外存 硬盘
    内存 由外村调入到内存执行
    输入——内存——cpu 运算

    cpu运算——内存——输出设备

    程序是人为控制电脑,通过指令对电脑进行操作


    html部分:
    标签
    标记
    </> 单标记
    <></> 双标记

    注意:
    所有属性必须有值
    必须加双引号
    字体有分级区别

    网页组成:
    结构与内容

    head 中标明属性

    标签的形成:
    1.块状元素
    特点:
    独霸一行
    可以设置宽高
    默认请款高度和内容相等
    宽度和浏览器同宽


    2.行级元素
    特点:
    同行显示

    标签:
    <html></html>
    <head></head>
    <title></title> 标题
    <body></body> 内容
    <hr></hr> 标题大小


    补充:
    html数据:长度值、绝对值、相对值
    <标记名 属性名=“属性值” 属性名2=“属性值”>


    4.块状元素标签
    <font></font>
    <b></b>
    <hr></hr>
    <ol></ol>
    <li></li>
    <dl><dl>
    <dd></dd>

    5.行级元素

    <img src= "" alt="" titele> // 链接
    <a></a>
    <span></span> 将块状元素转换成行级元素
    <input type=""> 设置表单的属性
    <img src > 链接
    <textarea> 多行文本

    6.表单的使用以及客户的链接
    <form></form> 表单的标记
    <input><input> 表单描述
    <input type=""> 描述样式表
    type属性问题:
    <password> 密码文本
    <textarea>多行文本
    <select>下拉菜单
    <submit> 提交按钮
    <button> 普通按钮
    <reset>重置按钮
    <checkbox> 双选按钮
    <title> 文本文件
    <hidden> 隐藏

    注意:
    <form action ="" methed="提交方法">
    <form action> 提交的每项数据必须加name

    如果输入框中没有name value 则数据不予提交
    所有表单包括from 标记中提交的方式

    提交方式
    get 提交
    post 提交
    get 提交 :
    1.不安全
    2.提交数据有长度
    3.255数据

    post 提交:
    隐秘字段 可以增加安全性
    2.无长度限制


    web 开发标准
    1.标签闭合
    2.属性必有值
    3.标签名 属性用小写

    跨列/行
    1.属于表单结构
    2.只能通过表格属性来实现

    跨行标签
    <colspan>/行
    <rowspan>/列

    链接类型:
    1.页面链接 描点

    <a name="can">
    <a href="# can">

    2.站内链接

    < a href="hettp/www.baidu.con">

    3.邮件链接

    <a href="134@qq.con">


    二 css 部分

    CSS 的优点
    1.美化页面
    2.页面布局

    <div > </div> 盒子模型

    <div>内容 :默认情况 为块元素 可以通过转换来改变

    <style type="text/css"></style > //格子值

    {
    属性值
    }

    2.三种容器
    1.id 选择器
    < div id="">

    2.class 选择器

    <div class>

    其他选择器
    * 主要是解决兼容问题

    注:三种选择器可以相互使用

    层级选择器

    语法 选择器1 选择器 2


    4.属性问题:
    文本属性:
    font_family 通用字体
    line_height 行高
    text_decoration 一般

    5.背景属性
    background_color 背景颜色
    background_img url 链接
    坐标系:
    坐标:
    background_repeat -x
    坐标

    CSS 模型 盒子组成
    1.内填充 padding lelt-top-right-bottom -x
    边框
    border-widtth
    2.外填充
    margin _buttom 四个方向

    结论:
    一个盒子的实际宽度 =内容+外填充四个方向+内填充分四个方向

    CSS布局:
    1.默认文档流
    2.浮动文档 float /方向
    注意:
    1.元素浮动范围在元素之内
    2.会对元素之间产生影响
    3.浮动元素对父元素与的宽高会产生影响
    4.如果父元素一行存在多个元素浮动为父元素宽高
    否则会出想布局错乱

    2.注意:
    某些元素有默认的margin 和padding 用两者置0


    定位布局:
    posttion :absolute (绝对)
    relatire 相对
    重新定位位置不释放
    绝对定位也是让盒子漂浮原来的文档流
    上 下 左 右
    注意:
    以上这四个设置一定是设置了position 之后才能生效

    总结:
    float 和 position 异同:
    相同:
    都浮动、从默认文档脱离

    float 是从父元素 的 left right 来参考定位
    2.position 定位更加强大 left 0px; 直接定位

  • 相关阅读:
    Log4net中的RollingFileAppender解析
    TortoiseSVN使用简介
    ALinq 入门学习(四)查询关键字
    ALinq 入门学习(五)删除修改数据
    ALinq 入门学习(五)插入数据
    C# 委托知识总结
    sql 分页
    C# 数据结构常用术语总结
    ALinq 入门学习(三)Where 条件查询
    ALinq 入门学习(六)Join 连接查询
  • 原文地址:https://www.cnblogs.com/liyiyong/p/5092189.html
Copyright © 2011-2022 走看看