HTML基础

1、head标签

meta
title
link
style
script

2、body标签

图标
p标签
br标签
hr标签
input系列

　　　　(1) 文本域

　　　　　　input type="text"

　　　　(2) 密码

　　　　　　input type="password"

　　　　(3) 提交

　　　　　　input type="submit"

　　　　(4) 按钮

　　　　　　input type="button"

　　　　(5) 单选框

　　　　　　input type="radio"

　　　　　　默认值设置： checked="checked"

　　　　(6) 复选框

　　　　　　input type="checkbox"

　　　　　　默认值设置：checked="checked"

　　　　(7) 文件

　　　　　　input type="file"

　　　　　　注意：上传文件依赖form表单的属性：enctype="multipart/form-data"

　　　　(8) 重置

　　　　　　input type="reset"

　　　　(9) 多行输入

　　　　(10) select标签

　　　　　　</select>

　　　　(11) form标签

　　　　　　作用：用于提交表单

　　　　　　属性：

　　　　　　　　action: 表单提交到的url

　　　　　　　　method: post/get

　　　　　　　　enctype="multipart/form-data": 上传文件

a标签

　　　　作用：

　　　　　　　(1) 跳转

　　　　　　　(2) 锚 ----- href="#id=?" ,id不能重复

img标签

　　　　src: 图片的url

　　　　alt: alt 属性是在图片不能正常显示时出现的文本提示

　　　　title: title 属性是在鼠标在移动到元素上的文本提示

　　　　height: 图片的高度

　　　　width: 图片的宽度

列表

　　　　ul: 定义无序列表

　　　　ol: 定义有序列表

　　　　dl: 定义列表

　　　　dt: 自定义列表项目

　　　　dd: 定义自定列表项的描述

表格

　　　　thead:

　　　　tbody:

　　　　colspan="3": 合并行

　　　　rowspan="2": 合并列

label

　　　　用于点击文字，使得关联的标签获取光标

fieldset

　　　　legend

　　　　作用：

　　　　　　　<fieldset> 标签可以将表单内的相关元素分组。

　　　　　　　<fieldset> 标签会在相关表单元素周围绘制边框。

h系列
div
span

3、代码：

