html快捷写法
<!--快捷写法div>div>div-->
<div>
<div>
<div>
</div>
</div>
</div>
<!--兄弟标签-->
<!--快捷写法div+p-->
<div></div>
<p></p>
<hr />
<!--id名标签-->
<!--跨界写法id#lanou-->
<id id="lanou"></id>
<!--类名标签-->
<!--div.lanou-->
<div class="lanou"></div>
<!--div{巴拉巴拉}-->
<div>我是一个div</div>
<!--div*10-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!--顺序标签-->
<!--div.div$*3-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
双单标签与常用标签
<!--双标签的开始 和结束 中间部分可以镶嵌其他标签div是最常用的一个标签 没有之一-->
<div>
<div>
<div></div>
</div>
</div>
<!--
单标签 一般有特别的展示效果
使用时 可以把斜杠去掉也可以使用
-->
<!--分割线-->
<hr />
<!-- 行标签 可以连续去写-->
<span></span>
<!--段落标签-->
<p></p>
html三大标签
<!--行间样式
好
处:简单暴力 少量代码 比较清晰
-->
<div class="fenou" style="width: 100px;height: 100px;background-color: yellow;">我是一个div</div>
<--内部标签-->
/*获取要修改的元素*/
.hongou{
width: 300px;height: 300px;background-color: cyan;
<--外部标签-->
<!--在head中需要建立html和css样式的关联
rel="stylesheet代表引入样式表
-->
<link rel="stylesheet" href="css/one.css" />
<!--
三种样式的对比
如果你即设置了行间样式内部样式外部样式
最终使用的是行间样式 因为最后运行的是行间样式
每一次样式都会被执行 只不过被覆盖掉了
-->
行标签与快标签以及div父子关系
<!--
快标签
1.快标签可以设置宽度高度 行标签不能设置宽高
2.快标签独占一行 display biock
3.行标签 display line
-->
<!--父子关系(嵌套关系)-->
<!--
如果父子标签结构子标签回继承父标签的宽度
高度是由内容支撑起来的
-->
<div style="width: 500px; background-color: yellow;">
<div style="background-color: yellow;">
我是子div
</div>
图片访问路径
绝对路径 电脑磁盘上的位置路径
相对路径 img/111.png
<!--图片访问路径
绝对路径 电脑磁盘上的位置路径
相对路径 直接在img/111.png
alt=“”代表图片看不了 跳出来的内容
-<div><img src="img/111.png" alt="看不见"/></div>
点击变化
<meta charset="UTF-8">
<title>我的第一个网页</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: red;
transition: 3s;
}
</style>
</head>
<body>
<div id="lanou">我是一个DIV 点我一下试试</div>
</body>
<script type="text/javascript">
//取出div元素 根据元素的id
var div = document.getElementById("lanou");
div.onclick = function(){
//获取div的样式
div.style.width = "100px";
div.style.height = "100px";
//命名规范 驼峰法
//首字母小写 第二个单词开头首字母大写
div.style.backgroundColor = "green"
}
</script>