进阶学习之HTML和CSS

一、HTML

1、网站的类别
① 静态网站：静态网页中的数据都是写死的，如果需要修改网页的内容是需要直接修改网页的代码。是没有数据库提供数据给它。
② 动态网站：动态网站的数据是来自于数据库的，背后是有一个后台程序管理页面中数据的。

2、html语言的特点
① html语言是与平台无关的，任何平台只需要安装了浏览器都可以运行。
② html 是不区分大小写的。

3、html语言的结构

<html>：html语言的根标签    
<head></head>：网页的头信息：设置网页标题、通知浏览器用指定码表解释HTML页面（meta）、设置关键字keywords
<body></body>：网页的体部分：网页内容
</html>
<!--  注释的内容  -->：html的注释

4、html语言常用的标签

<h1>to<h6>：定义标题（从大到小）
<p>：段落
<hr/>：水平线
<br/>：换行
<sub>：下标
<sup>：上标
<pre>：原样标签：保留空格和换行符
<ol>、<li>：有序的列表
<ul>、<li>：无序的列表
<dl> <dt></dt> <dd></dd> </dl>：项目列表标签
<span>：行内标签   
<div>:块标签

5、通过标签的属性操作数据的样式

<h1 align="center">大标题</h1>：设置标题居中对齐

1+1=？
<ol type="a">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

我的兴趣爱好：
<ul type="square">
    <li>旅游</li>
    <li>听课</li>
    <li>打代码</li>
</ul>

6、常用的实体字符

① 空格：&nbsp;
② 小于号：&lt;
③ 大于号：&gt;
④ 人民币：&yen；
⑤ 版权：&copy;
⑥ 商标：&reg;

7、媒体标签

<embed src="离人愁.mp3" hidden="false"></embed>

hidden：设置隐藏插件是否隐藏
src：用于指定音乐的路径

8、飘动标签

<marquee loop="6" scrollamount="30" direction="right"><font size="+6" color="red">这里是弹幕……</font></marquee>

direction：指定飘动的方向
scrollamount：指定飘动的速度
loop：指定飘动的次数

9、超链接标签
① href属性的原理
◆ 如果是以http开头的，那么浏览器会马上启动http解释器去解释该网址，首先会在本地机器去找一个hosts文件（C:\Windows\System32\drivers\etc），如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机；
◆ 如果没有以任何协议开头，那么浏览就会启动file协议解释器去解释该资源路径；
◆ 如果并不是以http开始，而且其他的一些协议，那么这时候浏览器就回去到我们本地的注册表中去查找是否有处理这种协议的应用程序，如果有那么马上启动该应用程序处理该协议。

<a href="www.baidu.com">百度网址</a>
<a target="_blank" href="login.html">登录</a>
如果有需要请发送邮件至：<a href="mailTo:[email protected]">10086@qq.com</a>
<a href="thunder://电影/我不是药神.mp4">我不是药神.mp4</a>

href：用于指定链接的资源
target：设置打开新资源的目标：_Blank在独立的窗口上打开新资源、_self在当前窗口打开新资源 
file：file协议（文件协议）主要是用于搜索本地机器的资源文件的，格式：file:\\\D:\电影\1.mp4    
mailTo：邮件的协议
thunder：迅雷的协议

② 超链接标签的作用
◆ 可以用于链接资源
◆ 锚点点位
锚点的格式： <a name="锚点名字"> 数据</a>
然后使用a标签的herf属性连接到锚点： <a href="#锚点的名字">返回锚点</a>

10、图片标签

<img src="爱心.jpg" alt="图片找不到了……" width="500" height="500" border="0" usemap="#Map" />

width：设置图片宽度
height：设置图片高度    
alt：如果图片资源无法找到，那么就显示对应的文字对图片进行说明

热点图（自动生成代码）
<map name="Map" id="Map">
<area shape="rect" coords="X轴坐标,Y轴坐标,矩形的长,矩形的宽" href="http:\\www.baidu.com" target="_blank" />
<area shape="circle" coords="圆心X轴坐标,圆心Y轴坐标,半径" href="http:\\www.baidu.com" target="_blank" />
</map>

11、表格标签

