HTML基础知识

一、概述

HTML是一种描述性的标记语言，用于描述网页中内容的显示方式。
HTML（Hyper Text Markup Language）是超文本标记语言，也是全球广域网上描述网页内容和外观的标准。

二、语法

HTML最基本的语法是<标记符>内容

<html>
    <head>
        <meta>元信息
        <meta http-equiv=”refresh” content=”5;url=http://”
                                            跳转页面                       （5秒后跳转）
    </head>
<html>

<p>用于分段有align属性 center居中
<B>粗体</B>
<I>斜体</I>
<U>下划线</U>
<sup>上标</sup>
<sub>下标</sub>
<big>比原字号大一号</big>
<small>比原字号小一号</small>
<br>换行    nobr表示禁止自动换行
<hr width=”” size=”（仅像素，不能%）” color=”” align=”” noshade>水平线标记

三、头部标记

    DTD
        文档类型定义
    <head>头部标记</head>
        头部标签：
        <title></title>只能有一个
            定义网页标题，显示在浏览器的标题栏中
            有利于搜索引擎
        <meta>可以有多个
            <meta name="" content="">
                name用于在网页中加入一些网页的描述信息，网页的关键字等
                    如：Keywords、Description、Robots、Author、copyright
            <meta http-equiv="" content="">
                http-equivs属性用于在HTML文档中模拟HTTP协议的响应消息头
                    如：Content-Type、Refresh、Expires、Windows-Target、Pragma、Page-Enter和Page-Exit
        <base/>只能有一个
            基底网址标记
            用于设定浏览器中文件的绝对路径
            网页中的文件只需写文件的相对路径
        <link>可以有多个
            设置外部文件的链接标记
            用于确定本页面和其他文档之间的关系
    <body>主体标记</body>
        用于放置网页的所有显示内容
            属性：text、bgcolor、background、link、alink、vlink、topmargin、leftmargin
        只要可以用样式控制的，就不用HTML本身属性
        id name class style 通用属性，所有的元素都可以用

四、网页的特殊符号

&nbsp     空格
&     &
<          <
>        >
×   ×
§      §
©    ©
®      ®
™   ™

五、图片

GIF：最多可以使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，最大的优点是可以制作动态图像。可以将图像以交错的方式呈现。
JPEG：是一种图像的压缩格式。这种文件格式适合用于摄像、照片或者有连续色调图像的高级格式，这是因为JPEG文件包含数百万种颜色。
           还是一种压缩的非常紧凑的格式，在正常的情况下用肉眼分辨不出和GIF区别
           JPEG对于图标之类的，含有大色块的图像不是很适用，不支持透明图和动态图。
           如果图像需要全彩模式下才能表现的话，JPEG是最佳选择。
PNG：是一种非破坏性的网页图像格式，它提供了将图像以最小的方式压缩却又不造成图像失真的技术，它不仅具备了GIF图像格式的大部分优点，而且还支持48bit的颜色，更快的交错显示，支持透明图。
<img src=”sr.jpg” alt=”SR说明” border=”10” vspace=”10” hspace>
                                        图片说明   边框    垂直边距   水平边距

align属性：
bottom：表示图片的底部和当前行的文字底部对齐
top：表示图片的顶端和当前行的文字顶端对齐
middle：表示图片水平中线和当前行的文字中线对齐
left：表示图片左对齐，文字在图片右侧排列
right：表示图片右对齐，文字在图片左侧排列

六、列表

    在HTML中一共有三种列表，分别是无序列表、有序列表和定义列表：

    无序列表以符号作为分项标识。有三种：圆点、圆圈、方块，默认圆点。
       <ul></ul>无序列表，type属性默认disc（圆点）、circle（圆圈）、square（方块）

    有序列表有五种：数字、小写字母、大写字母、小写罗马数字、大写罗马数字，默认数字。
        <ol></ol>有序列表的父标签    <li></li>是子标签    start属性设置起始值
        <dir></dir>目录列表，显示效果与无序列表相同，也可用无序来实现
        <menu></menu>菜单列表，也与无序列表相同。

    定义列表由两部分组成：定义条件和定义描述，一般用于在网页上显示需要解释的名词。
        <dl></dl>定义列表的父标签 <dt></dt>子标签，放名词 <dd></dd>子标签，解释名词

