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”]对元素进行效果的渲染
文章转自blog.csdn.net/qq_46695047… |
|
