2023年6月21日发(作者：)
⿊马程序员05-Web前端学习笔记部分资源地址
HTML前端开发系统化学习，包括html、css、PC端及移动端布局技巧、javascript、jquery、js特效制作、ajax前后台交互等。⼀个HTML⽂档由4个基本部分组成：① ⼀个⽂档声明：② ⼀个html标签对：③ ⼀个head标签对：
④ ⼀个body标签对：html5是向下兼容的⽂档，⽤sublime text创建⽅法： html:5 + tab 或者 ! + tab⼀般来说，只有6个标签能放在标签内：①
；② <meta>；keywords description author copyright③ <link>；④ <style>；⑤ <script>meta标签有两个重要的属性name和http-equiv。实体： “<” 和 “>” 的字符实体为 < 和 >空格“ ”，在前端界⼜称为“⽜逼SP”语义化可以给我们带来什么样的好处呢？1. 更容易被搜索引擎收录。2. 更容易让屏幕阅读器读出⽹页内容。<hr>标签，添加⽔平横线 </p><p>换⾏ </p><p>div，即division（分区）HTML元素根据表现形式，可以分为2类：（1）块元素（block）； </p><p> </p><p> </p><p> （1）独占⼀⾏，排斥其他元素跟其位于同⼀⾏，包括块元素和⾏内元素； （2）块元素内部可以容纳其他块元素或⾏元素；（2）⾏内元素（inline）；⾏内元素默认显⽰状态可以与其他⾏内元素共存在同⼀⾏。任何HTML元素都属于这两类中的其中⼀类。ul元素内部的⼦元素只能是li元素，不能是其他元素，⽆序列表列表项符号由list-style-type属性定义，到时候应该摒弃type属性 ⽹ </p><p>页语义结构良好，对于搜索引擎来说也是极为重要的⼀点。 </p><p> title属性的值往往都是跟alt属性的值相同，⼀个是给读者⽤户看，⼀个是给搜索引擎看。<a href="链接地址" target="⽬标窗⼝的打开⽅式">超链接⽂字</a> ⼀般情况下，target只⽤到“_self”和“_blank”这两个属性值超链接根据链接对象的不同分为：（1）外部链接（2）内部链接：a.内部页⾯链接（同域名下⾯）；b.（⽬录）；表单元素不⼀定都要放在form标签内。对于要与服务器进⾏交互（也可以说是跟⽹站后台进⾏交互）的表单元素就必须放在form标签内才有效焦点：<label for="male">男</label> <input type="radio" name="gender" id="male" />普通按钮⼀般与JavaScript脚本结合在⼀起来实现⼀些特效，提交按钮主要⽤于把当前所在<form>标签内部的表单输⼊信息提交给服务器处理，⽽重置按钮则是清除当前所在<form>标签内部的表单元素的输⼊信息。⽂本框有3种形式：单⾏⽂本框text、密码⽂本框password和多⾏⽂本框，textarea。单⾏⽂本框和密码⽂本框使⽤的是input标签，⽽多⾏⽂本框使⽤的是textarea标签。<button>标签与表单按钮相⽐，<button>标签开始符号与结束符号之间可以插⼊其他标签或⽂本，因此它的功能更加强⼤。插⼊图⽚embed是HTML5新增的标签。<embed src="多媒体⽂件地址" width="播放界⾯的宽度" height="播放界⾯的⾼度"></embed>“ ./ ” 表⽰当前⽂件所在⽬录下,“ ../ ” 表⽰当前⽂件所在⽬录下的上⼀级⽬录,⽐如：“../images/” 表⽰当前⽬录下的上⼀级⽬录下的images⽂件夹中的的图⽚<!DOCTYPE HTML><html> <head> </p><p> <!--⽹页关键字--> <meta name="keywords" content="绿叶学习⽹"/> <!--⽹页描述--> <meta name="description" content="绿叶学习⽹是⼀个富有活⼒的技术学习⽹站"/> <!--本页作者--> <meta name="author" content="helicopter"> <!--版权声明--> <meta name="copyright" content="本站所有教程均为原创，版权所有，禁⽌转载。否则将追究法律责任。"/> <!-- 编码 --> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- ⾃动跳转 --> <!-- <meta http-equiv="refresh" content="6;url="/> --> <link rel="stylesheet" type="text/css" title="temp" href="//"> <style type="text/css"> </p><p> </style> </head> <body> <h1>这是⼀级标题</h1> <h2>这是⼆级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <br/> <!-- 换⾏标签是⾃闭合标签 ，其中br指的是“break（换⾏）”。 --> <h6>这是六级标题</h6> <strong>这是粗体⽂本</strong><br/> <i>斜体⽂本</i><br/> <cite>斜体⽂本</cite><br/> <!-- 对⽂本进⾏斜体设置，尽量⽤<em>标签 --> <em>斜体⽂本</em> <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p> <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分⼦</p> <!-- 学了CSS之后，对于删除线效果，⼀般采⽤CSS实现，极少使⽤<s>标签实现。 --> <p><s>原价:￥6.50/kg</s></p><p><strong>现在仅售：￥4.00/kg</strong></p> <hr/> <p>欧元符号：€</p> <p>英镑符号：£</p> <p>⽅式2</p> <p>欧元符号：€</p> <p>英镑符号：￡</p> <hr> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Ajax</li> <li>SEO</li> <li></li> </ol> <hr> <ul> <li>⽆序列表项</li> <li>⽆序列表项</li> <li>⽆序列表项</li> </ul> <p>定义列表</p> <dl> <dt>HTML</dt> <dd>制作⽹页的标准语⾔，控制⽹页的结构</dd> <dt>CSS</dt> <dd>层叠样式表，控制⽹页的样式</dd> <dt>JavaScript</dt> <dd>脚本语⾔，控制⽹页的⾏为</dd> </dl><!-- tr，即“table row（表格⾏）”。td，即“table data cell（表格单元格）”。 --> <table> <caption>表格标题</caption> <tr> <td>单元格1</td> <td>单元格2</td> </tr> <tr> <td>单元格1</td> <td>单元格2</td> </tr></table> <hr> <a href="" target="_blank">百度⼀下</a> <p>内部链接</p> <div> <a href="#music">推荐⾳乐</a><br /> <a href="#movie">推荐电影</a><br /> <a href="#article">推荐⽂章</a><br /> </div> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> <div id="music"> <h3>推荐⾳乐</h3> <ul> <li>林俊杰-被风吹过的下图</li> <li>曲婉婷-在我的歌声⾥</li> <li>许嵩-灰⾊头像</li> </ul> </div> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> <div id="movie"> <h3>推荐电影</h3> <ul> <li>蜘蛛侠系列</li> <li>钢铁侠系统</li> <li>复仇者联盟</li> </ul> </div> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> <div id="article"> <h3>推荐⽂章</h3> <ul> <li>朱⾃清-荷塘⽉⾊</li> <li>余光中-乡愁</li> <li>鲁迅-阿Q正传</li> </ul> </div> <hr> <a href="void:"><p>如果您对我任何意见和建议，请发邮件给我们</p> <form name="form1" action="mailto:1096221710@" method="post"></form></a><hr> <div id="main"> <h3>springlee⽹</h3> <iframe src="" width="400px" height="300px" scrolling="no"></iframe> </div> </body> <script type="text/javascript"> </script></html> CSS在HTML中引⼊CSS共有3种⽅式：（1）外部样式表；<linkhref=""rel="stylesheet"type="text/css"/>（2）内部样式表； </p><p><styletype="text/css"> </p><p>p{color:Red;} </p><p></style>（3）内联样式表； <pstyle="color:Red; ">绿叶学习⽹</p>选择器 { 属性:值; 属性:值; 属性:值;}height:auto，是指根据块内内容⾃动调节⾼度。height:100%，是指其相对⽗块⾼度⽽定义的⾼度，也就是按照离它最近且有定义⾼度的⽗层的⾼度来定义⾼度。p{color:red !important;} //设置具有最⾼权值我们可以使⽤CSS的来控制⽂本⾸⾏的缩进。在CSS中，使⽤控制⽂本的⽔平⽅向的对齐⽅式：左对齐、居中对齐、右对齐。 边框CSS样式有⼀个简洁的写法： border:1px solid gray;定义这四个伪类，必须按照“link、visited、hover、active”“love hate”请记住， </p><p>⼀般情况下，我们只需要采⽤浏览器默认的⿏标样式就可以了，如果实在特别需要的时候可以⽤“cursor:pointer;”。对于cursor的其他属性值，我们⼀般⽤不上。因此⼤家⽆需花⼒⽓去记忆这些没⽤的属性。 </p><p> </p><p>“:hover”伪类可以定义任何⼀个元素在⿏标经过时的样式！ </p><p> ⽂字属性：line-height 设置⽂字的⾏⾼，如：line-height:24px;text-decoration 设置⽂字的下划线，如：text-decoration:none; 将⽂字下划线去掉text-indent 设置⽂字⾸⾏缩进，如：text-indent:24px; 设置⽂字⾸⾏缩进24pxtext-align 设置⽂字⽔平对齐⽅式，如text-align:center 设置⽂字⽔平居盒⼦宽度 = width + padding左右 + border左右margin相关技巧 </p><p>1、设置元素⽔平居中： margin:x auto;2、margin负值让元素位移及边框合并外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成⼀个外边距。合并后的外边距的⾼度等于两个发⽣合并的外边距的⾼度中的较⼤者。解决⽅法如下：1、使⽤这种特性2、设置⼀边的外边距，⼀般设置margin-top3、将元素浮动或者定位margin-top 塌陷在两个盒⼦嵌套时候，内部的盒⼦设置的margin-top会加到外边的盒⼦上，导致内部的盒⼦margin-top设置失败，解决⽅法如下：1、外部盒⼦设置⼀个边框2、外部盒⼦设置 overflow:hidden3、使⽤伪元素类：css的布局模型（定位机制）：我们可以使⽤css的position属性来设置元素的定位类型，postion的设置项如下：relative ⽣成相对定位元素，元素所占据的⽂档流的位置不变，元素本⾝相对⽂档流的位置进⾏偏移absolute ⽣成绝对定位元素，元素脱离⽂档流，不占据⽂档流的位置，可以理解为漂浮在⽂档流的上⽅，相对于上⼀个设置了相对或者绝对或者固定定位的⽗级元素来进⾏定位，如果找不到，则相对于body元素进⾏定位。fixed ⽣成固定定位元素，元素脱离⽂档流，不占据⽂档流的位置，可以理解为漂浮在⽂档流的上⽅，相对于浏览器窗⼝进⾏定位。static 默认值，没有定位，元素出现在正常的⽂档流中，相当于取消定位属性或者不设置定位属性inherit 从⽗元素继承 position 属性的值background-color 设置背景颜⾊background-image 设置背景图⽚地址background-repeat 设置背景图⽚如何重复平铺background-position 设置背景图⽚的位置background-attachment 设置背景图⽚是固定还是随着页⾯滚动条滚动各种居中⽂本、图⽚等⾏内元素时，⽔平居中是通过给⽗元素设置 text-align:center来实现定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中垂直居中⽗元素⾼度确定的单⾏⽂本 height:100px; line-height:100px; //上下参数⼀样隐性改变display类型 1. position : absolute 2. float : left 或 float:right简单来说，只要html代码中出现以上两句之⼀，元素的display显⽰类型就会⾃动变为以display:inline-block（块状元素）的⽅式显⽰，当然就可以设置元素的 width和height 了，且默认宽度不占满⽗元素。看到⼀张页⾯，先不要被绚丽的CSS效果所打扰，重点是看它的HTML结构和语义化 少⽤div 让CSS3样式兼容，需要将某些样式加上浏览器前缀：-ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safarih5新增的主要语义化标签如下：1、header 页⾯头部、页眉2、nav 页⾯导航3、article ⼀篇⽂章4、section ⽂章中的章节5、aside 侧边栏6、footer 页⾯底部、页脚JavaScriptjs作⽤：1、动态改变页⾯内容2、动态改变⽹页的外观3、验证表单数据4、响应事件什么叫“脚本语⾔”？ </p><p>（1）它不需要编译成⼆进制，以⽂本形式存在；（2）脚本语⾔⼀般都需要其他语⾔的调⽤执⾏，不能独⽴运⾏。JavaScript在HTML的引⽤共有4种：（1）页头引⼊（head标签内）；<script type="text/javascript">……</script>（2）页中引⼊（body标签内）；（3）元素事件中引⼊（标签属性中引⼊）；<input type="button" onClick="alert('绿叶学习⽹')" value="按钮"/>（4）引⼊外部JS⽂件；<script src="js/" type="text/javascript"></script>调试程序的⽅法1、alert2、3、avaScript数据类型有2⼤分类：⼀是“基本数据类型”，⼆是“特殊数据类型”。其中，基本数据类型包括以下3种：（1）数字型（Number型）：如整型84，浮点型3.14；（2）字符串型（String型）：如"绿叶学习⽹"；（3）布尔型（Boolean型）：true或fasle；特殊数据类型有3种：（1）空值（null型）；（2）未定义值（undefined型）；（3）转义字符；null不等同于空的字符串（""）或0，因为空的字符串（""）或0是存在的，但是null表⽰其不存在的。根据个⼈的开发经验中，只需要记忆n、'、"这3个就已经够初学者⾛很远了 alert("欢迎您来到"绿叶学习⽹"！");break语句与continue语句的主要区别是：break是彻底结束循环，⽽continue是结束本次循环常⽤的函数调⽤⽅式有4种：（1）简单调⽤； </p><p> alertSum();（2）在表达式中调⽤； (isLeapYear(2015)); </p><p>（3）在事件响应中调⽤； </p><p><input type="button"onclick="alertMes()"value="提交"/>（4）通过链接调⽤；<a href="javascript:函数名"></a>创建⽇期对象vardt1 = </p><p>newDate("2015-5-3");vardt2 = </p><p>newDate("May 3,2015");vardt3 = </p><p>newDate("2015/5/3");setTimeout()、 clearTimeout()设置或取消“⼀次性”执⾏的定时器setInterval()、clearInterval()设置或取消“重复性”执⾏的定时器在JavaScript中，可以通过以下2种⽅式来选中指定元素：（1）getElementById()；（2）getElementsByName()；数组是什么？在JavaScript中，我们可以使⽤“数组”来存储⼀组“相同数据类型”的数据结构。在JavaScript中我们可以使⽤innerHTML和innerText这2个属性很⽅便地获取和设置某⼀个元素内部⼦元素或⽂本。innerHTML属性被多数浏览器所⽀持，⽽innerText只能被IE、chrome等⽀持⽽不被Firefox⽀持。 JavaScript操作CSS样式 .属性名;JavaScript的DOM操作、事件操作，你就算把绿叶学习⽹翻烂都要把这些记住，重中之重。⽹页动态标题<!DOCTYPE html><html xmlns="/1999/xhtml"><head> <title> 