HTML标签
表单:用来采集用户输入的数据。与服务器进行交互
form:定义表单。
属性:
action:指定提交数据的URL
method:指定提交方式
表单项中的数据要想被提交:必须指定其name属性
<form action="#" method="get" > 用户名<input name="username"><br> 密码<input name="password"><br> <input type="submit" value="登录"> </form>
面试题(method提交方式中get和post)
get: 1. 请求参数会在地址栏中显示。会封装到请求行中 2. 请求参数大小有限制 3. 不安全(输入密码别人可以看到) post: 1. 请求参数不会在地址栏中显示。会封装到请求体中 2. 大小没有限制 3. 安全
表单项标签:
input:改变type属性值就可以改变展示的样式
type属性:
text:文本输入框,默认值
password:密码输入框
placeholder:输入框的提示信息,当输入框内容发生变化,会自动清空提示信息
radio:单选框
checkbox:复选框
1多个单选框实现单选,多个name属性必须相同
2一般会给每一个单选框提供value属性,指定其被选中后提交的值
3checked属性,可以指定默认值
性别:<input type="radio" name="gender" value="male" checked="checked"> 男 <input type="radio" name="gender" value="female"> 女 爱好:<input type="checkbox" name="hobby" value="basketball"> 打球 <input type="checkbox" name="hobby" value="game" checked="checked"> timi <input type="checkbox" name="hobby" value="read"> 看书
file:文件选择框
hidden:隐藏域,用于提交一些信息。
按钮:
submit:提交按钮。可以提交表单
button:普通按钮
image:图片提交按钮
<input type="submit" value="登录"> <input type="button" value="一个按钮"> <input type="image" src="img/regbtn.jpg">
label:指定输入项的文字描述信息
label的for属性一般会和input的id属性值对应。如果对应,则点击label区域,会让input输入框获取焦点
比如:点击用户名,会让你输入用户名
<label for="username">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="username">
select:下拉列表
子元素:option,指定列表项
省份:<select name="province"> <option value="">--请选择--</option> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected>广东</option> </select>
textarea:文本域
cols:指定列数,每一行有多少个字符
rows:默认多少行
CSS:页面美化和布局控制
-
概念: Cascading Style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html的元素上,同时生效
-
好处:
-
功能强大
-
将内容展示和样式控制分离
降低耦合度。解耦
分工协作
提高开发效率
-
-
CSS的使用:与html结合
1. 内联样式(不常用) 在标签内使用style属性指定css代码 如:<div style="color:red">hello css</div> 2. 内部样式 在head标签内,定义style标签,style标签的标签体内容就是css代码 如: <style> div{ color:blue ; } </style> <div >hello css</div> 3. 外部样式 1. 定义css资源文件。 如: a.css文件: div{ color:green } 2. 在head标签内,定义link标签,引入外部的资源文件 如: <link rel="stylesheet" href="css/a.css"> <div> hello css</div> 也可以这样写 <style> @import "css/a.css"; </style>
-
css语法:
格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器:筛选具有相似特征的元素
每一对属性需要用:隔开,最后一堆、对属性可以不加;
-
选择器
1.基础选择器 1. id选择器:选择具体的id属性值的元素。建议一个html页面中id值唯一。 语法: #id属性值{} <div id="div1">学习</div> #div1{ color: red; } 2. 元素选择器:选择具有相同标签名称的元素 语法:标签名称{} <div id="div1">学习</div> <div class="cls1">打游戏</div> div{ color: green; } 3. 类选择器:选择具有相同的class属性值的元素 语法:.class属性值{} <div class="cls1">打游戏</div> <p class="cls1"> 唱歌</p> .cls1{ color: blue; } 总结:id选择器跟类选择器优先级都高于元素选择器,元素选择器式标签,id、类选择器是属性。 2.扩展选择器: 1. 选择所有元素: 语法:*{} 2. 并集选择器: 语法:选择器1,选择器2{} 3. 子选择器:筛选选择器1元素下的选择器2元素(在1中选2) 语法: 选择器1 选择器2{} <div> <p>传智博客</p> </div> div p{ color:blue; } 4. 父选择器:筛选选择器2的父类选择器1(在2找1) 语法: 选择器1 > 选择器2{} <div> <p>传智博客</p> </div> div > p{ border:1px solid; } 5. 属性选择器:选择器名称,属性名=属性值的元素 语法: 元素名称[属性名="属性值"] <input type="text"> input[type="text"]{ border:5px solid; } 6. 伪类选择器:选择一些元素具有的状态 语法:状态{} link:初始化状态 visited:被访问过的状态 active:正在访问状态 hover:鼠标悬浮状态 <a href="#"> 传智博客</a> a:link{ color: pink; } a:hover{ color: green; } a:active{ color: yellow; } a:visited{ color: red; }
-
属性
1.字体、文本 font-size:字体大小 text-align:对齐方式 line-height:行高 2. 背景 background 3. 边框 border:设置边框,符合属性 4. 尺寸 width:宽度 height:高度 5. 盒子模型:控制布局 margin:外边距 padding:内边距 默认情况下内边距会影响整个盒子的大小 box-sizing:border-box; 设置盒子的属性,让width和height就是最终盒子的大小 float:浮动(kong'zhi) left right