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.源 ...
随机推荐
- 使用throw和throws 引发异常
1.throw 用在方法内抛出异常,通常可以自行使用try catch进行异常处理 如果不自行处理的话,需要在方法上使用throws抛出异常 public static void testAge(){ ...
- .NET中的简单的并行
https://www.cnblogs.com/hdwgxz/p/6129419.html https://www.cnblogs.com/hueychan/p/10575907.html
- NDK学习笔记-JNI开发流程
JNI(Java Native Interface)Java本地化接口,Java调用C/C++,C/C++调用Java的一套API接口 实现步骤 在Java源文件中编写native方法 public ...
- 桥接模式下访问虚拟机中的Django项目
首先需要保证主机和虚拟机能相互Ping通,如果Ping不通,请参考我上篇文章,这里演示的是桥接模式下的方法,如果是NAT模式连接,请参考别处. 1. 虚拟机Linux系统内的Django项目 sett ...
- 2019年十一月（CSP S游记及AFO）
DAY-4 晚自习和班里以及搞OI的两个dalao商量了下决定停课了,当时觉得停得好晚,有的dalao都停一个月了.(现在感觉是明智的选择,我OI辣么菜还不如专注文化课) 晚上回家洗了个澡. DAY- ...
- 第一次入坑docker
直接进入主题 1.首先获取git clone项目 2.创建镜像:docker build -t="docker" .(注意千万不要忘了.) 3.列出镜像:docker images ...
- PHP会话(Session)实现用户登陆功能
对比起 Cookie,Session 是存储在服务器端的会话,相对安全,并且不像 Cookie 那样有存储长度限制,本文简单介绍 Session 的使用. 由于 Session 是以文本文件形式存储在 ...
- 使用kafka-eagle监控Kafka
# 监控kafka集群,开启监控趋势图使用 # 有一个问题,需要在kafka-server-start.sh文件中配置端口,有如下三种办法 # 第一种:复制并修改kafka目录,比如kafka-1,k ...
- C++中重载函数详解
函数的重载详解 什么时函数重载: 函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表的函数,这组函数被称为重载函数.重载函数通常用来命名一组功能相似的函数,这样做减少了函数名的数量,避 ...
- C#int类型 转Byte[]
方法1:使用左移和右移 int转化为byte[]: public byte[] intToBytes(int value) { byte[] src = ...