HTML
HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的。
1.网页基本格式
<!DOCTYPE HTML><!--这是HTML5的文档声明-->
<html><!--这是html的开始标签-->
<head><!--这是设置网页标签,html的编码设置,以及标题和链接资源都写在这里-->
<!--这是设置移动端观看时,网页不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--设置网页在ie上观看时,按照浏览器的最高版本的IE观看-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="utf-8"> <!--这是设置网页编码-->
<title>我的主页</title><!--这是设置网页标题-->
</head>
<body><!--这是网页内容-->
你好! 欢迎访问我的主页
</body>
</html>
2.基础标签
标签 | 描述
| ------------ | -----------------
| <h1> ~ <h6> | 定义标题，h1最大，h6最小
| <font> | 定义文本的字体、字体尺寸、字体颜色
| <b> | 定义粗体文本
| <i> | 定义斜体文本
| <u> | 定义文本下划线
| <center> | 定义文本居中
| <p> | 定义段落
| <br> | 定义折行
| <hr> | 定义水平线
| < | < | 小于号或显示标记 |
| > | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | “ | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
| | | 不断行的空白 |
3.图片、音频、视频标签
| <img> | 定义图片 |
| <audio> | 定义音频 |
| <video> | 定义视频 |
-
img：定义图片
- src：规定显示图像的 URL
- height：定义图像的高度
- width：定义图像的宽度
-
audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的 URL
- controls：显示播放控件
-
video：定义视频。支持的音频格式：MP4, WebM、OGG
- src：规定视频的 URL
- controls：显示播放控件
4.超链接标签
<a> 定义超链接，用于链接到另一个资源
-
href：指定访问资源的URL
-
target：指定打开资源的方式
- _self: 默认值，在当前页面打开
- _blank：在空白页面打开
5.列表标签
标签 | 描述 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
- type：设置符号的类型
6.表格标签
标签 | 描述
| ------- | -------
| <table> | 定义表格
| <tr> | 定义行
| <td> | 定义单元格
| <th> | 定义表头单元格
table：设置符号的类型
table：定义表格
* width：宽度
* border：边框
* cellpadding：定义内容和单元格的距离
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
* bgcolor：背景色
* align：对齐方式
tr：定义行
* bgcolor：背景色
* align：对齐方式
td：定义单元格
* colspan：合并列
* rowspan：合并行
th：定义表头单元格
<caption>：表格标题
注意：tr里面包了几个td标签，就代表有几列，一个tr代表一行，一个td代表一列。
7.布局标签
<div> | 定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页
<span> | 用于组合行内元素。
8.表单标签
标签 | 描述
| ---------- | --------------------
| <form> | 定义表单
| <input> | 定义表单项，通过type属性控制输入形式
| <label> | 为表单项定义标注
| <select> | 定义下拉列表
| <option> | 定义下拉列表的列表项
| <textarea> | 定义文本域
type取值
取值 | 描述
| -------- | -----------------------
| text | 默认值。定义单行的输入字段
| password | 定义密码字段
| radio | 定义单选按钮
| checkbox | 定义复选框
| file | 定义文件上传按钮
| hidden | 定义隐藏的输入字段
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据
| button | 定义可点击按钮
form标签属性
1. action：规定当提交表单时向何处发送表单数据，该属性值就是URL
以后会将数据提交到服务端，该属性需要书写服务端的URL。如果填 `#` ，表示提交到当前页面。
2. method ：规定用于发送表单数据的方式
get：默认值。如果不设置method属性则默认就是该值
- 请求参数会拼接在URL后边
- url的长度有限制 4KB
post：
- 浏览器会将数据放到http请求消息体中
- 请求参数无限制的
案例：
<form action="#" method="post">
<input type="hidden" name="id" value="123">
<label for="username">用户名：</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"><br>
性别：
<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
<br>
爱好：
<input type="checkbox" name="hobby" value="1"> 旅游
<input type="checkbox" name="hobby" value="2"> 电影
<input type="checkbox" name="hobby" value="3"> 游戏
<br>
头像：
<input type="file"><br>
城市:
<select name="city">
<option>北京</option>
<option value="shanghai">上海</option>
<option>广州</option>
</select>
<br>
个人描述：
<textarea cols="20" rows="5" name="desc"></textarea>
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
效果图：
CSS
CSS 是一门语言，用于控制网页表现。
- 结构：HTML
- 表现：CSS
- 行为：JavaScript
通俗解释HTML,CSS,JavaScript ：
拿盖房子举例：
1.当我们写完HTML代码时，相当于盖好了一个房子
2.写完CSS代码后，相当于给这个房子涂漆料，让房子美观起来。
3.写完JavaScript代码后， 相当于给房子放一些智能家居，让房子里的东西动起来。
1.网页基本格式（包括CSS）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>Hello CSS~</div>
</body>
</html>
2.CSS导入方式
CSS 导入 HTML有三种方式：
1. 内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style="color: red"> Hello CSS~ </div>
2. 内部样式：定义<style>标签，在标签内部定义css样式
<style type="text/css">
div{
color: red;
}
</style>
3.外部样式：定义link标签，引入外部的css文件
编写一个css文件。名为：demo.css，内容如下:
div{
color: red;
}
在html中引入 css 文件。
<link rel="stylesheet" href="demo.css">
3.CSS选择器
1.元素选择器
元素名称{color: red;} /* 元素名称指的就是html标签的名称 */
div {color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/
2.id选择器
#id属性值{color: red;}
举例：
name{color: red;} /*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/
<div id="name">hello css2</div>
3.类选择器
.class属性值{color: red;}
举例：
cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/
<div class="cls">hello css3</div>
.
