我的前端之路

系列文章目录

第一章 我的前端之路基础篇（HTML/Css）

---

---

前言

随着网络信息时代的不断发展，前端开发这门技术也越来越重要，很多人都尝试自学加入前端开发的大家庭，本文就介绍我的前端之旅。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、html是什么？

html是超文本标记语言 用于显示页面内容 标签
文档类型 html 规范 html1.0 html2.0 html3.0 html4.0 xhtml html5.0

二、常见标签

（示例）：

html  文件标签
head  头部标签(可以用来做一些注释或者标记用)
body  主体标签
div 块状标签  布局
a标签 超文本标签 超链接
p 段落标签
br 换行标签
h1-h6 标题标签
  空格符号
button 按钮
span 行内标签  布局
ul li 无序列表标签
ol li 有序列表标签
img标签 显示图片

三、元素类型

块状元素      换行     可以设置宽高

行内元素      不换行    不可以设置宽高

行内块状元素   不换行   可以设置宽高

设置类型
display:inline;  设置为行内元素
display:block;   设置为块状元素
display:inline-block; 设置为行内块状元素

行内元素:span、a、i、u、strong、b、s

块状元素:div、ul、li、table、ol、p

行内块状:img input button

语义化标签 h5提出的标签 header nav aside

四、CSS是什么?

层叠式样式表(外观或布局)

1.样式写法

1)内连样式 直接写在标签上 2)内嵌样式 写在style标签上 3)外联样式 写在css文件上 优先级：作用范围越小，优先级越高;同一个样式，后面的会覆盖前面的样式； 最高优先级：!important ，但有些低版本浏览器不识别!important

2.样式语法 选择器{}

选择器
  1)标签选择器  div{} p{}
  2)类选择器    .a{}  .b{}
  3)id选择器    #a{}  #b{}  id具有唯一性 1)js获取dom元素的时候只能获取到1个 2）无法同时使用多个id
  4)后代选择器  .a .b  或 .a > .b
	第一个子元素 .a .b:first-child 
	最后一个子元素 .a .b:last-child
	获取具体某一个 .a .b:nth-child(2)
	获取偶数     .a .b:nth-child(even)
	获取奇数     .a .b:nth-child(odd)
  5)通配符选择器  *

3.外观样式

1）
color 颜色
background 背景颜色
font-family 字体类型
font-size 字体大小 一般不会用小数点，而且一般字体大小为偶数
text-decoration: underline; 下划线
text-decoration: line-through; 删除线
font-weight: bold; 加粗
font-style: italic; 倾斜
text-indent: 2em; 首行缩进
line-height 行高
word-break: break-all; 英文字体自动换行
width 宽
height 高
text-align:center 文字居中
2）布局样式
盒子模型 浏览器对块状元素的排列顺序设置的一个模型
content 内容
padding 内边距 内容与边框之间的距离
border 边框
margin 外边距 当前盒子与其他盒子之间的距离

border: 1px solid #008000; 边框
border-radius: 50%;

padding 内边距  没有负数
box-sizing: border-box; 保持总宽高不变
margin  外边距  有负数

注意：边距塌陷，当外边距是垂直方向时，就会出现边距塌陷
解决：给父级盒子，添加overflow: hidden;

overflow: hidden; 溢出隐藏
overflow: auto; 溢出自动显示滚动条

4.浮动

浮动是什么？ 特殊文档流

float:left; 向左浮动 float:right; 向右浮动

浮动：只要其中一个元素加了浮动，所有同级的元素都要添加浮动

浮动塌陷：父元素不设置高度的时候，子元素有浮动的情况下，父元素的高度会消失

清除浮动:解决浮动塌陷  清除浮动的方法有很多种 但我们一般用这个相对严谨 
我上面说的 overflow: hidden; 溢出隐藏 也是可以清除浮动的

.clearFix::after{ // 伪类实现清除浮动
	clear: both; // 核心代码
	content: "";
	height: 0;
	visibility: hidden;
	display: block;
}

5.变形 transform

透明的有

变形 transform
	transform: rotate(30deg);  旋转
	transform: scale(2,2);    缩放
	transform: translate(500px,300px); 位移
	transform: skew(60deg,60deg); 四边形

6.透明度

1.css rgba()设置颜色透明度
R：红色值。正整数 （0~255）

G：绿色值。正整数 （0~255）

B：蓝色值。正整数（0~255）

A：透明度。取值0~1之间

 background:rgba(255,0,0,1);

2.透明度 opacity: 0.5;
注意：会影响到当前元素，以及所有的直属的子元素 存在兼容性问题

opacity: 0.5;

7.常见浏览器内核

火狐      moz
谷歌      Blink
ie       ms
欧朋      o
safari   webkit

五、浏览器兼容方案

1、浏览器前缀
2、<meta http-equiv="X-UA-Compatible" content="IE=edge" />  强制转换ie内核
3、补丁hack
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6hack.css"/>
<![endif]-->

---

总结

例如：以上就是今天要讲的内容，本文仅简单介绍了本人学习前端的一些入门内容，当然我仅仅只列举了一些常用的，HTMl/Css还有很多内容等着我们去深入的学习，欢迎各位大佬指正，如有雷同，纯属意外。

---

文献来源
[w3schools](https://www.w3school.com.cn/)