本帖最后由 小石姐姐 于 2017-11-20 15:09 编辑
Web前期学习笔记
day01 HTML
一 相关知识
1.概念
概念-超文本标志语言
超文本:比普通文本更强大
作用:制作页面(静态页面),展示数据
一个HTML文件,.html或者.htm结尾
2.出现乱码问题原因;
HTML源代码内中文字内容与HTML编码不同造成的
比如网页源代码是gbk的编码，而内容中的中文字是utf-8
编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码
3.HTML 的结构标签
*根标签<html>
<head>
<title> 网站的名字</title>
<meta charset="utf-8"/>
</head>
<body>
要展示的内容
</body>
</html>
4.html 的字体标签
<font> 文字</font>
<font>标签的属性:
<标签 属性名="属性值"> </标签>
属性:
color 属性:字体颜色
size 属性:(1~7)
face 属性 字体
<hr> 分割线
<pre>原生标签
空格 :
5.html 排版标签
标题标签 h 标签<h1>....<h6>
段落标签 p标签
斜体标签 i标签 <i>斜体</i>
下划线标签 <u> 下划线</u>
居中标签 <center> 居中</center> --已经过时
6.HTML的表格标签
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性:
width :表格宽度
height :表格高度
align :表格水平位置:
* left
* center
* right
<td>的属性:
* colspan=”列数”
* rowspan=”行数”
7.图片标签
图片标签:<img>
* 属性:
* src :图片的来源.
* width :图片的宽度.
* height:图片的高度.
* alt :图片找不到显示的内容.
图片的引入的路径问题:
* 路径：相对路径.
8.列表标签
【HTML的列表标签】
有序列表
<ol>
<li></li>
</ol>
l 无序列表
<ul>
<li></li>
</ul>
9.HTML的超链接标签
HTML的超链接标签：<a>
* 属性:
* href :链接的路径
* target :打开的方式
* _self :在自身页面打开
* _blank :新打开一个窗口
10.HTML的表单标签（*****）
HTML的表单标签：<form>
***** GET方式和POST方式的区别? 重点
Post相对更安全一些
* GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
* POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
今日补充
1.列表标签清除小圆点（ul style="list-style: none;"）
2.提交按钮，普通按钮，重置按钮
3.HTML代码调试，右键检查元素，或者F12弹出控
day02 div+css
一相关知识
1.css概述
概念:层叠样式表
作用 :主要用来美化HTML(对骨架进行美化)
用途;任何网站都能用css美化页面
2.如何使用 :
css 语法:通常包含两部分 一个是选择器 一个是声明
选择器(属性:属性值;属性:属性值...)
3.css 引入方式
1.行内样式:直接在HTML的元素上使用style属性设置css
2.页面内样式 在HTML的<head> 标签中使用<style>标签设置css
3.外部样式:单独定义一个.css文件 在HTML中引入
4.css 选择器
选择器:能够找到的那个东西
基本选择器
元素选择器(标签选择器):
元素选择器 元素名{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; }
ID选择器:要加# +id名称
ID 选择器 #id 属性名{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; }
类选择器:.divClass
.类名{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; }
5.浮动
css的浮动
使用float属性
float的取值
left 先做浮动
right向右浮动
none 默认浮动
clear 清除浮动
6.子元素选择器
div > span找这个div中的第一层级的span元素.
7.属性选择器
<style>
input[type="text"]{
background-color: red;
}
</style>
9.并列选择器
选择器,选择器{}
10. css样式
背景
文本
字体 取偶不取奇数 最小是12
列表
二.注册页面
1.盒子模型
内边距 padding上右 下左
外边距 margin 上右下左
2. 定位 position 属性设置定位 两种定位方式
相对定位relative
绝对定位absolute 相对body
3.只需要记住使用的时候 : 子绝父相
另外两个属性left top
4. 伪元素
:link :visited :hover :active 顺序不能乱，href属性中必须有值，记忆方法是 驴哈
5. background-size: auto 42px;宽度自动,高度自定(42px)
今日总结
快捷键 alt+shift+a 可以同时修改多行代码
1.常用标签 <div> <span> <ul> <a> <i>
2.块级元素和行内元素
块级元素：独占一行，可以修改高度和宽度 div 块级元素转行内元素添加属性display:inline;
行内元素：不独占一样，不可以修改高度和宽度 span 行内元素转块级元素添加属性display:block;
行内块级元素:不独占一行，并且可以修改高度和宽度 img display:inline-block;
3.table和div布局的区别
div更加灵活并且解析加载速度快
4.CSS引入方式
引入外部css文件：多个HTML文件中使用了相同的样式
页面内样式：同一个HTML文件中多个标签共用这个样式
行内样式：只有某个标签自己使用
5.选择器的优先级
ID选择>类选择器>标签选择器
5.1 复合选择器
子孙元素选择器 div a{}
子元素选择器 div > a{}
属性选择器 标签名[属性名='属性值']{}
6.浮动
1.在浮动的元素后面添加<div style="clear:both"> 不建议使用
2.给浮动的元素的父元素添加一个样式 clearfix
7.CSS中的继承问题
在CSS中宽度是可以继承，高度不可以继承
注意：浮动以后的元素是不会继承宽度的
8.div居中
margin:0 auto;
9.百分比和PX的计算 calc(100% - 45px);注意事项：减号的两边必须有空格
10.盒模型
外边距：盒子与盒子的距离 margin
内边距：padding
宽度计算方式 padding-left + padding-right + border-left + border-right + content;
11.定位
position
absolute :绝对定位 默认是相对于body
relative ：相对定位 默认是相对于父标签
只需要记住使用的时候:子绝父相
fixed : 制作广告的时候使用
12.伪类
:link :visited :hover :active 顺序不能乱，href属性中必须有值，记忆方法是 驴哈
13..样式总结
背景
背景颜色 background-color:red;
背景图片 background-image:url(xx.png);
背景重复 background-repeat:no-repeat;
背景位置 background-position: center center;
背景缩写 background : red url(x.png) no-repeat center center;
背景大小 background-size:
边框
border : 1px solid black;
文本/字体
大小 font-size : 12px;
颜色 color : red;
去除超链接下划线 text-decoration : none;
文本上下居中 line-height:100px;height:100px;//height==line-height
文本左右居中 text-align:center;
外边距:margin
内边距:paddding
day03 JavaScript
早晨要背的内容
# 1.标签相关
## a.写出一个标准的文本输入框
<input type="text" name="username" id="username" value="">
## b.写出一个带默认选中值的标准的下拉框
<select id="select" name="select">
<option value="0">北京</option>
<option value="0" selected>天津</option>d
</select>
## c.写出一个含有默认选中值的标准的多选框
<input type="checkbox" checked id="" name="" />
# 2.获取dom元素
## a.通过ID属性获取dom对象
document.getElementById("")
## b.通过Name属性的值获取dom对象
document.getElementsByName("")
## c.通过样式名获取dom对象
document.getElementsByClassName("")
# 3.操作dom元素的属性
## a.获取select下拉框选中的值
document.getElementById("下拉框的ID").value
## b.获取输入框输入的值
document.getElementById("输入框的ID").value
## c.修改输入框里面的数据
document.getElementById("输入框的ID").value = "";
## d.获取图片对象的图片地址
document.getElementById("").src
## e.修改图片地址
document.getElementById("").src = ""
## f.修改背景色
document.getElementById("").style.backgroundColor = 'red';
## g.设置多选框为选中状态
document.getElementById("").checked=true;
# 4.创建
## a.创建标签对象
document.createElement("div")
## b.创建文本对象
document.createTextNode("文本")
# 5.给dom元素添加子元素
## a.给id="a"的div添加一个子div
document.getElementById("a").appendChild(document.createElement("div"));
## b.给id="a"的div添加文字"你好"
document.getElementById("a").appendChild(document.createTextNode("你好"));
document.getElementById("a").innerHTML = "你好"
# 6.删除dom元素
## a.删除id="b"的ul标签下的第一个li标签
document.getElementById("b").removeChild(document.querySelectorAll("li")[0])
## b.删除id="tb"的表格的第一行
document.getElementById("tb").removeChild(document.querySelectorAll("tr")[0])
# 7.内置对象
## a.创建数组的两种方式
var arr = [];
var arr = new Array();
案例-使用JS完成表单非空校验,弹出提示框
一 相关知识点
1.JS定义：运行在浏览器的脚本语言
组成： ECMAScript DOM BOM
2，两个等于号和三个等于号的区别
== ：比较的是值是否相等（隐含了强制类型的转换）
===：比较的是数据类型和值是否都相等
3. JS常用事件
onclick :单机点击事件
ondblclic；双击点击事件
onmouseover(onmouseenter）：鼠标点上事件
onmouseout(onmuseleave)；鼠标离开时候
onload；加载事件
onsubmit：提交事件
JS通常开发的五个步骤
触发一个函数，定义一个函数。 获得操作对象的控制权（获取对象） 修改要操作的对象的属性值。
4.JS的两种引入方式
一种：页面内编写js 代码 ，代码需要使用<script></script>
一种：单独定义js文件,需要时引入即可
5.onsubmit注意事项
onsubmit="return aa()”/一定要加 return
6.获取DOM元素对象的方式
var aa=document.getElementById("id名字")
案例 使用JS完成图片轮播效果
1.setInterval和setTimeou
setInterval(“js代码”，毫秒值):每隔多少毫秒执行某个表达式
setTimeout(“js代码”，毫秒值)：隔多少毫秒执行一个表达式
2.清楚定时器方法
clearInterval(), clearTimeout()
3.如何修改<img>标签的src的值？
document.getElementById("").src = ""
4.如何修改DOM对象的属性值？
document.getElementById("输入框的ID").value = "";
案例 使用JS完成弹广告
一 相关知识
1..CSS元素的显示和隐藏
display:block;none; 隐藏后不占位
visibility:visible;hidden; 隐藏后占位
2.使用JS操作CSS属性
obj.value = "";
obj.style.样式名 = "";
obj.src = "";
obj.属性名 = "值"
今日补充
1.JS调试
1.打开控制台，查看console是否有错误信息
2.如果有错误信息，可以直接定位哪里有问题
3.如果没有错误信息，我们需要打开source，查看源代码，加断点
4.找事件，根据事件名字找到对应的方法 比如 那我们就可以找到方法是show方法
5.在show方法的第一行加断点
6.仔细观察代码是走到哪一行报错的，并记录下来
7.通过watch查看出问题的那一行的变量
2.如何在控制台打印数据
console.log();
3.CSS控制元素显示和隐藏的第二种方式visibility=hidden;visible
在js中，变量如果等于null,0,undefined, 这些与false等价
|
|
收藏
淘帖
踩
