web前端学习的十个阶段:
1.html +css
2.html5+css3
3.javascript
4.jquery
5.MySQL.jquery. ajax
6.bootstrap
7.vue
8.react
9.node
10.ejs node mongodb
第一阶段:
一、标签:可分为两类,按闭合可分为带结尾的标签和单闭合标签;按换行可分为不换行标签和换行标签。
最常见的标签:
1.标题标签:h
特点是加粗,由大到小,且自带换行,是块级标签。
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
2.格式化标签:
加粗标签:b
<b>加粗</b>
斜体标签:i
<i>斜体</i>
下划线标签:u
<u>下划线</u>
删除线标签:del
<del>删除线</del>
上标:sup, 下标:sub等
3<sup>2</sup>=9
H<sub>2</sub>O
3.列表标签:有序列表ol,无序列表ul, li 定义列表项。
属性:定义有序列表type =“A” “a” “i” “Ⅰ”,定义无序列表type =“disc” 、 “circle” 、“square”
<ul type="disc">
<li>水果</li>
<li>蔬菜</li>
<li>五谷</li>
</ul>
4.文字标签:span 是行级标签
<span>我是span</span>
5.段落标签:p 是块级标签
<p>这是一个段落</p>
6.图像标签:image 是空标签,它只包含属性,并且没有闭合标签。
属性:
①、src源属性的值是图像的 URL 地址。
②、alt替换文本属性是用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时,浏览器将显示这个替代性的文本而不是图像。
图像的路径有相对路径,绝对路径,远程路径,通常建议使用相对路径,不建议使用绝对路径。
<img src="image/1.jpg" alt="加载失败">
7.超级链接:a “#”表示跳转到当前页面,“.”表示项目里面的页面。
属性:
①、target属性 ,可以定义被链接的文档在何处显示。
如果把链接的 target 属性设置为 “_blank”,表示该链接会在新窗口中打开。
②、name 规定锚的名称。使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。当使用命名锚时,我们可以创建直接跳至该命名锚的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
<a href="http://www.baidu.com.cn/" target="-blank">百度</a>
<a name="tips">注意事项</a>
<a href="#tips">提示</a>
8.块级元素:div ,是网页中的框架布局, 它是可用于组合其他 HTML 元素的容器。
<div>这里是div</div>
<table border="1" width="500" align="center" cellspacing="0">
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
9.表单元素:form
多数情况下用到的表单标签是输入标签input,输入类型是由属性(style)定义的,输入类型有text、password、radio 、checkbox、submit等。
action 提供后天的服务路径,get 提交的数据量比较多,不安全。
<input type="text" name="uesername" placeholder="请输入" maxlenght="10">
<input type="checkbox" value="0">
<input type="radio" name="sex">
<form action="" methon="post">
<ul>
<li>账号<input name="userid" type="text" ></li>
<li>密码<input neme="userpwd" type="password" ></li>
<li><input type="submit" value="重置" ><input type="submit" value="提交" ></li>
</ul>
</form>
10.表格:table, tr表示行,td 表示列,th表示表头
属性:
①边框属性border
②align 文本对齐方式
③cellspacing,合边线
如果某个单元格是空的,浏览器可能无法显示出这个单元格的边框。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。
合并单元格:有行合并(colspan )和合并列(rowspan )
<table width="500" cellspacing="0" border="1">
<tr>
<td colspan="3">1</td>
<td>4</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
11.框架:iframe
属性:
①height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 也可以指定其按比例显示。
②frameborder:用于定义iframe是否显示边框,当其值为0时为移除iframe的边框。
③src:表示显示目标链接的页面。
<iframe name="tardata" src="http://www.baidu.com.cn/" width="1200" height="500">
二、CSS的选择器:*选择器,元素选择器,类选择器,ID选择器,子父元素选择器。
CSS的三种样式:行内样式,内嵌样式,外部样式。
CSS样式的优先级:行内样式,内嵌样式,外部样式,默认样式的优先级:如果样式直接没有冲突,则叠加,如果样式有冲突,先考虑样式的优先级,而内嵌样式和外部样式可根据其加载的顺序而定。
CSS里面的伪类:链接访问之前link, 访问过的伪类visited, 鼠标悬停伪类hover, 鼠标激活伪类。
<style>
/* 访问之前*/
a:link{
color: deeppink;
}
/*访问过的伪类*/
a:visited{
color: yellow;
}
/*鼠标悬停伪类*/
a:hover{
color: red;
}
/*鼠标激活伪类*/
a:active{
color: green;
}
</style>
CSS定位:相对定位,绝对定位,固定定位。
<style>
.block{
position: fixed;
right: 0;
top:0;
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div class="block">
</div>
</body>
相对定位:元素占位置,相对于自己之前的位置在移动和分层。绝对定位:元素不占位置,相对于浏览器的位置移动和分层。固定位置:不占位置,固定在某一位置。元素用position 定位,定位之后使用的属性有left 、right 、top 、bottom, z-index ,只有在定位之后才可以使用该属性。
元素的水平浮动:left,right,对于块级元素,元素在浮动之后,会脱离文档流,要想水平浮动,浮动的子元素的总宽要小于父元素的宽,子元素在浮动之后会导致父元素不能撑开。
<style>
.parent {
width: 200px;
border: 1px solid black;
/*height: 100px;*/
/*overflow: hidden;/!*超出部分隐藏*!/*/
}
.block {
width: 100px;
height: 100px;
border: 1px solid red;
box-sizing: border-box;
float: right;
}
</style>
<body>
<div class="parent">
<div class="block">
1
</div>
<div class="block">
2
</div>
</div>
</body>
三、盒子模型:在盒子模型中,上下放置的两个元素之间的外间距是不累加的取其最大值,左右放置的元素之间的外间距是累加的。
padding:10px 10px 10px 10px; /*上 右 下 左*/
margin:10px 10px 10px 10px; /*上 右 下 左*/