HTML
1.HTML简介
HTML与XML类似, 都是一种标记语言; XML是 可扩展标记语言, 而HTML是 超文本标记语言; XML主要用来当作配置文件存储数据, 而HTML是用来 在网页上显示数据 的;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--页面的标题-->
<title>第一个html页面</title>
</head>
<body>
<!--页面的内容-->
</body>
</html>
<head>标签用于定义文档的头部, 描述了文档的属性和各种信息; 包括文档的标题, 样式(css), 以及文件(css,js)引入路径等, <head>标签中的内容不会展示在浏览器上让用户看到;
<body>标签中的内容是要显示在浏览器上的;
2.HTML标签
2.1 文本,字体相关的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<!--1. <h1> 标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--2. <hr> 水平分割线标签
color 颜色属性共有三种表示方式
1. 英文表示法 color="red"
2. rgb表示法 一般不用
3. 16进制表示法 一共八位,前两位表示透明度,后6位分别是红黄蓝;
-->
<hr width="100%" size="100px" color="red"/>
<!--3. <p> 段落标签  点位符 -->
<p>  大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀</p>
<p>  大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀</p>
<!--4. <font> 字体标签 已过时(可用<span>代替)-->
<font size="3" color="red">红色大小为3的字体</font>
<br>
<font size="4" color="red">红色大小为4的字体</font>
<br>
<!--5. <b>粗体标签 <i>斜体标签-->
<b>加粗后的字</b>
<i>加斜体标签后的字</i>
</body>
</html>
2.2 图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<!-- <img> 图片标签
src 属性表示图片所在路径
width height分别表示宽高
title 属性表示当鼠标移动图标上时的提示信息
alt 属性表示图片加载失败时的提示信息
-->
<img src="http://attach.bbs.miui.com/forum/201112/17/131254v0whw7sz05a1w7pd.jpg"
width="800px"
height="400px"
title="美眉"
alt="图片显示失败"/>
</body>
</html>
2.3 列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<!-- 1. <ol> 有序列表标签 type为有序的类型 如:A B C D,1234,a b c d -->
<!-- 2. <li> 列表项标签 -->
<ol type="A">
<li>一代大神</li>
<li>一代二神</li>
<li>一代三神</li>
</ol>
<!-- 3. <ul> 无序列表 -->
<ul type="0">
<li>一代大神</li>
<li>一代三神</li>
<li>一代二神</li>
</ul>
</body>
</html>
2.4 超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<!-- <a> 超链接标签
href 属性表示跳转的链接地址
target 属性表示指定新的页面打开方式
-self 在当页面打开
_blank 在空白页面打开
id 通过id属性可以作为锚点跳转到当前页面的指定位置 如下: <a href="#top">回到顶部</a>
-->
<a id="top">顶部</a><br/>
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="#top">回到顶部</a>
</body>
</html>
2.5 表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<!-- <table>表格标签
<table>标签的属性S
1. border 边框线的宽度
2. cellSpacing 单元格之间的间距
3. cellPadding 单元格的内间距
4. align 整个表格居中,居左,居右
<caption>
<th> 表示表头信息 一般用在表格标签的第一行
<tr> 行标签
1. align属性: 这一行所有单元格的对齐方式
<td> 列标签,也是单元格标签
1. align属性: 这个单元格的内容的水平对齐方式
1. colspan 跨列合并单元格
2. rowspan 跨行合并单元格
-->
<table border="1px" width="800px" cellspacing="0px" cellpadding="8px"
align="center">
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td colspan="2">
123
</td>
<td>
789
</td>
</tr>
<tr align="center">
<td>
123
</td>
<td>
456
</td>
<td>
789
</td>
</tr>
<tr align="center">
<td rowspan="2">
123
</td>
<td>
456
</td>
<td>
789
</td>
</tr>
<tr align="center">
<td>
456
</td>
<td>
789
</td>
</tr>
</table>
</body>
</html>
2.6 表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<!--
<form> 表单标签
1. action属性: 表单数据的提交路径,一般是提交到服务器;
2. method属性: 表单数据的提交方式,共有8种方式,常用的为 get 和 post 方式;
get 与 post 提交方式的区别
1. 携带数据的位置: get方式是在拼接在url后面,post方式是在http协议的请求体中;
2. 携带数据的类型: get方式只能携带字符串,不能携带文件; post可以携带文件;
3. 携带数据的大小: get方式最大只能携带2kb;
post方式没有限制,但一般后台服务器会有大小限制;
4. 安全性: post 相对安全一些,但也只是相对而言,真的要安全还是需要加密;
表单标签中必须包含以下其中之一的表单项
1. <input> 输入型表单项(就是需要用户手动填入的内容)
1. type属性: 输入项的类型
1. text 文本框(默认类型)
2. password 密码框
3. radio 单选框
只有 name 属性相同的单选框,才是同一组单选框,才能够实现单选效果;
可以通过 checked 属性设置默认选中;
4. checkbox 复选框,可以多选
只有 name 属性相同的复选框,才可以实现多选的效果; 可以通过 checked 属性设置默认选中;
5. file 文件选择框
6. date 日期选择框
7. hidden 隐藏域: 向服务器提交数据,但是不在页面显示出来;
8. submit 提交按扭: 内置提交表单的功能;
9. button 普通按扭: 不内置任何功能,需要使用 写JavaScript代码来绑定事件;
10. rest 重置按扭: 内置重置表单内容的功能(就是所有输入项重新填定);
2. name属性:
1. 如果表单项的数据需要提交给服务器,那么就必须具备 name 属性;
2. 同一组单选,多选框需要具备相同的 name 属性;
3. value属性:
1. 按扭的 value 属性就是按扭上的文字;
2. 输入框,密码框,文件选择框,日期选择框等等的 value 属性的值,就是所输入的值;
3. 单选和多选框都需要指定 value , 也就是默认值;
4. readonly属性: 是否只读,可以不让用户修改这个输入框的值,就使用 value 属性的默认值;
5. disabled属性: 是否可用,如果某个输入框设置了这个属性,那么它的数据不能提交到服务器,
通常是在页面中让一些按扭不能点击;
6. placeholder属性: 输入框中的提示信息
2. <select> 下拉选择框,它里面必须包含下拉选择项 option 标签;
1. select 标签上需要有 name 属性
2. 每一个 option 标签如果有 value 属性,那么提交到服务器的值就是value的值;
如果没有 value,提交服务器的值就是option标签体的内容;
3. 下拉选择框中,默认选中的 option 是第一个, 可以通过 selected 属性来指定默认选中哪一个;
4. 下拉选择框, 默认是单选,也可以通过 multiple 属性设置多选;
3. <textarea> 多行文本域
rows: 显示的内容的行数,其实就是高度;
cols: 显示的内容的列数,其实就是宽度;
-->
<form action="server" method="get">
<input type="text" name="username" placeholder="你想干什么呢?">
<br>
<input type="password" name="password" placeholder="请输入密码">
<br>
性别
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
<br>
兴趣爱好
<br>
<input type="checkbox" name="like" value="1" checked> 1
<input type="checkbox" name="like" value="2">2
<input type="checkbox" name="like" value="3">3
<input type="checkbox" name="like" value="4">4
<input type="checkbox" name="like" value="5">5
<br>
<input type="file" name="file">
<br>
生日
<br>
<input type="date" name="data">
<input type="hidden" name="id" value="3">
<br>
学历
<br>
<select name="xue_li" multiple>
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
<option value="bs">博士</option>
</select>
<br>
个人简介
<br>
<textarea name="info" cols="50" rows="3">我是默认内容</textarea>
<br>
<input type="submit">
<br>
<input type="button" value="普通按扭">
<br>
<input type="reset">
</form>
</body>
</html>
2.7 音频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<!-- <audio> 音频标签
1. src属性: 音频文件的路径
2. autoplay属性: 加载之后会自动播放,需要加载服务器上的资源
3. controls属性: 显示播放的控制器
4. loop属性: 循环播放
5. preload属性: 提前加载,不能和autoplay共存
-->
<audio src="b.mp3" autoplay loop controls>播放音乐</audio>
</body>
</html>
2.8 视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<!--
<video> 视频标签
1. src属性: 视频资源路径
2. autoplay属性: 是否自动播放
3. poster属性: 视频播放之前可以给用户看到的图片
-->
<video src="../file/a.mp4" controls
width="500px" height="500px"
autoplay
poster="../img/girl.jpg">
</video>
</body>
</html>
2.9 图片链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片链接</title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="../img/girl.jpg">
</a>
</body>
</html>
2.10 div和span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<!--
<div> 页面中的容器 可以自动换行
<span> 页面中的容器 不能自动换行 只包裹自己的内容
-->
<div style="color: red;font-size: 20px">
hello div1
</div>
<div>
hello div2
</div>
<span>
hello span1
</span>
<span>
hello span2
</span>
</body>
</html>
2.11 details 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>详情概要</title>
</head>
<body>
<!-- 展开收起summary下的内容 -->
<details>
<summary>大概的一些描述信息</summary>
详细内容...................详细内容
详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容
详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容
</details>
</body>
</html>
CSS
1.CSS简介
HTML的主要工作是页面布局, 不负责页面美化的工作, 而CSS是负责页面美化工作的;
这么设计的目的是为了功能分离, 解耦; 复用, 简化页面的美化工作;
CSS是一种 style 样式;
示例: 让表格居中, 并且让表格中的所有单元格内容居中显示, 设置了CSS就不用在每个 tr 中设置 align 居中属性;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的入门</title>
<style>
tr{
text-align: center;
}
<!-- 去掉超链接的下划线 针对是所有 <a>表签 -->
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">跳转到百度</a>
<table width="800px" border="1" cellspacing="0" align="center">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
</body>
</html>
2.CSS的三种引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<!-- 第二种方式 内部样式 -->
<style>
div {
color: green;
font-size: 50px;
}
span {
color: yellow;
font-size: 30px;
}
</style>
<!-- 第三种方式 外部样式 -->
<link type="text/css" rel="stylesheet" href="../css/demo.css">
</head>
<body>
<!--
CSS的引入方式
1. 行内样式
就是直接在标签上,通过style属性引入CSS样式;
优点: 直观, 容易阅读
缺点: 不能复用
2. 内部样式
在当html文档内部,编写style标签, 在style标签编写CSS样式
style标签可以放在任何位置,建议放在 head 中;
优点: 可以在当前页面复用
缺点: 不便于阅读
3. 外部样式
在当前的项目中编写一个CSS文件,放在CSS文件夹中,需要使用时通过link标签引入
优点: 复用性最强
缺点: 可读性最差
显示优先级 1 > 2 > 3;
-->
<!-- 第一种方式 行内样式 -->
<div style="color: red;font-size: 20px">hello world</div>
<div>hello world</div>
<span>hello span1</span>
<span>hello span2</span>
</body>
</html>
3.CSS的选择器
3.1.1 通配符选择器
3.1.2 id选择器
3.1.3 类选择器
3.1.4 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<style>
*{
color: red;
}
#yellowTest{
color: yellow;
}
.BlueTest{
color: blue;
}
span{
color: green;
}
</style>
</head>
<body>
<!--
1. 通配符选择器 * 表示页面中的所有标签
2. id选择器 #id值 表示id为指定值的标签
3. 类选择器 .类名 表示类名为某个值的标签
4. 标签选择器 标签名
优先级排序
id选择器 > 类选择器 > 标签选择器 > 通配符选择器
-->
<!-- 通配符选择器 -->
<div>hello world!</div>
<!-- id选择器 -->
<div id="yellowTest">hello world!</div>
<!-- 类选择器 -->
<div class="BlueTest">hello world!</div>
<!-- 标签选择器 -->
<span>hello world!</span>
</body>
</html>
3.2 扩展选择器
3.2.1 层级选择器
3.2.2 属性选择器
3.2.3 并集选择器
3.2.4 伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<style>
/* 层级选择器 */
#d2 .C1 {
color: red;
}
/* 属性选择器 */
input[type="text"]{
color: red;
}
input[type="password"]{
color: blue;
}
/* 并集选择器 */
div,input[type="text"]{
color: yellowgreen;
}
/* 伪类选择器 */
a{
text-decoration: none;
}
/*
1. 默认状态 link
2. 鼠标悬停在上方的状态 hover
3. 点击时候 active
4. 访问过后 visited
*/
a:link{
color: black;
}
a:hover{
/* 鼠标浮在上面 */
color: blue;
text-decoration: underline;
}
a:active{
/* 鼠标点周 */
color: red;
text-decoration: underline;
}
a:visited{
/* 访问过后 */
color: gray;
}
</style>
</head>
<body>
<!-- 1. 层级选择器 -->
<div id="d1">
<span class="C1">hello world!</span>
</div>
<div id="d2">
<span class="C1">hello world!</span>
</div>
<!-- 2. 属性选择器 -->
<input type="text">
<br>
<input type="password">
<!-- 3. 并集选择器 -->
<div>hello world</div>
<!-- 4. 伪类选择器 -->
<!--
伪类选择器，是根据标签的不同状态设置标签的样式
-->
<a href="http://www.itheima.com">跳转到黑马</a>
</body>
</html>
4.CSS的常用属性
4.1 背景属性
/*
背景属性:
1. 背景颜色 background-color
2. 背景图片 background-image
3. 背景图片的平铺方式 background-repeat
默认情况下是横向、纵向都平铺
简写方式:
background: 颜色 图片 平铺方式
*/
body{
/*background-color: green;
background-image: url("../img/girl.jpg");
background-repeat: repeat;*/
background: green url("../img/girl.jpg") no-repeat;
}
4.2 文本属性
1. color: 文本颜色
2. line-height: 行高
3. text-decoration: 文本装饰
none表示没有装饰
underline表示下划线
line-through 删除线
overline 上划线
4. text-align: 文本的水平对齐方式
5. text-indent: 文本缩进,文本缩进的单位是em，一个em表示一个字符
4.3 字体属性
1. font-family 字体的样式(宋体、楷体)
2. font-size 字体的大小
3. font-style ：italic 就是斜体
4. font-weight : bold 就是粗体
网友评论