常用html及css总结
常用快捷键
新建 ctrl+n
保存 ctrl+s
另存为 ctrl+shift+s
全选 ctrl+a
后退 ctrl+z
撤回后退 ctrl+y
复制 ctrl+c
粘贴 ctrl+v
常用标签
标签主要负责页面结构
标签常见结构
<标签 k=“v” k=“v”>内容</标签> 或者 <标签> k属性 v值：
- img
<img src="haha.gif" alt="" width="100px">img在页面中引入图片。src放置图片地址，width设置图片宽度， height设置高度， 图片只需要设置一个尺寸，另一个自动缩放； - 标题文字h1-h6
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h6>六级标题</h6>； - p引入段落
<p>人工智能是计算机科学的一个分支，它企图了解<a href="">智能</a> 的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。</p>； - span b u i
引入小元素，一些不太重要的元素； - a超链接，实现页面跳转 href放置跳转地址 默认在当前页面打开。如果想在新页面打开 target="_blank"
<a href="https://baike.baidu.com/item/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/9180?fr=aladdin">百度</a> <a href="my.html" target="_blank">我的页面</a>；
6.ul>li` ul>li实现结构类似的布局
ul的子级(第一层包裹的)只能是li
li的父级(上一级)只能是ul ；
7.audio <audio src="music.m4a" controls></audio>，引入音乐 src放置的是音乐地址 controls播放控制条-;
8.video <video src="" controls></video>引入视频 src放置的是视频地址 controls播放控制条;
9.table 表格
<table id="box">
<!-- tr代表一行 td代表一列 -->
<tr class="head">
<td>商品名字</td>
<td>商品价格</td>
<td>商品数量</td>
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>华为</td>
<td>5000</td>
<td>233</td>
<td>编辑</td>
<td>删除</td>
</tr>
</table>
常用表单元素
input表单标签 type可以限制类型
text：可以输入任意字符
number只能输入数值 在web兼容性不太好 移动端兼容性较好 一般正则表达式限制
password密码 输入内容不可见
radio 单选框 只有加了相同的name值才可以使真正的单选框 name值命名和class一样
checkbox 多选框
按钮：submit提交 reset清空
常用属性 autofocus(自动聚焦)
checked默认选框选中
selected下拉选框默认选中
label的for值和input的id值保持一致。 就可以实现点击label文字聚焦选框效果。id和for值和class命名规则一样
<label for="user">用户名</label><input type="text" id="user">
<!-- br换行 -->
<br><br>
<label for="phone">号码</label> <input type="number" id="phone">
<br><br>
<label for="pass">密码</label> <input type="password" id="pass">
<br><br>
<label for="">性别</label> <input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="radio" name="sex">未知
<br><br>
<label for="">爱好</label><input type="checkbox"> 游戏<input type="checkbox"> 看书
<br><br>
<label for="">自我介绍</label>
<!-- textarea文本域 -->
<textarea name="" id="" ></textarea>
form用来进行表单提交 action后台地址
<form action="https://www.baidu.com/"></form>
常用css
1.类名增加
标签可以取类名class
一个标签可以有多个类名 多个类名使用空格隔开
类名必须是英文开始。只能由数字、字母、中横线组成
类名一般需要有语义
标签名可以重复
<标签 class="类名 类名"></标签>
<div class="one">sdfsd</div>
2.css书写格式
/*
选择标签{
书写样式 每一个样式结束，必须加分号 所有符号都是英文
k:v;
k:v
}
样式所有的标签都适用
*/
3.常用css样式
/*文字颜色 */
color:red;
/* 文字大小 */
font-size: 20px;
/* 文字居中 */
text-align: center;
/* 首行缩进 em倍数 参考的是文字大小 */
text-indent: 2em;
/* 文字不能小于12px 默认大小16px */
font-size: 18px;
/* 字体 字体的值需要加引号 */
font-family: "楷体";
/* 文字下划线 */
text-decoration: underline;
/* 去除下划线 */
text-decoration: none;
/* 文字加粗 */
font-weight: bold;
/* 文字不加粗 */
font-weight: normal;
/* 鼠标移入增加小手 */
cursor: pointer;
/* 增加圆角 值越大圆角越明显 值是50%的时候为圆形* /
border-radius: 10px;
/* 背景颜色 */
background:rebeccapurple;
/* 宽度 */
width: 100px;
/* 高度 */
height: 100px;
/* 边框 三个值 用空格隔开
第一个值：线的粗细
第二个值：线的类型 solid实线 dashed虚线 dotted点线
第三个值：线的颜色
*/
border:10px dashed #dc0115;
/* 外边距 */
margin:100px;
//移入小手
cursor:pointer;
//行高
line-height:100px;
/* 内边距边框和内容的留白 */
margin和padding 多个值使用空格隔开
一个值：上下左右
两个值：第一个值上下 第二个值左右
三个值：第一个值上 第二个值左右 第三个值下
四个值：上右下左
padding:10px;
margin padding border都可以只可以设置一个方向
margin-top margin-bottom margin-left margin-right
选择器:hover{
样式 鼠标移入样式才会生效，鼠标移出无效果
}
/*
第一个值图片地址 url('地址')
第二个值平铺方式，默认平铺 no-repeat repeat-x水平轴平铺 repeat-y垂直轴平铺
第三个值：水平方向坐标 可以书写具体值 也可以left center right
第四个值：垂直方向坐标 可以书写具体值 也可以top center bottom
第五个值：颜色
*/
background: url('pic.gif') no-repeat center center pink;
/*同样的样式 权重一样 后写的生效 background:lime; */
/* 渐变色 可以书写多个颜色，第一个值可以书写渐变角度 */
background: linear-gradient(90deg,red,pink,blue,yellow)
/* 固定定位 */
position: fixed;
float:left;
float:right;
浮动：实现的效果就是水平排列。只有两种，左右浮动
固定定位：
1、不会随着窗口滚动而滚动
2、参照物是可视窗口 top left right bottom
left和right不能同时书写
top和bottom不能同时书写
3、固定定位完以标签变成行内块(设置宽高有效，可以在一行排列)
4、固定定位以后不占位，后写的(根据html顺序)在上面
/* 相对定位 */
position: relative;
相对定位：
1、单独使用的时候，一般用来做微调。
2、相对定位，参照物是自身原来的位置
top left right bottom
left和right不能同时书写
top和bottom不能同时书写
3、相对定位，占位，占得是原来的位置
/* 绝对定位 */
position: absolute;
绝对定位：一个标签绝对定位，会一直向上寻找，直到找到有定位方式(任意一种定位方式都可以，如果原来没有默认定位方式，一般使用相对定位，相对定位对别的标签影响最小。)的标签，然后以该标签作为参照。
修改滚动条样式
p::-webkit-scrollbar {
width: 4px;
height: 4px;
}
p::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
p::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(255,0,0,1);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
转换模块
div{
width: 100px;
height: 100px;
background:red;
/* 转换以后，占的还是原来的位置 */
/* transform: translate(100px,100px); */
/* 旋转 */
/* transform: rotate(30deg); */
/* 缩放 */
/* transform: scale(0.3); */
/* 旋转以后，坐标系也跟着改变 */
/* 一般实际开发的时候，先位移再旋转 */
transform: rotate(30deg) translate(100px,100px);
transform: translate(100px,100px) rotate(30deg) ;
}
过渡模块
div{
width: 100px;
height: 100px;
background: red;
/* 中间变化过程可见
第一个值：样式 可以指定某一个样式 也可以设置所有
第二个值:时间
第三个值：动画曲线 一般是linear
第四个值：动画延迟执行时间
*/
transition: width 2s linear 0s,height 2s linear 2s,border-radius 1s linear 4s,background 1s linear 4s;
}
/*
选择器:hover{
样式
此处的样式，鼠标移入才会生效
}
*/
div:hover{
width: 200px;
height: 200px;
border-radius: 50%;
background:blue;
/* background:blue;
transform: rotate(290deg); */
}
动画模块
div{
width: 100px;
height: 100px;
background:lime;
/* 使用动画 animation：动画名字 持续时间 次数infinite 动画曲线linear */
animation:move 3s infinite linear;
}
/* 定义动画
@keyframes 动画名字{
各个状态样式条
}
*/
@keyframes move{
0%{
transform: translate(0px,0px);
}
25%{
transform: translate(500px,0px);
background:red;
}
50%{
transform: translate(500px,500px) rotate(360deg);
border-radius: 50%;
}
75%{
transform: translate(0px,500px);
}
100%{
transform: translate(0px,0px);
}
}
4.标签分类
标签分类
单双标签：
双标签:<标签></标签> h1-h6 p div
单标签：<标签>img
行内标签和块级标签：
行内标签：水平排列，可以和其他标签并排 a
1、设置宽高无效
2、上下外边距无效，左右有效
3、内边距有效，上下外边距不占位，左右占位
块级标签：独占一行 div h1-h6 p
5.选择器分类和权重
选择器分类：
*:选择所有标签
标签选择器：直接通过标签名选择标签。div p img
类名选择器：通过类名选择 .+类名
交集选择器： p.one 中间不使用空格 标签名为p同时类名为one
div.one.two标签名为div类名同时需要有one和two
后代选择器：后代(c标签内部的标签都称为c的后代) div p使用空格隔开即可
子代选择器 div>p(第一层包裹的才称为子代)
并集选择器：同样的样式可以合并。使用逗号隔开。a,div a和div有同样的样式
:nth-of-type()可以选择具体某一个标签，也可以选择某一类标签2n 3n 4n
选择器权重：
选择器权重可以叠加
哪一个选择器的权重高，样式就取决于谁
同样的权重后写的生效
标签选择器1g<类名选择器1kg
审查元素步骤
网站布局常见问题
标准流：行内标签水平，块级标签垂直
块级标签：div p ul li h1-h6
独占一行
块级标签的宽度如果不设置，和父级一样宽
块级标签的高度如果不设置，和内容一样高
如果子级浮动，父级检测不到子级高度。浮动塌陷
解决方法：
1、给父级加高度
2、给父级加voerflow:hidden
行内标签：在一行排列，设置宽高无效a b u i span
行内块：在一行排列，设置宽高有效 img input textarea
行内块默认和父级标签默认有留白 行内块改成块级标签display:block
与文字有关的样式都可以继承。一个标签如果自身没有与文字有关的样式，会一直向上寻找
color font-size font-family
a的颜色需要专门修改 a有自带的颜色
1.外边距塌陷
1、标准流(不浮动、不定位)中，给子级增加了margin-top。父级跟着一起下来。这称为外边距塌陷
解决方法：1、不设置margin给父级设置padding
2、如果一定要加margin 给父级增加overflow:hidden;
2、标准流中：上下外边距的的值取决于最大的那一个，不会叠加。左右会叠加
1.overflow
overflow:hidden
1、超出部分隐藏
2、解决浮动塌陷
3、解决外边距塌陷
overflow: auto;
超出部分出现滚动条
js语法
变量
// 声明变量 var
// js是弱类型语言，变量的类型由当前所存储的值决定
// 变量命名规则
// 1、变量只能由数字、字母、下划线组成
// 2、变量不能以数字开始
// 3、区分大小写
// 4、不能是关键字或者保留字
// 检测变量类型 typeof(变量)
// 变量类型：
// 基本变量类型
// number：数值类型，类似数学中的123 456
// string:字符串类型 最明显的标志就是用引号包裹。双引号单引号使用方法一样
// undefined:未声明或者未赋值
// boolean:布尔类型 true false
// 复合/复杂数据类型
// object：对象类型
var a=123.34;
console.log(typeof(a));
a="hello";
console.log(typeof(a));
var c;
console.log(typeof(c));
a=false;
console.log(typeof(a));
a=[1,2,3,4];
console.log(typeof(a));
// 隐式转换
// 数值类型+字符串类型=字符串类型
console.log(1+'1');
// 数值类型+布尔类型=数值类型 true转化为1 false转化为0
console.log(1+true);
// 字符串+布尔类型=字符串
console.log('1'+true);
// 程序执行，从左到右
console.log(1+'1'+2);
console.log(10000+'20000');
console.log(1+3+'2'+true);
console.log(1+2+3+'hello'+6);
函数
// 函数的作用：封装性
// 定义函数： function 函数名字(){执行} 函数名字和变量名字命名规则一样
// 使用函数： 函数名字()使用函数相当于执行函数体代码
function fn(){
console.log(1);
console.log('a');
}
// 使用函数，相当于执行函数体代码
fn();
fn();
循环
// 循环用来实现遍历
// for(a;b;c){
// 循环体
// }
// a初始化 b条件 c继续下去的条件
// 第一步：先执行a
// 第二步：判断是否符合条件b。如果符合，执行循环体，执行第三步，否则跳出循环
// 第三步：执行c，重复执行第二步
// i++以后 i的值加1
// 注意：写完for循环,一定要检查 避免写成死循环
for(var i=1;i<=100;i++){
console.log(i)
}
// 使用for循环计算1+2+3+...100结果？
// 打印九九乘法表
// 常量和变量使用+拼接
var i=1;
document.write('1'+i);
document.write('<br>');
document.write('1'+i);
for(var i=1;i<=10;i++){
for(var j=1;j<=i;j++){
console.log(i+'*'+j)
}
}
if条件控制语句
<!--
单条件判断
if(条件){
条件为真的时候，执行
}
双条件
if(条件){
条件为真的时候，执行
}else{
条件为假的时候，执行
}
多个条件
if(条件a){
条件a为真的时候，执行，跳出if语句，有跳楼现象
}else if(条件b){
条件b为真的时候，执行
}else if(条件c){
条件c为真的时候，执行
}...
else{
以上条件都为假的时候，执行
}
-->
<script>
// prompt()可输入弹出框
var salary=prompt('请输入工资');
// if(salary<=5000){
// // alert()弹出框
// alert('太穷了')
// }else{
// alert('还行')
// }
// 5000 太穷了 5000-10000还行 10000-20000 '222' 20000
if(salary<=5000){
alert('穷')
}else if(salary<=8000){
alert('haixing ')
}else if(salary<=8000){
alert('sdfsd ')
} else{
alert('tingyouqiande')
}
// ==判断是否相等
if(salary=='zsh'){
alert('true')
}
获取标签
// 通过id名获取标签 唯一性
// var tag=document.getElementById('btn');
// 通过标签名选择标签,得到的是一个类数组。不能直接进行操作。只能选择到具体某一个
var tags=document.getElementsByTagName('button');
事件
// 事件结构： 选择标签.on+事件类型click=function(){}
// btn.οnclick=function(){
// alert()
// }
遍历标签
// 遍历标签
for(var i=0;i<tags.length;i++){
// tags[i].style.color='red';
tags[i].onclick=function(){
// alert()
// 点击的时候，for循环已经执行完毕 i==tags.length
// console.log(i);
// this代表用户当前操作的标签
this.style.color='red';
}
}
控制标签属性
控制标签属性：
修改/新增属性：选择标签.属性(如果属性是class,修改为className)="所要修改的值"
获取属性：选择标签.属性
标签增加和删除
var btn=document.getElementById('btn');
var txt=document.getElementById('txt');
btn.onclick=function(){
// 删除标签 a.parentNode.removeChild(a)
txt.parentNode.removeChild(txt)
// // 判断值是否为空
// if(txt.value==''){
// alert('输入内容啦')
// }else{
// // 创建标签document.createElement('标签名')
// var tag=document.createElement('h1');
// // 增加内容
// tag.innerHTML=txt.value;
// // 追加标签 a.appendChild(b) 把b追加到a内部
// // body是唯一的， 可以document.body获取
// document.body.appendChild(tag)
// // 把值清空
// txt.value='';
// }
}
控制表单元素的值
控制表单元素的值
获取值： 获取标签.value
修改值：获取标签.value='修改的值'
控制标签样式
获取标签.style.css样式="值"
扫一扫
1519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
