HTML

最新推荐文章于 2024-10-04 06:11:34 发布

wsw_zq

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量91

点赞数

分类专栏： Web 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/wsw_zq/article/details/84052507

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、什么是html？
    hypertext markup language,即超文本标记语言。
    由浏览器解释执行，用于生成一个显示页面。
    html文件的后缀是.html /.htm
2、html的基本结构
    html文件由标记和标记内容构成。
    标记有两种：单标记双标记
    根标记是html
    head标记:
        当中内容与显示无关

     如：
        title:标题
        script:插入脚本(javascript)
        style:插入样式(css)
        link:引入样式(css文件)
        meta:模拟http响应头(服务器向浏览器发送的一些指令,比如服务器可以要求浏览器按指定的编码显示页面)
    body标记:
        与显示有关
        <a>:链接
        <table>:表格
        <ul>:列表
        <form>:表单
        <img>:图像
3、重点标记
    (1)链接
    A.基本语法

<a href="html02.html">html02</a>
<a href="#">html02</a><br>
 <a href="html02" target="_blank">html02</a>

    target:链接中的内容在哪儿打开
    _blank:在新的窗口中打开
    _self:在当前窗口打开（默认）
    B.使用图像作为链接地址

  <a href="html02.html"><img src="images/cp.gif" border="0"></a>

C.发邮件

<a href="mailto:chengzh@tarena.com.cn">mail to me</a>

D.锚点(一个页面内容的跳转)
命名一个锚点

<a name="top">top</a>

跳转到锚点

<a href="#top">to top</a>

E.使用热点
将一个图片划分成多个区域，每一个区域表示一个链接。

  <img src="index04.jpg" width="500"  height="500" border="0" usemap="#m1" />
        <map name="m1" id="m1">
            <area shape="rect" coords="…" href="#" />
            <area shape="circle" coords="…" href="#" />
            <area shape="poly" coords="…" href="#" />
       </map>

            当shape="rect"（矩形）时，coords的值为左上角和右下角的坐标值; 当shape="poly"（多边形）时，
            为各顶点值; 当shape="circle"（圆形）时，为圆心坐    标值和半径值。 coords值依照图片大小的不同
            和所希望链接区域的不同而有所不同
        </map>
    F、链接中的伪样式
    (2) 表格
    A.基本语法

    <table>
        <tr>
            <td></td>
        </tr>
    </table>

    重要属性：
    width: 60% 表示占父标记宽度的60%
    cellpadding:内边距，单元格的内容与单元格之间的距离
    cellspacing:外边距，单元格之间的距离
    一般情况下，都设置为0。
    B.不规则的表格
    colspan:合并列
    rowspan:合并行
    C.表格的嵌套
    D.表格的其它形式
        caption:标题
        thead:表头
        tfoot：表脚
        tbody:表体
        一个表格，只能有一个表头和表脚，表体可以有多个。
    E.表格内容的居中
        水平居中:align:left/center/right
        垂直居中:valign:top/middle/bottom
    (3)列表
        A.无序列表

        <ul>
            <li></li>
        </ul>

B.有序列表

        <ol>
            <li></li>
        </ol>

        C.列表嵌套
    (4)表单
        A.什么是表单
        用于收集用户信息（用户通过表单向服务器提交数据）。
        B.表单的基本结构
            <form action="abc.do" method="">
                input标记
                非input标记
            </form>
            action属性：表单提交的内容由哪个程序来处理
            method属性:表单提交的方式
        C.input标记

<input type="text"/ "password" / "button" / "checkbox" /"radi/"hidden"/ "file"/>

        D.非input标记
            select既可用于下拉列表，也可以用于多选框(multiple)
            textarea(用于显示一个文本区域)，button(按钮) ，img(图片)
    4、框架
        (1)什么是框架
        将一个窗口划分成多个子窗口，每一个子窗口都可以放置一个页面。
        frameset与iframe的区别:
        frameset页面中不能出现body，而iframe可以用在body标记里。
    5.xhtml与html的关系
        xhtml:可扩展的超文本标记语言
        html是一种语法宽松的语言,大小写不敏感，一些错误会忽略,w3c对html语法做了进一步的要求，即按照xml语法的要求重新定义了html标记。

按照以下方式来写html第一行，写文档类型声明(可以省略)
XHTML 过渡型:

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

XHTML 严格型:

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

HTML严格型 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML松散型:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

        接下来，按照以下规则写html:
        (1)标记有开始，也有结束,对于单标记 <br/> <hr/>
        (2)标记层层嵌套
        (3)全部用小写
        (4)属性值要用双引号引起来

        在页面当中，如果有'空格'( )' 引号'("),'&' (&) '>' (>) '<'(<)，
        要使用相应的实体来代替，主要的目的是避免浏览器解析出错。

    6、css
    (1)什么是css?
    级联样式表 cascading stylesheet,为页面提供展现的方式（即数据以何种方式来显示）
    (2)w3c推荐页面设计的标准
        数据与结构：html
        样式（外观）:css
        行为:javascript
    (3)css的基本语法
        选择器{
            属性名:属性值;
            ...
        }
    (4)选择器
        A.标签选择器(选择器的名称是一个标签的名字)
            标记的名称{
            }
        B. class选择器
            .任意的名称{
            }
            或者
            标记名称.任意的名称{
            }
        C.id选择器
            #任意的名称{
            }

    (5)样式的继承
        子标记会继承父标记的样式