黑马程序员技术交流社区

标题: 【西安校区】HTML+CSS+JS基础知识 [打印本页]

作者: 逆风TO 时间: 2020-5-6 15:05
标题: 【西安校区】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.csdn.net/qq_46695047/article/details/105932641

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

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