前端入门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笔记的更多相关文章
- 前端学习:JS(面向对象)代码笔记
前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...
- 前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...
- 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)
结合个人经历总结的前端入门方法 (https://github.com/qiu-deqing/FE-learning),里面有很详细的介绍. 之前一直想学习前端的,都不知道怎么下手都一年了啥也没学到, ...
- Nginx快速入门菜鸟笔记
Nginx快速入门-菜鸟笔记 1.编译安装nginx 编译安装nginx 必须先安装pcre库. (1)uname -a 确定环境 Linux localhost.localdomain 2.6. ...
- PyQt4入门学习笔记（三）
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
- web前端安全---读书笔记
web前端安全---读书笔记 粗略的看完了Web前端黑客技术揭秘前两章了,由于自身的前端功力不深,当然也是初涉前端的安全问题,所以实话还是有些问题看不太明白的.在豆瓣看到的这本书,名字真心有点很肥主流 ...
- 2019年Web前端入门的自学路线
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...
- Web前端入门教程之浏览器兼容问题及解决方法
JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
随机推荐
- SpringMVC中实现Bean Validation(JSR 303 JSR 349 JSR 380)
JSR 303是针对bean数据校验提出的一个规范.使用注解方式实现数据校验. 每个注解的用法这里就不多介绍,请移步JSR 303 - Bean Validation 介绍及最佳实践 笔者上面提到的J ...
- shell脚本：统计分析 /home/ 目录用户磁盘使用情况
一.统计单台机器 /home/ 目录下磁盘空间使用 top3 的用户 common.sh 脚本用于统计 /home/* 目录下存储空间 top3 的用户. du -sb /home/* |sort - ...
- Spring-Kafka —— KafkaListener定时启动和停止
一.定时启动的应用场景 比如现在单机环境下,我们需要利用Kafka做数据持久化的功能,由于用户活跃的时间为早上10点至晚上12点,那在这个时间段做一个大数据量的持久化可能会影响数据库性能导致用户体验降 ...
- jQuery,javascript获得网页的高度和宽度【收藏】
网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...
- Unity Shader的形式
(1)表面着色器 表面着色器是Unity自身的一种着色器代码类型.它需要的代码量很少,Unity在背后做了很多工作,但渲染的代价比较大.但Unity在背后仍旧把表面着色器转换成对应的顶点/片元着色器. ...
- Leetcode之动态规划（DP）专题-121. 买卖股票的最佳时机（Best Time to Buy and Sell Stock）
Leetcode之动态规划(DP)专题-121. 买卖股票的最佳时机(Best Time to Buy and Sell Stock) 股票问题: 121. 买卖股票的最佳时机 122. 买卖股票的最 ...
- server 2008 R2 DHCP服务器部署
安装DHCP服务器 和上一篇文章中安装IIS 7.0一样,我们在安装DHCP服务器的时候也要用到Windows Server 2008的服务器安装器. 首先打开服务器管理器,点击开始菜单——>管 ...
- supervisor管理airflow
#用airflow帐号 su - airflow. /home/airflow/venv/bin/activatepip install supervisormkdir -p /home/airflo ...
- 红米K20PRO解锁Bootloader权限并刷入recovery
手机里反正没什么东西了,聊天记录啊好像也没很重要得了,索性全部清除,刷机玩玩. 把稳定版刷成第三方开发版,这样又有时间去折腾root权限,面具和xposed的各种插件了,嘿嘿. 解锁小米手机 我的账号 ...
- 剑指offer6:旋转数组的最小数字
1. 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一 ...