前端入门Js笔记

Posted 喝耶加雪啡的JAVA猴子

tags:

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

T 001 ____________--信息页面展示

需求分析:

有一个页面,在页面上有很多文字信息,且格式不一.

技术分析:

html:

文字标签:

字体标签:

标题标签:

其他标签:

排版标签:

段落标签:

水平线:

换行:

 

步骤分析:

1.创建html页面

2.添加标题标签 h1

3.添加一个水平线标签

4.添加4个段落标签

5.给指定的文字添加样式

案例2-图片页面展示

需求分析:

在一个页面上展示两张图片.

技术分析:

html:

图片标签 ★★★

<img/>

 步骤分析:

1.创建一个页面

2.添加两个图片标签

 

T003_____________-列表页面展示

需求分析:

有一个页面,页面上有一个友情链接,友情连接中包含多个超链接.

技术分析:

列表标签:

超链接标签: ★★★★★

<a></a>

T004_______________________________4-首页面展示

需求分析:

有一个页面,页面上有很多文字和图片,且格式均不一.

技术分析:

html:

表格(完成布局):★★

 

步骤分析:

创建一个页面,在页面上提供一个8行1列的表格

1.嵌套一个1行3列的表格

图片

图片

超链接

2.给这一行添加黑色的背景,添加白色的文字

3.一张图片

4.嵌套一个3行7列的表格

a.第一行的7个单元格跨列合并

b.第二行的第一个单元格和第三行的第一个单元格跨行合并

c.第二行的2 3 4 单元格跨列合并

5.一张图片

6.嵌套一个3行7列的表格

a.第一行的7个单元格跨列合并

b.第二行的第一个单元格和第三行的第一个单元格跨行合并

c.第二行的2 3 4 单元格跨列合并

7.一张图片

8.两个p标签

 

案例5-后台页面展示

 

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

day01html

 

- 概述

  - 超文本标记语言(hyper text markup language)

    - 超文本

      "超越一般文本,可以存放图片,超链接等内容"

    - 标记: 标签

      "指html已经定义好的一套标签"

    - 语言

      "沟通的工具"

  - 后缀名

    - 以 *.html(推荐)  或  *.htm结尾

- 结构

  - <html></html> 根标签

    - 常见子标签

      - <head></head>

        "head标签:用来存放页面的重要信息,一般不在页面上显示"

        - 常见子标签

          - title:标题标签

          - meta:存放页面的重要信息,不在页面上显示

          - link:样式标签(明天内容)

          - style:样式标签( 明天内容)

      - <body></body>

        "用来存放页面上需要展示的信息"

  - 注意事项

    - 1.所有的标签尽量写在html标签中

    - 2.html标签不区分大小写

    - 3.所有的标签要正确嵌套

- 标签分类

  - 围堵标签

    "有开始标签和结束标签"

    - eg: <title>标签体</title>

  - 空标签

    "没有标签体"

    - eg: <br/>

- 标签的属性

  - 格式

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

- 常用标签

  - 文字标签

    - 标题标签

      - <hx></hx>

        "x:取值为1~6"

        - 特征:

          "字体加粗,独自占一行,上下留白.   h1最大  h6最小"

        - 常用属性

          - align

            "对其方式"

            - left(默认)

            - right

            - center

    - 字体标签

      - <font></font>

        - 常用属性

          - color:颜色

          - size:大小(1-7)

            "1最小  7最大"

          - face:字体

        - 颜色的取值

          - 方式1:英文单词

          - 方式2:RGB

            - 格式: #12345f

    - 其他标签

      - <i></i> 斜体

      - <b></b> 加粗

      - <strong></strong> 加粗

  - 排版标签

    - 换行标签

      - <br/>

    - 水平线标签

      - <hr/>

        - 常用属性

          - size:厚度

          - width:

          - align:

        - 大小取值

          - 方式1:百分比

          - 方式2:像素

            - 单位:px

    - 段落标签

      - <p></p>

        - 常用属性:

          - align:对其方式

        - 特征:

          "独自占一行(行级标签),上下留白"

  - 图片标签(img)★★

    - <img/>

      - 常用属性

        - alt:提示信息

          "当路径错误的时候的提示信息"

        - src:路径 ★

        - width:

        - height:

      - 路径:

        - 相对路径

          - ./ 当前目录(可以省略)

          - ../ 上一级目录

        - 绝对路径(以后在java中常用)

          "file:///e://img/a3.jpg"

  - 列表标签

    - 有序列表:

      - <ol></ol>

        - 常用的属性:

          - type: 1(默认) a A i I

          - start:数值

    - 无序列表:

      - <ul></ul>

        - 常用的属性:

          - type: circle 空心圆    square  方块          disc 实心圆(默认)

    - 公有的列表项

      - <li></li>

  - 超链接标签★★★

    - <a></a>

      - 常用的属性:

        - href:跳转的路径

        - target:打开方式

          - _self   当前页面打开(默认)

          - _blank 在新页面打开

          - framename

  - 表格标签

    - <table></table>

      - 常用子标签

        - <tr><tr/>

          - 常用子标签

            - <th></th>  表头单元格

              "特征:居中 默认加粗"

            - <td></td>  普通的单元格

              - 常用属性

                - colspan:跨列合并

                - rowspan:跨行合并

                - align:

                - width:

                - height:

                - bgcolor:

          - 常用属性

            - align:内容对其

            - width:

            - height:

            - bgcolor:

      - 常用属性

        - align: 对其方式

        - width: 宽

        - height: 高

        - bgcolor: 背景颜色

        - border: 边框

  - 框架集标签(了解)

    - 注意事项(切记)

      - 在一个页面中有body没frameset,有frameset没有body,两个标签不能同时出现

    - <frameset><frameset>

      - 常用属性

        - cols:垂直分割

        - rows:水平分割

      - 常用子标签

        - <frame /> 块标签

          - 常用的属性:

            - name: 给某一块起名称

            - src: 加载指定的页面

- 转义字符(了解)id=16423

 

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

新手入门前端1——JS笔记 ( undefined /null)

前端笔记----jquery入门知识点总结 (转)

听justjavac大神live前端的入门与进阶小笔记

入门JavaScript?看懂这篇文章就够了!——Web前端系列学习笔记

入门JavaScript?看懂这篇文章就够了!——Web前端系列学习笔记

webpack学习笔记一(入门)