直接用浏览器打开代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="">
<style>
body{
height: 5000px;
}
a:link{
}
a:visited{
}
a:hover{
}
a:active{
}
</style>
</head>
<body>
div 和 span 都没有语义 div有换行span没有
<br /> 换行
<hr /> 一行
<!-- 图片 -->
<img src="" alt="">
<!-- 锚链接 -->
<a href="http://www.baidu.com" target="_self">123</a>
<a href="http://www.baidu.com" target="_blank">xxx</a>
<a href="#live">跳转到h1</a>
<h1 id="live">hahahaahaha h1</h1>
<!-- 使用base标签设置全局的打开_blank -->
<!-- <base href="http://example.com/" target="_blank, _self, _parent, _top"> -->
<!-- 特殊字符 -->
<© >
<!-- 无序列表 -->
<ul>
<li></li>
</ul>
<!-- 有序列表 -->
<ol>
<li></li>
</ol>
<!-- 自定义列表 一般用来做页面底部部分 -->
<dl>
<dt>名词</dt>
<dd>名词补充解释</dd>
<dd>名词补充解释</dd>
<dd>名词补充解释</dd>
<dd>名词补充解释</dd>
<dd>名词补充解释</dd>
</dl>
<table border = 1 width="300" align="center"> <!-- 表格 -->
<caption>表格标题</caption>
<tr> <!-- 每一行 -->
<td>姓名 </td> <!-- 每个单元格 -->
<td>电话 </td>
<td>地址 </td>
</tr>
<tr>
<td>小明</td>
<td>123</td>
<td>地址</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<!-- 表格联系 -->
<table width="300" border="1" align="center" cellpadding="0" cellspacing="0" >
<caption>表头标题</caption>
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td colspan="2">电话</td>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>22344</td>
<td rowspan="3">海淀区</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>555666</td>
</tr>
<tr>
<td>小张</td>
<td>男</td>
<td>9008939012</td>
</tr>
<tr>
<td>小张</td>
<td>男</td>
<td>9008939012</td>
<th>123</th>
</tr>
</table>
<table border="1" align="center" cellspacing="0" cellpadding="0" width="500">
<caption><h3>小说排行榜</h3></caption>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>123</td>
<td>鬼吹灯</td>
<td><img src="images/down.jpg" alt="下降"></td>
<td>1xx3</td>
<td>456</td>
<td><a href="http://www.baidu.com">贴吧</a></td>
</tr>
</table>
<label>label标签的使用<input type="text/submit/hidden/button/etc" name="" value=""></label>
<select name=""> option的selected="selected"代表默认选中
<option value="" selected="selected">option</option>
<option value="">option2</option>
</select>
input的checked的代表默认选中
<input type="radio" name="" value="" checked="checked">123
<!-- 表单域控件 -->
<form action="html学习笔记_submit" method="get" accept-charset="utf-8">
用户名:<input type="text" name="user" value="123"> <br/> <br/>
密码：<input type="password" name="pass">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
class选择器可以多次重复使用，id选择器一般只有唯一性。<hr/>
div a 子代选择器 div > a亲儿子 第一级子代 子代选择器不要漏层标签，每一层都要有大于号指下去<hr/>
.nav , .sitenav{}并集选择器<hr/>
块级元素
行内元素 指定宽高无效，默认为本身内容大小，里面只放行内元素(a特殊，a可以放块级元素)
行内块元素inline-block 可以设置宽高，默认不换行，但是之间会有留白空隙
<h2>显示模式的转换</h2>
div{ //转化为行内元素
display:inline;
}
span{ //转化为块级元素
display:block;
}
a{ //转化为行内块元素
display:inline-block;
}
<br/>
<h3>行内元素和行内块级元素可以当成文字来看</h3>
<h2>css三大特性</h2>
<h3>1.css层叠性</h3>就近原则
<h3>2.继承性</h3>文字的样式和颜色等继承
<h3>3.优先级</h3>
div(标签选择器) 权重 0，0，0，1
.nav(类选择器) 权重0，0，1，0
#na(id选择器) 权重0,1,0,0
!important 最重要
<br/>
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
border: 1px solid red;
border-collapse: collapse;//表格合并相邻边框
pading：上右下左
margin: 100px auto;//居中
两个相邻盒子margin外边距合并问题，以最大的为准
两个包含盒子 外边距塌陷，父盒子给1px边框或者overflow:hidden溢出隐藏
.fu{
height: 150px;
background-color: pink;
/* overflow: hidden ; 这三种方法解决塌陷问题 */
/* border: 1px solid red; */
/* padding-top: 1px; */
}
.zi{
height: 100px;
width: 100px;
background-color: purple;
margin-top: 100px;
}
<br />
float:left;使用浮动脱离文档标准流。主要解决块级元素一行排列问题，可以left可以right方便排版。浮动不会超过边框和padding
使用浮动之后，元素默认转化为行内块级元素了，不写宽则默认内容文字大小
<h4>转化为inline-block和block的一个区别，inlineblock会和父控件有一个默认边距，显得大一些，再加一句overflow:hidden可以解决这个问题。而转化为block不会出现这个问题，会铺满整个父控件</h4>
<hr />
<h3>清除浮动的四种方法(为了解决子元素浮动导致的父控件高度为0的问题)</h3>
<p>1.额外标签法</p>最后一个浮动标签添加一个div，然后.xx{clear:both}
<p>2.父级添加overflow属性方法</p>
<p>3.after伪元素清除</p>.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;} 父元素使用一下这个类
<p>4.使用before和after双伪元素清除</p>.clearfix:before , .clear:after{content:"";display:table;} 和 .clearfix{clear:both}
<hr/>
<h3>定位 position</h3>
<p>有四个属性值，top bottom left right</p>
1.static静态定位，相当于取消定位，标准文档流模式 <br>
2.相对定位 positon:relative;移动以自己上个状态为基准点。标准流中，原来的位置还占有。<br>
3.绝对定位positon:absolute;不在标准流里面占位置，跟浮动一样。如果父元素没有定位，以浏览器当前屏幕为基准。找到最近一级父元素有定位的为基准。<strong>子绝父相</strong><br/>
4.fixed固定定位
<h2>跟浮动一样，定位之后的元素也会默认转化为行内块元素，尺寸默认为内容宽高</h2>
<h3>小例子，用最后一个定位会覆盖在最上面的特性做a的边框，在hover状态下加相对定位，如果已经用定位了就修改z-index值</h3>
<hr/>
display:none 隐藏 不在文档流里占位置。visibility:hidden隐藏，但是文档流里面还占有位置。
display:block;对应的显示出来 visibility:visible对应的显示;
cursor改变鼠标样式<br>
input轮廓线outline <br>
textarea防止拖拽 设置resize:none;
img设置图文关系 设置vertical-align
设置文字溢出处理white-space:nowrap;
<hr/>
<h3>精灵图。background-positon:</h3>
<h3>滑动门效果。a里面包含span标签，span里面包含文字，然后给a的背景图片为左对齐，给span的bg-postion右对齐,注意span和a标签都要转为inline-block，都要给高度，分别设置paddingleft和right撑开背景图片圆边框</h3>
<h3>用大小盒子来截取去掉边框小技巧</h3>
</body>
</html>
网友评论