HTML基础知识 存下来备用

 

Hyper Text Mark Language.

开源软件HTML Tidy可以对html文件进行查错：http://infohound.net/tidy/

一、head中标题、基础信息、元信息。

   1，<title>

   2，<meta>通过属性定义文件信息的名称，内容等，<meta>标记能够提供文档的关键字，作者及描述等多种信息。

定义页面关键字：向搜索引擎提供搜索的关键字，逗号分开  <meta name="keywords" content="">

定义页面描述：用来描述页面的主题<meta name="description" content="">

定义作者信息：<meta name="author"  content="">

限制搜索方式： <meta name="robots" content="">  all,  index,   nofollow,  noindex,    none

定义网页文字及语言：<meta http-equiv="content-type"  content="text/html";  charset="gb2312/  ISO-8859-1">

定义网页定时跳转：<meta http-equiv="refresh" content="跳转时间;URL=跳转地址">

二、body

文字格式：

1、bgcolor="背景颜色"

2、background = "*.jpg"

3、text ="文字颜色" 

4、link="颜色", alink="正在访问的链接颜色"  vlink="访问后的链接颜色"

5、margin:  topmargin="像素值80"  leftmargin="" 

6、设置字体大小颜色<font size="1--7 / -4-- +4"    face="字体"  color="颜色">

7、设置标题：<h1--6>,一号最大

8、字体放大减小  粗体斜体：<big> <small>  <strong>  <i/cite> 直接在文字段落中即可。

9、上标下标：在数学公式中平方立方等：<sup> <sub>

10、删除线下滑线：<strike/s>  <ins/s> 

段落格式：

1、普通换行<br> 单独一个即可

2、另起一段<p> 要配对，段落内容在中间。

3、文字居中、居左、居右：<p align="left/ center / right/ justify"></p>

4、文字方向：<bgo dir="ltr / rtl">

5、水平线：<hr width="" size="" color="" align= noshade>

6、不换行：<nobr>不换行的文字</nobr>

7、文字滚动：<marquee>文字在中间 

            滚动方向：direction="right, left, up, down" 

            滚动方式：behavior=""scroll/ slide/  alternate"

            滚动次数：loop=""

            滚动速度：scrollamount="每次滚动的像素"

            滚动延迟：scrolldelay=""

            滚动背景颜色：bgcolor=""

            滚动背景宽度高度：width, height

            滚动空白空间：hspace, vspace.

8、列表：

     无序:<ul type="circle/  disc/   square">  <li>

             定义列表标记：<dl><dt>定义条件</dt><dd>定义描述</dd>

    有序：<ol type="a/   A/    1/    i/     I   "   start=6><li>

9、多媒体：                                         

    图像：<img scr="" >

              宽度：width 高度：height

              边框：border

              对齐方式：align="middle/  top/  bottom/    left/    right/   texttop/   baseline"

              水平间距：vspace: hspace

              提示文字：alt=""

   背景音乐：

              <bgsound src=""

               循环播放次数：loop=

   视频：

             <embed src="" width=""  hight=""

             设置自动运行：autostart

             循环播放次数:loop

10、超链接

   <a href="链接地址">链接内容</a>

        name="链接名称"

        title="给链接加提示文字"

        target="指定链接的目标窗口   _self/   _blank/   _top/   _parent"

        accesskey="链接热键"

 锚点链接：<a name="锚点名称"></a>     <a href="#锚点名称">链接内容</a>

 链接到外部网站：http://

 E-Mail链接：<a href=“mailto:   edenrui@163.com?cc=""&subject=欢迎给我邮件” 

 脚本链接：<a href="javascript:window.close()">关闭窗口</a>

三、表格

1、表格标题：在tr前面<caption>表格标题</caption>

2、表头：用th代替td，会粗体显示

3、width= height= align="left/ right/ center"

4、边框：仅四周: border="边框宽度"，默认不显示  bordercolor

5、内框宽度：cellspacing.  表格内文字与边框间距：cellpadding

6、表格背景：bgcolor, background

7、设置行属性：height,  bordercolor,  bgcolor,   align="left/  right/  center"    valign=" top/  middle/   bottom"

8、设置td属性：width, height,   colspan=3：水平跨度，跨的列数。 rowspan=跨的行数。  align,  valign, bgcolor, bordercolor,   

9、表格结构：<thead>  <tbody>  <tfoot>,中间刻有 : bgcolor, align,  valign,等

四、表单：

1、<form action="mailto:edenrui@163.com" method="get/  post"> get表单内容附加在URL地址后面，提交信息最多不超过8192个字符。 post表单内容在表单主体中，一起到服务器。

2、编码方式：enctype="Text/plain     application/x-www-form-urlencoded      multipart/form-data"

3、目标显示方式：target=" _blank/    _self/   _parent/    _top"

4、插入表单对象，text,  password,  radio,   chechbox,   button,  submit,  reset,  image,   hidden,   file,  hidden

5、菜单项：<select name="">  <option value="" selected>显示文字</option>

6、列表项：<select name="" size="要显示的列表项数" multiple> <option>

7、文本域：textarea: <textarea name=   cols="长度50" rows=“列数5”>

五、框架结构网页

1、<frameset rows="框架窗口的高度，框架窗口的高度，*"   cols="框架窗口的宽度，框架窗口的宽度，*"

2、框架集边框：frameborder="0/ 1" 框架集边框宽度：framespacing="0" 框架集边框颜色：bordercolor="" 

3、设置框架：<frame src="页面文件的源地址" 网页文件、图片地址，地址类型是相对地址、绝对地址、具有锚点的链接地址。 name=""  noresize  框架边框与页面内容的水平边距: marginwidth

     框架边框与页面内容的垂直边距：marginheight。  设置框架滚动条：scrolling="yes/ no/ auto"   

