day 31 html(二) 和css入门
前情提要:
本次主要是继续昨天学的简单的html 补充以及
css的简单入门
一:表单标签
>1:get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!-- get和post的区别？
1）get请求的参数会显示在浏览器地址栏上，而post请求不会把请求参数显示在地址栏；
2）Post请求的安全性比get高；
3）get请求参数的长度有限制，而Post请求的参数大小没有限制；
4）get请求有缓存，而post请求没有缓存；-->
<form action="https://www.baidu.com" method="get"> <span id="123">用户名<input type="text" id="username" name="username" title="请输入账户" placeholder="请输入账户"
value=""/></span><br>
<span>
密 码<input type="password" id="password" name="password" title="请输入密码" placeholder="请输入密码"
/><br>
</span>
<span>
性 别:男<input type="radio" name="genter" value="male" checked/>
<!--默认选择男-->
女<input type="radio" name="genter" value="famale"/>
</span><br>
<span>
<!--同意选择框必须name属性相同-->
兴趣爱好:
吃:<input type="checkbox" name="hobby" value="eat"/>
喝:<input type="checkbox" name="hobby" value="drink"/>
玩:<input type="checkbox" name="hobby" value="play"/> </span><br>
<span>
<select>
<option>
请选择省份
</option>
<option>
广东省
</option>
<option>
湖南省
</option>
</select>
</span>
<span>
<select>
<option>
请选择城市
</option>
<option>
北京
</option>
<option>
上海
</option>
<option>
深圳
</option>
</select>
</span><br> <span>
<font>大头照<input type="file"/></font>
</span><br>
<!--
submit:提交按钮
button:普通按钮
-->
<span>
<a href="https://www.baidu.com/"><input type="button" value="123" name="asdasdad"></a>
</span><br>
<span>
<input type="submit" value="注册">
</span>
</form>
</body>
</html>
>2:post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!-- get和post的区别？
1）get请求的参数会显示在浏览器地址栏上，而post请求不会把请求参数显示在地址栏；
2）Post请求的安全性比get高；
3）get请求参数的长度有限制，而Post请求的参数大小没有限制；
4）get请求有缓存，而post请求没有缓存；-->
<form action="https://www.baidu.com/s?" method="post"> <span id="123">用户名<input type="text" id="username" name="username" title="请输入账户" placeholder="请输入账户"
value=""/></span><br>
<span>
密 码<input type="password" id="password" name="password" title="请输入密码" placeholder="请输入密码"
/><br>
</span>
<span>
性 别:男<input type="radio" name="genter" value="male" checked/>
<!--默认选择男-->
女<input type="radio" name="genter" value="famale"/>
</span><br>
<span>
<!--同意选择框必须name属性相同-->
兴趣爱好:
吃:<input type="checkbox" name="hobby" value="eat"/>
喝:<input type="checkbox" name="hobby" value="drink"/>
玩:<input type="checkbox" name="hobby" value="play"/> </span><br>
<span>
<select>
<option>
请选择省份
</option>
<option>
广东省
</option>
<option>
湖南省
</option>
</select>
</span>
<span>
<select>
<option>
请选择城市
</option>
<option>
北京
</option>
<option>
上海
</option>
<option>
深圳
</option>
</select>
</span><br> <span>
<font>大头照<input type="file"/></font>
</span><br>
<!--
submit:提交按钮
button:普通按钮
-->
<span>
<a href="https://www.baidu.com/"><input type="button" value="123" name="asdasdad"></a>
</span><br>
<span>
<input type="submit" value="注册">
</span>
</form>
</body>
</html>
</body>
</html>
二:事件标签
三:css入门
>1
2:方式2
方式3:
优先级:
四:选择器
单个元素的选择器
多个元素的选择器
五:伪类选择器
六:背景样式
1>背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height:200px;
width: 200px;
background: blue;
background-image: url("mmexport1550366443161.jpg");/* 设置背景图片 */
/*background-repeat: no-repeat; !* 设置背景图片不重复 *!*/
background-position: 50% 50%; /* 设置背景图片的位置 */
/*background-attachment: fixed; !* 设置背景图不滚动 *!*/
}
.qwe{
width: 120px;
height: 120px;
padding-left: 90px;
padding-top: 90px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="qwe">
qwesdfsdf
</div>
</body>
</html>
七:字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: red;
text-align: left; /* 文本对齐方式 */
letter-spacing: 3px; /* 设置文本距离 */
text-transform: capitalize; /* 转换大小写 */ }
p span{
color: blue;
}
span{
color: yellow;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>
设置字体的重量,例如字体加粗<span>加粗字体</span>
</p>
<span>
测试字体2
</span><br> <a href="">baidu</a>
</body>
</html>
八:表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border-color: yellow;
width: 300px;
height: 200px;
align-items: center;
/*border-collapse: collapse; 合并单元格边框 */
border-spacing: 10px; /* 设置单元格边框的距离 */
}
tr {
border-color: red;
font-size: 3px;
}
</style>
</head>
<body>
<table border="1" align="center">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td> </tr>
<tr>
<td>大包</td> <td rowspan="3">男</td>
<td>21</td> </tr>
<tr>
<td>小宝</td>
<td>21</td>
<!--<td>21</td>--> </tr>
<tr>
<td>中宝</td>
<td>22</td>
<!--<td>22</td>--> </tr>
<tr>
<td>平均年龄</td>
<td colspan="2">10</td> </tr> </table>
</body>
</html>
九:边框样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div { border-width: 3px;
color: red;
width: 200px;
height: 200px;
border: 3px solid yellow;
}
</style> </head>
<body>
<div>
EndlessClould
</div>
</body>
</html>
十:盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 180px;
height: 180px;
border: 1px solid red;
}
</style>
</head> <body>
<div>
python
</div>
<div>
java
</div>
</body>
</html>
十一:定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 2000px;
}
div {
width: 200px;
height: 200px;
color: yellow;
border: 1px solid red ;
}
.green{
background-color: green;
/*position: absolute;*/
/*绝对定位*/
/*position: relative; */
/*相对定位*/
position: fixed; /* 固定定位 */
left: 20px;
top: 200px;
}
.red{
background-color: red; }
.pink{
background-color: pink;
}
</style>
</head>
<body >
<div class="green">
green
</div>
<div class="red">
red
</div>
<div class="pink">
pink
</div>
</body>
</html>
十二:小例子
>1选择器
>2样式
>3:模拟qq登录框
day 31 html(二) 和css入门的更多相关文章
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO
上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...
- H5教程（二），CSS入门（一）选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
- 前端二：CSS
CSS: 一:介绍:学名层叠样式表(Cading Style Sheets)是一种用来表现HTML或者XML等文件的样式的计算机语言.让HTML和XML看起来更加美观. 语法:<style> ...
- webpack入坑之旅（二）loader入门
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- 二丶CSS
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 二.css的 ...
- 【Python全栈-CSS】CSS入门
CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
- 【干货】Html与CSS入门学习笔记4-8
四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...
随机推荐
- 使用RSA进行信息加密解密的WebService示例
使用RSA进行信息加密解密的WebService示例 按:以下文字涉及RSA对WebService传递的数据的加密解密,如果您已经熟知RSA或是有其它更好的方法请不要往下看以免浪费时间. WebSer ...
- Android系统root破解原理分析
http://dengzhangtao.iteye.com/blog/1543494 root破解过程的终极目标是替换掉系统中的su程序.但是要想替换掉系统中su程序本身就是需要root权限的,怎样在 ...
- 2018.10.22 bzoj1742: Grazing on the Run 边跑边吃草（区间dp）
传送门 区间dp入门题. 可以想到当前吃掉的草一定是一个区间(因为经过的草一定会吃掉). 然后最后一定会停在左端点或者右端点. f[i][j][0/1]f[i][j][0/1]f[i][j][0/1] ...
- Linux下一个简单sniffer的实现
Sniffer(嗅探器)是一种基于被动侦听原理的网络分析方式.将网络接口设置在监听模式,便可以将网上传输的源源不断的信息截获.对于网络监听的基本原理我们不在赘述,我们也不开启网卡的混杂模式,因为现在的 ...
- Python 爬取数据入库mysql
# -*- enconding:etf-8 -*- import pymysql import os import time import re serveraddr="localhost& ...
- js基础学习笔记（五）
多种选择(Switch语句) 当有很多种选项的时候,switch比if else使用更方便. 语法: switch(表达式) { case值1: 执行代码块 1 break; case值2: 执行代码 ...
- （KMP 模板）Number Sequence -- Hdu -- 1711
http://acm.hdu.edu.cn/showproblem.php?pid=1711 Number Sequence Time Limit: 10000/5000 MS (Java/Other ...
- bootstrap-treeview 关于checkbox选择框不显示的问题
bootstrap-treeview.js 1.0.2 不支持checkbox,最后使用 bootstrap-treeview.js 1.2.0 解决此问题.
- 网页程序 vs 桌面程序
网页程序 vs 桌面程序 阅读: 评论: 作者:Rybby 日期: 来源:rybby.com 所谓的网页程序就是指以网页作为程序的操作界面,通过脚本语言“javascript”或其它客户端语言 ...
- spring mvc的例子
现在主流的Web MVC框架除了Struts这个主力 外,其次就是Spring MVC了,因此这也是作为一名程序员需要掌握的主流框架,框架选择多了,应对多变的需求和业务时,可实行的方案自然就多了.不过 ...