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.源 ...
随机推荐
- KDE-解决.docx .xlsx .pptx文档默认由Ark打开的问题
安装KDE后,默认的压缩解压程序变成了Ark,并且原来默认用WPS Office打开的.docx .xlsx .pptx文档,从文件管理器双击打开时,也变成了用Ark打开. 查了下网上的资料,可通过如 ...
- docker 导出多个镜像合并成一个tar
导出单个镜像 docker save [images] > [name.tar] 倒出多个镜像合并成一个tar包 docker save [images] [images] > [name ...
- vue路由传参的几种基本方式
原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...
- clrscr()及gotoxy()函数
1.clrscr() 作用:清屏,跟 cmd 中的清屏作用一样 注意:只有在 Trubo C 中能用,需要包含头文件:conio.h 替代:system("cls"); 需要头文件 ...
- python-Web-django-图表统计
下载highchart插件包,放在static下 <script src="/static/highcharts/highcharts.js"></script& ...
- 【18.065】Lecture1
由于这一课的教材放出来了,所以直接将整个pdf放上来.   
- STL————vector的用法
一.什么是vector? 向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container).跟任意其它类型容器一样,它能够存放各种类型的对象.可以简单的认为,向量是一个能 ...
- SQL --------JDBC 用用户名查询用户的信息
package demo; import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; ...
- Nginx配置缓存服务器
Nginx为静态资源配置缓存服务器对网站性能提供很可观. 1.配置 接下来我看如何配置: 我的环境是在同一台机器上配置了一个用openresty搭建的反向代理,上游服务器(后端服务器)是本机的ngin ...
- mapreducer计算原理
mapreducer计算原理