首页 > 代码库 > html基础汇总

html基础汇总

一:HTML

         是Internet上用于设计网页的主要语言。网页包括动画,多媒体,形等各种复杂的元素,其基础架构都是HTML。

标记语法:

HTML用于描述功能的符号称为“标记”。

1.所有标记都要用尖括号(<>)括起来,这样,浏览器就可以知道,尖括号内的标记是HTML命令;

2.对于成对出现的标记,最好同时输入起始标记和结束标记;

3.采用标记嵌套的方式可以为同一个信息应用多个标记;

4.在代码中,不区分大小写;

5.任何空格或回车在代码中都无效,插入空格或回车有专用的标记,分别是&nbsp、<br>;

6.标记中不要有空格,否则浏览器无法识别;

HTML文件的整体结构:

文件头部内容:

  一个完整的HTML文件包括头部文件和主体文件。头部标记:<head></head>,主体标记<body></body>。页面标题标记<tilte></title>位于头部标记<head></head>之间。

  设置基底网址<base>:基底网址用于设定浏览器中文件的路径,<base>标记一般用于设计文件URL地址。一个HTML文件只能有一个<base>标记,同时该标记必须放于头部文件中。

  基本语法:

  <html>

    <head>

      <base href="http://www.mamicode.com/文件路径" target="目标窗口">

    </head>

    <body>

    </body>

  </html>

  herf用于设置网页文件链接的地址,target用于设置页面显示的目标窗口。

设置基准文字<basefont>:

  基准文字:指制作网页前,先进行网页文字的基本定义,包括字体;字号、颜色以及其他关于字体的定义,当网页中的文字没有另外定义样式时,就会自动套用网页定义的基准字体。

  基本语法:

  <html>

    <head>

      <basefont face="" size="" color="">

    </head>

    <body>

    </body>

   </html>

  face属性用于设置字体的名称,可以是宋体、隶体、楷体等; size属性用于设置字号的大小;

  color用于设置字体的颜色。

 

定义元信息<meta>:

  <meta>标记主要功能是定义页面的一些信息。

  <meta>标记通过一些属性来定义文件的信息,例如,文件的关键字、作者信息、网页过期时间等,HTML文件的头部文件可以有多个<meta>标记,<meta>标记不是成对的标记。

  基本语法:<meta http-equiv="" name="" content="">

  注意http-equiv属性用于设置一个http的标题域,但确定值由content属性决定,name属性用于设置元信息出现的形式,content属性用于设置元信息出现的内容。

  设置页面关键字——keywords:

    网页中的关键字主要是为搜索引擎服务的,有时为了提高网站被搜索引擎搜到的机率,需要设置多个跟网站主体相关的关键字。 基本语法:

    <meta name="keywords" content="value">

    value用于说明为该网页定义的关键字,可以是多个关键字。

  设置页面过期时间——espires

  设置页面过期时间或者跳转,这就需要设置网页元信息的http-equiv属性和content属性来设置网页的过期时间。

  基本语法:<meta http-equiv="expires" content="value">

  expires用于设计页面过期时间,content属性设置具体过期时间。

主体内容<body>:

  1.设置页面背景——bgcolor

  基本语法:<body bgcolor="value">

  2.设置页面边距——topmargin(到顶端)、leftmargin(到左边)、rightmargin(到右边)、bottomnargin(到底边)

  3.设计正文颜色——text

  利用text属性可以给页面中无链接的文字设置颜色

  基本语法:<body text="">...</body>

 

文字与段落:

  一.编辑内容

    1.添加文字

      基本语法:<body>所写文字</body>;

    2.添加注释<!....-->或<comment>;

    3.添加空格——&nbsp;

    4.添加删除线<strike>;

      给需要添加删除线的文字使用成对的<strike></strike>标记,就可以添加删除线;

      基本语法:<body><strike>在此输入要添加删除线的文字</strilke> </body>

    5.插入特殊符号

  二.文字效果

   1.编辑网页文字样式<font>

    主要是设置文字的字体、字号、颜色等属性,利用<font>与<basefont>标记都可以实现;

      基本语法:<body><font face="" size="" color=""></font></body>

    face设置字体,

   2.设置文字标注<ruby>

    在HTML文件中,有时需要对某个字、词或者某段进行说明,可以通过添加文字的标注标记来完成对网页中文字的说明;

     基本语法:<ruby>需要被说明的文字<rt>文字的标注</rt></ruby>

三.文字修饰

1.简单修饰文字

  基本语法:

  <body>

    普通文字的显示<br>

    <b>加粗的文字</b><br>

    <i>斜体文字</i><br>

    <u>添加下划线的文字</u><br>

  </body>

  成对<b></b>表示加粗文字显示;<i></i>表示斜体文字显示;<u></u>表示给文字添加下划线;

2.确定文字上下标——<sup>/<sub>

  基本语法:

    <body>

      <sup>上标内容</sup><br>

      <sub>下标内容</sub><br>

     </body>

3.设置地址文字<address>

  在网页中添加地址文字,是为了更方便地突出显示联系方式,将联系人的地址信息突出显示。

  基本语法:

  <body>

    <address>请在此添加地址信息</address>

  </body>

