HTML
页面由三部分内容组成：分别是内容（结构）、表现、行为。
内容（结构）：我们在页面中可以看到的数据，一般内容使用html技术来展示。
表现：指的是这些内容在页面上的展示形式。比如说：布局，颜色，大小等等。一般使用CSS技术实现。
行为：指的是页面中元素与输入设备交互的响应。一般使用javascript技术实现。
HTML（Hyper Text Markup Language，超文本标记语言）
HTML通过标签来标记要显示在页面中的各个部分。
HTML文件的书写规范
<html> 表示整个html页面的开始
<head> 头信息
<title>标题</title> 标题
</head>
<body> body是页面的主题内容
页面主体内容
<body>
</html>
HTML标签介绍
1.标签的格式
<标签名>封装的数据</标签名>
2.标签名大小写不敏感
3.标签拥有自己的属性
i.基本属性：bgcolor="red" 可以修改简单的样式效果
ii.事件属性：οnclick="alert('你好！');" 可以直接设置事件响应后的代码
4.标签的属性必须有值，属性值必须加引号
超链接
在网页中所有点击之后可以跳转的内容都是超链接
a标签是超链接
href属性设置连接的地址
target属性设置哪个目标进行跳转
_self：表示当前页面(默认值)
_blank：表示打开新页面来进行跳转
示例：<a href = "http://localhost:8080" target="_self">百度</a><br/>
img标签可以在html页面上显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的宽度
border属性设置图片边框大小
alt属性设置当指定路径找不到图片时，用来代替显示的文本内容
table标签是表格标签
border：设置边框的大小
width：设置表格的宽度
height：设置表格的高度
align：设置表格相对于页面的对齐方式
cellspacing：设置单元格间距
tr：是行标签
th：是表头标签
td：是单元格标签
align：设置单元格文本对齐方式
colspan：属性设置跨列
rowspan：属性设置跨行
iframe框架标签（内嵌窗口）
iframe标签它可以在一个html页面上，打开一个小窗口，去加载一个单独的页面
iframe和a标签组合使用的步骤：
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name的属性值
示例：
<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
<a href="0-标签语法.html" target="abc">0-标签语法.html</a>
表单标签
表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。
form标签就是表单
input type = text 是文本输入框，value设置默认显示内容
input type = password 是密码输入框，value设置默认显示内容
input type = radio 是单选框，name属性可以对其进行分组，checked="checked"表示默认选中
input type = checkbox 是复选框，checked="checked"表示默认选中
input type = reset 是重置按钮，value属性修改按钮上的文本
input type = submit 是提交按钮，value属性修改按钮上的文本
input type = button 是按钮，value属性修改按钮上的文本
input type = file 是文件上传域
input type = hidden 是隐藏域，当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项，selected="selected"设置默认选中
textarea 标签表示多行文本输入框（起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每列可以显示几个字符宽度
<textarea rows="10" cols="20">我是默认值</textarea>
表单提交细节：
form标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或POST
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性值
2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3、表单选不在提交的form标签中
GET请求的特点是：
1、浏览器地址栏中的地址是：action属性[+?+请求参数]，请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST请求的特点是：
1、浏览器地址栏中只有action属性值
2、相对于GET请求更安全
3、理论上没有数据长度的限制
其他标签
div标签：用于设定字、画、表格等的摆放位置。div标签默认独占一行
span标签：用来组合文档中的行内元素。它的长度是封装数据的长度
p标签：段落标签，默认会在段落的上方或下方各空出一行来
CSS
CSS是层叠样式表单，是用于（增强）控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。
CSS语法规则的示例：
p{
color:red;
font-size:30px;
}
其中p表示选择器，浏览器根据选择器决定受css样式影响的HTML元素（标签）。
CSS和HTML的结合方式：
第一种：在标签的style属性上设置"key:value"，修改标签样式。
<div style="border:1px solid red;">div标签1</div>
第二种：在head标签中，使用style标签来定义各种自己需要使用的CSS样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/css">
div{
border: 1px solid red;
}
span{
border:1px solid red;
}
</style>
</head>
<body>
<div>div标签1</div>
<span>span标签1</span>
<body>第三种：
把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用。
使用html的<link rel="stylesheet" type="text/css" href="./styles.css"/>标签，导入CSS样式文件。
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<!-- link标签专门用来引入CSS样式代码-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div标签1</div>
<span>span标签1</span>
<body>
</html>
id选择器
id选择器的格式是：
#id属性值{
属性：值；
}
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<div id="id001">div标签1</div>
</body>
</html>
class选择器（类选择器）
class类型选择器的格式是：
.class 属性值{
属性：值；
}
class类型选择器，可以通过class属性有效的选择性地去使用这个样式。
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="class01">div标签</div>
<span class="class01">span标签</span>
</body>
</html>
组合选择器
组合选择器的格式是：
选择器1，选择器2，选择器n{
属性: 值；
}
组合选择器可以让多个选择器共用一个css样式代码。
<style type="text/css">
.class01, #id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
常用样式：
宽度和高度的可以写像素值也可以写百分比。
DIV居中：margin-left:auto;
文本居中：text-align:center;
超链接去下划线：text-decoration:none;
表格细线
table{
border:1px solid black; /*设置边框*/
border-collapse:collapse; /*将边框合并*/
}