<table>：表格
<tr>：行
<td>：单元格
<th>：表头，默认的样式是居中、加粗
<caption>：表格的标题

<table align="center" border="1px" bordercolor="#FF0000" width="300px" height="400px">
<caption>订单统计表格</caption>
<thead>
    <tr align="center">
        <th>订单号</th>
        <th>车型</th>
        <th>数量</th>
    </tr>
</thead>     
<tbody>
    <tr align="center">
        <td>SJ180001</td>
        <td>国产</td>
        <td>40</td>
    </tr>  
    <tr align="center">
        <td>SJ180002</td>
        <td>国产</td>
        <td>30</td>
    </tr>    
    <tr align="center">
        <td>SJ180003</td>
        <td>出口</td>
        <td>80</td>
    </tr>
</tbody> 
<tfoot> 
    <tr align="center">
        <td>统计数量</td>
        <td colspan="2">150</td>
    </tr>
</tfoot>    
</table>

border：设置表格的边框 
width：设置表格的宽度
height：设置表格的高度的
colspan：设置单元格占据指定的列数
rowspan：设置单元格占据指定的行数

12、框架标签
frameSet：一个frameSet可以把一个页面切割成多份，只能按照行或者列切割
frame：不能被切割的，frame是位于frameSet中
iframe：在一个网页中分隔一部分的位置显示另外一个网页的的信息
注意： frameSet标签不能用于body标签体内容

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>框架设计</title>
</head>
<frameset rows="20%,70%,*" >
    <frame src="top.html" />
    <frameset cols="20%,*">
    <frame src="left.html" />
    <frame name="center" src="center.html"/>
    </frameset>
    <frame src="foot.html"/>
</frameset>
<noframes></noframes>
</html>

<a href="../login.html" target="center" >center.html跳转</a>

13、表单标签
① 表单标签：表单标签的作用是用于提交数据给服务器的。

② 常用的属性：
action：该属性是用于指定提交数据的地址
method：指定表单的提交方式{get ：默认使用的提交方式，提交的数据会显示在地址栏上；post ：提交的数据不会显示在地址栏上}

③ 注意：表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值。

<body>
<form action="http://www.baidu.com" method="post">
        <!-- 文本输入框 单行-->
        用户名：<input name="userName" type="text"/><br/>
        <!-- 密码框 -->
        密码：<input name="password" type="password"/><br/>

        <!-- 单选框  -->
        性别：
        <input name="sex" checked="true" value="man"  type="radio"/>男
        <input name="sex" value="woman" type="radio"/>女<br/>

        <!-- 下拉框 -->
        来自的城市：<select name="city">  
                    <option value="BeiJing">北京</option>
                    <option value="ShangHai">上海</option>
                    <option value="GuangZhou">广州</option>
                 </select><br/>

        <!-- 复选框  同一组的复选框name的属性值要一致 -->
        兴趣爱好：
        <input value="java" name="hobit" type="checkbox" />java 
        <input value="android" name="hobit" type="checkbox" />android 
        <input value="python" name="hobit" type="checkbox" />python 
        <input value="c" name="hobit" type="checkbox"/>c <br/>

       <!-- 文件上传框-->
       你的照片：<input name="image" type="file" /><br/>

       <!-- 文本域 -->
       个人简介:
       <textarea  name="info" rows="10" cols="30"></textarea><br/>  

       <!-- 提交按钮 -->
       <input type="submit" value="注册"/>
       <!-- 重置按钮 -->
       <input type="reset" value="重置"/>
</form>
</body>

二、CSS

1、html 在一个网页中负责的事情是一个页面的结构，而css(层叠样式表) 在一个网页中主要负责了页面的数据样式。

2、编写css代码的三种方式
① 第一种：在style标签中编写css代码：只能用于本页面中，复用性不强
格式：

<style type="text\css">
    代码
</style>  

 例子：
<style type="text\css">
a{
    color:#F00;
    text-decoration:none;
}
</style>

② 第二种：可以引入外部的css文件【推荐】
◆ 方式1：使用link标签【推荐】
格式：<link href="css文件的路径" rel="stylesheet"/>
例子： <link href="1.css" rel="stylesheet"/>
◆ 方式2：使用<style>引入
格式：

