前端基础入门（html+css+详）
html：样式，css：结构，js：行为（动态效果和算法）
一.HTML入门
Title div{ width:100px; height: 20px; color: #c70012; background-color: aqua; } 海绵hong
1.块标签：
（特点：独占一行，默认高度占满父级，高度为0，子级内容撑开高度）
div：区域标签没有任何语义，可以做任何的事情（你想让他是啥，他就可以是啥）
h1-h6：标题标签，h1（大标签，一个页面只能写一次）
h2（副标题，建议不要超过八个）
h3（小标题，没有个数限制）
h4-h6（小内容）
p：段落标签（代表一个段落）
列表：ul，ol，li ul(无序排列)，ol（有序排列）li（列表项配合ul和ol使用有奇效）
- 海绵hong
- 好好学前端
- 找个好工作
- 海绵hong
- 好好学前端
- 找个好工作
H5新增标签：article：代表文章的区域
nav导航栏
header：头部信息
aside:侧边栏
section：区域的意思（文章中替代div）
footer：底部信息
2.行标签
特点：
- 一个个相互跟着显示，直到遇到父级边框换下一行；
- 无法设置高度和宽度，只能随字体高度和宽度（文本内容撑开）；
- 不支持上下外边距（margin-top和margin-bottom没有效果）
- 不正常显示上下内边距（可能会覆盖其他文本）
- 代码中的换行会解析（在显示中有间隙）
span：和div一样被经常使用（没有语义）
a：代表超链接（自带href代表超链接，target打开方式（默认_self:在当前页面显示覆盖这个页面，改为_blank则会显示另外一个也米娜打开链接））
em（or）i：倾斜，多使用em，减少被爬虫
strong（or）b：加粗，多使用strong，减少被爬虫
sub：下角标
sup：上角标（写次方的时候的次方）
32
O2
3.行块标签
特点:
- 同排序跟显示，遇到父级边界换行
- 没有宽高的时候内容撑开宽高
- 换行被解析src:资源路径
img（图片）:
- src:资源路径
- title:鼠标悬停时的提示文本
- alt:图片不能正常显示的提示文本
特点：只给宽度或高度，会等比例变化
button：标签定义一个按钮。
4.行块标签的互换
display：inline（行）
block（块）
Title span{ display: block; } 123
span行标签变块标签
二.css（网络的样式）
内部样式：
标签名称{ 属性名称: 属性对应的值; ... }注意点
- style标签必须写在head标签的开始标签和结束标签之间。
- style标签中的type属性可以不用写, 默认就是type=“text/css”
- 设置样式时必须按照固定的格式来设置。key: value；其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)
外部样式
外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。 当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。 外部样式表在单独文件中定义，并且在标签对中使用link标签来引用
内联样式
hong
背景色
width:宽度
height：高度
background-color：三种方式：1.直接单词：例如：red
2.rgba（代表黄绿蓝和透明度）：例如：rgba（255，0，0，0）黄色，a的范围是0到1其他的为0到255
3.十六进制：例如：#ff000红
背景图：
Title img{ width: 500px; }div{ width: 800px; height: 450px; background-color: #c70012; background-image:url("../download.jpg"); background-size: 310px,275px; background-repeat: no-repeat;/*取消重复&*/} 海绵hong
如果没有background-repeat: no-repeat;//取消重复图片背景就会平铺
background-size: auto,100px;/*只想给高度可以用auto*/ /*background-size: contain;//高度占满父级*/ background-size: cover;/*宽度度占满父级*/ background-position:center,center ;/*可以是center，left，right，top这些方位词，也可以是长度（从图片左上角为原点，x和y的距离）*/
文本
font-size：字号大小
属性值了可以使用相对长度单位em，推荐使用像素单位px。
注意：em：是相对单位，1em=父级标签字体大小
Title body{ font-size: 20px; } p{ font-size: 2em; } 海绵hong
因此海绵hong是40px
font-weight: 字体粗细
属性值默认normal，可以设置加粗bold,更粗bolder，或者100,200···
font-family:字体
属性值通常可以设置为黑体、微软雅黑、宋体···
text-align: 文本对齐方式
属性值默认left左对齐，可以设置为center居中，也可设置right右对齐。
text-indent:首行缩进（2em最合适）
属性值可以为不停单位的数值，em字符宽度的倍数，或者相对浏览器的百分比，允许使用负值。
font-style:字体风格
属性值默认为normal，可以设置xieti 样式italic,或者oblique。
letter-spacing:字体间距
word-spacing：单词间距
text-decoration:修饰线
属性值默认是none，可以设置下划线underline，删除线line-through（从中间穿过），上划线不常用。
text-transform：大小写
属性值是uppercase（全部变成大写），lowerase（全部变成小写），capitalize首字母进行大写
font:
复合属性，font:font-style font-weight font-size/line-height font-family
前两个属性可以省略或者调换位置，后面的两个都不可以。
line-height：行间距
单位通常使用px,em或者百分比。1）如果是子标签是男标签，行高可以撑起子标签的高度 。2）如果是子标签是女标签，行高不能撑起子标签的高度
color:文本颜色
属性值可以是十六进制表示颜色，或者英文单词，或者用rgb表示。
常用选择器
通配符选择器
（1）作用
给当前界面上所有的标签设置属性
（2）格式
*{ 属性:值;}类选择器（class）
可是让同一个标签有不同的样式（根据指定的类名称找到对应的标签, 然后设置属性）
.类名{ 属性:值;}注意：
- 在同一个界面中class的名称是可以重复的
- 类名的命名规范和id名称的命名规范一样
- 在HTML中每个标签可以同时绑定多个类名
id选择器
id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值，css选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。
#id名称{ 属性:值;}一个id名在同一个html文件只能出现一次
后代选择器
当我们的标签嵌套比较深之后，我们在写一些东西的时候使用后代选择器比较方便
找到指定标签的所有特定的后代标签, 设置属性（就是标签里面的标签，可以单独设置属性）
写的越具体精准度就越高
标签名称1 标签名称2{ 属性:值;}- 后代选择器必须用空格隔开
- 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
Title div ul li p{ color: red; } -
我是段落
-
我是段落
群组选择器
一选选一群
标签1，标签2{属性}可以是多个标签，标签内的样式都一样
子代选择器
找到指定标签中所有特定的直接子元素, 然后设置属性（只有子代的样式会发生变化和后代选择器不同）
标签名称1>标签名称2{ 属性:值;}- 子元素选择器之间需要用>符号连接, 并且不能有空格
- 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签