HTML从入门到放弃

HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

div一般都是用来包含块的，p标签一般都是用来包含段落文字等等，可以用div内包含p，也可以用 div内包含div。

div就相当于一页纸，p就相当于一段文字。

HTML head

<!DOCTYPE HTML>
<html>
<head>
    <!--页面编码-->
    <meta charset="UTF-8" />
    <!--页面关键字,方便搜索引擎收录-->
    <meta name="keywords" content="alex oldboy" />
    <!--页面描述-->
        <meta name="description" content="oldboy oldgirl edu" />
    <!--页面兼容性-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
    <!--页面自动跳转-->
    <!--meta http-equiv="refresh" content="3; url=http://www.baidu.com" /-->
    <!--页面图标-->
    <link rel="shortcut icon" href="favicon.ico" />
    <!--页面标题-->
    <title>oldboyedu</title>
</head>
<body><h1>Hello oldboy</h1></body>
</html>

a标签

两个功能：

1、跳转 <a href="http://www.baidu.com">百度</a>

2、锚点 <a href="#c1">第一章</a>

    <a href="http://www.oldboyedu.com">oldboy官网</a>
    <a href="#c1">第一章节</a>
    <a href="#c2">第二章节</a>
    <a href="#c3">第三章节</a>

    <div id="c1" style="height: 700px">第一章节</div>
    <div id="c2" style="height: 700px">第二章节</div>
    <div id="c3" style="height: 700px">第三章节</div>

白板标签

两个标签：

1、 <div>块级标签</div>

2、 <span>内联标签</span> （内联标签变成块之前是不可能设置宽高的（换句话说设置宽高也不会显示宽高））

Table表格

    <table border="1">
        <thead>
        <tr>
            <th>h1</th>
            <th>h2</th>
            <th>h3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>hello1</td>
            <td colspan="2">hello2</td>
        </tr>
        <tr>
            <td>world1</td>
            <td>world2</td>
            <td rowspan="2">world3</td>
        </tr>
        <tr>
            <td>oldboy1</td>
            <td>oldboy2</td>
        </tr>
        </tbody>
    </table>

效果图：

Form表单 Input标签 Option标签 Select标签 A标签 Image标签

<form action="http://192.168.12.120:8000/index/" method="post">
    用户名
    <input type="text" name="username" value="alex" />
    密码
    <input type="password" name="password"/>
    <div>
        <!--单选框radio-->
        <input type="radio" name="gender" value="1" />男
        <input type="radio" name="gender" value="2" />女
    </div>
    <div>
        <!--多选框 checkbox-->
        <input type="checkbox" name="hobby" value="11" />读书
        <input type="checkbox" name="hobby" value="12" />电影
        <input type="checkbox" name="hobby" value="13" />旅游
    </div>
    <div>
        <select name="city">
            <!--select下拉框-单选-->
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
        <select name="tec" multiple>
            <!--select multiple下拉框-多选-->
            <option value="it">电脑</option>
            <option value="ms">美术</option>
            <option value="cg">唱歌</option>
        </select>
    </div>
    <input type="submit" name="submit" value="submit" />
</form>

自动选中checked="checked"

文本域 
<textarea name="description">description</textarea>
上传文件，form标签中必须设置enctype="multipart/form-data"
<input name="image" type="file" />

通常a标签和img标签嵌套使用
<a href="http://www.baidu.com">
    <img src="image.jpg" alt="image qq" title="image image"/>
</a>

未完待续...

posted @ 2017-02-04 07:18 Vincen_shen 阅读(201) 评论(0) 收藏举报

刷新页面返回顶部