1 HTML
1.1 HTML概述
HTML: (HyperText Markup Language) 超文本标记语言
- 是网页开发的必备语言
- "超文本"就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
- "标记"就是指页面编写方式采用的是 标签形式 将需要的内容包括起来。例如：
<a>www.baidu.com</a> - 平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码。
1.2 动态网页和静态网页
网页根据内容是否改变分为：静态页面、动态页面
静态网页
- 静态网页，随着html代码的生成，页面的内容和显示效果就确定了，以后基本上不会发生变化了，数据都是固定写死的，页面不会对数据库进行访问。
- 静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。
动态网页
-
而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。
-
凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术所生成的网页，都是动态网页。
1.3 HTML语法
- HTML文件不需要编译，直接使用浏览器阅读即可
- HTML文件的扩展名是*.html 或 *.htm
- HTML结构都是由标签组成
- 标签名预先定义好的，我们只需要了解其功能即可。
- 标签名不区分大小写
- 通常情况下标签由开始标签和结束标签组成。例如：
- 如果没有结束标签，建议以/结尾。例如：
- 在模板代码中，我们使用到了HTML注释
- 格式：
- 注释特点：
- 浏览器查看时，不显示。右键查看源码可以看到。
- 注释标签不能嵌套。
- 注释尽量少写，浏览器读取注释时会消耗流量
1.4 HTML与XML的区别
- 作用
html是用来显示数据的；xml是用来描述数据、存放数据的，所以可以作为持久化的介质。 - 语法规则
html语法要求不是很严格，不严格区分大小写，可自动过滤空格，可以不适用引号等；xml与之相反。 - 标记
Html标签是预定义的；XML标签是自定义的、可扩展的。
1.5 常用标签
1.5.1 基本标签 图片标签 超链接标签（省略）
可参考菜鸟教程
1.5.2 表格标签
表格标签
作用: 页面中的元素,布局,排版,定位
标签 <table>
行标签: tr，一组<tr></tr>表示一行
列标签(单元格): td，一组<td></td>表示一个单元格
3*3表格
3行,每行有3个单元格
table标签的属性
border边框, 取值是像素
cellpadding 单元格内的举例
cellspacing 边框之间的距离
bordercolor 边框颜色
width 宽度
height 高度
align 水平对齐属性
th标签: 表头标签
自动将单元格中的文本内容,居中,加粗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" bordercolor="blue" height="500" width="400" align="center">
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
单元格合并
标签用于定义表格的单元格- colspan 单元格可横跨的列数。
- rowspan 单元格可竖跨的行数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
合并单元格
第一行的三个单元格,合并为一个单元格
第一个单元格,跨列操作属性
td标签属性: colspan = "列数"
第二行的第一个单元格,和第三行的第一个单元格合并
跨行操作 td属性: rowspan="行数"
-->
<table border="1" cellpadding="0" cellspacing="0" bordercolor="blue" height="500" width="400" align="center">
<tr>
<!-- 第一行合并3个单元格-->
<td colspan="3">1-1</td>
</tr>
<tr>
<!-- 第二行的第一个单元格,和第三行的第一个单元格合并-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
1.5.3 布局标签（div标签和span标签）
-
div标签: div 块级元素标签
- 霸占屏幕的一行, 就是页面中的一个行
- 配合CSS样式表使用
-
span标签: span 行级元素标签
- 不会占屏幕一行
- 配合CSS样式表
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
表格布局
性能不好
<table>
行,列
</table>
div标签,灵活性大,性能好
读取一行,展示一行
div标签 霸占屏幕的一行
本身是不显示,必须配合CSS(层叠样式表)
就是屏幕的一行
块级元素
span标签
本身是不显示,必须配合CSS(层叠样式表)
行级元素,不会霸占屏幕的一行
-->
<div>div标签</div>
<span>span区域</span> <span>span区域</span>
</body>
</html>
1.6 表单
1.6.1 表单标签
<form> 表单标签，表单标签在浏览器上没有任何显示。
- 作用: 收集浏览器用户进行输入的数据, 并把数据发送到服务器端
- 属性
- action：表示用户输入的内容, 被发送到服务器端的路径
- method：表单数据发送方式。常用的取值：GET、POST
- enctype: 提交附件(文件)
<body>
<!--表单-->
<form action="#" method="get" enctype="">
<!--此处的内容可以被表单收集, 提交到服务器-->
</form>
<!--此处的内容在<form>标签外，此处数据表单收集不到, 不能提交到服务器-->
</body>
1.6.2 输入标签input
表单标签 input(输入)
属性 type 类型
type属性值:
属性值="text" 输入文本框
属性 palceholder="属性值"就是文本框中提示信息
属性 name="文本框定义名字" (JavaWeb技术有关)
属性 value=""文本框的默认值
属性值="password" 密码输入框
属性 name="文本框定义名字" (JavaWeb技术有关)
属性值="radio" 单选按钮
同组的按钮才能单向选择
同组: 标签的name属性值相同
设置默认值: 添加属性 checked="checked"
属性值="checkbox" 多选按钮,复选框
属性 name="文本框定义名字"
属性值="file" 文件上传域
属性 name="文本框定义名字"
属性值="reset" 重置按钮
输入的所有内容,全部清空
属性值="button" 按钮
属性 value=""按钮上面的文字
按钮单独使用没有意义,配合 JavaScript脚本语言
属性值="submit" 提交按钮
点击按钮,表单全部数据,发送到服务器
属性值="image" 图片按钮
表单标签 select(下拉菜单)
菜单项 标签 option
默认选项 option标签上添加属性 selected="selected"
多行文本区域: 标签 textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="get">
用户名: <input type="text" placeholder="请输入用户名" name="user" /> <br />
密码 : <input type="password" placeholder="请输入密码" /><br />
男<input type="radio" name="gender" checked="checked"/> 女<input type="radio" name="gender" /><br />
爱好: <input type="checkbox" /> 抽烟 <input type="checkbox" /> 喝酒 <input type="checkbox" /> 烫头<br />
上传头像: <input type="file" /> <br />
<input type="button" value="点点我试试"/>
<input type="submit" value="注册" />
<input type="image" src="../img/btn.jpg"/><br />
选择省份<select>
<option>北京市</option>
<option>天津市</option>
<option selected="selected">辽宁省</option>
<option>河北省</option>
<option>山东省</option>
</select><br />
<textarea cols="50" rows="50"></textarea>
</form>
</body>
</html>
1.6.3 表单提交方式
表单提交方式: get,post形式
提交数据方式的区别:
get:
表单的数据,放在浏览器的地址栏上进行的发送
数据格式是键值对格式 ?k=v&k=v
k键: 是表单中name的属性值
v值: 用户实际填写值,或者value属性值
数据在地址栏上显示了,敏感信息,不安全
地址栏的容量有限的,不适合提交大数据
post:
表单数据,不会出现在地址栏上
数据格式键值对 k=v&k=v
不会暴露数据,安全
post不会用地址栏,没有容量限制,可以提交大数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#" method="post">
用户名: <input type="text" placeholder="请输入用户名" name="user" /> <br />
密码 : <input type="password" placeholder="请输入密码" name="pass"/><br />
男<input type="radio" name="gender" checked="checked" value="男"/> 女<input type="radio" name="gender" value="女"/><br />
爱好: <input type="checkbox" value="抽烟" name="hobby"/>
抽烟 <input type="checkbox" value="喝酒" name="hobby"/>
喝酒 <input type="checkbox" value="烫头" name="hobby"/> 烫头<br />
<input type="submit" value="注册" />
</form>
</body>
</html>
2 CSS
2.1 CSS概述
CSS (Cascading Style Sheets) ：指层叠样式表. 指使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。类似于我们使用的美颜相机.
2.2 CSS的作用和语法
CSS 层叠样式表
HTML标签,是显示数据使用
CSS样式表,美化效果
CSS功能强大: 美化 文本,图片,边框...
语法:
选择器{
属性:属性值;
属性:属性值;
}
2.3 CSS引入方式
1 css引入方式一_行内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
样式表的使用方式: 行内样式
每化HTML页面,针对哪个标签进行美化
在标签的属性中,属性名style
style的属性值就是样式表, 属性:属性值
弊端: CSS样式,只能作用在当前的标签上,作用域最低
优势: 样式的优先级最高
-->
<p style="color: red;">这是一个段落</p>
<p>12345</p>
</body>
</html>
2 css引入方式二_内部（比较常使用的）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<!--
内嵌样式,使用的概率最大
在HTML页面的头部标签中
使用标签 style 添加属性 type
这个标签中的样式,作用于整个HTML页面,作用范围很大
-->
<p>这是一个段落</p>
<p>这是一个段落</p>
<p style="color: green;">这是一个段落</p>
</body>
</html>
3 css引入方式三_外部
外部css文件：my.css
p{
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../css/my.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!--
外联样式 : 作用域更大
将CSS代码,写在另一个文件中
哪个HTML页面要使用,请引入即可(导包)
引入外部的css文件
头部标签中使用标签 link
link标签属性:
href="外部css文件的路径"
type="外部文件的类型"
rel="引入外部文件和HTML文件是什么关系"
-->
<p>1234567890</p>
</body>
</html>
2.4 CSS选择器
2.4.1 标签元素选择器
标签元素选择器用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
font是标签名: 元素选择器
*/
font{
color: blue;
}
/*
h1标签名:元素选择器
*/
h1{
color: gold;
}
</style>
</head>
<body>
<!--
CSS选择器,元素
语法:
选择器{属性:属性值}
选择器的指的作用的标签
元素选择器,选择器的写法和标签名是相同的
CSS样式作用在这个标签上
-->
<font>文本颜色</font>
<font>文本颜色</font>
<h1>标题</h1>
</body>
</html>
2.4.2 id选择器
id选择器id选择器使用“#”进行标识，后面紧跟id名.其基本语法格式如下：#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }需要在html标签上,添加属性id=“选择器名”, 配合ID选择器进行使用。
特点：属性id具有唯一性的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*ID选择器*/
#font{
color: brown;
}
</style>
</head>
<body>
<!--
选择器:ID选择器
在选择器的前面加上 #
标签要使用ID选择器，标签上添加属性 id，属性值就是选择器的名字
哪个标签使用,在标签添加id属性
但是:
W3C万维网联盟,一个页面中的id属性值,具有唯一性
UI部门配合,页面设计制作, 我们开发数据库
不唯一,页面显示不会出现问题
后面技术 JavaScript开发功能时候,失效
-->
<font id="font">文本颜色</font>
<p id="font">段落标签</p>
</body>
</html>
2.4.3 class选择器
class选择器,类选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名其基本语法格式如下：.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }需要在html标签上,添加属性class=“选择器名”, 配合class选择器进行使用
特点：class可以不唯一，较常使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*类别选择器*/
.font{
color: #0000FF;
}
</style>
</head>
<body>
<!--
class选择器,类别选择器
选择器的名字前面加符号 .
标签要使用类别选择器,标签上添加属性 class
-->
<font class="font">文本颜色</font>
</body>
</html>
2.4.4 伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
控制超连接,文本颜色
l-v-h-a
*/
a:link{color: black;text-decoration: none;} /*没有点击过的超链接*/
a:visited{color: black;text-decoration: none;} /*点击过的超链接*/
a:hover{color: red;text-decoration: none;}/*鼠标悬浮*/
a:active{color: green;text-decoration: none;}/*链接激活*/
</style>
</head>
<body>
<!--
伪元素选择器:控制超链接
-->
<a href="http://www.itheima.com">点我到黑马官网</a><br />
<a href="http://www.baidu.com">点我到百度搜索</a><br />
<a href="http://www.sina.com.cn">点我到新浪</a><br />
</body>
</html>
2.4.5 组合选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*font标签,p标签都有效*/
font,p,span{
color: burlywood;
}
</style>
</head>
<body>
<!--
组合选择器
多个选择器在一起,中间逗号分割
-->
<font>123</font>
<p>456</p>
<span>789</span>
</body>
</html>
2.5 CSS属性
2.5.1 css边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
/*边框属性*/
border: 1px #0000FF solid;
width: 300px ;
height: 200px;
}
</style>
</head>
<body>
<!--
CSS的边框属性
属性名 border
分成: top,left,right,bottom
每个边框,颜色,粗细,样式(实线,虚线,双线,点画线)
-->
<div>
CSS的边框属性
</div>
</body>
</html>
2.5.2 css转换属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
转换属性 display
属性的取值:
none : 不显示
block: 块级元素显示(霸占屏幕的一行)
inline:行级元素显示(不会霸占屏幕的一行)
-->
<font style="display:none">这是一个文本</font>
<div style="display:inline;">会占用屏幕的一行</div>Hello <br>
<span style="display:block;">不会占用屏幕的一行</span>World
</body>
</html>
2.5.3 css字体属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
font-size: 16px;
font-family: "宋体";
color: #0000FF;
font-weight: bold;
font-style:italic;
}
</style>
</head>
<body>
<!--
CSS的字体属性:
属性名 font
包含有字体,大小,颜色,加粗
font-size:大小
font-family:字体
color:文本颜色
font-weight:文本加粗
-->
<p>床前明月光,疑似地上霜,举头望明月,低头思故乡</p>
</body>
</html>
2.5.4 css背景属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background: url(../img/btn.jpg);
}
div{
background: #666666;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<!--
背景属性:
图: background-image
色: background-color
-->
<div>背景色</div>
</body>
</html>
2.6 CSS属性（盒子模型）
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
容器与容器之间的间距用margin，注：浏览器也是容器
容器与内容之间的间距用padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 400px;
height: 350px;
border: 1px solid red;
/*div添加外边距 top*/
margin-top: 100px;
/*div添加外边距 left*/
margin-left: 100px;
/*div添加内边距 top*/
padding-top: 10px;
/*div添加内边距 left*/
padding-left: 10px;
/*边距属性,简写方式 4个边*/
/* margin: 100px; */
/*边距属性,简写方式 上下 左右*/
/* margin: 100px 200px; */
/* 边距属性,简写方式 上 左右 下 */
/* margin: 100px 200px 300px; */
/* 边距属性,简写方式 上 右 下 左*/
/*margin: 100px 200px 300px 400px;*/
}
</style>
</head>
<body>
<div>
我是一个文本内容
</div>
</body>
</html>
1969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
