HTML笔记誊录

标签：

www.w3school.com.cn网站
ctrl+k+d 页面源码对齐
注释不允许嵌套
<!--你好-->
<!--你还
nihao
nihao
nihao
-->

<!--你还
nihao
nihao
<!--
nihao
-->
nihao
-->
//注释不允许嵌套
/*
注释的内容
*/

字体分为逻辑字体和物理字体
推荐使用逻辑字体（效率较高）
&lt;(<)
&gt;(>)
&nbsp;(空格)

<font size="7" color=‘red‘>不</font><!--size字体 1-7，7最大h相反-->
相对路径: 如果图片文件1.jpg与html 文件中同一个文件夹下，使用地址时，可以写
成src="1.jpg"
如果图片展img 文件夹下，而该文件夹与html文件中同一个文件夹下，则使用地址的时候
应该写成src="img\1.jpg"
绝对路径：

<img src="./2.jpg"//当前目录
<img src="./img/2.jpg"//当前目录img文件下的2.jpg(此时html文件与文件夹在同一个目录，平级的目录)
<img src="../2.jpg"//父目录
<img src="/2.jpg"//表示服务器的根目录

ol:有序
<ol type="i">
   <li>有序</li>
   <li>有序</li>
   <li>有序</li>
</ol>
  
ul:无序
<ul type="i">
   <li>有序</li>
   <li>有序</li>
   <li>有序</li>
</ul>
dl:自定义列表
<dl>
  <dt></dt>
     <dr></dr>//解释
     <dr></dr>
  <dt></dt>
  <dt></dt>
</dl>

align:right,left,center
vilgn:top,buttom middle

表格中的TD中如果没有数据会不显示边框，，所以得在空的Td中加个@nbsp;
复选框的accessKey 属性：alt +e 定位复选框的勾选的快捷键（ie）,mac等其他的浏览器只要使用e健即可

显示一张图片上的不同区域
<div style="
background-image:url(‘2.jpg‘);
width:200px
height:150px;
backgroud-position:-328px,-12px;
cursor:wait;
display:none;
visibility:hidden;//
"</div>

<div style="dispaly:inline">（横向排列）使div与文字在同一行，默认div是会换行的
</div>
<span style="dispaly:block"> span 默认是横向排列的，不会换行，使用dispaly:block可以换行，块状

显示
</span>

相同样式的应用：
1、标签选择器：
   让相同的标签具有相同的样式：
   标签名{样式}
   a{} 可以应用于所有的<a></a>
2、类选择器：
   .myclass{样式}
   <a href="baidu.com" class="myclass">哈哈</a>
3、id选择器
   #myid{样式}
   id="myid"4、标签类选择器：
标签加类的结合
h1.title
{
font-family：；
color:red;
}
h2.title
{

}
<h1 class="title">哈哈</h1>
<h2 class="title">呵呵</h2>

5、类的组合使用：
.big
{
}
.small
{
}
<p class="big small">我是好孩子</p>//此时的是2种样式的结合使用

选择器的声明：
6、组合标签的集体声明：
h1,p,a,span
{
}
7、全局声明：共有的样式，没有应用其他样式的都以全局的为准
*
{
}
8、嵌套选择器的声明：
# tb1 tr td
{
}
<table id="tb1">
   <tr>
     <td>哈哈哈哈
     </td>
   <tr/>
</table>

区别：
所有跟标签相关的一般使用标签选择器
一般id只是应用一次，针对一个
class可以有多个
1、统一的样式用标签
2、部分相同的样式用class
3、唯一的一个，应用一次用id

优先级：
共有的低，特有的高
id>类>标签（组合样式时就近原则）
当标志为：!important,可以调整优先级，不管后面有没有其他的样式，都是我以我为准

伪选择器：只能用在a标签上（还可以是类及ID上）
就是给一个标签的某个状添加样式的方法
标签：状态{//样式}
link 表示放上去以前
visited 点击以后

active 点击的时候
hover 鼠标放上去的时候

a:link,a:visited//点击后与点击前的样式一样
{
}
a:hover
{
}
a:active
{
}
<a href="www.baidu.com"> 百度</a>

tr:hover//当鼠标放在行的时候高亮显示
{
  backgroud-color:red;
}
并给所有浏览器都支持伪选择器

针对特定链接是使用伪选择器，此时的类及ID都有效
.myclass:hover//当鼠标放在行的时候高亮显示
{
  backgroud-color:red;
}
#myclass:hover//当鼠标放在行的时候高亮显示
{
  backgroud-color:red;
}
<a id="myclas" href="www.baidu.com"> 百度</a>

table,td,th
{
  border:1px solid red;//给表格加边框
  border-collapse:collapse;//表格边框合并
}

取消列表项的符号
让列表项 float:right

文档流与定位：
在文档页面中所有的标签和元素都是从左上到右下的进行堆砌
div会进行自动换行
要继续定位：脱离文档流
绝对定位：position:absolute;//不随鼠标的滚动，可以根据坐标定位到任何地方

固定定位：position:fixed;//随着鼠标的滚动，可以根据坐标定位到任何地方
相对定位：position:relative//相对位移与原来的文档流一致，如果位置了top等数据，则
以自己原来在文档流中的位置做为参照物来进行偏移

多个div的排列循序,当页面position为absoultion的时候，要控制div的排列循序可以为每一标记设置z-index，可以使用z-index来控制
数值越大越在前面
z-index:1
z-index-2

HTML笔记誊录

标签：

原文地址：http://www.cnblogs.com/hetong/p/4852308.html