html、css、js小结

什么是html、css、js

HTML —— 结构，决定网页的结构和内容（ “是什么”）
CSS —— 表现（样式），设定网页的表现样式（ “什么样子”）
JavaScript（ JS） —— 行为，控制网页的行为（ “做什么”）

html

分为块级元素和内联元素（也可以叫做行内元素）

常用块级元素：div、h1~h6 、p、hr、from、menu、ol、ul、li、table、dd、dt、dl
常用内联元素：span、a、b、i、input、select、label、textarea、select、img

块级元素的特点：display:block

– 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
– 可以直接控制宽度、高度以及盒子模型的相关css属性
– 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度（脱离文档流之后宽度等于设置的宽度或者内容的宽度）
– 在不设置高度的情况下，块级元素的高度是它本身内容的高度

内联元素的特点：display:inline

– 和其他内联元素从左到右在一行显示
– 不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
– 内联元素的宽高是由本身内容的大小决定（文字、图片等）
– 内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）

css(Cascading Style Sheets：层叠样式表)

内联样式

<p ==style="background: red==">

内部样式

<style type="text/css">
	p{ 
		background: green;
 	}
</style>

外部样式

<link rel="stylesheet" type="text/css" href="style.css">

CSS 7 种基础的选择器

ID 选择器，如 #id{}
类选择器，如 .class{}
属性选择器，如 a[href=“segmentfault.com”]{}
伪类选择器，如 :hover{}
伪元素选择器，如 ::before{}
标签选择器，如 span{}
通配选择器，如 *{}

样式优先级(待验证)

通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

<span style="font-size: 30px;display: inline-block;float: left">sddw</span>
    sndiwhihiwhdiuhifuhweifhweuifhiwuehfiuwehfuiwehfiuhdshfuihewjsdfhieunhuiehfibn
    fwefnuiowehu

在这里插入图片描述