zoukankan      html  css  js  c++  java
  • Html 内嵌 选择器属性 Dom操作 JavaScript 事件

    HTML标签:

    一.通用标签(一般标签)

    1.格式控制标签

    <font color="#6699aa" face="楷体" size="24">文字</font>
    <b>加粗</b>
    <i>倾斜</i>
    <u>下划线</u>
    <br/>换行 **
    &nbsp;空格 **
    <center>居中</center> *

    2.内容标签

    <h1>--<h6>标题标签 *
    <p>段落</p> *
    <div></div>层标签,默认占一行 **
    <span></span>层标签 **
    <ol>有序列表 type属性 可以选择序号的方式,每一个列表项是<li> *
    <ul>无序列表,每一个列表项是<li> **

    二:常见标签

    <a href="http://www.baidu.com">这是超链接</a> **
    <img src="8243992_184923477108_2.png" width="200" height="200" /> **

    <table>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table> 表格标签 **

    表格:宽度; border:边框;align:对齐方式;bgcolor:背景色;rowspan:合并行;colspan:合并列

    锚点:

    1.设置锚点:在a标签里加个name属性来声明锚点的名字
    <a name="">内容</a>

    2.设置跳转超链接
    <a href="#锚点名">超链接内容</a>

    input 输入类型用这个
    option 选择类型 用这个

    target:超链接的打开方式
    alt:img标签里的一个图片替代文字

    body的几个属性:
    background:背景图片
    bgcolor:背景颜色
    text:文字颜色

    ../上层目录

    Form表单:

    <form name="zhuce" method="post" action="Untitled-2.html" >
    </form>
    method=""提交方式,一般分为post或者get
    action=""提交到哪个页面来处理

    一.文本输入

    1.<input type="text" value="" name="" />单行文本输入框
    2.<input type="password" value="" name="" />密码框
    3.<textarea rows="10" value="" name=""></textarea> 文本域
    4.<input type="hidden" value="" name="" />隐藏域


    二.按钮

    1.<input type="submit" value="注册" name="" />提交按钮
    2.<input type="reset" value="重置" name="" /> 重置按钮
    3.<input type="button" value="检查" name="" />普通按钮
    4.<input type="image" src="" width="100" height="30" value="" name=""/>图片按钮

    三.选择输入性的

    1.<input type="radio" name="sex" checked="checked" value="true" />单选按钮
    如果让多个单选按钮成为一组,把他们的name值设置为相同的值。

    2.<input type="checkbox" value="" name="" /> 多选按钮

    3.<select name="">
    <option value="01">张三</option>
    <option value="02">李四</option>
    <option value="03">王五</option>
    </select>
    下拉列表,每一个option是一个列表项,加上属性multiple="multiple"之后变为多选的列表

    4.<input type="file" name=""/>选择文件,上传文件

    CSS:层叠样式表,作用是美化网页

    样式格式:样式名:样式值;样式名:样式值;

    /* 注释语句 */

    分类:

    1.内联式,直接写在标签里 style=""
    <div style=""></div>

    2.内嵌式,写在head里面
    <style type="text/css">
    *
    {
    font-size:36px;
    }

    </style>

    3.外部样式
    新建一个样式表文件,用附加样式表引用到网页内

    选择器:

    一:普通选择器

    1.标签选择器:用标签名来选择元素控制样式
    div{
    font-size:48px;
    }
    2.class选择器
    .aa{
    font-size:48px;
    }

    3.id选择器,唯一的
    #aa
    {
    font-size:48px;
    }

    4. * 代表所有的

    优先级:id选择器--class选择器--标签选择器--*

    二:复合选择器

    1. 用,隔开 #aa,#cc 并列关系

    2. 用空格隔开 #aa div 后代关系

    3. 用.隔开 div.bc 筛选,在div里面筛选class为bc的标签

    样式:

    一:背景与前景
    background-color:背景色
    background-image:背景图片
    background-repeat:背景图片布局方式
    background-size:背景大小
    background-attachment:fixed背景图片的固定
    background-attachment:scroll背景图片的滚动
    background-position:center居中
    background-position:top left 左上角
    background-position:top 10px left 50px 距离上10像素 距离左50像素

    font-family:字体
    font-size:字体大小
    font-weight:字体粗细 bold加粗
    font-style:文字风格 italic倾斜
    color:字体颜色
    text-decoration:underline加下划线 overline上划线 line-through删除线
    text-indent:首行缩进多少像素

    二:对齐方式
    text-align:水平对齐方式 center剧中 left靠左 right靠右
    vertical-align:垂直对齐方式 middle居中 bottom靠下 top靠上
    line-height:行高

    三:其它
    display: none 隐藏 block显示
    overflow:hidden超出隐藏 scroll超出部分出现滚动条

    四:列表和方块

    width,height(top.bottom.lefr.right)只有在绝对坐标下才有用

    list-style:none 取消序号

     list-style:circle 序号变成圆圈

    list-style-image:URL(图片地址):图片做序号

    list-style-position:outside   序号在内外

    list-style-position:inside: 序号跟内容在一起

    五:边界和边框

    border(表格边框,样式表),margin(表外间距),padding(内容与单元格间接)

    border:5px solod blue:   四边框 5个像素宽度 实线 蓝色

    margin: auto 居住  top上 bottom 下 left 左 right右 

    padding :top上 bottom 下 left 左 right右 

    四、格式与布局
    (一)流式布局
    float:left/right
    clear:both
    一旦float起来,它将脱离原来网页的层面。后会的没有float起来的层顶上去。
    1.并行排列:
    a.假设中间有一个float起来的层,不会影响前面的,但会影响后面的(会顶上去);
    b.在相应位置上加上一个空的<div style="clear:both"></div>,截断流式布局。

    2.嵌套排列:
    a.嵌套float的一般规则:
    默认情况下,里层的会把外层的给撑开;
    当里层float起来,外层没有float,外层不会被撑开。
    如果里层,外层都float起来,里层又能撑开外层。

    b.如何设置布局的居中?
    第一步:设一个最外层的div。宽度是100%
    第二步:在上个div的里面,设一个居中的div。设置宽度(960-980),margin:auto
    第三步:在第二步的div中编辑网页内容即可。
    (二)定位布局
    p
    {
    62px;
    height:19px;
    padding-top:7px;
    font-weight:normal;
    color:#F00;
    float:left;
    }
    #shuru
    {
    float:right;
    195ox;
    height:26px;
    background-color:#999;
    color:#FFF;

    }
    tupian
    {
    float:left;
    25;
    height:25px;
    }

    avaScript:
    几个问题:
    1.JavaScript是个什么东西?——脚本语言。
    JavaScript,Java,JScript
    Sun/Oracle Java
    网景NetScape
    微软 Win98 IE3

    2.什么是脚本语言?
    不能独立运行,必须嵌在宿主文件中才能运行的语言。

    嵌入语法:
    <script language="javascript">

    </script>

    一、类型与变量
    数据类型:字符串、整型、浮点型、布尔型、日期时间、对象型
    变量类型:只有一种变量类型——通用类型

    弱类型的语言。
    解释运行的语言。

    强制类型转换:
    1.其它类型转成整数:
    var a = "5";
    a = parseInt(a);

    2.其它类型转成小数:
    var a = "5.2";
    a = parseFloat(a);

    3.判断是否是数字:
    isNaN(a)——判断是否是个合法的数字,返回bool型
    true——不是个数字;false--是数字

    二、运算符
    (一)算术运算符 7
    + - * / % ++ --
    (二)关系运算符 6
    == != > < >= <=
    (三)逻辑运算符 3
    && || !
    (四)其它运算符
    = ?: += -= *= /= %=

    三、语句
    (一)顺序
    (二)分支
    1.if(表达式){}
    2.if(表达式){} else {}
    3.if(表达式){} else if(表达式){}....else{}
    4.if(表达式){if(表达式){}}
    例子:
    1.判断是否是闰年
    2.相亲
    3.身高与体重
    4.一元二次方法根的情况

    (三)循环
    四要素:初始条件、循环条件、循环体、状态改变
    for(初始条件;循环条件;状态改变)
    {
    循环体;
    }
    for(var i=0;i<10;i++)
    {
    alert("你好");
    }
    两大类问题:穷举和迭代
    穷举:求100以内所有与7相关的数字
    迭代:求100以内所有数的和

    例子:
    1.画星号
    2.买东西
    3.百马百石
    4.兑硬币
    5.配等式
    6.侦察兵
    7.猴子吃桃
    8.算年龄
    9.折纸
    10.棋盘分粮食


    四、数组

    五、函数

    一:window.open() 打开一个窗口

    四个参数:

    1.要打开的网页地址
    2.打开方式
    3.打开的网页属性设置

    二:window.close() 关闭窗口

    window.opener.close();关闭源窗口

    三:间隔和延迟

    var one = window.setInterval("openone()",1000); 间隔1秒钟执行openone()函数,一直执行

    window.clserInterval(one); 清除间隔执行

    var aa = window.setTimeout("openone()",1000); 延迟1秒钟执行openone()函数,执行一次

    window.clearTimeout(aa); 清除延迟执行

    四:调整页面

    window.navigate() 跳转页面
    window.moveTo(x,y) 移动页面至坐标x,y
    window.resizeTo(宽,高) 调整页面大小
    window.scrollTo(x,y) 滚动页面

    五:模态对话框 和 非模态对话框

    window.showModalDialog();打开模态对话框
    window.showModelessDialog(); 打开非模态对话框

    六:window.history

    window.history.back();后退
    window.history.forward();前进

    window.history.go(n); 如果n是正数则前进n个页面 如果n是负数则后退n个页面

    七:window.location

    window.location.href 获取页面地址
    window.location.href=""; 跳转页面

    八:window.status

    window.status=“”; 设置状态栏显示

    window对象:
    alert()——显示警告窗口
    confirm() ——显示确认窗口,返回bool型
    open()——打开新页面窗口——三个参数,返回被打开的窗口。
    close()——关闭窗口
    setTimeout(代码,毫秒数)——多长时间之后执行指定的代码
    setInterval(代码,毫秒数)——每隔多长时间执行指定的代码
    resizeTo(),moveTo(),scrollTo()....


    history对象。location对象。document对象。status对象
    history对象:
    go(整数值)
    location对象:
    reload() ——重新加载页面
    href——指定页面的URL地址 URL——统一资源定位器
    status对象:

    document对象:
    一、找到指定的元素。
    1.根据id找元素——找一个
    2.根据name找元素——找一组
    3.根据标签名找元素——找一组
    二、操作元素
    (一)、操作属性
    1.获得属性值
    2.添加/修改属性
    3.删除属性
    (二)、操作样式
    1.直接操作样式属性
    a.获得样式属性的值
    b.设置或修改样式属性的值

    2.操作元素的class
    a.获得class
    b.设置class

    (三)、操作内容
    1.表单元素
    a.取值
    b.赋值
    2.非表单元素
    a.取值
    b.赋值

    (四)、元素整体操作
    1.创建
    2.添加
    3.复制
    4.替换
    5.删除
    三、相关联元素
    同辈
    子辈
    父辈

    操作元素:
    (一)定位关联元素:
    parentNode——直接父级元素
    childNodes - 所有的直接子级元素
    nextSibling - 下个兄元素——注意回车
    previousSibling - 上个兄弟元素 ——注意回车

    案例:
    1.操作父级元素:
    var t = document.getElementById("tt");
    t.parentNode.className="y"; //操作父元素

    2.操作子及元素:
    var t = document.getElementById("tt");
    var cs = t.childNodes;
    for(var i=0;i<cs.length;i++)
    {
    cs[i].className="y";
    }
    3.操作兄弟元素:
    var t = document.getElementById("tt");
    t.nextSibling.className="y";
    (二)操作元素对象
    创建
    var a = document.createElement("标签名");

    添加
    var d = document.getElementById("dd");
    d.appendChild(a);

    删除
    var t = document.getElementById("tt");
    var d = document.getElementById("dd");
    t.removeChild(d);

    复制
    var d = document.getElementById("dd");
    var s = d.cloneNode();

    替换
    var t = document.getElementById("tt")
    var d = document.getElementById("dd");
    var n = document.createElement("div");
    t.replaceChild(n,d);

  • 相关阅读:
    Fitness
    【代码优化】Unity查漏补缺
    Fitness
    MonoBehaviour生命周期与对象数据池应用
    Fitness
    点、向量、方向在局部与世界坐标系转换的对比
    在企业运营中的感触
    技术杂想2015年夏天
    Heimich manoeuvre 海姆利克氏操作
    徒手CPR心脏复苏
  • 原文地址:https://www.cnblogs.com/tianxuan/p/4836907.html
Copyright © 2011-2022 走看看