　　改代码包括以上全部内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--html实现页面跳转-->
    <!--<meta http-equiv="refresh" content="1,url=http://www.autohome.com">-->

    <!--刷新-->
    <!--<meta http-equiv="refresh" content="3">-->

    <!--关键字-->
    <meta name="keywords" content="美女,野兽">

    <!--web页面描述-->
    <meta name="description" content="这是个分享美女图片的网站">

    <!--页面作者-->
    <meta name="author" content="Jack">

    <!--IE兼容性-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>美女图片</title>

    <!--link:链接样式表-->
    <link rel="stylesheet" href="html/css/commons.css">
    <style>
        .middle {
            width: 120px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
        }

        .div_middle {
            /*width: 250px;*/
            margin: 50px 50px 50px 300px;
        }

        .split_line {
            left: 200px;
        }
        .menu{
            height: 40px;
            font-size: 16px;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!--a链接:锚-->
    <div style="position: fixed;left: 20px;top: 20px">
        <p style="text-align: left; font-size: large;">目录(使用a链接实现)</p>
        <!-- <hr style="border: solid;"> -->
        <a href="#i1" class="menu">第1节：HTML5中input输入类型</a><br>
        <a href="#i2" class="menu">第2节：a链接:跳转</a><br>
        <a href="#i3" class="menu">第3节：img图片</a><br>
        <a href="#i4" class="menu">第4节：style属性</a><br>
        <a href="#i5" class="menu">第5节：form表单:用户登录</a><br>
        <a href="#i6" class="menu">第6节：form表单:向搜狗引擎提交数据</a><br>
        <a href="#i7" class="menu">第7节：form表单:input的使用</a><br>
        <a href="#i8" class="menu">第8节：HTML列表标签:ol</a><br>
        <a href="#i9" class="menu">第9节：HTML列表标签:ul</a><br>
        <a href="#i10" class="menu">第10节：HTML列表标签:dl与dt、dd</a><br>
        <a href="#i11" class="menu">第11节：HTML表格</a><br>
    </div>

    <!--HTML5中input输入类型-->
    <div id="i1" class="div_middle">
        <p style="text-align: center">HTML5中input输入类型</p>
        <hr style="border: solid;">
        <div>
            <input type="button" value="查询"/><br><br>
            <input type="checkbox"/><br><br>
            <input type="color"/><br><br>
            <input type="date"/><br><br>
            <input type="datetime-local"/><br><br>
            <input type="email"/><br><br>
            <input type="file"/><br><br>
            <input type="hidden"/><br><br>
            <input type="image"/><br><br>
            <input type="month"/><br><br>
            <input type="number"/><br><br>
            <input type="password" value="密码"/><br><br>
            <input type="radio"/><br><br>
            <input type="range"/><br><br>
            <input type="reset" value="重置"/><br><br>
            <input type="search"/><br><br>
            <input type="tel"/><br><br>
            <input type="text"/><br><br>
            <input type="time"/><br><br>
            <input type="url"/><br><br>
            <input type="week"/><br><br>
            <textarea></textarea>
        </div>
    </div>

    <!--a链接:跳转-->
    <div id="i2" class="div_middle">
        <p style="text-align: center">a链接</p>
        <hr style="border: solid;">
        <a href="http://www.baidu.com">百度搜索:在当前页面跳转</a><br><br>
        <a href="http://www.baidu.com" target="_blank">百度搜索:打开新页面跳转</a>
    </div>


    <!--img图片-->
    <div id="i3" class="div_middle">
        <p style="text-align: center">img图片</p>
        <hr style="border: solid;">
        <img src="html/1.jpg" alt="girls" title="模特" style="width: 200px; height: 150px">
    </div>


    <!--style属性-->
    <div id="i4" class="div_middle">
        <p style="text-align: center">style属性</p>
        <hr style="border: solid;">
        <div style="position: relative" >
            <div id="n2" style="position: absolute;left: 300px;bottom: 100px;color: purple;border:solid;font-size:xx-large">
                position位置属性
            </div>
            <div>展示style中position位置属性，字体颜色为紫色,字体为xx-large</div>
            <div id="n1" style="position: fixed;bottom: 0;right:0;">我是谁</div>
        </div>
    </div>

    <!--form表单:用户登录-->
    <div id="i5" class="div_middle">
        <p style="text-align: center">form表单:用户登录</p>
        <hr style="border: solid;">
        <fieldset>
            <legend style="text-align: center">用户登录</legend>
            <form action="login.html" method="post">
                <div >
                    <label for="username">用户名:</label>
                    <input id="username" type="text" name="username"><br><br>
                </div>
                <div >
                    <label for="password">密&nbsp&nbsp&nbsp码:</label>
                    <input id="password" type="password" name="password"><br><br>
                </div>
                <div >
                    <input type="button" value="登录"><br><br>
                </div>
            </form>
        </fieldset>
    </div>

    <!--form表单:向搜狗引擎提交数据-->
    <div id="i6" class="div_middle">
        <p style="text-align: center">form表单:向搜狗引擎提交数据</p>
        <hr style="border: solid;">
        <form action="https://www.sogou.com/web" method="post">
            <div class="middle">
                <input type="text" name="query"/>
            </div>
            <div class="middle">
                <input type="submit" value="搜索"/>
            </div>
        </form>
    </div>

    <!--form表单:input的使用-->
    <div id="i7" class="div_middle">
        <p style="text-align: center">form表单:input的使用</p>
        <hr style="border: solid;">
        <form enctype="multipart/form-data">
            <div >
                <div>
                    <label for="name">用户名:</label>
                    <input id="name" type="text" name="user">
                </div>

                <div>
                    <p>请选择性别:</p>
                    男<input type="radio" name="gender" value="1"/>
                    女<input type="radio" name="gender" value="2"/>
                    公公<input type="radio" name="gender" value="3"/>
                </div>
                <div>
                    <p>爱好</p>
                    篮球:<input type="checkbox" name="favor" value="1">
                    足球:<input type="checkbox" name="favor" value="2">
                    排球:<input type="checkbox" name="favor" value="3" checked>
                    橄榄球:<input type="checkbox" name="favor" value="4">
                    兵乓球:<input type="checkbox" name="favor" value="5">
                </div>
                <div>
                    <p>技能</p>
                    撩妹:<input type="checkbox" name="skill" value="1">
                    写代码:<input type="checkbox" name="skill" value="2">
                </div>
                <div>
                    <p>上传文件</p>
                    <input type="file" value="提交" name="fname"><br><br>
                </div>


                <div>
                    <select name="city" size="6" multiple="multiple">
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3" selected="selected">深圳</option>
                        <option value="4">广州</option>
                    </select>
                    <br><br>
                </div>
                <textarea name="meno" style="width: 200px;
                    height: 100px;">这是个多行文本输入区域
                    </textarea><br><br>

                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </div>
        </form>
    </div>

    <!--HTML列表标签:ol-->
    <div id="i8" class="div_middle">
        <p style="text-align: center">HTML列表标签:ol</p>
        <hr style="border: solid;">
        <div>
            <P>ol:定义有序列表</P>
            <ol>
                <li>鲁哈尼:美国制裁伊朗被孤立 与伊朗为敌注定失败</li>
                <li>索马里总统府附近发生爆炸 政府人员或为目标</li>
                <li>美俄关系转折难有＂实锤＂ 改善双边关系氛围更重要</li>
                <li>美国务卿：美墨北美自贸协定谈判取得重大进展</li>
            </ol>
        </div>
    </div>

    <!--HTML列表标签:ul-->
    <div id="i9" class="div_middle">
        <p style="text-align: center">HTML列表标签:ul</p>
        <hr style="border: solid;">
        <div>
            <P>ul:定义无序列表</P>
            <ul>
                <li>以色列战机轰炸加沙地带数十个哈马斯军事目标</li>
                <li>普京将与多国领导人出席世界杯闭幕式并观看决赛</li>
                <li>塔希提岛“海上漂浮城市”将开工 现有技术并非困难</li>
                <li>＂空袭＂特朗普 苏格兰民众乘滑翔伞空中盘旋抗议</li>
            </ul>
        </div>
    </div>

    <!--HTML列表标签:dl与dt、dd-->
    <div id="i10" class="div_middle">
        <p style="text-align: center">HTML列表标签:dl与dt、dd</p>
        <hr style="border: solid;">
        <div>
            <P>dl:定义列表; dt:自定义列表项目; dd: 定义自定列表项的描述</P>
            <dl>
                <dt>今日新闻</dt>
                <dd>博彩公司开2022世界杯夺冠赔率:法国第1 中国被无视</dd>
                <dd>中国情报收集船在环太军演海域行使＂航行自由＂权</dd>
                <dd>联合国安理会谴责发生在巴基斯坦的恐怖袭击</dd>
                <dd>美媒:美国将成世界最大产油国 全球石油版图将重构</dd>
            </dl>
        </div>
    </div>

    <!--HTML表格-->
    <div id="i11" class="div_middle">
        <p style="text-align: center">HTML表格</p>
        <hr style="border: solid;">
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>年龄</th>
                    <th colspan="5">爱好</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>1班</td>
                    <td>16</td>
                    <td colspan="5">篮球、足球、排球</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td rowspan="2">2班</td>
                    <td>15</td>
                    <td colspan="5">书法、绘画</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>16</td>
                    <td colspan="5">游戏、上网、看美女</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="i12">

    </div>
    <script language="JavaScript" type="text/javascript">
        //直接跳转
        // window.location.href = 'http://www.baidu.com';

        //定时跳转
        // setTimeout("javascript:location.href='http://www.baidu.com'", 5000);
    </script>
</body>
</html>

posted @ 2018-07-15 14:34 RobotsRising 阅读(224) 评论(0) 编辑收藏举报

刷新页面返回顶部

RobotsRising

HTML基础

公告