web核心(自用html+css+js)

一.HTML

 文件标签:html        head        title         body        !DOCTYPE html    

 1.1.链接标签

<a>:定义一个超链接

属性: 1.href：指定访问资源的URL(统一资源定位符)

         2.target：指定打开资源的方式

1.2.图片标签

<img>：展示图片

属性:1.src：指定图片的位置

1.2.1src与 href 的区别

1.用途不同:src用于嵌入到html文档的外部资源.Href:是用于指定链接到html文档之外的资源

2.针对的标签不同:src属性用于image标签,script标签,等引入相应的资源.Href:用于a标签,用于创建连接

3.游览器解析方式不同: 当浏览器解析到 src 时，会暂停其他资源的下载和处理.

Href会并行下载.

注意:所以一般在加载外部js时,一般放在网页最下面.(最好放在下面,不然有时候会出问题!)

1.3表单标签

<input>可以通过type属性值，改变元素展示的样式

属性:

        type的属性值: 1.text：文本输入框，默认值        

                                2.password：密码输入框

                                3.radio:单选框

                                4.checkbox：复选框

                                5.file：文件选择框

                                6.hidden：隐藏域，用于提交一些信息。

                                7.submit：提交按钮。可以提交表单

                                8.button：普通按钮

二.CSS

2.1选择器

1.id选择器:选择具体的id属性值的元素
   （建议在一个html页面中id值唯一）

2.元素选择器：选择具有相同标签名称的元素

3.类选择器：选择具有相同的class属性值的元素

4.通配符选择器：*{}

5.并集选择器：选择器1,选择器2{}

6.子选择器：筛选选择器1元素下的选择器2元素

7.父选择器：筛选选择器2的父元素选择器1 语法：  选择器1 > 选择器2{}

8. 属性选择器：选择元素名称，属性名=属性值的元素  语法：  元素名称[属性名=‘属性值’]{}

9.伪类选择器：选择一些元素具有的状态

2.1.1选择器的优先级

!important > 内联选择器 > ID选择器 > 类选择器 > 属性选择器 > 伪类 > 元素选择器 > 通配符选择器 > 继承选择器

2.2盒子模型

概念: 

         盒子模型是指：html中的各个元素都类似一个一个的盒子里面的物品，但是却叫做css盒模型，是因为css盒模型像一个盒子，把各种html元素包起来，将html元素进行封装，以便于网页布局与排版。下图就是一个盒子模型的示意图：

 2.2.1 margin和padding

内边距（padding）-取值

作用：设置边框与内容区域之间的距离

常见取值：
一个值    padding: 10px;    上右下左都设置为10px
两个值    padding: 10px 20px;    上下设置为10px、左右设置为20px
三个值    padding: 10px 20px 30px;    上设置为10px、左右设置为20px、下设置为30px
四个值    padding: 10px 20px 30px 40px;    上设置为10px、右设置为20px、下设置为30px、左设置为40px

外边距（margin）

作用：设置边框以外，盒子与盒子之间的距离

常见取值：

取值    示例    含义
一个值    margin: 10px;    上右下左都设置为10px
两个值    margin: 10px 20px;    上下设置为10px、左右设置为20px
三个值    margin: 10px 20px 30px;    上设置为10px、左右设置为20px、下设置为30px
四个值    margin: 10px 20px 30px 40px;    上设置为10px、右设置为20px、下设置为30px、左设置为40px

2.3定位模式

相对定位（relative）

• 相对定位是元素相对于它原来在标准流中的位置来说的。

相对定位的特点：

• 相对于自己原来在标准流中位置来移动的。
• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位（absolute）

绝对定位是元素以带有定位的父级元素来移动位置。

1. 完全脱标——完全不占位置；
2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

绝对定位的特点：

• 绝对是以带有定位的父级元素来移动位置 （拼爹型），如果父级都没有定位，则以浏览器文档为准移动位置。

• 不保留原来的位置，完全是脱标的。

• 子绝父相 —— 子级是绝对定位，父级要用相对定位。(口诀)

固定定位（fixed）

固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形，那么固定定位就类似于正方形。

1. 完全脱标——完全不占位置；
2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

三.js

以后写..