前端入门——review01（HTML＆CSS＆JS）
2021-03-04 23:26
标签：自定义 math 背景图 自带 驼峰 fun src letter 下拉 前端入门——review01（HTML＆CSS＆JS） 标签：自定义 math 背景图 自带 驼峰 fun src letter 下拉 原文地址：https://www.cnblogs.com/lucky-cat233/p/12912103.html上周内容回顾
HTML
# HTTP协议
?
# 超文本标记语言 就是一堆标签 每个标签具有特定的含义 是浏览器展示页面所公用的一套标准
?
# 注释
?
# web服务的本质
服务端
客户端
文件(.html)
（你在浏览器上看到的花里胡哨的页面内部都是由HTML组成的）
?
# HTML文档结构
html
head
body
# 标签的分类
1.
单标签
双标签
2.
块儿级标签
行内标签
特例:p标签
# 一堆标签
标题:h1~h6
u i s b
hr br
段落:p
# 特殊符号
&
>
<
©
®
¥
?
# 标签笔记重要的两个属性
id
class
# 常用标签
div
span
自己联想简易版本的博客园页面搭建，体会上述标签的作用
a链接标签
href
1.放url 点击跳转
2.放其他标签的id值 锚点功能
target
默认是当前页面跳转 _self
也可以新建页面打开 _blank
img图片标签
src
图片的地址
alt
图片加载不出来的情况下展示提示信息
title
鼠标悬浮上去之后展示的提示信息
height、width
?
# 列表标签
ul
li
list-style-type:none
padding-left:0px
ol
li
dl
dt
dd
?
# 表格表格
表格标签不一定非要讲thead和tbody都写出来 也可以只有tbody没有thead
table
thead
tr
th/td
tbody
colspan
rowspan
?
# form表单
朝后端发的获取用户数据的标签 一定要写在form表单内
action 控制数据提交的路径
1.不写
2.全写
3.后缀
method 控制提交方式get/post
form默认是get请求
enctype 控制数据提交的编码格式
urlencoded
formdata
...
# input标签
type属性
text
password
date
radio
checked 属性名和属性值相同的情况下可以简写
checkbox
checked
file
submit
button标签也可以
button
reset
# select标签
默认是单选 可以设置成多选multiple
一个个的下拉选项是由一个个的option标签组成
selected
?
# textarea标签
获取大段文本
?
# label标签
?
"""
获取用户数据的标签都应该有name属性用来表明数据的含义 类似于字典的key
获取到的用户数据类似于字典的value(也是存储到标签的value属性中了)
"""
CSS
# 样式
?
# 注释 /**/
?
# 引入方式
三种方式
1.style
2.link
3.行内
# 如何查找标签
选择器 {属性名:属性值;...}
?
# 基本选择器
id选择器
#d1
class选择器
.c1
标签选择器
div
通用选择器
*
# 组合选择器 我们将标签的嵌套关系比喻成了亲戚关系
div span
div>span
div+span
div~span
?
# 属性选择器
input[username=‘jason‘]
?
# 不同选择器之间可以并列、混用
div,p,span
div,#d1,.c1
?
# 伪类选择器
a标签的四个状态
:link
:hover 鼠标放上去
:active
:visited
:focus 聚焦
# 伪元素选择器
:first-letter
:before
:after
解决浮动带来的影响
.clearfix:after {
}
# 选择器的优先级
行内 id class 标签
?
# 属性相关
font-family
font-size
font-weight
color
red
#eee
rgb()
rgba()
取色工具
text-align
center
text-decoration
none
a标签自带的下划线
text-indent
backgroud:red url(‘‘) no-repeat center center
背景图片不动
葫芦娃...
border:3px solid red;
border-radius
50% 圆形头像
display
none
block
inline
inline-block
盒子模型
margin
border
padding
content
浮动
float
0.浮动多用于前期页面布局
1.浮动的元素会造成父标签塌陷
清除浮动
1.clear
2.通用的方式
哪里塌陷加哪里
.clearfix:after{
content:‘‘;
display:block;
clear:both
}
溢出
overflow
圆形头像
定位
静态 static
相对定位 relative
绝对定位 absolute
固定定位 fixed
z-index
模态框
透明度
opacity
box-shadow:3px 3px 3px rgba(0,0,0,0.5)JS
# 面向对象的编程语言
?
# 注释 // /**/
?
# 引入方式
script
?
# 数据类型
?
# 变量
var 5.1版本及之前的
let 6.0版本新出的
变量命名规范
1.数字 字母 下划线 $
2.驼峰命名
userName
3.不能有关键字
# 常量
const
?
# 数值类型 number
NaN
# 字符类型string
模版字符串
res = `
sd
ads
`
res=`
asdsa ${name} ...
`
# 布尔值boolean
true、false
?
# null与undefined
厕纸图片
?
# 数组对象 python中的列表 []
?
# 运算符
++
===
&& || !
# 流程控制 （）条件 {}代码块
if-else if -else
if(){}else if(){}else{}
?
switch
?
for
for(let i=0;i10;i++){}
?
while
while(i>2?3:4
# 函数
function func(arg1,arg2,...){
arguments
return 不能返回多个 需要你自己构造容器类型返回
}
?
# 箭头函数
var func1 = v => v
?
# 自定义对象
"""
在js中创建对象有一个关键字new
"""
d1 = {‘name‘:‘jason‘,‘password‘:123}
d1.name
?
d2 = new Object()
d2.name = ‘jason‘
?
?
# Date对象
?
# JSON对象
JSON.stringify() dumps
JSON.parse() loads
?
# RegExp对象
1.全局模式下有一个lastIndex属性
2.什么都不写默认匹配undefined
?
# Math对象(了解)
上一篇：css强制换行
文章标题：前端入门——review01（HTML＆CSS＆JS）
文章链接：http://soscw.com/index.php/essay/60201.html