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>