码迷,mamicode.com
首页 > Web开发 > 详细

html 笔记

时间:2014-08-13 00:31:54      阅读:368      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   使用   os   io   文件   数据   

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
空格:&nbsp;
版权:&copy;      


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>  <!-- 将td换成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="名字">  


4、伪类选择器 (四个伪类选择器一定要按顺序写,记忆方式"爱恨原则(love/hate)")
a:link     : 没有被点击的超链接
a:visited  : 被点击过的超链接
a:hover    : 鼠标悬浮在超链接上面时
a:active   : 超链接被按下的时候

html 笔记,布布扣,bubuko.com

html 笔记

标签:style   http   color   使用   os   io   文件   数据   

原文地址:http://www.cnblogs.com/bella-life-blog/p/3908555.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!