一、表单
1.登录表单
代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>登录表单</title> </head> <body> <div style=" height: 50px; background-color: rgb(8, 139, 226); text-align: center; color: rgb(233, 233, 233); " > <h1>登录表单</h1> </div> <div style=" text-align: center; margin: auto; width: auto; height: 850px; padding-top:300px background-color: rgb(241, 241, 241); " > <div> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <form action=""> <label for="name">登录账号：</label> <input type="text" id="name" name="name" value="" placeholder="请输入账号" autofocus required /> </div> <div> <label for="password">登录密码：</label> <input type="password" id="name" name="name" value="" placeholder="至少8位数" autofocus required /> </div> <div> <label for="password" >邮箱 ： </label > <input type="password" id="name" name="name" value="" placeholder="xxxx@xx.com" autofocus required /> <br /><br /> </div> <div><button style="height: 40px; width: 100px">登录</button></div> </div></form> <div style="background-color: rgb(8, 139, 226); height: 50px"></div> </body></html>
示例效果展示
2.单选、复选、下拉列表、文本域表单
代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>问卷调查</title> </head> <body> <div style=" height: 50px; background-color: rgb(8, 139, 226); text-align: center; color: rgb(233, 233, 233); "> <!-- 头部 --> <h1>问卷调查</h1> </div> <!-- 中间 --> <div style=" text-align: left; margin: auto; width: auto; height: 850px; padding-top:300px background-color: rgb(241, 241, 241); " > <div> <br /><br /> <!-- 中间内容 --> <form action=""> <div> <label for="women" >1. 你的性别 </label><br> <!-- name=""属性必须一样 type=radio 这样才为单选 --> <input type="radio" name="gender" id="men"/><label for="men">男</label> <input type="radio" name="gender" id="women" checked /><label for="women">女</label> </div><br> <div> <label for="rad">2. 你最喜欢的运动（单选）</label><br> <input type="radio" name="gender" id=""/><label for="men">爬山</label> <input type="radio" name="gender" id="rad" checked/><label for="men">骑自行车</label> <input type="radio" name="gender" id=""/><label for="men">游泳</label> </div><br> <div> <label for="rad">3. 你最喜欢吃的水果（多选）</label><br> <input type="checkbox" name="gender1" id=""/><label for="men">西瓜</label> <input type="checkbox" name="gender2" id="" /><label for="men">菠萝</label> <input type="checkbox" name="gender3" id="rad" checked/><label for="men">苹果</label> <input type="checkbox" name="gender3" id="rad" checked/><label for="men">梨子</label> <div><br><label for="user">4. 你的年龄:</label><select name="" id="user"> <option value="1">10-20岁</option> <option value="2">20-30岁</option> <option value="3" selected >30-40岁</option> <option value="4" >40-50岁</option></select></div><div><br> <label for="zzz">5. 投诉与建议</label> <br> <!-- 多行文本域 --> <textarea name="" id="zzz" cols="30" rows="10" required></textarea> </div> </div><br> <div></div> </div> <div><button style="height: 40px; width: 100px">提交</button></div> </div></form><!-- 底部 --> <div style="background-color: rgb(8, 139, 226); height: 50px"></div> </body></html>
示例效果展示
二、后台简单架构
代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>后台架构</title> </head> <body> <div style=" height: 50px; background-color: rgb(8, 139, 226); text-align: center; color: rgb(233, 233, 233); " > <!-- 头部 --> <h1>后台架构</h1> </div> <!-- 中间 --> <div style="background-color: rgb(241, 241, 240); height: 840px"> <!-- <a href="https://www.ifeng.com/" target="content">凤凰网</a> <iframe src="" frameborder="1" name="content"></iframe> --> <!-- 后台顶部 --> <div class="header"> <br /> <b>后台管理</b> <span>amin</span><a href="">退出</a> <hr /> <div></div> <!-- 左侧导航 --> <div> <ul class="class"> <!-- li*5>a[herf='demo$ target="content"]{菜单项$} --> <li> <a href="/19期/作业/18day-1.html" target="content">菜单项1</a> </li> <li> <a href="/19期/HTML/2-2链接与列表.html" target="content" >菜单项2</a > </li> <li> <a href="/19期/HTML/3-1input表单.HTML" target="content" >菜单项3</a > </li> <li> <a href="/19期/HTML/3-2iframe内联框架标签与多媒体.HTML" target="content" >菜单项4</a > </li> <li> <a href="/19期/作业/18day-2.html" target="content">菜单项5</a> </li> </ul> </div> </div> <!-- 右侧内容区 --> <iframe src="" frameborder="1" name="content" width="1200px" height="600px" ></iframe> <br /> <br /> </div> <!-- 底部 --> <div style="background-color: rgb(8, 139, 226); height: 50px"></div> </body></html>
示例效果展示
三、元素样式来源、优先级
1 元素样式来源
- 代理样式/浏览器样式/默认样式
- 自定义样式 ，会覆盖默认样式
注：某些属性具有继承特征，例如颜色、字体、字号、子元素会继承父元素的同名属性
并非所有属性都可以继承，例如盒模型的属性就不能继承
总体来说，样式来源就二类
自定义的：装修
2 优先级
- 默认样式：继承自 html
- 自定义样式 1：行内样式 style 属性
- 自定义样式 2：文档样式/内部样式，style 标签
- 自定义样式 3：外部样式，css 文档
如下
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <!-- 所有默认样式清零 --> <!-- <style> *{ margin: 0; padding: 0; } /* </style> */ --> <!-- 来源1：代理样式/浏览器样式/默认样式 --> <h1>hello</h1> <!-- 来源2：自定义样式 ，会覆盖默认样式--> <h1 style="color: brown;">world</h1> <!-- 来源3：书写顺序，写在后面的同名属性会覆盖前面的（优先级相同的情况下） --> <div> <!-- 某些属性具有继承特征，例如颜色、字体、字号、子元素会继承父元素的同名属性 --> <h1 style="color: aquamarine;">php.cn</h1> </div> <div> <a href="">php中文网</a> </div> <!-- 并非所有属性都可以继承，例如盒模型的属性就不能继承 --> <!-- 总体来说，样式来源就二类 1.默认的：毛坯 2.自定义的：装修 --> </body></html>
Correcting teacher：
PHPz
Correction status：qualified
Teacher's comments：
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
