有关网页的Web三大标准基本知识

        Web三大标准是什么？

答：分别是HTML（页面元素和内容）、CCS（网页元素的外观和位置等页面样式(如:颜色、大小等)）、JavaScript（网页模型的定义与页面交互）。

下图则生动的体现了这三大标准的作用

HTML：

超文本链接，注意这里面的注释是<!---->和我们的idea不一样，单标签的/在前面，而双标签的则在后面，例如：<p> </p>  <hr/>

1.html的基本标签：

        ——标题标签：h1~h6，只有六级，不能超过6。

        特点：文字都有加粗效果，文字变大，h1->h6逐渐变小

        ——段落标签：p表示

        特点：独占一行，段落间有一定的间隙

        ——换行标签：hr

        特点单标签，让文字强行换行

        ——分割线：hr

        ——修饰文本的标签：

        加粗：strong、下划线：ins、倾斜：em、删除线：del

        ——插入图片标签：img

        其中的属性有：src（图片路径）、alt（替换文本，当图片加载失败时，才显示的文字）、width（宽度）、height（高度），注意：路径同一级和上一级都是直接输入就行了，如果要查找上一级目录的图片文件则是通过：../ 去查找

        ——插入音频标签：audio

        属性：src（路径）、controls（显示播放的控件），autoplay（自动播放）

        注意：目前只支持MP3、Wav、Ogg格式

        ——视频标签：video

        属性和audio一样，只支持MP4、WebM、Ogg

        ——链接标签:a

        属性：href（点击之后跳转去哪个网页，目标网页的路径），target（目标网页的打开形式，_blank是在一个新的窗口打开，_self是在本窗口打开）

2.表格、列表、表单

 （1）.列表：

-常用的场景：新闻列表、排行榜、账单等等

-种类：无序列表、有序列表、自定义列表

无序列表：默认前缀是一个点，ul和il标签，li表示列表每一行的内容

有序列表：前缀默认是数字，ol和li，意义如上

（2）.表格：

-常用于各种表格，例如成绩表

-基本标签：table（表格主体）、tr（表示每一行，包住td）、td（每一列），可用下图来帮助理解。

-表格的相关属性：在实际开发中这些东西在CCS里面设置

border（边框宽度）、width（表格宽度）、height（表格高度）、th（表头）

-表格合并：

上下合并，也即是跨列合并，colspan，只保留最上面的

左右合并，也就是跨行合并，rowspan，只保留最左边的

（3）.表单标签：

-常用于的场景：登录和注册的页面

-input标签，有type（提交的类型）、name（提交的key）、value（提交的value）

type常见的属性有：text文本、password密码、radio单选框、checkbox多选框、file文件

submit提交按钮、reset重置按钮、button普通按钮默认没有效果、select下拉菜单、textarea文本域

-注意：

在单选框和多选框中checked表示默认选中

CCS

1.css引入方式：

-行内样式：写在body标签中某一行里面的

-内部样式：写在head标签里面

-外部样式：写在单独的.css文件里，需要link标签导入

2.基础选择器：

-标签选择器：其结构为：标签名{属性名：属性值}，通过标签名找到页面中所有的这类标签

-类选择器：.类名{属性名：属性值 }，前面有个点，在对应的标签里要写上class="类名"

-id选择器：#类名{属性名：属性值}，前面是#号，在对应的标签里要写上id="类名"

注意：

标签选择器选择的是一类标签， 而不是单独某一个

标签选择器无论嵌套关系有多深，都能找到对应的标签

所有标签上都有class属性，class属性的属性值称为类名(类似于名字)

类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

一个标签可以同时有多个类名，类名之间以空格隔开

类名可以重复，一个类选择器可以同时选中多个标签

所有标签上都有i d属性

 id属性值类似于身份证号码，在一个页面中是唯-的，不可重复的!

一个标签上只能有一个id属性值

一个i d选择器只能选中一个标签

3.通配选择器：*{属性名 ：属性值}一般很少用，智慧去除默认的内外边距

4.字体样式：

-字体大小：font-size

-字体粗细：font-weight，100~900的整百数

-字体样式;font-style：italic（倾斜）

-字体类型：font-family，例如微软雅黑、黑体、宋体等等

5.文本样式：

-文本缩进：text-indent（用em表示缩进了几个字符）

-水平对齐：text-align：left、right、center，分别是左、右、居中对齐

-文本修饰：text-direction：underline（下划线）、line-through（删除线）、overline（上划线）、none（无，一般用于清楚a标签的下划线）

-行高：line-height

6.复合选择器：

-后代选择器：空格

语法：选择器1 选择器2{css}，找1的后代，儿子、孙子、重孙等等满足2的标签

-子代选择器：>

语法：选择器1>选择器2{css}，在1里面找子代的标签

-并集选择器：，

语法：选择器1，选择器2{css}，选择1、2中所选中的标签

-hover伪类选择器：

语法：选择器:hover{css}，当鼠标悬浮在元素上的状态

7.背景相关属性

-背景颜色：background-color

-背景图片：background-color：url=""（图片路径）

-背景平铺：background-repeat，属性值：repeat（默认值水平和垂直方向都平铺）、

no-repeat（不平铺）、repeat-x、repeat-y（水平、垂直方向平铺）

8.样式冲突：

-给同一个标签设置不同的样式→此时样式会层叠叠加- →会共同作用在标签上

-给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效

其实就是就近原则。

-当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

9.优先级：

(1) 特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

通配符选择器<标签选择器<类选择器< id选择器<行内样式< 

盒子模型：

1.盒子模型的组成，如图

2.

-高度：height

-宽度：width

-边框：border，边框粗细 border-width、边框样式 border-style（实线solid、虚线dashed 、点线dotted）、边框颜色 border-color，连写形式，如: border : 10px solid red;

3.父边框坍塌解决办法：

在.css文件里设置，

浮动：

1.浮动元素级别比标准流高，浮动后会覆盖原来的元素

定位：

1.设置定位的方式：

属性名：position

属性值：

-静态定位  static

-相对定位 relative

-绝对定位 absolute

-固定定位 fixed

-粘性定位 sticky

2.设置偏移：

水平：left、right

垂直：bottom、top

3.静态定位：

静态定位是默认值, 就是之前认识的标准流。position:static

4.相对定位：

自恋型定位， 相对于自己之前的位置进行移动，position:relative

特点：

-需要配合方位属性实现移动。

-相对于自己原来位置进行移动

-在页面中占位置-→没有脱标

-用于小范围的移动

5.绝对定位：

相对于非静态定位的父元素进行定位移动，position:absolute

特点：

-需要配合方位属性实现移动

-默认相对于浏览器可视区域进行移动

-在页面中不占位置→已经脱标

6.固定定位;

相对于浏览器进行定位移动，position:fixed

特点：

-需要配合方位属性实现移动

-相对于浏览器可视区域进行移动

-在页面中不占位置→已经脱标

-让盒子固定在屏幕中的某个位置

7.各个定位的区别：