html 学习总览

最新推荐文章于 2023-12-15 20:41:56 发布

百起

最新推荐文章于 2023-12-15 20:41:56 发布

阅读量554

点赞数

分类专栏： html 文章标签：网页开发技术标记

本文链接：https://blog.csdn.net/ygy162/article/details/46965393

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

web客户端技术:
HTML,css,JavaScript

xml,reflect,thread

web服务器端技术:
servlet,jsp

ajax,Jquery

===HTML====
1.html
(hypetext markup language):超文本的标记语言
是一种开发网页的技术,浏览器来解析.
html的文件以.html或.htm为后缀.

html是由W3C组织制定规则.
学习网站:www.w3school.com

2.html的基本格式

<!--根标签-->
    <html>
        <!--文件本身相关信息-->
        <head></head>
        <!--描述显示数据的信息-->
        <body></body>
    </html>

3.head中的标签
3.1 title标签
显示页面标题
3.2 <meta>标签

    <meta http-equiv="Content-Type" content="text/html;charset=GBK">

3.3 style,link,script

4.body中的标签
4.1 链接<a>
1)基本使用
<a href="" target="" title="">显示内容</a>
href属性:指定跳转路径
target属性:
_self:在当前页面做跳转
_blank:在新窗口中做跳转
title属性:鼠标放到链接上的描述信息
2)使用图片作为链接

<a href=""><img src="图片地址"/></a>

    3)使用锚点
    指定同一个页面跳转

<a name="top">top</a>
        <a href="#top">回到顶部</a>
        4)热点(了解)
        <img src="./images/hot.png" usemap="#m2">
        <map name="m2">
                <area shape="rect" coords="407,20,560,77" href="qiye.html"></area>
            <area shape="rect" coords="580,22,734,77" href="geren.html"></area>
        </map>

4.2 列表
    1)无序列表

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

    2)有序列表

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

    3)列表嵌套
    ...
4.3 表格
    1)不规则的表格

<table align="" width="" border="" cellpadding="" cellspacing="">
            <tr><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td></tr>
        </table>

    width属性:指定表格宽度
    border属性:边框
    cellspacing属性:单元格之间的距离
    cellpadding属性:单元格边框与里面的内容之间的距离
    align属性:表格在水平方向的方式 left/center/right
    colspan属性:跨列合并
    rowspan属性:跨行合并

    valign属性:垂直摆放位置

     2) 完整写法

<table align="" width="" border="" cellpadding="" cellspacing="">
            <caption></caption>
            <thead><tr><td></td></tr></thead>
            <tfoot><tr><td></td></tr></tfoot>
            <tbody><tr><td></td></tr></tbody>
        </table>

    caption:标题       0或者1
    thead:表头         0或者1
    tfoot:表脚       0或者1
    tbody:表体         1或以上
     3)表格嵌套

4.4 表单
    收集用户数据,如登录,注册
    <form></form>

    4.4.1 input标签
        <input type="" name="" value=""/>   
    type属性:
        hidden 隐藏
        text   文本输入框    
        password 密码输入框
        radio    单选
        checkbox 多选
        submit   提交
        reset    重置
            button   按钮
        file     文件

    name属性:用于往服务器发数据时生成请求参数
    value属性:默认值

    4.4.2 非input标签
      下拉框:
        <select name=""  multiple="multiple">
            <option value="">显示内容</option>
        </select>

      多行文本框:
        <textarea cols="" rows=""></textarea>
        cols属性:占多少列
        rows属性:占多少行

5.框架
5.1 frameset和frame

<frameset rows="20%,*">
            <frame name="topFrame" src="top.html"/>
            <frameset cols="30%,*">
                <frame name="leftFrame" src="left.html"/>
                <frame name="mainFrame" src="main.html"/>
            </frameset>
        </frameset>

    rows属性:窗口以行划分
    cols属性:窗口以列划分
    src属性:指定的加载URL
    name属性:窗口名称
注意:
    frameset不和body同时使用

5.2 iframe
    能和body同时使用
    <iframe src="" width="" border="" height=""/>