七、表格

    表格的基本构成有三个标签：table表格标签、tr行标签、td单元格标签。
    <caption>table的子标签，表格标题</caption>
    <th>子标签用于设置表头</th>
    table属性：
        width
        height
        align
        bordercolor（边框色）
        cellspacing（单元格间隔）
        cellpadding（单元格与内格的间距）
        background
    tr属性：
        align（水平对齐）
        valign（垂直对齐，top、middle、bottom）
        height（表格高度）
        bordercolor
        bgcolor
        background（背景图）
    td属性：
        width
        height
        colspan（要水平横跨的列数）
        rowspan（垂直跨度）
        align
        valign
        bordercolorlight（亮边框属性）
        bordercolordark（描边框属性）

八、超链接

    超链接从使用的形式上可以分为外部超链接、内部超链接、下载链接、电子邮件链接、锚点链接等。
    超链接标签有一个属性叫target，用来控制打开方式
        -self 在当前页打开
        -blank 在新窗口打开页面

    锚点链接
        <a name="5220">描点名</a>
        <a href="#5220">锚点链接</a>

九、滚动显示

    <marquee></marquee>
    direction属性用来控制滚动方向，有四个值：up、down、left、right
    behavior属性用来设置滚动方式，有三个值：scroll循环滚动、slide只滚动一次、alternate来回滚动
    scrollamount属性设置滚动的快慢，以像素为单位
    scrolldelay属性设置滚动延迟
    loop属性设置滚动的次数
    width、height属性设置滚动范围

十、多媒体

十一、框架

    frameset叫框架集标签，类似于table标签，需要嵌套一个子标签才能使用
    一个frame子标签代表一个框架窗口
    frameset属性：
        rows（水平分割窗口，参数值就是每个框架的高度）例：<frameset rows="40%,60%">
        cols（垂直分割窗口）
        frameborder（有无边框，"yes" or "no"）
        framespacing（边框的宽度）
        bordercolor（边框颜色）
    frame属性：
        src
        noresize（禁止调整边框尺寸，无属性值）
        scrolling（属性值有3个，分别是"yes"显示、"no"隐藏、"auto"根据实际调整滚动条）
        name（子框架名称属性，用target链接）
    iframe浮动标签，无结束标记
    例：<iframe src="sr.html" name="sr" width="650" height="300" frameborder="no">

十二、表单

    动态网页指的是具有交互功能的网页。
    form标签用来创建表单，属性：
        action（用来指定表单数据提交到哪个地址进行处理）
        name（给表单命名，以区分表单）
        methon（用来定义表单以什么方式提交到服务器，
            get方式是将表单收集到的数据追加到请求页的URL地址中，这种方式只能传递有限的数据，而且不安全。
            post方式是常用的方式，post方式将所有的信息封装在HTTP请求中，是一种可以传递大量数据，而且比较安全的方式）
    input标签用来定义表单元素的标签，属性：
        type（radio单选、checkbox多选、text文本框、password密码）
    <input type="text" size="5" value="sr5220" maxlength="6">
    <select></select>下拉菜单，有name属性，用来指定下拉菜单名称，以便表单提交到服务器的时候取值，子标签<option></option>代表一个菜单项，其中value用来设置菜单项之后提交到服务器菜单值，selected属性设置默认值。
    <select multiple></select>列表项，size属性设置选项数量
    <textarea></textarea>文本域。
        cols属性用来设置文本域的宽度，以列为单位
        rows属性用来设置高度，以行为单位
    隐藏域：<input type="hidden" value="传送的数据" name="aa">
    按钮：<input type="submit" name="btn" value="SR无敌">
        submit为提交按钮，value设置显示文字
        reset为重置按钮
        image为图片按钮

上一篇：PHP入门

下一篇：无