鹿长的前端之路第一节

鹿长的前端之路第一节

鹿长的前端之路第一节

1、HTML（超文本标记语言)
一般用到的简单标签如下：

<h1></h1>  *标题标签（1~6）从大到小*
<p1></p1>  *段落标签*
<pre></pre> *按照预先设定的格式显示***无序和有序：**
<ul><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li>
</ul>（无序）
<ol><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li>
</ol>（有序）**代码中图片的路径**：绝对路径/相对路径/远程路径
<img src=".png?qua=high" alt="加载失败"/>（此为远程路径）**超链接**
<a href="">百度</a>（前面加上https：// 不加网络协议会显示404 Not Found）**锚点的寻找**
<a href="#targrth">喵喵喵</a>
<a name="targrth">哈哈</a>**左中右对齐**
align="left"/"center"/"right"**表格标签**
<table border="2" backgroud="yellow" cellspacing="0"（边框间间隙大小） width="800px" align="center">（cellpadding边框与内容间隙大小）
<caption></caption>（表格自带题目标签）
<tr>（行元素）<td  rowspan="5"></td>（rowspan跨多行）<td  colspan="5"></td>（colspan跨多列）
</tr>创建另外一个文档的内联框架
<a target="tarlist" href=""></a>(a标签中的target属性规定在何处打开链接文档)
<iframe name="tarlist" src=""></iframe>

2.CSS（层叠样式表）
易用到的如下：

**选择器**
1.基本元素选择器div{width: 100px;}
2.class类选择器.brast{width: 300px;}<div class="brast"></div>
3.id选择器#mss{width: 400px;}<div id="mss"></div>
4.子父关系选择器#emm>li{list-style:none;}(主要存在子父关系，儿子和更多子类之间的互相影响)
5.属性选择器div[class="brast"][id="mss"]{background: yellow;}
6.全局选择器*{padding:0;margin:0;
}**样式类型**
1.行内样式
<div style="background: red">行内样式</div>
2.内嵌样式
<div class="brast">内嵌样式</div>**position位置**
1.static 默认位置，处于页面流给予位置，忽略任何声明（）
2.relative 相对位置，会占位置
3.absolute 绝对位置，定位包含其指定坐标，不占位置
4.fixed 定位于浏览器窗口指定坐标**链接伪类**
<style type="text/css">a:link{color: blue;}  未访问状态a:visited{color: red;} 已访问状态a:hover{color: green;}  鼠标悬浮状态  访问的鼠标经过某个元素时 a:active{color:yellow;}  激活状态 按下鼠标放开之前的时间顺序：:link;>:visited;>:hover;>:active;    固定顺序  大小写不敏感</style>
伪类和元素之间紧挨，之间没有空格

注意：敲代码时不要着急，一口吃不了大胖子。细心检查，继续加油！