表单：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <!-- form:用于定义表单。可以定义一个范围，范围代表采集用户数据的范围 属性： action:指定数据提交的URL method:指定提交方式 分类：一共七种，两种常用 get: 1.请求参数会在地址栏中显示。会封装在请求行中。 2.请求参数长度是有限制的。 3.不太安全 post: 1.请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议衙讲解） 2.请求参数的长度没有限制 3.较为安全 表单中的数据要想被提交：必须指定其name属性 表单项标签： input:可以通过type属性值来改变元素展示的样式 type: text:文本输入框，默认值 placeholder:指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 password:密码输入框 radio:单选框 注意： 1.要想让多个单选框实现单选效果，则多个单选框的name属性值必须一样。 2.一般会给每一个单选框提供value属性，指定其被选中后提交的值。 3.checked属性，可以指定默认值 checkbox:复选框 注意： 1.一般会给每一个复选框提供value属性，指定其被选中后提交的值。 2.checked属性，可以指定默认值 file:文件选择框 hidden:隐藏域,用于提交一些信息 按钮： submit:提交按钮。用于提交表单 button:一个普通的按钮 image:图片提交按钮 src:指定图片的路径 color:取色器 date:日期输入框 datetime-local:日期时间输入框 email:邮箱输入框 number:数字输入框 label:指定输入项的文字描述信息 注意:label的for 属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。 select:下拉列表 子元素：option，指定列表项 textarea:文本域 cols:指定列数，每一行有多少个字符 rows:默认多少行 --> <form action="#" method="post"> <label for="username">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br> 密码：<input type="password" name="password"><br> 性别：<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female" checked>女<br> 爱好：<input type="checkbox" name="hobby" value="shopping">逛街 <input type="checkbox" name="hobby" value="java">java <input type="checkbox" name="hobby" value="game">游戏<br> 头像：<input type="file" name="file"><br> 隐藏域：<input type="hidden" name="id">aaa<br> 取色器：<input type="color" name="color"><br> 生日：<input type="date" name="birthday"><br> 生日：<input type="datetime-local" name="birthday"><br> 邮箱：<input type="email" name="email"><br> 年龄：<input type="number" name="age"><br> 省份:<select name="province"> <option>--请选择--</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected>陕西</option> </select><br> 自我描述: <textarea cols="20" rows="5"></textarea><br> <input type="submit" value="登录"><br> <input type="button" value="一个按钮"><br> <input type="image" src="./img/regbtn.jpg"><br> </form> </body> </html>1. 概念：Cascading Style Sheets 层叠样式表 层叠：多个样式可以作用在同一个html的元素上，同时生效。 2. 好处：
功能强大
将内容展示和样式控制分离：
降低耦合度，解耦 让分工协作更容易 提高开发效率
3. CSS的使用：CSS与html结合方式 内联样式：在标签内使用style属性指定css代码。如：
<div style="color: red;">hello css</div>内部样式：在head内,定义style标签，style标签的标签体内容就是css代码。如：
... <style> div{ color: red; } </style> ... <div>hello css</div>外联样式：定义css资源文件。在head标签内，定义link标签,引入外部的资源文件。如：
a.css文件： div{ color: green; } <!-- html --> ... <link rel="stylesheet" href="./css/a.css"> ... <div>hello css</div>注意：其中，内联样式不常用，内部样式和外部样式常用。 另外外部样式还可写为：
<style> @import "css/a.css"; </style>4.CSS语法： 格式：
选择器{ 属性名1:属性值; 属性名2:属性值; ... }选择器：筛选具有相似特征的元素 注意：每一对属性需要使用;隔开，最后一对属性可以不加; 5.选择器:筛选具有相似特征的元素 分类：
基础选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础选择器</title> <style> #div1{ color: red; } div{ color: green; } .cls1{ color: blue; } </style> </head> <body> <!--基础选择器--> <!--1. id选择器：选择具体的id属性值的元素,建议在一个html页面中id值唯一 语法：#id属性值{}--> <!--2. 元素选择器：选择具有相同标签名称的元素 语法：标签名称{} 注意；id选择器优先级要高于元素选择器--> <!--3. 类选择器：选择具有相同的class属性值的元素 语法：.class属性值{} 注意：类选择器的优先级要高于元素选择器--> <div id="div1">传智播客</div> <div id="div2">黑马程序员</div> <p class="cls1">传智学院</p> </body> </html> 扩展选择器选择所有元素:
*{}并集选择器：
选择器1,选择器2{}子选择器：筛选选择器1元素下的选择器2元素
选择器1 选择器2{}父选择器：筛选选择器2的父元素选择器1
选择器1>选择器2{}属性选择器：选择元素名称，属性名=属性值的元素
元素名称[属性名=属性值]{}伪类选择器：选择一些元素的具有的状态
元素:状态{} 如：<a> link:初始化的状态 visited:被访问过的状态 active:正在访问的状态 hover:鼠标悬浮的状态6.属性 字体、文本
font-size:字体大小 color:文本颜色 text-align:对齐方式 line-height:行高背景
background:背景边框和轮廓
border:设置边框，符合属性尺寸
width:宽度 height:高度盒子模型：控制布局
margin:外边距 padding:内边距，默认情况下内边距会影响整个盒子的大小 float:浮动 left:左浮动 right:右浮动