[TOC]
HTML_2.png
html结构
div布局，css控制。htm是一种标记语言。
查看网页的时候，选择审查元素、查看背景图像。
保存图片——>source->img->在新的tab打开，另存为。
div#test1 div的id为test1
ul#art>li*4>a>{文章$} ul下嵌套4个li，里面装着a标签，文章$符号代表
div布局
画一个田字格
<style>
#lside{
float: left;
background: gray;
}
.two{
float: left;
width: 200px;
height: 200px;
margin: 10px;
background: pink;
}
#clr{
clear: both;
width: 0px;
height: 0px;
}
.sec{
float: left;
width: 200px;
height: 200px;
margin: 10px;
background: pink;
}
</style>
</head>
<body>
<div id="lside">
<div class="two"></div>
<div class="two"></div>
<div id="clr"></div>
<!-- 清除浮动，不占位，但是从这里开始的下一个div为下一行-->
<div class="sec"></div>
<div class="sec"></div>
</div>
</body>
画一颗圣诞树
<style>
.a,.b{
width: 0px;
height: 0px;
border-top: 80px solid transparent;
/*边框透明 */
border-right: 80px solid transparent;
border-bottom: 80px solid pink;
border-left: 80px solid transparent;
}
.b{
margin-top: -100px;
/*margin可以是负数，让两个div有重叠*/
}
</style>
盒子模型：上右下左，没有就取对边
padding 注意事项：padding不能解决的用blockquote来解决
css控制效果####css的引入方式
链接到一个外部样式表：link
内部样式表：style
内联样式：在标签中使用样式属性
颜色的写法
16进制，color:#234566
10进制，color:rgb(240,23,45)
html提供常用颜色的名称 color:orange
简写：EEEEEE->EEE
注意事项
浮动的时候，不设置浮动那么默认换行。在进行此操作的时候把格局内的每个元素都要创建出来。
浮动的上面一层是飘的，父布局不会因此被撑大。所以需要给父布局一个宽高。
利用行高来实现文字竖直居中：line-height 上下居中，这个值和高度一样。和16px/36px是一样的，不过这个兼容性更好。
css代码，布局都居中
margin: 300px auto; text-align: center;
html标签
| - | 独占一行 | 能设宽高 | 竖直方向的margin，padding |
|---|---|---|---|
| 块状元素 | 是 | 是 | 有，可以设置 |
| 内联元素 | 否 | 否 | 没有，也不可以设置 |
内联元素与块状有关，可以通过display相互转换。
display:block;display:inline;
a标签 href属性表示超链接的地址，#默认的地址。
div标签 id属性
d07fe94b-69a7-4703-ad74-01aa9fd95b52.png
<video>里面的controls属性提供播放、暂停和音量控件
<span data-wiz-span="data-wiz-span" style="font-size: 1.5rem;"><audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio></span>
表单
874d8b85-2aea-49af-9d1e-6f65e57e665f.jpg
<form action="www.baidu.com" method="post"> 表单的开头，post表示密文传输
checked selected 表示默认添加
框架
<frameset cols="25%,25%,50%>
<frameset rows="25%,50%,25%">
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
IE bug及兼容测试
有些布局、样式要明确的声明，不然就很大可能出现兼容的问题。例如谷歌字体默认最小是10px，火狐默认是12px。
IE问题下bug的几种常见原因：
| 错误 | 原因 | 解决方法 |
|---|---|---|
| ———— | doctype代表了不同的模式 | 正确声明doctype |
| 在不同浏览器下css效果不同 | 各浏览器对不同标签的初始化不同 | css初始化 |
| —— | 浏览器标签bug引起 | css hack |
| 盒模型bug | 使用严格doctype声明 | |
| IE下 左浮元素，左margin是定义的两倍。 | 双倍margin bug | 把display：inline |
| IE下 | a相对于a:link | |
| 3像素margin bug | 规范浮动与清除浮动 | |
| 定义特别小的元素的时候，老式浏览器可能会画出比较大 | IE的最小限制 | overflow:hidden |
