Web开发课程安排
Web标准
Web标准也称为网页标准，由一系列的标准组成，大部分由W3C( World Wide Web Consortium，万维网联盟)负责制定
三个组成部分:
HTML:负责网页的结构 (页面素和内容)
CSS:负责网页的表现 (页面元素的外观、位置等页面样式，如:颜色、大小等)
JavaScript:负责网页的行为(交互效果)
<span>标签
<span>是一个在开发网页时大量会用到的没有语义的布局标签
特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开
CSS选择器
元素选择器:标签名 {...]
id选择器: #id属性值 [ ... }
类选择器: .class属性值 { ... }
优先级: id选择器 >类选择器 >元素选择器
超链接
标签:<a>
属性:
href: 指定资源访问的url
target: 指定在何处打开资源链接
_self: 默认值，在当前页面打开
_blank: 在空白页面打开
CSS属性
text-decoration: 规定添加到文本的修饰，none表示定义标准的文本（去除下划线）
音频、视频标签
<audio> <video> 播放控件
换行、段落标签
换行: <br>
段落: <p>
文本加粗标签
<b> <strong>
CSS样式
line-height: 设置行高
text-indent:定义第一个行内容的缩进
text-align:规定元素中的文本的水平对齐方式
注意
在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符:
页面布局
盒子:页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成: 内容区域 (content) 、内边距区域 (padding) 、边框区域 (border) 、外边距区域 (margin)
布局标签:实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签
标签:<div> <span>
特点:
div标签:
一行只显示一个 (独占一行)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高 (width、height)
span标签:
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高 (width、height)
CSS盒子模型
组成: 内容 (content) 、内边距 (padding) 、边框 (border) 、外边距(margin)
CSS属性
width: 设置宽度
height: 设置高度
border: 设置边框的属性，如: 1px solid #000;
padding:内边距
margin: 外边距
注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 -位置，如: padding-top、padding-left、padding-right ...
表格标签
场景:在网页中以表格(行、列)形式整齐展示数据，如:班级表。
标签:
表格标签
<table>:定义表格
<tr>: 定义表格中的行，一个 <tr> 表示一行
<th>:表示表头单元格，具有加粗居中效果
<td>:表示普通单元格
表单标签
场景:在网页中主要负责数据采集功能，如注册、登录等数据采集
标签:<form>
表单项:不同类型的input 元素、下拉列表、文本域等
<input>:定义表单项，通过type属性控制输入形式
<select>:定义下拉列表
<textarea>:定义文本域
属性:
action:规定当提交表单时向何处发送表单数据，URL
method: 规定用于发送表单数据的方式。GET、POST（默认为GET）
表单的提交方式
<body>
<!-- form表单属性:
action:表单提交的url，往何处提交数据，如果不指定，默认提交到当前页面-->
<form action="" method="get">
用户名：<input type="text" name="username">
年龄：<input type="text" name="age">
<input type="submit" name="提交">
</form>
</body>get: 在url后面拼接表单数据，url长度有限制
post:在消息体(请求体)中传递的 参数大小是无限制的
小结
表单标签
表单标签: <form>
表单属性:
action: 表单数据提交的url地址
method: 表单提交方式
get: 表单数据拼接在url后面，?username=java ,大小有限制
post:表单数据在请求体中携带，大小没有限制
注意: 表单项必须有name属性才可以提交
表单标签-表单项
表单项
<input>:表单项，通过type属性控制输入形式
<select>:定义下拉列表，<option> 定义列表项
<textarea>: 文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="post">
用户：<input type="text" name = "name"> <br><br>
密码：<input type="password" name = "password"> <br><br>
<!-- value表示提交到后台的值为1或2 并且只能选择其中一个 -->
性别：<label><input type="radio" name="gender" value="1">男</label>
<label><input type="radio" name="gender" value="2">女</label><br><br>
<!-- 类型为checkbox复选框，可以重复选 -->
爱好：<label><input type="checkbox" name="hobby" value="java"> java </label>
<label><input type="checkbox" name="hobby" value="C++"> C++ </label>
<label><input type="checkbox" name="hobby" value="Python"> Python </label><br><br>
<!-- file为文件 -->
照片：<input type="file" name="image"><br><br>
<!-- 可选择年月日 -->
生日：<input type="date" name="birthday"><br><br>
<!-- 可选择时间 -->
时间：<input type="time" name="time"> <br><br>
<!-- 可选择日期+时间 -->
日期时间：<input type="datetime-local" name="datetime"> <br><br>
<!-- 需输入一个邮箱 -->
邮箱：<input type="email" name="email"> <br><br>
<!-- 只能输入数字 -->
年龄：<input type="number" name="age"> <br><br>
<!-- select表示下拉列表 value属性表示提交的值 比如选中本科提交的值为2 -->
学历: <select name="degree">
<option value="">---------- 请选择 ----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select><br><br>
<!-- description表示文本域，cols表示一行可输入30字，rows表示最多可输入10行 -->
简介：<textarea name="description" cols="30" rows="10" ></textarea><br><br>
<!-- 隐藏域 提交时会将id以及1提交至服务端 -->
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>点击提交显示
小结
表单项标签
<input>的type属性: text、password、radio、checkbox、file、date、datetime-local、time、number、hidden、button、submit
<select>定义下拉列表
<textarea>定义文体域
