菜鸟娃娃鱼ONE

最新推荐文章于 2019-01-17 04:16:50 发布

zfcwhale

最新推荐文章于 2019-01-17 04:16:50 发布

阅读量190

点赞数 1

本文链接：https://blog.csdn.net/zfcwhale/article/details/78407982

版权

 
 #标签 

 
 html 

  根标签 

 
 head 

  头标签 

 
 title 

  标题标签 

 
 body 

  内容标签 

DIV

  块状标签 独占一行 

  有标签的开始和结束中间部分可以嵌套其他标签，双标签一般没有别特的页面展示效果 

  父子关系（嵌套标签）如果是父子关系的标签结构子标签会继承父标签的宽度，高度是由内容支撑起来 

 
 span 

  行标签 

  可以连续去写 行高是由内容去决定的 

a

  连接标签 

  http/https:访问外网连接 需要加上协议 

  target: 访问方式 例：_blank 打开新的网页 

  _self 本页面进行跳转 

hr

  单标签一般有特别的展示效果 使用时可以把斜杠去掉 

p

  段落标签 

 
 ul ol 

  组合标签 分为有序组合和无序组合 

 
 #emment html的快捷写法 

  父子标签 div>加div加tab键 

  <div> 

  <div></div> 

  </div> 

  兄弟标签 div+p加tab键 

  <div></div> 

  <p></p> 

  ID名标签 div加#键加tab键 

  <div id="lanou"></div> 

  类名标签 div加.键加类名加tab键 

  <div class="lanou"></div> 

  顺序标签 div加.加div加$加*5加tab键 

  <div class="div1"></div> 

  <div class="div2"></div> 

  <div class="div3"></div> 

  <div class="div4"></div> 

  <div class="div5"></div> 

 
 #H5的组成：HTML5+css3+javaScript 

  <!DOCTYPE html> 

  <html> 

  <head> 

  <meta charset="UTF-8"> 

  <title></title> 

  <style type="text/css"> 

  div{ 

  width: 300px; 

  height: 300px; 

  background-color: burlywood; 

  transition: 3S; 

}

  </style> 

  </head> 

  <body> 

  <div id="lanou"> 

  我是一个DIV 哈哈哈 

  </div> 

  </body> 

  <script type="text/javascript"> 

  //取出DIV元素 根据元素的ID 

  var div = document.getElementById("lanou"); 

  div.οnclick=function(){ 

  //获取DIV一个样式 

  div.style.width = "100px"; 

  div.style.height = "100px"; 

  //命名规范驼峰法：首字母小写 第二个单词开头首字符大写 

  div.style.backgroundColor = "blue"; 

}

  </script> 

  </html> 

 
 #三种样式 

 
 编写内部样式 

  <style type="text/css"> 

  /*获取要修改的元素*/ 

  .lanou{ 

  width: 100px; 

  height: 100px; 

  background-color: cadetblue; 

}

  .ccc{ 

  width: 60px; 

  height: 60px; 

  background-color: darkred; 

}

  </style> 

 
 在head中建立html和css样式的关联 

 
 rel="stylesheet"引入的是一个样式表 

  <link rel="stylesheet" href="css/one.css"/> 

 
 行间样式 

 
 好处：简单暴力 少量代码 查找清晰 

  <div class="aaa" "width: 100px;height: 100px;background-color: aquamarine;">呵呵</div> 

 
 内部样式 

  <div class="lanou">霍霍霍</div> 

  <div class="ccc">呵呵呵</div> 

  CSS： 

  /*获取要修改的元素*/ 

  .lanou{ 

  width: 600px; 

  height: 600px; 

  background-color: coral; 

}

  .aaa{ 

  width: 300px; 

  height: 300px; 

  background-color: darkblue; 

}

  三种样式的对比 

  如果你不仅设置了行间样式/内部样式/外部样式 

  最终使用的将会是 行间样式 因为最后执行是行间样式 

  每次样式的设置都会被执行 只不过会被覆盖 

 
 #图片 

 
 alt 当图片加载失败的时候 显示的描述 

 
 图片的访问路径：绝对路径 电脑磁盘上的位置路径 

 
 相对路径 相对于本工程 

 
 <img src="http://img5.imgtn.bdimg.com/it/u=372098372,1369058271&fm=27&gp=0.jpg" alt="显示失败"/> 

关注