4、 不支持框架标记<noframes>替换显示的内容</noframes>

5、浮动框架：<iframe 基本同frame

6、设置普通框架结构的链接 

       <li><div align="center"><a href="2.html#1" target="main"> 基本简介</a></div></li>
       <li><div align="center"><a href="2.html#2" target="main">法定假日</a></div></li>

六、XHTML  eXtensible HTML 

1、目的实现HTML向XML的过渡。所有XML处理器都支持XHTML。

2、文档类型声明：

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3、html元素和名字空间：<html xmlns="http://www.w3.org/1999/xhtml">

4、严格嵌套，标签名都是小写，除了form外 name属性不能使用 id代替， 每一个属性都应有一个值 没有值的属性用自己名称作为值 checked

5、将HTML转为XHTML: 首行添加DOCTYPE， 查找页面所有大写标签改为小写，   所有属性值要被双引号括起来，   不允许有空标签<br/><hr/>，

      在W3C网站有一个开源软件HTML Tidy，可以帮助从HTML升级到XHTML。http://infohound.net/tidy/，可以在线纠正错误

七、CSS页面布局与案例  cascading style sheet

1、语法结构：选择符{样式属性： 取值； 样式属性：取值；。。。} 选择符指一组样式编码所要针对的对象，可以是一个XHTML标签，或是定义了特定id或class标签， 如#lay  <div id="lay">

2、添加css方法：链接外部样式表，内部样式表，导入外部样式表，内嵌样式。

                 外部样式表：<link rel=stylesheet  type= text/css   href=slstyle.css> 在head中。

                 内部样式表：<style type="text/css">

                                     <!--

                                      bogy{

                                                  margin-left:0px;

                                             }

                                      -->      

                                     </style>

                 导入外部样式表：

                                     <style type="text/css">

                                     <!--

                                      @import style.css    

                                     </style>

          

                  内嵌样式表：<table style=" color:red; margin-right:0px">

3、字体属性：

      字体类型：font-family： "字体"

      字体大小：font-size：大小值15px

      字体倾斜：font-style：  normal/   italic/    oblique  

      字体加粗：font-weight: normal/  bold/  bolder/   lignther/   number(100-900)

      变体属性：font-variant: normal/  small-caps(将小写转为大写)

      文字修饰：font-decoration: none/  underline/  overline/   line-through/  blink(闪烁文字效果)

      字体复合属性：font:

4、文本属性：

     单词间隔：word-spacing:normal/  数值(10pt 10个点数)

     字母间隔：letter-spacing:取值10px

     水平对齐：text-align: left/ right/ center/ justify

     垂直对齐：vertical-align: baseling/  top/  middle/  sub(文字的下标)/  super(文字的上标)

     大小写转换：text-transform: none/  lowercase(使每个单词第一个字母大写)/   uppercase(使每个单词所有字母大写)/  capitalize(使每个字的所有字母小写)

     文本缩进：text-indent：缩进值(长度值或百分比，5em)

     文本行高：line-height：长度，倍数，百分比

     文本空格：white-space：值normal(原文中连续多个空格会被合并)/  pre(原文中的空格和换行符被保留)/  nowrap(强制在同一行内显示所有文本，直到文本结束或遇到<br>);

5、边框属性：

     边框样式：border-style:   border-top-style:   border-bottom-style:   border-left-style:   border-right-style:

                    none/   dotted/   solid/    dashed(虚线边框)/  double/  groove(边框具有立体感的沟槽)/  ...

     边框宽度：border-width:

     边框颜色：border-color  border-top-color  border-bottom-color  border-left-color   border-right-color

     复合边框：border

     

6、列表属性：

     列表类型：list-style-type: dics()/  circle/  square/   decimal/  lower-alpha/   upper-alpha/  none/  lower-roman/   upper-roman

     符号图像：list-style-image: none/  url(图像路径)

     列表位置：list-style-position: outside/  inside

     列表复合：list-style

7、定位属性：

     position: static/  absolute/  fixed/   relative

                  absilute需要 top, bottom, left, right辅助定位。 auto/  长度值/  百分比

                  fixed表示页面滚动时，元素保持在浏览器内。

     层叠顺序：z-index:auto/  数字(越大表示在上层)

     浮动属性：float:none/ left/  right   img{float:right;}    left表示浮动对象在左边，none表示浮动对象

     清除属性：clear: none/ left/  right/  both   none允许两边都有浮动对象，left不允许左边有浮动对象。

     宽度和高度：利用width和height可以设定层的宽度和高度

     溢出：当层的内容超出所能容纳的范围时，visible(不裁剪内容也不加滚动条)/   auto(必要时会裁剪或加滚动条)/  hidden(不显示)/  scroll(加滚动条)

     显示属性：visibility: inherit/   visible/   hidden

8、边界和填充属性：

     边界属性设置元素周围的边界宽度，填充属性设置边框和元素内容之间的间隔数。

     margin-top/  margin-bottom/  margin-left/   margin-right

     padding-top ...

     复合属性：margin    padding：上下左右四个值

9、背景属性

     背景颜色或者图像

     background-color:

     background-image:url(路径)

     背景重复：用图像时，设置背景图像重复方式： no-repeat/  repeat/   repeat-x/  repeat-y

     背景附件：background-attachment: scroll/ fixed  设置背景图像是随对象滚动还是固定的。

     背景复合：background

10、光标属性：

     cursor: auto, 形状取值，url(图像路径)

               default, hand, crosshair, text, wait,...

11、滤镜：略 filter

八、使用CSS+DIV布局网页

1、结构、表现、行为分离。Web标准。

2、一列自适应，width height 设为百分比。