编写html页面常常犯的错误
时间:2021-08-04
本文章向大家介绍编写html页面常常犯的错误，主要包括编写html页面常常犯的错误使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
1.图方便，不看，或者疲惫，不熟，；乱写标签
2.元素css定位不到，是class 的类属性没有写进引号内
<!--这个touxing没有写进双引号内，怪不得定位不到元素-->
<!--<div class="col-3" touxiang> 这是之前的写法犯了定位不到元素-->
3.笔记待补充查询
<!--<aside> 标签定义 <article> 标签外的内容 的内容应该与附近的内容相关-->
<!--设计登录界面下半部分边框，分别是3，6，3-->
<!--这里的row与col在网格系统中有什么关系-->
<!--这里的dl,dt,i;这些html属性没碰到过。又见到了标签a包含span-->
<!--placeholder又一个新标签-->
<!--input包span会有啥效果-->
详细代码
<!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,shrink-to-fit=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
这句话是自适应移动窗口界面；shrink-to-fit=no这是专为IOS所设置的，适应它-->
<title>QQ登录</title>
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
<script src="jquery-3.3.1.slim.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
<style>
/*登录界面外边框*/
div.QQlogin {
margin: 20px auto;
width: 430px;
height: 333px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
div.down {
position: relative;
/*定义相对定位*/
height: 153px;
/*定义高度*/
background-color: #EBF2F9;
/*定义宽度*/
margin-right: 0;
/*定义右外边距*/
margin-left: 0;
/*定义左外边距*/
}
/*登录表单上的图片*/
div.QQlogin aside {
width: 100%;
height: 180px;
background-image: url("images/qq.gif");
/*相对路径,images与改代码放在同一文件夹*/
}
/*定义头像*/
div.down div.touxiang {
height: 100%;
}
/*在CSS中定位a需要用到>,有点xpath选取对象的感觉*/
div.down div.touxiang > a {/*这里的> a 均要分隔开*/
width: 81px;
height: 81px;
display: inline-block;
background: url("images/touxiang.png") no-repeat;
margin-top: 20px;
margin-left: 30px;
}
div.down div.touxiang dl {
position: absolute;
/*定义绝对定位*/
left: 100%;
top: 53%;
}
/*定义图像右下角小图标*/
div.down div.touxiang dl span {
display: inline-block;
/*定义行内块元素*/
width: 14px;
/*定义宽度14px*/
height: 14px;
/*定义高度*/
background-image: url("images/ptlogin.png");
/*定义图片*/
background-repeat: no-repeat;
/*设置图片不平铺*/
}
/*定义左下角切换用户*/
div.down div.touxiang i.people {
background: url("images/input_username.png") no-repeat;
/*定义图片，设置图片不平铺*/
position: absolute;
/*设置绝对定位*/
top: 75%;
/*设置距顶部75%*/
left: 10px;
/*设置距左边10px*/
width: 35px;
/*设置宽度*/
height: 35px;
/*设置高度*/
}
/*中间主体部分*/
div.login-box {
margin-top: 15px;
/*定义顶部外边距15px*/
margin-left: 20px;
/*定义左边边距20px*/
}
div.login-box input {
height: 30px;
/*定义高度*/
width: 195px;
/*定义宽度*/
border: 1px solid #d1d1d1;
/*定义边框*/
padding-left: 10px;
/*定义左边内边距*/
color: #7e7e7e;
/*定义背景色*/
}
div.login-box span.first {
display: inline-block;
/*定义行内块级元素*/
position: absolute;
/*定义绝对定位*/
width: 20px;
/*宽度*/
height: 20px;
/*定义高度*/
background: url("images/row.png") no-repeat;
/*定义背景图片*/
margin-left: 172px;
/*定义左边外边距*/
top: 8px;
/*距离顶部8px*/
}
div.login-box span.second {
display: inline-block;
/*定义行内块级元素*/
position: absolute;
/*定义绝对定位*/
width: 20px;
/*定义宽度*/
height: 20px;
/*定义高度*/
background: url("images/press.png") no-repeat;
/*定义背景图片*/
margin-left: 168px;
/*定义左边外边距*/
top: 34px;
/*距离顶部34px*/
}
div.login-box label {
font-size: 12px;
/*定义字体大小*/
color: #656565;
/*定义字体颜色*/
text-indent: 15px;
/*定义文本缩进*/
margin-top: 10px;
/*定义顶部外边距*/
display: inline-block;
/*定义行内块级元素*/
}
div.login-box label.auto-login {
margin-left: 48px;
/*定义左边边距*/
}
div.login-box input.three {
width: 16px;
/*定义宽度*/
height: 16px;
/*定义高度*/
margin-top: 1px;
/*定义顶部外边距*/
position: absolute;
/*定义绝对定位*/
margin-left: -15px;
/*定义左边负外边距*/
}
div.login-box input.four {
width: 16px;
/*定义宽度*/
height: 16px;
/*定义高度*/
margin-top: 1px;
/*定义顶部外边距*/
position: absolute;
/*定义绝对定位*/
margin-left: -15px;
/*定义左边负外边距*/
}
div.login-box button {
display: block;
/*定义块级元素*/
width: 195px;
/*定义宽度*/
height: 30px;
/*定义高度*/
background-color: #16a8de;
/*定义背景颜色*/
color: #fff;
/*定义字体颜色*/
border-radius: 5px;
/*定义圆角边框*/
font-size: 14px;
/*定字体大小*/
font-weight: 600;
/*定义字体加粗*/
}
/*设置右侧功能区，如果先设置的话并没有改变*/
div.register {
position: absolute;
/*定义绝对定位*/
margin-top: 22px;
/*定义顶部外边距*/
margin-left: 335px;
/*定义左边外边距*/
}
div.register a {
color: #2685e3;
/*定义字体颜色*/
display: block;
/*定义定义块级元素*/
width: 60px;
/*定义宽度*/
font-size: 13px;
/*定义字体大小*/
font-family: "微软雅黑";
/*定义字体*/
}
div.register a.find-password {
margin-top: 13px;
/*定义顶部外边距*/
}
</style>
</head>
<body>
<!--设计登录界面外边框，以及登录界面上半部分-->
<div class="QQlogin">
<aside></aside>
<!--<aside> 标签定义 <article> 标签外的内容 的内容应该与附近的内容相关-->
<!--设计登录界面下半部分边框，分别是3，6，3-->
<!--这里的row与col在网格系统中有什么关系-->
<div class="row down">
<!--row应该就是个标记把,中文意思一排-->
<!--这个touxing没有写进双引号内，怪不得定位不到元素-->
<!--<div class="col-3" touxiang> 这是之前的写法犯了定位不到元素-->
<div class="col-3 touxiang">
<a href="#"></a>
<dl>
<!--这里的dl,dt,i;这些html属性没碰到过。又见到了标签a包含span-->
<dt><a href="#"><span class="online"></span></a></dt>
<dd></dd>
<!--这里的dd啥意思-->
</dl>
<i class="people"></i>
</div>
<div class="col-6 login-box">
<!--placeholder又一个新标签-->
<!--input包span会有啥效果-->
<input type="text" placeholder="QQ号码/手机/邮箱"><span class="first"></span>
<input type="password" placeholder="密码"><span class="second"></span>
<label><input type="checkbox" class="three"> 记住密码</label>
<label class="auto-login"><input type="checkbox" class="four"> 自动登录</label>
<button class="btn">登 录</button>
</div>
<!--这里的dir是什么呢，这里犯了乱写标签-->
<div class="col-3 register">
<!--之前我把这里写成了col-9-->
<a href="https://www.baidu.com">注册账号</a>
<a href="https://www.cnblogs.com/wkhzwmr/p/15097821.html" class="find-password">找回密码</a>
</div>
</div>
</div>
</body>
</html>
努力拼搏吧，不要害怕，不要去规划，不要迷茫。但你一定要在路上一直的走下去，尽管可能停滞不前，但也要走。
原文地址：https://www.cnblogs.com/wkhzwmr/p/15098289.html
- 微信扫码支付+Asp.Net MVC
- Linq中连接主要有组连接、内连接、左外连接、交叉连接四种
- 深入源码理解YYCache 、SDWebImage、AFNetworking、NSCache 缓存方式与对比
- Linq Like的操作
- iOS网络——AFNetworking AFURLSessionManager源码解析
- 1692: [Usaco2007 Dec]队列变换（BZOJ1640强化版）
- 1620: [Usaco2008 Nov]Time Management 时间管理
- 手把手教你树莓派linux内核如何编译
- js处理异常try{}catch(e){}
- 1634: [Usaco2007 Jan]Protecting the Flowers 护花
- C#用链式方法表达循环嵌套1
- C#用链式方法表达循环嵌套2
- 【开源】1句代码搞定图片批量上传，无需什么代码功底【无语言界限】
- C#异步调用的方法
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例