zoukankan      html  css  js  c++  java
  • 01:HTML

    HTML概述

    HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。

    浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!

    文档树:

    Meta(metadata information)

    提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

    1、页面编码(告诉浏览器是什么编码)

    < meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

    2、刷新和跳转

    < meta http-equiv=“Refresh” Content=“30″>
    
    < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

    3、关键词

    <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部">

    4、描述

    <meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全,最精彩的汽车新闻、行情、评测、导购内容,是提供信息最快最全的中国汽车网站。">

    5、IE兼容

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    Title

    <title>你网址的头信息</title>

    Link

    css

    < link rel="stylesheet" type="text/css" href="css/common.css" >

    icon

    < link rel="shortcut icon" href="image/favicon.ico">

    Style

    在页面中写样式

    < style type="text/css" > 
    .bb{ 
    background-color: red; 
    } 
    < /style>

    Script

    1、引进文件

    < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

    2、写js代码

    < script type="text/javascript" > ... </script >

    给个完整的实例:

    <!DOCTYPE html>
    <html lang="en"> <head> <meta charset="UTF-8"> <!--<meta http-equiv="Refresh" Content="3">--> <!--<meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn"> <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/> <meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全,最精彩的汽车新闻、行情、评测、导购内容,是提供信息最快最全的中国汽车网站。"/> <title>小男孩</title> </head> <body> </body> </html>

    常用标签

    标签一般分为两种:块级标签 和 行内标签

    1、a、span、select 等
    2、div、h1、p 等
    各种符号

    例如:版权所有:©等 ;http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

    下面介绍主要的标签:

    1、p是段落标签(默认段落之间是有间隔的)、br是换行标签、hr是画个横线、H1~H6是标题;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>asdfasdfasdasdfasdfasdfasdfasdfasdfasdfasdfasd</p>
    <p>asdfasdfasdasdfasdfasdfas<br>dfasdfasdfasdfasdfasd</p>
    <a href="http://www.baidu.com">百度</a>
    <h1>fuckme</h1>
    <h2>fuckme</h2>
    <h3>fuckme</h3>
    <h4>fuckme</h4>
    <h5>fuckme</h5>
    <h6>fuckme</h6>
    
    <span>fuckyou</span>
    <span>fuckyou</span>
    <span>fuckyou</span>
    
    <div id="d1" style="position: fixed; bottom: 0; right: 0;">看我在什么地方</div>
    </body>
    </html>

    具体展示页面如下:

    2、a标签,主要功能是:打开连接(_black表示在新的页面打开)和做锚点

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <title>Title</title>
    </head>
    <body>

      <a href="http://www.baidu.com" target="_blank">百度</a> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height:600px;">第一章的内容</div> <div id="i2" style="height:600px;">第二章的内容</div> <div id="i3" style="height:600px;">第三章的内容</div> <div id="i4" style="height:600px;">第四章的内容</div> <hr> </body> </html>

    3、input标签、table标签、ul、ol、dl标签:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Input</title>
    </head>
    <body>
    <form action="" enctype="multipart/form-data">
        <input type="text" name="user">
        <input type="password" name="pwd">
        <hr>
        男:<input type="radio" name="gender" value="1">
        女:<input type="radio" name="gender" value="2" checked="checked">
        <hr>
        形意:<input type="checkbox" name="favor" value="1">
        八卦:<input type="checkbox" name="favor" value="2">
        太极:<input type="checkbox" name="favor" value="3">
        <hr>
        <input type="file" name="f1">
        <hr>
        <select name="city" id="c1">
            <option value="1">南京</option>
            <option value="2">北京</option>
            <option value="3" selected="selected">上海</option>
        </select>
        <br>
        <textarea name="t1" id="t1" cols="30" rows="10"></textarea>
        <input type="submit" value="submit">
        <input type="reset" value="reset">
        <input type="button" value="button">
    </form>
    <hr>
    <table border="1">
        <thead>
            <tr>
                <th>11</th>
                <th>22</th>
                <th>33</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="2">2列</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td rowspan="2">2行</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    
    </table>
    
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    <ol>
        <li>序列</li>
        <li>序列</li>
        <li>序列</li>
    </ol>
    
    <dl>
        <dt>1</dt>
            <dd>11</dd>
            <dd>11</dd>
            <dd>11</dd>
        <dt>2</dt>
            <dd>22</dd>
            <dd>22</dd>
            <dd>22</dd>
    </dl>
    
    </body>
    </html>

    4、img、空格、大小于号、fieldset及label(及包括点label跳到对应的input框):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <form action="https://www.sogou.com/web">
        <input type="text" name="query">
        <input type="submit" value="搜索">
    </form>
    
    <p>&gt;&nbsp;&nbsp;&lt;</p>
    
    <fieldset>
        <legend>登陆</legend>
        <label for="i1">账号:</label>
        <input id="i1" type="text" name="user">
        <br>
        <label for="i2">账号:</label>
        <input id="i2" type="text" name="passwd">
    </fieldset>
    
    <img src="test.gif" title="美女" alt="fuckme">
    
    </body>
    </html>

    HTML的相关知识就先这样吧……

  • 相关阅读:
    Ozone数据探查服务的增量数据更新机制
    HDFS的块Topology位置重分布
    聊聊更为高效的ACL认证方式
    YARN Federation的架构设计
    Confluence 6 用户宏示例
    Confluence 6 用户宏示例
    Confluence 6 用户宏示例
    Confluence 6 用户宏最佳实践
    Confluence 6 编辑和删除用户宏
    Confluence 6 创建一个用户宏
  • 原文地址:https://www.cnblogs.com/zheng-weimin/p/11409353.html
Copyright © 2011-2022 走看看