<style type="text/css" >
    @import url("css的路径");
</style>

例子：
<style type="text/css" >
    @import url("1.css");
</style>

③ 第三种方式：直接在html标签使用style属性编写：只能用于本标签中，复用性较差【不推荐】
例子：<a style="color:#0F0; text-decoration:none" href="#">标题</a>

3、注释

<style type="text/css">
/*
    html的注释：<!-- 注释语句 -->
    css的注释：/* 注释语句 */   
*/
</style>

4、选择器：作用就是找到对应的数据进行样式化
① 标签选择器：就是找到所有指定的标签进行样式化。
格式：

标签名{
    样式1；
    样式2；
    ... 
}

例子：
div{
    color:#F00;
    font-size:24px;
}

② 类选择器：使用类选择器首先要给html标签指定对应的class属性值
格式：

.class的属性值{
    样式1；
    样式2；
    ... 
}   

例子：
.two{
    background-color:#0F0;
    color:#F00;
    font-size:24px;
}

◆ 类选择器要注意的事项
◇ html元素的class属性值一定不能以数字开头
◇ 类选择器的样式是要优先于标签选择器的样式

③ ID选择器：使用ID选择器首先要给html元素添加一个id的属性值
格式：

#id属性值{
    样式1；
    样式2；
    ... 
}

◆ id选择器要注意的事项
◇ ID选择器的样式优先级是最高的，优先于类选择器与标签选择器
◇ ID的属性值也是不能以数字开头的
◇ ID的属性值在一个html页面中只能出现一次

④ 交集选择器：就是对选择器1中的选择器2里面的数据进行样式化
格式：

选择器1 选择器2{
    样式1；
    样式2；
    ... 
}

例子：
.two span{
    background-color:#999;
    font-size:24px;
}

⑤ 并集选择器：对指定的选择器进行统一的样式化
格式：

选择器1,选择器2..{
    样式1；
    样式2；
    ... 
}

例子：     
span,a{
    border-style:solid;
    border-color:#F00;
}

⑥ 通用选择器
格式：

*{
    样式1；
    样式2；
    ... 
}   

例子：
*{
    text-decoration:line-through;
    background-color:#CCC;
}

5、伪类选择器：伪类选择器就是对元素处于某种状态下进行样式的
注意：
① a:hover 必须被置于 a:link 和 a:visited 之后
② a:active 必须被置于 a:hover 之后

a:link{color:#F00} /* 没有被点击过：红色 */
a:visited{color:#0F0} /*  已经被访问过的：绿色 */ 
a:hover{color:#00F;font-size:60px} /* 鼠标经过的状态：蓝色、60px */
a:active{color:#FF0}  /* 选定：黄色 */

6、常用的CSS样式

<style type="text/css">
    /*操作背景的属性*/
    body{
        background-color:#CCC;  /*设置背景颜色*/
        background-image:url(2.jpg);
        background-repeat:no-repeat;  /*设置背图片是否要重复*/
        background-position:370px 100px; /*设置背景图片的位置，第一个参数是左上角的左边距，第二个参数是左上角的上边距 */
    }
    /*操作文本的样式*/
    div{
        color:#F00;
        font-size:16px;
        line-height:40px;
        letter-spacing:10px;
        text-align:center;
        text-decoration:none;
        text-transform:uppercase;   
    }
    /*操作表格的样式*/
    table{
        border-collapse:collapse;  /* 合并表格的边框*/
        border-spacing:20px; /* 设置单元格的边框与表格的边框距离*/
        table-layout:fixed;
    }
    /*操作边框的样式*/
    div{
        width:100px;
        height:100px;
        border-style:dotted solid double ; /*设置边框的样式：上右下左*/
        border-color:#F00;
        border-bottom-color:#0FF;
        border-top-width:100px;
    }
    /*定位*/
    div{
        border-style:solid;
        width:100px;
        height:100px;
    }
    .one{
        position:relative; /* 相对定位,对于当前位置 */
    }
    .two{
        position:absolute; /* 绝对定位,相对于一个页面的左上角而言的 */
    }   
    .three{
        position:fixed; /* 固定定位:固定定位是相对于整个浏览器而已的 */
    }
</style>