html 笔记2
、css重用
<style>
如果整个页面的宽度 > 900px时：
{
.c{
共有
}
.c1{
独有
}
}
.c2{
独有
}
</style>
<div class='c c1'></div>
<div class='c c2'></div>
、自适应 和 改变大小变形
左右滚动条的出现
宽度，百分比
页面最外层：像素的宽度 => 最外层设置绝对宽度
自适应：media
、默认img标签，有一个1px的边框
img{
border: ;
}
、作业中的数量输入框
、块级和行内
、form标签
<form action='http://sssss' methed='GET' enctype='multi'>
<div>asdfasdf</div>
<input type='text' name='q' />
<input type='text' name='b' />
# 上传文件
<input type='file' name='f' />
<input type='submit' />
</form>
GET: http://sssss?q=用户输入的值
http://sssss?q=用户输入的值&b=用户输入的内容
POST：
请求头
请求内容
、display: block;inline;inline-block
、float：
<div>
<div style='float:left;'>f</div>
<div style='clear:both;'></div>
</div>
、margin: auto;
、padding, ---> 自身发生变化
CSS补充
position:
a. fiexd => 固定在页面的某个位置
b. relative + absolute
<div style='position:relative;'>
<div style='position:absolute;top:0;left:0;'></div>
</div>
opcity: 0.5 透明度
z-index: 层级顺序
overflow: hidden,auto
hover
background-image:url('image/4.gif'); # 默认，div大，图片重复访
background-repeat: repeat-y;
background-position-x:
background-position-y:
示例：输入框
JavaScript
独立的语言，浏览器具有js解释器
JavaScript代码存在形式：
- Head中
<script>
//javascript代码
alert();
</script>
<script type="text/javascript">
//javascript代码
alert();
</script>
- 文件
<script src='js文件路径'> </script>
PS: JS代码需要放置在 <body>标签内部的最下方
注释
当行注释 //
多行注释 /* */
变量：
python：
name = 'alex'
JavaScript:
name = 'alex' # 全局变量
var name = 'eric' # 局部变量
写Js代码：
- html文件中编写
- 临时，浏览器的终端 console
基本数据类型
数字
a = ;
字符串
a = "alex"
a.chartAt(索引位置)
a.substring(起始位置，结束位置)
a.lenght 获取当前字符串长度
...
列表(数组)
a = [,,]
字典
a = {'k1':'v1','k2':'v2'}
布尔类型
小写
for循环
. 循环时，循环的元素是索引
a = [,,,]
for(var item in a){
console.log(item);
}
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}
.
for(var i=;i<;i=i+){
}
a = [,,,]
for(var i=;i<a.length;i=i+){
}
不支持字典的循环
条件语句
if(条件){
}else if(条件){
}else if(条件){
}else{
}
== 值相等
=== 值和类型都相等
&& and
|| or
函数：
function 函数名(a,b,c){
}
函数名(,,)
Dom
、找到标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接
tag = document.getElementById('i1')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
、操作标签
a. innerText
获取标签中的文本内容
标签.innerText
对标签内部文本进行重新复制
标签.innerText = ""
b. className
tag.className =》 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式
PS：
<div onclick='func();'>点我</div>
<script>
function func(){
}
</script>
c. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true
html 笔记2的更多相关文章
- git-简单流程（学习笔记）
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- NET Core-学习笔记（三）
这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
- springMVC学习笔记--知识点总结1
以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...
- 读书笔记汇总 - SQL必知必会（第4版）
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
随机推荐
- [HDU5687]2016"百度之星" - 资格赛 Problem C
题目大意:有n个操作,每个操作是以下三个之一,要你实现这些操作. 1.insert : 往字典中插入一个单词2.delete: 在字典中删除所有前缀等于给定字符串的单词3.search: 查询是否在字 ...
- 学习参考《父与子的编程之旅python【第二版】》高清中文版PDF+高清英文版PDF+源代码
对于初步接触编程语言的朋友,推荐看一看<父与子的编程之旅第2版>,对于完全编程零基础的很友好! 图文并茂,过多的文字堆垒很容易让人产生厌倦情绪,也更容易让人产生放弃的想法.使用了大量插图, ...
- wordcontent结对编程
合作者:201631062625 201631062127 代码地址:https://gitee.com/yzpdegit/ts 本次作业链接:https://www.cnblogs.com/yang ...
- H3C S5130交换机堆叠操作
配置过程中注意事项: 1.最好提前定义好IRF的主从设备,可通过IRF优先级进行定义,越大越优 2.一定要在使能IRF之前就保存配置(因为使能过程中,会出现设备重启的情况,如果设备重启后配置丢失,会导 ...
- [LeetCode] 455. 分发饼干 assign-cookies(贪心算法)
思路: 尽量先将小饼干分配给胃口小的孩子,故而饼干和孩子胃口都应该先排序. python中,a.sort()只能用于a为list, sort()是可变对象的方法,无参数,无返回值,但会影响改变对象. ...
- LoadRunner使用入门 进行Webservice负载測试
1.什么是LoadRunner LoadRunner是HP公司的一款付费工具,该工具是一种预測系统行为和性能的负载測试工具. 通过模拟上千万用户实施并发负载来确认和查找问题. 2.什么是负载測试 通过 ...
- [javase学习笔记]-6.7 封装
这一节我们学习面向对象中的第一个特性,封装(encapsulation) 封装:是指隐藏对象的发生和实现细节,仅对外提供公共訪问方式. 那么什么是隐藏对象的实现细节? 我们来举例学习. 比方我们来定义 ...
- List of content management systems
https://en.wikipedia.org/wiki/List_of_content_management_systems Microsoft ASP.NET Name Platform Sup ...
- 6. MongoDB——Java操作（增删改查）
转自:https://blog.csdn.net/kai402458953/article/details/79626148 import java.net.UnknownHostException; ...
- 验证备份集-使用DBVERIFY工具
DBVERIFY确认备份集是否存在坏块 验证TEST03.DBF 文件的是否存在坏块 C:\Documents and Settings\Administrator>dbv file=D:\or ...