月度归档:2020年03月

HTML元素属性放入顺序的标准说明


摘要:
下文讲述html元素中属性的编写顺序的简介说明,如下所示:

html元素具有很多属性,首先属性先放入和后放入并不影响其效果,但为了便于我们属性的阅读,我们应采用以下的顺序放入属性,如下:

   1.class
   2.id, name
   3.data-*
   4.src, for, type, href
   5.title, alt
   6.aria-*, role
   7.disabled、checked或者selected

例:
html应采用以下顺序编写其属性信息

  
<input class="classinfo" name="txtTest" type="text" disabled>
<input type="checkbox" value="maomao365.com" checked>

html文档中内容、表现、行为应分开实现代码?


摘要:
下文讲述html文档中内容编写规范,如下所示:


html网页的组成部分

1.内容:网页内容由html元素编写的文本
2.表现:css代码,用于控制html元素显示的效果,颜色 、边框、布局等
3.行为:使用javascript部分,操作html元素


 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---内容,表现,行为的html编写规范
</title>
<style>
.one{font-weight:bold} 
.two{
  color:green;
  font-size:14px;
}
.three{color:red;}
</style>  
<script>
window.onload=function(){
  let odiv=document.getElementsByClassName("c")[0];
  odiv.onclick=function(){
    this.style.color='yellow';
  }
}  
</script>  
</head>
<body>
<div class="a">猫猫教程---1</div>
<div class="b">猫猫教程---1</div>
<div class="c">猫猫教程---1</div>
</body>
</html>

代码说明:
上面的代码 分别使用style包裹 css代码和使用script标签包裹javascript使用整个页面内容更好的分离,页面代码更加清晰,
以上html还可以将css代码 javascript代码放入单独的css和js文件中,再使用link引入css文件和link 引入js文件,嵌入到Html文件中

HTML 文档类型简介说明


摘要:
下文讲述html文档类型的简介说明,如下所示:

在一个html文件中,我们通常会在其页面的开始位置设置文档类型,
此文档类型用于使浏览器按照指定的文档类型进行文档解析,如下:

  <!DOCTYPE html> 

建议在html头部加上以上代码,使文档使用html5标准进行解析