HTML+CSS+JS基础知识

HTML 1.基本概述 对于学习html的学习，更多的就是记住这些标签的含义以及会使用即可，这是前端最重要的知识。 注释的语句为：<!-xxx-> 整个HTML页面主要分为两个部分：头部head 身体body. 下面我们来介绍标签：标签分为单标签和双标签，单标签是为一个箭头结尾的。双标签是要有头有尾的结束。 在html的角度来讲，标签分为： 文本标签：<p></p> ，<span></span> ,<a> ,<b></b>,<i></i>,<u></u>,<em></em> 容器标签：<div></div>,h1~h6一系列标签，<li></li>,<dt></dt>,<dd></dd> <br/>换行标签 <hr>水平线标签 <b></b> <strong></strong>对字体加粗 <em></em>对字体使用斜体 <img src=“xxx”/>图像标签 <a href=“xxx”></a> 超链接标签 <table></table> 定义一个表格的标签 <tr></tr> 设置行 配合colspan可以显示横跨几格 <td></td>设置列 配合rowspan可以显示纵跨几格 <ol></ol>—><li></li> 实现有序列表 <ul></ul>—><li></li>实现无序列表 <dl></dl>—><dt></dt>自定义一个列表 内联框架 <iframe></iframe> 在网页中嵌入一个指定大小的方块，用于显示新的网页效果 该标签可以配合其他的标签一起使用，用于实现网页套网页的效果 <form></form> 用于设置一个表单 <input type=“xxx”>该标签常用于我们前端的输入框类型，十分常用 <select></select>—><option></option> 这两个标签的配合使用，可以实现下拉框的功能 <textarea></textarea>这个标签用于留言框的展示 2、思维导图： CSS 1、思维导图 2、引入样式的四种方式 1.直接在行内使用style标签进行样式的编写。 2.在head部，自己编写对应的css样式。 3.使用link标签，引入外部的一家写好的样式 4.在style标签内部使用@import导入外部已经写好的样式 3、选择器（本章重点） 选择器的位置可以写在头部与身体部分的中间 3.1基本选择器（三个） 1.标签选择器：标签{}    对页面中的指定的标签进行样式选择 2.类选择器：.标签{}    一定要记得前面有一个.我们在自己的页面标签中，可以设置对应的class属性 3.id选择器：#标签{}        可以设置id属性。 3.2层次选择器（四个） 1、后代选择器：标签a 标签b{} 用于指定某个标签后面的所有标签的变化形式。就像名字说的后代，只要标签a的后代里面出现了标签b，那么标签b就会发生变化 2、子选择器：标签a > 标签b{} 与后代选择器不同，子选择器的控制范围只有一代。即标签a的子代出现了标签b才会变化，其他代不影响。 3、相邻兄弟选择器：标签a + 标签b{} 以标签a为主导，如果标签a的同级标签下含有标签b，那么这个标签b就会发生对象的变化，不过只有第一个兄弟才会变化，其他的无效。 4、通用选择器：标签a ~ 标签b{} 以标签a为主导，如果标签a的同级标签下含有标签b，那么这个标签b就会发生对象的变化不过。通用选择器更像是对相邻兄弟选择器的一个扩充，因为它将相邻兄弟选择器中的不相邻的那些兄弟也带了进来。 3.3、伪类选择器 一般伪类选择器是和结构选择器一起使用的，合称结构伪类选择器 ul li :last-child{} 类似这种形式，先使用了后代选择器，然后冒号，最后一个孩子。 这一个可以用一用，效果还是挺好看的 标签:hover{} 如果鼠标移动到上面的时候，会变化颜色 3.4、属性选择器 正则式和属性选择器的结合： =：全等于 *=：包含于 ^=：以等号后的为开头的 $=：以等号后的为结尾的 使用类似于数组的格式，结合id选择器和类选择器a[id*=“xx”]、a[class^=“xx”]对元素进行效果的渲染 文章转自https://blog.youkuaiyun.com/qq_46695047/article/details/105932641