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的更多相关文章
- Node.js 笔记02
一.关于命令 常用命令: dir 列出当前目录下面所有的文件 cd 目录名 进入到指定的目录,. 当前目录, .. 进入上级目录,cd . 当前目录, cd .. 上级目录 md 目录名 创建文件夹 ...
- JS笔记—02
1.String截取:substr:截几位, substring:截到哪. 2.String的操作,例如变大写,小写,本身不会变,只是在栈里交换引用似的 var str = "hello w ...
- JS自学笔记02
JS自学笔记02 1.复习 js是一门解释性语言,遇到一行代码就执行一行代码 2.查阅mdn web文档 3.提示用户输入并接收,相比之下,alert只有提示的作用: prompt(字符串) 接收: ...
- webug4.0 打靶笔记-02【完结】
webug4.0打靶笔记-02 3. 延时注入(时间盲注) 3.1 访问靶场 3.2 寻找注入点 貌似一样的注入点: ?id=1' --+ 3.3 判断输出位置 同前两关一样的位置,时间盲注应该不是这 ...
- 软件测试之loadrunner学习笔记-02集合点
loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...
- 《30天自制操作系统》笔记(02)——导入C语言
<30天自制操作系统>笔记(02)——导入C语言 进度回顾 在上一篇,记录了计算机开机时加载IPL程序(initial program loader,一个nas汇编程序)的情况,包括IPL ...
- 《The Linux Command Line》 读书笔记02 关于命令的命令
<The Linux Command Line> 读书笔记02 关于命令的命令 命令的四种类型 type type—Indicate how a command name is inter ...
- 强化学习读书笔记 - 02 - 多臂老O虎O机问题
# 强化学习读书笔记 - 02 - 多臂老O虎O机问题 学习笔记: [Reinforcement Learning: An Introduction, Richard S. Sutton and An ...
- 机器学习实战（Machine Learning in Action）学习笔记————02.k-邻近算法（KNN）
机器学习实战(Machine Learning in Action)学习笔记————02.k-邻近算法(KNN) 关键字:邻近算法(kNN: k Nearest Neighbors).python.源 ...
随机推荐
- Linux命令集锦：crontab命令
Linux crontab是用来定期执行程序的命令.当安装完成操作系统之后,默认便会启动此任务调度命令.crontab命令每分钟会定期检查是否有要执行的工作,如果有要执行的工作便会自动执行该工作. 而 ...
- HashPump用法
做哈希长度扩展攻击的时候用到这个工具,但是没找到这个工具详解办法 我这篇不算是详解,只是收集例子做出的一个用法 HashPump一种在各种散列算法中利用散列长度扩展攻击的工具.目前支持的算法:MD5, ...
- VMware Workstation 12许可证
VMware 12专业版永久许可证密钥: 5A02H-AU243-TZJ49-GTC7K-3C61N VF5XA-FNDDJ-085GZ-4NXZ9-N20E6 UC5MR-8NE16-H81WY-R ...
- Shell脚本无限调用
#! /bin/bash # this shell can run endlessfully echo "i love you ! " sh ./run 通过echo来显示了无限调 ...
- 【AMAD】django-formapi -- 一个DJANGO API框架，可使用签名request，可使用form作为API的验证工具
动机 简介 个人评分 动机 如何快速构建API,使用view就行了? 如果快速构建一个可以验证参数的API,使用django-formapi1吧! 简介 class DivisionCall(call ...
- postman 请求接口 Could not get any response
前提: 今天用postman请求接口的时候,能请求到接口,但是打断点后发现方法里面要抛出异常就出现错误: 错误原因: 返回的 http 的 code不是3位的,如下我写成了四位 4002: <? ...
- layui select 联动渲染赋值不了数据的问题
今天用 layui做select的时候,数据老是看不到,而且联动的数据是对不上的,看了网上一堆是 最后要用 form.render('select'); 这个是必须的, 但是我用了还是这样,其实是la ...
- day25 多继承、接口、抽象类、鸭子类型
今日内容: 如何查看对象的名称空间及对象名 继承的另一种使用 单继承与多继承 经典类与新式类 mro列表 菱形继承 接口 抽象类 鸭子类型 1.查看名称空间包含的变量: 使用类或对象名.__dict_ ...
- git pull因为主线分支问题解决
方法1:如果你想保留刚才本地修改的代码,并把git服务器上的代码pull到本地(本地刚才修改的代码将会被暂时封存起来) git stashgit pull origin mastergit stash ...
- strCmd.Format("delete FROM userTable where name = '%s'", name);
string.Format("select * from 数据库表 where 用户名='%s' and 密码='%s' ",m_1,m_2); 把[m_1]和[m_2]的值按照[ ...