常用html及css总结
- 常用快捷键
- 常用标签
- 常用表单元素
- 常用css
- 审查元素步骤
- 网站布局常见问题
- js语法
- 变量
- 函数
- 循环
- if条件控制语句
- 获取标签
- 事件
- 遍历标签
- 控制标签属性
- 标签增加和删除
- 控制表单元素的值
- 控制标签样式
常用快捷键
新建 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样式="值"