复习和js知识学习
- HTML表单知识复习
表单标签:
lable(可以绑定一个表单元素,当点击lable标签内的文本时,浏览器会自动将光标转到或者对应的表单元素上,用来增加用户体验
<label for="性别">性别</label><input type="text" id="性别">
<input type="radio" id="男"><label for="男">男</label>
下拉表单元素:
select
籍贯
<select>
<option>山东</option>
<option selected="selected">四川</option>
</select>
文本域表单元素:
textarea(cols显示每行显示多少个字符,rows显示几行)
<form>
今日反馈:
<textarea cols="50" rows="5">
我知道这个是用textarea写的
</textarea>
</form>
css规则由两个部门构成:选择器以及一条或多条声明。
选择器是用于指定css样式的HTML标签,花括号内是该对象设置的具体样式
选择器 :基础选择器和复合选择器
基础选择题:标签选择器、类选择器、id选择器和通配符选择器
标签选择器:选择页面中同类型标签统一设置,不能差异化设置。
类选择器:可以单独选择一个或几个标签。
.red {
color:red;
}
在标签里
-
id选择器:
font-weight字体粗细(后面不要跟单位,700=bold ,400=normal)更方便用数字
字体样式font-style(正常是normal,斜体是italic)
选择器知识复习 -
/* 通配符选择器*把所有的标签全部修改样式 不需要调用 自动给所有元素使用样式*/ *{ color: purple; } /* id选择器:样式#定义,结构id调用,只能调用一次,别人切勿使用 */ #pink{ color: pink; } /* 类选择器 */ .red{ width: 100px; height: 100px; /* 背景颜色 */ background-color: red; } .green{ width: 100px; height: 100px; background-color: green; }
-
css的引入方式
行内样式表(书写方便,适合单独行修改)
内部样式表(把样式写在style标签里,结构和样式部分分离)
外部样式表(完全结构和样式分离,需要引入) -
快速生成HTML结构语法
1.生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成
2.如果想要生成多个相同标签加上就可以了比如div3就可以快速生成3个div
3.如果有父子级关系的标签,可以用>比如ul > li就可以了
4.如果有兄弟关系的标签,用+就可以了比如div+p
5.如果生成带有类名或者id名字的,直接写.demo或者#two tab键就可以了
6.如果生成的div类名是有顺序的,可以用自增符号$ -
快速生成CSS样式语法
CSS基本采取简写形式即可.
1.比如w200按tab 可以生成 width: 200px;
2.比如lh26按tab 可以生成line-height: 26px;
格式化代码
右键+格式化代码 -
后代选择器
元素1 元素2{样式声明}(只要元素2是元素1的后代都可以)
一层一层找 元素1 元素2 元素3
符号是空格 -
子选择器
{
元素1>元素2(样式声明)
只选择离它最近的一个元素
符号是大于号 -
并集选择器
选择某些相同样式的元素(可以用于集体声明)
符号是逗号 -
伪类选择器
:hover(鼠标经过的时候选择出来)
:active(选择活动链接,鼠标按下未弹起的链接)
:first-child()
为确保伪类选择器生效保证link,visvited,hover,active的顺序
focus伪类选择器
把获得选中的表单更改
html元素一般分为块元素和行内元素两种
块级元素的特点︰
1.比较霸道,自己独占一行。
2.高度,宽度、外边距以及内边距都可以控制。
3.宽度默认是容器(父级宽度)的100%。
4.是一个容器及盒子,里面可以放行内或者块级元素。
文字类元素里不能套块元素
例如:p标签里不能放div
行内元素的特点:
1.相邻行内元素在一行上,一行可以显示多个。
2.高、宽直接设置是无效的。
3.默认宽度就是它本身内容的宽度。
4.行内元素只能容纳文本或其他行内元素。
行内块元素的特点:
1.和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙一行可以显示多个
(行内元素特点)。
2.默认宽度就是它本身内容的宽度(行内元素特点)。
3.高度,行高、外边距以及内边距都可以控制(块级元素特点)。-
js知识学习
-
行内式js
可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
可读性差,在html中编写JS大量代码时,不方便阅读;
·引号易错,引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用 -
内嵌JS
<script> alert ( 'Hello world~! ' );</script>
可以将多行JS代码写到
<script>
标签中内嵌JS是学习时常用的方式- 3.外部JS文件
<script src="my.js"><l script>
利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用引用外部JS文件的script标签中间不可以写代码
●适合于JS代码量比较大的情况- 多行注释 shift+alt+a
方法:alert(msg)
说明:浏览器弹出警示框方法:console.log(msg)
说明:浏览器控制台打印输出信息方法:prompt(info)
说明:浏览器弹出输入框,用户可以输入在程序里面,数字前面加0表示八进制
数学前面加0x表示十六进制alert ( Infinity); ll Infinity
alert (-Infinity) ; l l -Infinity
alert (NaN);l//NaN
lnfinity ,代表无穷大,大于任何数值
-Infinity ,代表无穷小,小于任何数值
NaN,Not a number,代表一个非数值isNaN(x) ×是一个非数字类型
×是数字,返回false
x不是数字,返回true -
上一篇: vue中的登陆拦截
下一篇: 登陆注册发生了什么过程?