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.源 ...
随机推荐
- SrpingMVC通过JSON注入from数据到实体自定义(LocalDateTime,LocalDate,Boolean类型)字段的序列化、反序列化方法
import com.fasterxml.jackson.core.JsonParser; import com.fasterxml.jackson.core.JsonProcessingExcept ...
- shell脚本：统计分析 /home/ 目录用户磁盘使用情况
一.统计单台机器 /home/ 目录下磁盘空间使用 top3 的用户 common.sh 脚本用于统计 /home/* 目录下存储空间 top3 的用户. du -sb /home/* |sort - ...
- DOTS学习资源
以下是一些面向数据的资源,可以是Unity或我们已经验证过的外部资源.我们将包括外部资源,我们认为这些外部资源能够很好地理解面向数据的设计并包含高质量的信息(在贡献时). 注意:由于Unity Dat ...
- Appendix 2- Lebesgue integration and Reimann integration
Lebesgue integration and Reimann integration: Reimann: Split up the axis into equal intervals, then ...
- Oracle- 数据库知识回顾
数据库知识回顾: sql语句的语法规范: sql语句不区分大小写,习惯上系统的保留字.关键字.函数名称大写,表名和列名小写 使用空格和换行分隔单词效果一样,一般情况下独立的整句不换行,不同的子句需要换 ...
- 桥接模式下访问虚拟机中的Django项目
首先需要保证主机和虚拟机能相互Ping通,如果Ping不通,请参考我上篇文章,这里演示的是桥接模式下的方法,如果是NAT模式连接,请参考别处. 1. 虚拟机Linux系统内的Django项目 sett ...
- springboot整合httpClient
创建httpClientConfig配置类 @Configuration @PropertySource(value="classpath:/properties/httpClient.pr ...
- Spring4学习回顾之路08- FactoryBean配置Bean
建立Student.java package com.lql.srping04; /** * @author: lql * @date: 2019.10.28 * Description: */ pu ...
- php修改替换数据库图片（文件）
<?php extract($_POST); $date = date('Y-m-d'); $file_name = $_FILES['image']['name'];//获取缓存区图片,格式不 ...
- 文件操作：w,w+,r,r+,a,wb,rb
1.文件操作是什么? 操作文件: f = open("文件路径",mode="模式",encoding="编码") open() # 调用操 ...