html 笔记

浏览数：26 / 时间：2015年06月09日

html：超文本标记语言
---------------html基本标签--------------------
1、图片(单标签)
<img src="图片的路径" style="width:宽度;height:高度" title="鼠标移到图片上时出现的说明性文字" alt="图片显示不出来的时候出现的文字" border="边框"/>

为了方便写相对路径，把图片和网页一定要放在同一个文件夹里面。
宽高的取值：百分比、具体像素(px)

2、背景
背景颜色
<body style="
颜色的表示法：
a.英文：red、yellow、green等
b.十六进制：#ff0000红色

背景图片
<body style="background-image:url(图片路径)">

如果颜色和图片共存，颜色将不再显示；如果图片是背景透明的，才能把背景颜色透出来

3、布局
换行:<br />
换段:<p style="text-align:left/center/right"></p>
标题:<h# style="text-align:left/center/right"></h#> #代表1-6
空格: 
版权:©

4、超链接
a.页面间的链接（至少要有两个页面）
<a href="网页的路径.html">点击的内容</a>

b.页面内的链接（在一个页面内跳转）
<a href="#锚记">点击的内容（点哪里？）</a>
<a name="锚记">跳转的内容（跳哪里？）</a>

c.空链接(有链接的样子，但没有任何功能)
<a href="#">点击的内容</a>

d.链接到邮箱
<a href="mailto:邮箱地址">点击的内容</a>

5、分隔线
<hr style="width:宽度;text-align:对齐方式"/>

6、列表(有序用ol，无序用ul)
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>

7、定义描述
<dl>
<dt>描述的词条</dt>
<dd>描述1</dd>
<dd>描述2</dd>
<dd>描述3</dd>
<dd>描述4</dd>
</dl>

8、修改文字的颜色大小
<span style="color:颜色;font-size:?px">要修改的文字</span>
说明：用span的好处在于，不会对页面结构有影响

9、滚动（补充内容）
<marquee direction="left/right/up/down" onmouseover="this.stop()" onmouseout="this.start()">
    内容
</marquee>

10、注释


----------------------表格-------------------------
表格的基本结构：
<table border="边框">
<tr>
     <td>表格内容</td>
</tr>
</table>
在表格里面，所有的内容必须写在<td></td>里面
做表格的时候，记得把border加上，可以看出很多表格问题

合并单元格的时候，在td里面加上如下属性：olspan:跨列 rowspan:跨行
表格高级标签：
<table>
<caption>表格标题，会居中</caption>
<thead>
    <tr>
      <th></th> 
    </tr>
</thead>
<tbody>
    <tr>
      <td></td>
    </tr>
</tbody>
<tfoot>
    <tr>
      <td></td>
    </tr>
</tfoot>
</table>
------------------------表单----------------------
表单容器：
<form name="名字" method="提交方式" action="提交到哪儿去">
表单元素放在这里面
</form>
关于提交方式，有两个取值get和post，默认情况下是get
get:速度快   不安全   信息量少
post:速度慢安全     信息量多

关于action属性，里面放一个网址
action和submit配合，可以产生页面跳转的效果，同时还能发送数据

表单元素：
1、文本框/密码框
<input type="text/password" value="文本框或者密码框里面的默认值" name="名字"/>
2、提交按钮/重置按钮/普通按钮
<input type="submit/reset/button" value="更改按钮上的文字"/>
3、单选按钮/复选框
<input type="radio/checkbox" name="相同的名字" value="区分不同的值" checked="checked" />
单选按钮为了实现互斥选择的功能，记得把name设为一样的；多选按钮无所谓

4、下拉列表
<select name="名字">
   <option value="值1">内容1</option>
   <option value="值2" selected="selected">内容2</option>
   <option value="值3">内容3</option>
   <option value="值4">内容4</option>
   <option value="值5">内容5</option>
</select>

5、文本域(多行文本框)
<textarea cols="列(单位字符)" rows="行(单位字符)">
   文本写在这里面
</textarea>

6、只读、禁用
readonly = "readonly"(文本域里面)
disabled = "disabled"(按钮里面)

7、文件浏览
<input type="file" />
----------------------框架--------------------
一、框架主页面的做法
1、把<body></body>去掉，用<frameset></frameset>来代替
2、进行框架划分，在frameset里面说明是上下划分还是左右划分，<frameset cols="左右分" rows="上下分"></frameset>
3、说明具体的划分比例,比如：
<frameset cols="30%,70%">      框架三七分
<frameset cols="20%,60%,20%"> 框架2:6:2
<frameset cols="100,*">        左边100像素
<frameset cols="*,*,*">        三等分
<frameset cols="2*,*">         框架2:1
4、frameset将页面分成几个小页面，就在<frameset></frameset>里面加上几个<frame />

