JS笔记02

Posted 喝耶加雪啡的JAVA猴子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS笔记02相关的知识,希望对你有一定的参考价值。

回顾:

html: 超文本标记语言

后缀名: *.html 或 *.htm

标签分类:

围堵标签: 双标签

<html>标签体</html>

空标签: 单标签

<br/>

标签上的属性:

<xxx 属性名="值" 属性名="值"></xxx>

html结构:

html:

head:

title

meta

link

style

body:

常见的标签:

<a href="跳向指定的路径" target="_blank" >标签体</a>

<img src="路径" alt="提示信息" title="鼠标移上时的提示信息" />

相对路径:

./

../

绝对路径:

盘符

www.itcast.cn

table:

tr

td | th

thead , tbody , tfoot

table:

thead:

th

tbody:

td...

tfoot:

td

h1-h6

font

b i strong

 

p br hr

ul 无序

ol 有序

li

frameset:

属性:

cols:

rows:

子标签:

frame:

属性:

src:

name

///////////////////////////////

html:

表单

css:

///////////////////////////////

案例-完成注册页面

需求分析:

有一个页面,页面上有很多图片和文字,且格式不一(表单).

技术分析:

html:

表单:form ★★★

div + css

步骤分析:

创建一个页面,添加5个div

1.嵌套3个div,让div在一行显示

2.给div添加背景颜色,添加超链接

3.添加背景图片,嵌套一个div

添加一个表单

4.一张图片

5.两个p标签

//////////////////////

day02html&css

 

- form★★★

  "表单

  格式:<form></form>"

  - 作用

    - 用来收集用户的数据,将数据提交到指定的服务器

  - 常用子标签:

    - input :输入框

      - 常用属性type

        - text 默认

          "文本输入框"

        - password

          "密码输入框"

        - radio

          "单选框"

        - checkbox

          "复选框"

        - button

          "普通按钮"

        - submit

          "提交按钮"

        - reset

          "重置按钮"

        - image:必须和src属性连用

          "图片提交"

        - file

          "文件输入框"

        - hidden

          "隐藏"

    - select <select></select>

      "下拉选,需要和option子标签连用"

      - 子标签

        - <option></option>

          "value需要定义在option上"

      - 常用属性

        - mutiple

          "设置可以多选"

        - size

          "展示多个"

    - textarea <textarea></textarea>

      "文本域"

      - 常用属性

        - rows

          "设置行"

        - cols

          "设置列"

    - 通用属性:

      - name

        - 将若干个单选框或复选框设置为一组

        - 若用户输入的值要想提交到服务器,必须有name属性★★★

      - value

        - 给按钮起名字

        - 设置提交到服务器的值

      - disabled:(扩展-了解)

        "设置标签不可用"

      - readonly:(了解)

        "设置文本框为只读"

    - 给表单中的标签设置默认值

      - text password

        - 通过value属性设置默认值

      - radio checkbox

        - 通过checked属性设置默认值

      - select

        - 通过selected设置默认值

      - textarea

        - 直接在文本域中编写内容即可设置默认值

  - 常用属性:

    - action

      "设置表单的提交路径"

    - method★

      "设置提交方式"

      - get:(默认)

        "提交内容在地址栏中显示,不安全,传输数据大小有限,

        get提交方式:

         要提交的数据直接拼在提交路径的后面格式如下:

         url?name=值&name=值"

      - post

        "提交内容不在地址栏中显示,相对安全,传输数据大小不受限制"

- div+css(渲染)

  - css概述和语法

    - css概述(层叠样式表)

      "层叠:给同一个标签添加不同的属性,最后所有的属性都作用于这个标签

      样式表:给html的标签添加指定的效果"

    - css语法格式

      "选择器{css属性:属性值; css属性:属性值}"

    - 作用:

      "渲染页面"

  - 入门案例

    - css和html整合

      - 行内样式:

        " 通过标签的style属性

         例如:<xxx style="css属性:‘属性值‘;css属性:‘属性值‘""

      - 内部样式:

        " 通过head的子标签style标签实现"

      - 外部样式

        " 编写外部的css文件,通过head的子标签link的href属性引入"

    - div标签

      - 单独占一行(行级)

    - 注意:

      "行内样式   >  内部样式 和 外部样式(谁离标签近标签听谁的)"

  - 选择器

    - id选择器(★)

      "选中一个标签,id唯一,在一个html页面中不能出现两个相同id

       格式:

       html中:给标签添加id属性   <xxx id="a"></xxx>

       css中:通过#id的值选中这个标签  #a{.....} "

    - class选择器(★)

      "给一类标签设置相同的样式

      选中一类标签

       格式:

       html中:给html的标签添加class属性  <xxx class="cla"></xxx>

       css中:通过.class的名称选中这类标签 .cla{}"

    - 标签选择器(★)

      "选择一种标签

       格式:html中不需要做任何操作

       css中:直接通过标签名选中即可 a{}"

    - 属性选择器(知道会用)

      "选中属性为...的标签

       格式:

       html中:给标签添加属性 <xxx zz="zz"></xxx>

       css中:通过属性选中标签 [zz="zz"]{...}"

    - 派生选择器(知道会用)

      - 多个选择器

        "通过不同的选择器选中标签,给这些标签添加相同的样式,多个选择器之间使用逗号分割

         格式:选择器1,选择器2{}"

      - 后代选择器(层级选择器)

        "更近一层的选择,选择器之间使用空格分割

         格式:选择器1 选择器2{}"

    - 伪类选择器(了解)

      " 锚伪类:

       a:link {color: #FF0000} /* 未访问的链接 */

       a:visited {color: #00FF00} /* 已访问的链接 */

       a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

       a:active {color: #0000FF} /* 选定的链接 */"

    - 选择器优先级

      - 越特殊优先级越高

      - id > 类 > 标签

  - css的样式

    - 字体

      "设置字体的大小,风格,系列"

      - font-size:字体大小

      - font-style:字体风格

        - italic:斜体

      - font-family:字体系列

    - 文本

      "设置文本的颜色,对其方式,超链接是否有下划线"

      - color:文本的颜色

      - text-align:对齐方式

      - text-decoration:向文本添加修饰

        - none:没有任何修饰

        - line-through: 贯穿线

        - overline:上划线

    - 背景

      "设置背景颜色,背景图片"

      -

      - background-repeat:设置背景图像是否及如何重复

        - repeat-x 横向重复

        - repeat-y 纵向重复

        - no-repeat 不重复

    - 边框

      "给标签设置边框"

      - width:宽

      - height:高

      - border:  大小 边框样式  颜色

        "设置边框大小,样式,颜色"

    - 高级

      - 浮动

        - float:浮动   

          -  值:left right

      - 清除浮动

        - clear:清除浮动

          -  值:left rigth both(清除所有浮动)

      - 显示类型

        "定义元素显示的类型"

        - display

          - 属性值:

            - none:不显示(隐藏)

            - inline:在一行(可以将块级标签转化为行内)

            - block:块(单独占一行)

    - 框模型

      - 内边距

        "边框和内容之间的距离"

        - padding:(顺时针 上右下左)

          "padding:20px; 上下左右

          padding:20px 30px;上下 左右

          padding:20px 30px 40px;"

      - 外边距

        "边框和相邻边框的距离"

        - margin:(顺时针 上右下左)

 

 

以上是关于JS笔记02的主要内容,如果未能解决你的问题,请参考以下文章

JS笔记—02

JS笔记02

JavaScript_02--------学习笔记

js学习笔记02-类和对象,继承

js上课笔记

JQuery 学习笔记--02