4.设置等宽文字<tt>、<samp>、<code>、<kdb>

  基本语法:

  <body>

    <tt>打字机风格显示</tt>

    <code>等宽文字设置内容</code>

    <samp>等宽文字设置内容</samp>

    <kdb>键盘输入</kdb>

   </body>

四.段落<p>

  基本语法:

    <body><p>...</p></body>

  在HTML文件中,<p>标记是一个段落标记符号,利用<p>标记可以对网页的文字信息进行段落的定义,但不能进行段落格式的定义。

1.回车<br>

  强制换行

2.换行与不换行<wbr>/<nobr>

  在HTML中,成对的<nobr></nobr>标记表示不换行,但是在<nobr>标记中。插入成对的<wbr></wbr>标记后,<wbr></wbr>之间的内容会被强制换行。

3.预格式化<pre>

  在HTML中,利用成对的<pre></pre>标记对网页中文字段落进行预格式化,在输入过程中,按键盘上的回车键,就可以生成一个段落。

4.居中显示文字<center>

  利用<center></center>标记,对齐标记之间在内容将会在网页中居中显示。

5.设置段落缩进<blockqute>

  对文档进行编排时,利用设置段落缩进,可以增加段落的层次效果。

  基本语法:<body><blockqute>需要缩进的内容</blockqute></body>

  利用一对<blockqute></blockqute>标记可以缩进5个字符。

6.忽略HTML标记——<xmp>

  在HTML中,利用成对的<xmp></xmp>标记可以忽略HTML标记的作用,包括标记在内的所有内容都会直接显示在页面上。

  基本语法:<body><xmp>...</xmp></body>

7.插入并设置水平线<hr>

  属性:width 设置水平线宽度,可以是像素,也可以是百分比;size 设置水平线高度;noshade 设置水平线无阴影;color 设置水平线颜色;align 设置水平线居中对齐

  基本语法:<body><hr width=""size=""noshade=""color=""align="" > </body>

 

建立和使用列表:

一.列表类型

  列表:在网页中将项目有序或者无序罗列显示。

  列表类型 标记符号

  定义列表 dl

  无序列表 ul

  目录列表 dir

  菜单列表 menu

  有序列表 ol

1.插入定义列表<dl>

  基本语法:

  <dl>

    <dt>名称</dt>

    <dd>说明</dd>

    <dd>说明</dd>

      ...

  </dl>

  <dt>标记定义了组成列表名称部分,同时此标记只在<dl>标记中使用;<dd>用于解释说明<dt>标记定义的项目名称,此标记也只能在

  <dl>标记中使用;

2.插入无序列表<ul>

  基本语法:

    <ul>

      <li>项目名称</li>...

      <li>项目名称</li>...

      <li>项目名称</li>...

        ...

    </ul>

   使用成对<ul></ul>标记可以插入无序列表,但<ul>标记之间必须使用成对<li></li>标记添加到列表项值。

2.插入目录列表<dir>

    只需在使用目录的地方插入成对的目录列表标记<dir></dir>,就可以很简单地完成目录列表的插入,但<dir>标记之间必须使用成对<li> </li>标记添加列表项值。

    基本语法:

      <dir>

        <li>项目名称</li>...

        <li>项目名称</li>...

        <li>项目名称</li>...

            ...

      </dir>

4.插入菜单列表<menu>

    在HTML文件中,只要在需要使用目录的地方插入成对的菜单列表标记<menu></menu>,就可以很简单地完成菜单列表的插入,但<menu>标记之间只需要单个<li>标记添加列表项值。

    基本语法:

      <menu>

        <li>项目名称...</li>

        <li>项目名称...</li>

        <li>项目名称...</li>

           ...

        </menu>

5.插入有序列表<ol>

  利用成对的<ol></ol>标记可以插入有序列表,但<ol>标记之间必须使用成对<li></li>标记添加列表项值;当我们需要改变列表符号时,需要在<ol>中输入Type属性,进行属性的设置。Type属性 属性值 说明

  1 数字1、2...

  a 小写字母a、b...

  A 大写字母A、B...

  i 小写罗马数字i,ii,iii...

  I 大写罗马数字

  基本语法:

    <ol Type="">

      <li>项目名称</li>...

      <li>项目名称</li>...

      <li>项目名称</li>...

         ...

    </ol>

二.嵌套列表

1.嵌套定义列表

  在需要使用嵌套定义列表的地方,插入成对的<dl></dl>,在一对<dl></dl>标记之间使用多个<dt>和<dd>标记。

  基本语法:

    <dl>

      <dt>名称</dt>

      <dd>说明</dd>

      <dd>说明</dd>

      ````

    </dl>

  多个<dt>与<dd>的交替使用,构成了定义列表的嵌套。

2.嵌套有序与无序列表

  在无序列表<ul></ul>标记之间插入有序列表<ol>,就可以完成嵌套有序与无序列表的插入。

  基本语法:

  <ul>

    <li>项目名称</li>

    <ol>

      <li>项目名称</li>

      <li>项目名称</li>

      <li>项目名称</li>

    </ol>

    <li>项目名称</li>

    <ol>

      <li>项目名称</li>

      <li>项目名称</li>

    </ol>

  </ul>

html基础汇总