HTML笔记心法总结

来源：互联网发布：excel销售数据分析编辑：程序博客网时间：2024/05/21 15:41

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>

阅读全文

0 0