二、框架小页面的做法
当做普通页面来做，做完后在相应的<frame>里面引入，如下所示：
<frameset rows="*,*">
<frame src="网页1.html"/>
<frame src="网页2.html"/>
</frameset>

为了实现在框架间进行跳转，在需要跳转的frame内设置一个名字，如<frame name="如花"/>;设置完成后回到有超链接的子页面，在超链接中添加target属性,如<a href="***.html" target="如花">

三、关于target属性
<a href="网页的路径.html" target="目标">点击的内容</a>
target的取值一共有以下几种：
框架名：实现在框架间跳转
_self:自身跳转(默认情况下)
_blank:新打开一个页面
_top:跳出整个框架

---------区分-----------
表格：colspan rowspan
文本域：rows cols
框架： rows cols

-------------------iframe内嵌框架-----------------
一般的网页，头部和尾部的效果往往是一样的，为了避免少写代码，会把头部和尾部的内容单独提取出来，做成两个独立的网页，然后分别引入到各个网页中。这种方式叫做页面复用
比如说：有两个页面head.html和foot.html
<body>
   <iframe src="head.html" style="width:宽度;height:高度" frameborder="0"></iframe>
   正文
   <iframe src="foot.html" style="width:宽度;height:高度" frameborder="0"></iframe>
</body>
-----------------------css样式表------------------------
html ---- 打结构 css ---- 美化修饰js   ---- 动态效果
一、样式表的引入方式(行内>内嵌>外部)
1、行内样式表
<标签 style="属性1:属性值1;属性2:属性值2;">

2、内嵌样式表
<head>
<style type="text/css">   --type属性不要忘记写
    选择器 {属性1:属性值1;属性2:属性值2;}
</style>
</head>

3、外部样式表
新建一个文本文档，后缀名改为.css，在里面写上所有需要的样式规则（注意，不要出现任何带<>的html标签！！！）。
为了将外部样式表和网页联系在一起，在html网页中加入如下代码：
<head>
   <link rel="stylesheet" type="text/css" href="样式表的路径.css"/>
</head>

二、常用的样式表属性
1、文本属性
*color:文本颜色
*font-size:文本大小
font-family:文本字体
font-weight:文本加粗 bold
*text-decoration:none(没有下划线)/underline(有下划线)
text-align:left/right/center 对齐方式
line-height:行高
letter-spacing:字符间距

2、背景属性
top/center/bottom
b.百分比：0% 0% --左上角   100% 100% --右下角
c.具体像素：注意支持负数

背景的缩写方式：
background:颜色图片重复方向

3、方框属性(border/margin/padding)
border-width:边框宽度
border-style:边框样式(solid实线/dashed虚线)
border-color:边框颜色
缩写方式：border:宽度样式颜色

padding:border内的距离
margin:border外的距离
-------------------
padding:1px            四个方向一起更改
padding:1px 2px        上下各1像素，左右各2像素
padding:1px 2px 3px    上1像素，右2像素，下3像素，左2像素
padding:1px 2px 3px 4px 从上方开始，顺时针转动
方框属性的具体效果：
a.细框文本框：border-width:1px border-style:solid(宽度一定要是1像素，样式一定要是实线，颜色随意)
b.为按钮添加背景
为按钮添加背景图片；
查看图片的大小，将按钮的width和height改得和图片大小一样；
（上面两步修改完成后，有些电脑看不到任何变化，这时候需要把最后一步加上）
border改为0px

方框属性里面一共有四个具体的方向，分别是 left/right/top/bottom
4、列表属性
list-style:none/url(图片) 修改列表前面的图标。    float:left/right   浮动
5、层属性
修改层属性之前，先把这段代码加在网页的最上方，不然有些层属性没法正常显示
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

层的居中对齐：margin:0 auto
float:left/right 让本来要换行的层变得不换行，同时修改层的对齐方式
clear:left/right/both 让本来不换行的层变得换行

三、几种选择器(id>class>html)
1、html选择器(标签选择器)
   直接把"选择器"换成一个html标签，所有被这个html标签框起来的内容都会一起改变

2、class选择器(类选择器) ！！同一个类名可以使用多次
   声明阶段： .类名 {样式规则}
   使用阶段： <标签 class="类名">

3、id选择器    ！！同一个id名只能使用一次
   声明阶段： #名字 {样式规则}
   使用阶段： <标签 id="名字">