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 统一资源 ...
随机推荐
- Eclipse使用。
1. 如何把项目部署到jetty根目录. 先部署.然后在jetty安装根目录下找到contexts,在里面找到你项目名.xml文件.打开后,把<Set name="configurat ...
- LNMP 网站搭建
https://lnmp.org/ lnmp这个一键安装:https://lnmp.org/install.html wget -c http://soft.vpser.net/lnmp/lnmp1. ...
- 2018.06.30 BZOJ1857: [Scoi2010]传送带（三分套三分）
1857: [Scoi2010]传送带 Time Limit: 1 Sec Memory Limit: 64 MB Description 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段 ...
- systemctl自定义service
应用场景:开启自启动运行脚本/usr/local/manage.sh 一.服务介绍 CentOS 7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户 ...
- Netty学习第二节Java IO通信
一.Java IO通信 名词解释: BIO通信: 采用BIO通信模型的服务端,通常由一个独立的Acceptor线程负责监听客户端连接,在接收到客户端请求后,为每一个客户端建立一个新的线程负 ...
- Strut2的配置文件strust.xml报错：Package Action extends undefined package struts-default
struts.xml的警告信息,是需要联网验证dtd是否符合规范,只要配置成本地的dtd就会消失, 配置方式请看: 详细请看http://www.cnblogs.com/liuyangfirst/p/ ...
- file.write(str),file.writelines(sequence)
file.write(str)的参数是一个字符串,就是你要写入文件的内容.file.writelines(sequence)的参数是序列,比如列表,它会迭代帮你写入文件.
- WriteableBitmap（三） 扩展
backbuffer使用您在创建WriteableBitmap时指定的像素格式,还有一个BackBufferStride属性,您可以使用它来创建一个合适的存储映射函数. 添加一些方法来设置和获取特定情 ...
- 使用Volley上传文件
使用浏览器上传文件,然后通过Wireshark抓包分析,发现发送的数据大概是这个样子. MIME Multipart Media Encapsulation, Type: multipart/form ...
- new Date()之参数传递
JavaScript下,new Date([params]),参数传递有以下五种方式: 1.new Date("month dd,yyyy hh:mm:ss"); 2.new Da ...