鹿长的前端之路第一节

鹿长的前端之路第一节

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="https://www.baidu.com/img/bd_logo1.png?qua=high" alt="加载失败"/>（此为远程路径）

**超链接**
<a href="www.baidu.xom">百度</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="http://www.baidu.com"></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 默认位置，处于页面流给予位置，忽略任何声明（bottom,top...）
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>
伪类和元素之间紧挨，之间没有空格

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