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(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  2. 前端学习:学习笔记(JS部分)

    前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解)    JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...

  3. 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)

    结合个人经历总结的前端入门方法 (https://github.com/qiu-deqing/FE-learning),里面有很详细的介绍. 之前一直想学习前端的,都不知道怎么下手都一年了啥也没学到, ...

  4. Nginx快速入门菜鸟笔记

    Nginx快速入门-菜鸟笔记   1.编译安装nginx 编译安装nginx 必须先安装pcre库. (1)uname -a 确定环境 Linux localhost.localdomain 2.6. ...

  5. PyQt4入门学习笔记(三)

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  6. web前端安全---读书笔记

    web前端安全---读书笔记 粗略的看完了Web前端黑客技术揭秘前两章了,由于自身的前端功力不深,当然也是初涉前端的安全问题,所以实话还是有些问题看不太明白的.在豆瓣看到的这本书,名字真心有点很肥主流 ...

  7. 2019年Web前端入门的自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...

  8. Web前端入门教程之浏览器兼容问题及解决方法

    JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...

  9. 前端:jQuery笔记

    前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...

随机推荐

  1. Cetos 7 命令行登陆与图形界面登陆相互切换

    环境:vmware 虚拟机: 系统:Cetos 7 64位: 引言:有一台虚拟机,安装的时候选择的是最小化安装,是没有图形界面的,后来有需求,需要有个图形界面,所以就准备把这个升级下,下面是操作步骤: ...

  2. Visual Studio Code 帮助查看器,指定的用于安装帮助内容的位置无效,或者您无权访问该位置

    今天有个C# 类库文件里面的属性想要了解下,想到了Vs的帮助文档,其实也就是微软的MSDN:提示帮助查看器,指定的用于安装帮助内容的位置无效,或者您无权访问该位置: 最近两天vs也没有更新,并且也没有 ...

  3. Spring Boot启动的报错 Stopping service [Tomcat]

    我遇到的问题是项目中使用java_websocket的WebSocketClient,由于性能要求,需要再Controller直接继承WebSocketClient, 在项目启动过程中调试进入spri ...

  4. iOS实现页面既显示WebView,WebView下显示TableView,动态计算WebView内容高度

    实现效果如下: 忽略底部的评论视图,太丑了,待完善...... 实现思路: 1>页面布局采用TableView实现,顶部"关注"模块的View是TableView的table ...

  5. rsync重启的shell脚本

    https://zhidao.baidu.com/question/2078634436717887028.html

  6. php7与其他版本共存

    转自: https://zhangge.net/5088.html php7编译安装 https://zhangge.net/5075.html

  7. java数据结构之LinkedHashMap

    一.LinkedHashMap源码注释 public class LinkedHashMap<K,V> extends HashMap<K,V> implements Map& ...

  8. RocketMQ之八:水平扩展及负载均衡详解

    RocketMQ是一个分布式具有高度可扩展性的消息中间件.本文旨在探索在broker端,生产端,以及消费端是如何做到横向扩展以及负载均衡的. NameServer集群 提供轻量级的服务发现和路由.每个 ...

  9. Linux下Apache虚拟主机配置

    Linux下Apache虚拟主机的三种配置.这样可以实现一台主机架构多个独立域名网站.其中基于域名的最为常见.性价比也最高.下面PHP程序员雷雪松详细的讲解下Linux下Apache虚拟主机配置的具体 ...

  10. OpenCV图像旋转

    图像旋转是指图像按照某个位置转动一定角度的过程,旋转中图像仍保持这原始尺寸.图像旋转后图像的水平对称轴.垂直对称轴及中心坐标原点都可能会发生变换,因此需要对图像旋转中的坐标进行相应转换. 如下图: 假 ...