html和css进阶

1 相对地址与绝对地址

网页上引入或链接到外部文件，需要定义文件的地址，常见引入或链接外部文件包括以下几种：

<!-- 引入外部图片   -->
<img src="images/001.jpg" alt="图片" />

<!-- 链接到另外一个网页   -->
<a href="002.html">链接到网页2</a>

<!-- 外链一个css文件   -->
<link rel="stylesheet" type="text/css" href="css/main.css" />

<!-- 外链一个js文件   -->
<script type="text/javascript" src="js/jquery.js"></script>

这些地址分为相对地址和绝对地址：

1.1 相对地址

相对于引用文件本身去定位被引用的文件地址，以上的例子都是相对地址，相对地址的定义技巧：

• “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

• “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

1.2 绝对地址

相对于磁盘的位置去定位文件的地址，比如：<img src="C:\course5\03day\images\001.jpg" alt="图片" /> 绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对地址就没有这个问题。

2 列表标签

列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的，标签结构如下：

<ul>
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容，所以具体结构一般是这样的：

<ul>
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ul>

列表相关样式：list-style 去掉列表项的小圆点，比如：list-style:none

3 html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下。

3.1 相关标签及属性用法

3.1.1 <form>标签 定义整体的表单区域

• action属性 定义表单数据提交地址
• method属性 定义表单提交的方式，一般有“get”方式和“post”方式

3.1.2 <label>标签 为表单元素定义文字标注

3.1.3 <input>标签 定义通用的表单元素

type属性

• type="text" 定义单行文本输入框

• type="password" 定义密码输入框

• type="radio" 定义单选框

• type="checkbox" 定义复选框

• type="file" 定义上传文件

• type="submit" 定义提交按钮

• type="reset" 定义重置按钮

• type="button" 定义一个普通按钮

• value属性 定义表单元素的值

• name属性 定义表单元素的名称，此名称是提交数据时的键名

3.1.4 <textarea>标签 定义多行文本输入框

3.1.5 <select>标签 定义下拉表单元素

3.1.6 <option>标签 与<select>标签配合，定义下拉表单元素中的选项

3.2 注册表单实例：

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>

3.3 表单常用样式、属性及示例

outline 设置input框获得焦点时，是否显示凸显的框线，一般设置为没有,比如：outline:none;
placeholder 设置input输入框的默认提示文字。

3.4 表单布局实例

4 css选择器二

4.1 id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

#box{color:red} 
......
<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->

4.2 组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。 举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

4.3 伪类选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。

.box1:{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}