黑马程序员技术交流社区

标题: 【石家庄校区】WEB前期学习01 [打印本页]

作者: Tong心未泯 时间: 2017-11-19 15:24
标题: 【石家庄校区】WEB前期学习01
本帖最后由小石姐姐于 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等价

作者: 小石姐姐 时间: 2017-11-20 15:09
太厉害了

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2