前端Html5(4)

1.form表单

<title>表单form</title>

</head>

<body>

<!-- form action="将表单信息传送到哪里" -->

<!-- method="传送数据的方式“ 有两种 一种是post(慢。安全) 另一种是get(快,不是很稳)-->

<!-- name="表单名字" 为了区分种类-->

<form action="世纪佳缘数据库地址" method="传送数据的方式" name="表单名字">

<!-- 写姓名 性别 年纪 等信息 提交时用form直接打包 把整体信息传到数据库 -->

<!-- 1.文本框 -->

<p>姓名:<input type="text"></p>

<!-- 有一个属性 value-->

<p>昵称<input type="text" value="请输入"></p>

<!-- 还有一个属性 placeholder -->

<p>电话:<input type="text" placeholder="请输入"></p>

<p>住址:<input type="text"></p>

<!-- value实心 placeholder虚的 -->

<!-- 2.密码框-->

<p>密码:<input type="password"></p>

<p>密码:<input type="password" placeholder="请输入密码"></p>

<!-- 3.按钮 -->

<!-- 普通按钮 -->

<input type="button" value="上一页">

<input type="button" value="下一页">

<!-- 普通中的战斗机 几乎不用-->

<button>跳转到 form里面action所指的路径中,提交不了数据</button>

<!-- 重置按钮 -->

<!-- 注意:重置按钮一定要写在form里面 -->

<input type="reset">

<input type="reset" value="多多">

<!-- 提交按钮 跳转到action所指的路径中 提交了form里面所有的数据-->

<input type="submit">

<input type="submit" value="免费注册"><!-- 不填写数值就是“提交” 填写数值就是数值的字 -->

<!-- 拓展 -->

<!-- 单选按钮 有一个属性name 必须写 并且name值相同 -->

<!-- 单选按钮还有两个属性 checked=“checked"  禁止使用disabled -->

😄重要<!-- XHTML必须写checked=“checked"  但是html中更自由 可以简写为checked-->

<hr>

<input type="radio" name="cc" checked="checked">美丽

<input type="radio" name="cc" disabled="disabled">可爱

<input type="radio" name="cc">大方

<br>

<input type="radio" name="bb" checked>女生

<input type="radio" name="bb">男生

<hr>

            

<!-- 多选按钮 name也必须写 同一组name值相同 -->

<!-- 单选按钮还有两个属性 checked=“checked"  禁止使用disabled -->

<input type="checkbox" name="boy" >有责任心

<input type="checkbox" name="boy" disabled>渣男

<input type="checkbox" name="boy" >有耐心

<input type="checkbox" name="boy" >有爱心

<input type="checkbox" name="boy" checked>专一

</form>

2.初识css

<!-- css是为了让body里面内容有颜色 大小各种排版 修饰body里的标签 -->

<!-- 第一种在头部写 -->

<style type="text/css">

/* css语法 */

/* 你修饰的要素{

属性:属性值;

属性:属性值;

属性:属性值;

} */

h1{

color: cornflowerblue;/* 文字颜色 */

}

p{

width: 300px;/* 宽度 单位像素px*/

height: 100px;/* 高度 单位像素px*/

background-color: cornsilk/* 背景颜色 */;

color: plum;/* 文字颜色 */

}

div{

background-color: powderblue;

background-color: red;

background-color: salmon;

/* 最后是哪个颜色就先是哪个 */

color: pink;

}

</style>

</head>

<body>

<h1>千锋教育</h1>

<p>可爱</p>

<p>性感</p>

<p>大方</p>

<div>你好啊

</div>

3.内部样式表

<!-- css内部样式表的创建 在头部style写 -->

<style type="text/css">

li{

color: pink;

}

</style>

</head>

<body>

<!-- ul>li{内容}*9按tab -->

<ul>

<ul>

<li>内容样式表</li>

<li>内容样式表</li>

<li>内容样式表</li>

<li>内容样式表</li>

<li>内容样式表</li>

<li>内容样式表</li>

<li>内容样式表</li>

<li>内容样式表</li>

<li>内容样式表</li>

</ul>

</ul>

4.行内样式表

<!-- 以后不用 -->

<!-- 行内样式表是吧css写在标签里面 -->

<!-- <标签 style="属性值:属性值;属性值:属性值;">文字内容</标签> -->

<!-- 作用域:行内样式表的作用域就是当下这个标签 写在哪里作用在哪里 -->

<ul>

<li>777</li>

<li>777</li>

<li>777</li>

<li style="color:pink">7777777</li>

<li>777</li>

<li>777</li>

<li>777</li>

</ul>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值