Day77 第二阶段知识点总结

川长思鸟来 2023-08-17 15:29 123阅读 0赞

# 1.html #

1.  1 <！DOCTYPE html> 有无demo 种类之间的区别
2.  html文件包含2个大部分：

*  head
    
     *  \-meta
        
         *  页面的编码
         *  跳转
         *  页面缓存
         *  关键字
         *  x-UA-compatible
     *  title
     *  link
        
         *  \- stylesheet
         *  \-icon

*   *  style
     *  script　　
 *  body中的标签
    
     *  行内
        
         *  a
         *  img
         *  label
         *  span
         *  select
         *  input
     *  块级标签
        
         *  div
         *  fieldset
         *  h1
         *  hr 水平线
         *  p
         *  ol
         *  ul
     *  　br 换行
     *  可变标签
        
         *  button
         *  iframe
         *  del
     *  自定义属性
     *  自定义标签

3.元素的特点：

*  block（块）元素的特点

① 总是在新行上开始；  
　　② 高度，行高以及外边距和内边距都可控制；  
　　③ 宽度缺省是它的容器的100%，除非设定一个宽度。  
　　④ 它可以容纳内联元素和其他块元素

*  inline元素的特点

① 和其他元素都在一行上；  
　　② 高，行高及外边距和内边距不可改变；  
　　③ 宽度就是它的文字或图片的宽度，不可改变  
　　④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下  
　　设置宽度width 无效。  
　　设置高度height 无效，可以通过line-height来设置。  
　　设置margin 只有左右margin有效，上下无效。  
　　设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

特殊字符：

< &gt；&quot；&copy;&reg;

4. 重要的标签

*  　<img src="" alt="">

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

*  <a href=""></a>

href:要连接的资源路径 格式如下: href="http://www.baidu.com"

target: \_blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

name: 定义一个页面的书签.

用于跳转 href : \#书签名称.

*  列表标签

<ul>: 无序列表

<ol>:有序列表

<li>:列表中的每一项.

<dl> 定义列表

<dt> 列表标题

<dd> 列表项

*  表格标签: <table>

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素 百分比.（最好通过css来设置长宽）

<tr>: table row

<th>: table head cell

<td>: table data cell

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

*  <form>

表单能够包含 [input 元素][input]，比如文本字段、复选框、单选框、提交按钮等等

表单还可以包含[textarea][]、select、[fieldset][]和 [label 元素][label]。

*  　表单属性

action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
    
               method: 表单的提交方式 post/get 默认取值 就是 get（信封）
    
                              get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
    
                              post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
    
                              get/post是常见的两种请求方式.

*  表单元素

<input>     type: text 文本输入框
    
                 　　　　password 密码输入框
    
                　　　　 radio 单选框
    
                 　　　　checkbox 多选框  
    
                　　　　 submit 提交按钮            
    
                 　　　　button 按钮(需要配合js使用.) button和submit的区别？
    
                 　　　　file 提交文件：form表单需要加上属性enctype="multipart/form-data"

注意点：

*  1.name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；
 *  2.而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。

value: 表单提交项的值.

*  <select> 下拉选标签属性：

name:表单提交项的键.

size：选项个数

multiple：multiple

<option> 下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中

*  <textarea> 文本域 name:表单提交项的键  
      
    
 *  <label>
    
     *  <label for="www">姓名</label>  
        <input id="www" type="text">

# 2 css #

1.  css的四种引入方式

*   *  行内式 是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
     *  嵌入式 是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：  
        
        
            <head>
            
                    <style type="text/css">
            
                           ...此处写CSS样式
            
                   </style>
            
                  </head>
     *  导入式 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

*   *  链接式
     *  将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
     *      导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。
            这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，
            它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

2.基础选择器：

＊ ： 通用元素选择器，匹配任何元素 \* \{ margin:0; padding:0; \}

E ： 标签选择器，匹配所有使用E标签的元素p \{ color:green; \}

