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; /*上 右 下 左*/
841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