.info和E.info: class选择器，匹配所有class属性中包含info的元素 .info \{ background:\#ff0; \} p.info \{ background:blue; \}

\#info和E\#info id选择器，匹配所有id属性等于footer的元素 \#info \{ background:\#ff0; \} p\#info \{ background:\#ff0; \}

3.组合选择器

E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 Div,p \{ color:\#f00; \}

后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 \#nav li \{ display:inline; \} li a \{ font-weight:bold; \}

E > F 子元素选择器，匹配所有E元素的子元素F div > strong \{ color:\#f00; \}

<hr/>

注意**嵌套规则**：

*  块级元素可以包含内联元素或**某些**块级元素，但内联元素不能包含块级元素，它只能包含其它内联元
 *  **块级元素不能放在p里面**
 *  **有几个特殊的块级元素只能包含内联元素，不能包含块级元素**。如h1,h2,h3,h4,h5,h6,p,dt
 *  li内可以包含div
 *  块级元素与块级元素并列、内联元素与内联元素并列。

4.属性选择器

E[att]            匹配所有具有att属性的E元素，不考虑它的值。
    
                                 （注意：E在此处可以省略，比如“[cheacked]”。以下同。）                 p[title] { color:#f00; }
    
             E[att=val]     匹配所有att属性等于“val”的E元素                                                   div[class=”error”] { color:#f00; }
    
            E[att~=val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }
     
            E[att|=val]    匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，
    
                                比如“en”、“en-us”、“en-gb”等等                                                    p[lang|=en] { color:#f00; }
    
            E[attr^=val]    匹配属性值以指定值开头的每个元素                       div[class^="test"]{background:#ffff00;}
    
            E[attr$=val]    匹配属性值以指定值结尾的每个元素                       div[class$="test"]{background:#ffff00;}
    
            E[attr*=val]    匹配属性值中包含指定值的每个元素                       div[class*="test"]{background:#ffff00;}
    
    
            p:before         在每个 <p> 元素的内容之前插入内容                     p:before{content:"hello";color:red}
    
            p:after           在每个 <p> 元素的内容之前插入内容                      p:after{ content:"hello"；color:red}

5.伪类选择器

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接

a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

a:link \{color: \#FF0000\} /\* 未访问的链接 \*/

a:visited \{color: \#00FF00\} /\* 已访问的链接 \*/

a:hover \{color: \#FF00FF\} /\* 鼠标移动到链接上 \*/

a:active \{color: \#0000FF\} /\* 选定的链接 \*/ 格式: 标签:伪类名称\{ css代

6.css常用属性

*  颜色属性
 *  <div style="color:blueviolet">ppppp</div>
    
    <div style="color:\#ffee33">ppppp</div>
    
    <div style="color:rgb(255,0,0)">ppppp</div>
    
    <div style="color:rgba(255,0,0,0.5)">ppppp</div>
 *  字体属性
 *  font-size: 20px/50%/larger
    
    font-family:'Lucida Bright'
    
    font-weight: lighter/bold/border/
    
    <h1 style="font-style: oblique">老男孩</h1>
 *  背景属性
 *  background-color: cornflowerblue
    
    background-image: url('1.jpg');
    
    background-repeat: no-repeat;(repeat:平铺满)
    
    background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

*  文本属性
 *  font-size: 10px;
    
    text-align: center;横向排列
    
    line-height: 200px;文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
    
    p
    
    \{ width: 200px;
    
    height: 200px;
    
    text-align: center;
    
    background-color: aquamarine;
    
    line-height: 200px; \}
    
    text-indent: 150px; 首行缩进，50%：基于父元素（weight）的百分比
    
    letter-spacing: 10px;
    
    word-spacing: 20px;
    
    direction: rtl;
    
    text-transform: capitalize;  
      
      
    
 *  边框属性：
 *  border-style: solid;
    
    border-color: chartreuse;
    
    border-width: 20px;
    
    简写：border: 30px rebeccapurple solid;

*  列表属性
 *  ul,ol\{ list-style: decimal-leading-zero;
    
    list-style: none; list-style: circle;
    
    list-style: upper-alpha;
    
    list-style: disc; \}  
      
    
 *  dispaly属性
    
     *  none
     *  block
     *  inline

7.盒子模型

![1673775-20190801202528215-1967182871.png][]

padding:**用于控制内容与边框之间的距离；**

**　　margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。**

**　　 注意2：margin collapse（边界塌陷或者说边界重叠）**

**　　 外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段 落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。**

**　　　　1兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值**

**　　　　解决办法：**

**　　　　**

1: border:1px solid transparent
                  2:  padding:1px
                  3: over-flow:hidden;

无论多么复杂的布局，其基本出发点均是：“**如何在一行显示多个div元素**”。***浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。***

**假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。**

**经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。**

**清除浮动可以理解为打破横向排列。**

**对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。**

设置浮动的四种方式：

第一种方式
                    .father {
                overflow: hidden;
            }  
            <div class="father clearfix">
                    第二种方式
            .clearfix:after {
                content: '.';
                clear: both;
                display: block;
                height: 0;
                visibility: hidden;
            }
            <div class="father clearfix">
                    第三种方式
            /*给父盒子设置一个高度*/
            第四种方式
                      <div class="clear"></div>
                    .clear {
                clear: both;
            }

9.postion

![1673775-20190801213235552-89605045.png][]

![1673775-20190801213304076-1246412824.png][]

/*设置相对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
    }

# 3.JavaScript #

## 3.1 获取Dom节点的三种方式 ##

var div1 = document.getElementById("box");      //方式一：通过id获取单个标签
    
    var arr1 = document.getElementsByTagName("div");     //方式二：通过 标签名 获得 标签数组，所以有s
    
    var arr2 = document.getElementsByClassName("box");  //方式三：通过 类名 获得 标签数组，所以有s

方式2和方式3都是获取的标签数组 ，那么习惯先遍历再去使用 特殊情况下 直接获取只有一个值 直接获取\[0\]

document.getElementsByTagName("div")[0];    //取数组中的第一个元素
    
    document.getElementsByClassName("box")[0];  //取数组中的第一个元素

## 3.2 DOM访问关系 ##

![1673775-20190802091447105-1539346681.png][]

## 3.3 节点的操作 ##

##### 　1. 创建节点 #####

新的标签(元素节点) = document.createElement("标签名");

##### 　2. 插入节点 #####

父节点.appendChild(新的子节点)
    解释：父节点的最后插入一个新的子节点。

##### 　3. 删除节点 #####

父节点.removeChild(子节点);
    注意： 使用父节点删除子节点 一定要指明删除哪一个子节点：

node1.parentNode.removeChild(node1);

##### 　4. 复制节点（克隆节点） #####

要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。

## 3.4 设置节点属性 ##

获取节点属性：

素节点.getAttribute("属性名称");
    
    
    设置节点属性：

元素节点.setAttribute(属性名, 新的属性值);

删除节点属性：

元素节点.removeAttribute(属性名);
    1、获取文本节点的值：innerText    innerHTML
    4、innerHTML 给节点添加html代码：
            该方法不是w3c的标准，但是主流浏览器支持    
            tag.innerHTML = “<p>要显示内容</p>

3.5 定时器

##### 　1. setTimeOut() #####

只在指定时间后执行一次

##### 　2.setInterval() #####

在指定时间为周期循环执行

## 4.jquery ##

![1673775-20190802093700158-1327951243.png][]

![1673775-20190802093717669-337434579.png][]

--------------------------属性
    $("").attr();
    $("").removeAttr();
    $("").prop();
    $("").removeProp();
    --------------------------CSS类
    $("").addClass(class|fn)
    $("").removeClass([class|fn])
    --------------------------HTML代码/文本/值
    $("").html([val|fn])
    $("").text([val|fn])
    $("").val([val|fn|arr])
    ---------------------------
    $("").css("color","red")

转载于:https://www.cnblogs.com/longerandergou/p/11284899.html

[input]: http://www.w3school.com.cn/tags/tag_input.asp
[textarea]: http://www.w3school.com.cn/tags/tag_textarea.asp
[fieldset]: http://www.w3school.com.cn/tags/tag_fieldset.asp
[label]: http://www.w3school.com.cn/tags/tag_label.asp
[1673775-20190801202528215-1967182871.png]: /images/20230810/7b1b2ae49efe493c9ac1baba82e3d500.png
[1673775-20190801213235552-89605045.png]: /images/20230810/2527249abb3a421dac44e6370446c925.png
[1673775-20190801213304076-1246412824.png]: /images/20230810/ead2048c168b47d0909d102849edb1ec.png
[1673775-20190802091447105-1539346681.png]: /images/20230810/f610e844a1324d2888c1071a09958363.png
[1673775-20190802093700158-1327951243.png]: /images/20230810/db4cba059b0446d8ba60771d268ebdd7.png
[1673775-20190802093717669-337434579.png]: /images/20230810/ae71dbec486b4503a35b5a72d5bffdba.png