2019-08-19_Work_Day21

1. 2019节日页面

方法一：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <h2>2019节日大全</h2>
    <ul>
        <li>
            <h3>1月</h3>
            <ul>
                <li><a 
                        target="_blank">元旦[1月1日]</a></li>
                <li><a  target="_blank">腊八节[1月13日]</a>
                </li>
                <li><a 
                        target="_blank">国际海关节[1月26日]</a></li>
                <li><a 
                        target="_blank">国际麻风节[1月27日]</a></li>
                <li><a  target="_blank">小年[1月28日]</a></li>
            </ul>
        </li>
        <li>
            <h3>2月</h3>
            <ul>
                <li><a 
                        target="_blank">世界湿地日[2月2日]</a></li>
                <li><a  target="_blank">除夕[2月4日]</a></li>
                <li><a  target="_blank">春节[2月5日]</a></li>
                <li><a 
                        target="_blank">情人节[2月14日]</a></li>
                <li><a 
                        target="_blank">元宵节[2月19日]</a></li>
            </ul>
        </li>
        <li>
            <h3>3月</h3>
            <ul>
                <li><a 
                        target="_blank">三八妇女节[3月8日]</a></li>
                <li><a  target="_blank">植树节[3月12日]</a>
                </li>
                <li><a 
                        target="_blank">消费者权益日[3月15日]</a></li>
                <li><a 
                        target="_blank">世界睡眠日[3月21日]</a></li>
                <li><a 
                        target="_blank">世界气象日[3月23日]</a></li>
            </ul>
        </li>
        <li>
            <h3>4月</h3>
            <ul>
                <li><a 
                        target="_blank">愚人节[4月1日]</a></li>
                <li><a 
                        target="_blank">清明节[4月5日]</a></li>
                <li><a 
                        target="_blank">世界卫生日[4月7日]</a></li>
                <li><a 
                        target="_blank">复活节[4月21日]</a></li>
                <li><a 
                        target="_blank">世界读书日[4月23日]</a></li>
            </ul>
        </li>
        <li>
            <h3>5月</h3>
            <ul>
                <li><a 
                        target="_blank">五一国际劳动节[5月1日]</a></li>
                <li><a 
                        target="_blank">五四青年节[5月4日]</a></li>
                <li><a 
                        target="_blank">母亲节[5月13日]</a></li>
                <li><a 
                        target="_blank">国际博物馆日[5月18日]</a></li>
                <li><a 
                        target="_blank">世界无烟日[5月31日]</a></li>
            </ul>
        </li>
        <li>
            <h3>6月</h3>
            <ul>
                <li><a 
                        target="_blank">国际儿童节[6月1日]</a></li>
                <li><a 
                        target="_blank">世界环境日[6月5日]</a></li>
                <li><a 
                        target="_blank">端午节[6月7日]</a></li>
                <li><a  target="_blank">父亲节[6月16日]</a>
                </li>
                <li><a 
                        target="_blank">国际禁毒日[6月26日]</a></li>
            </ul>
        </li>
        <li>
            <h3>7月</h3>
            <ul>
                <li><a 
                        target="_blank">建党节[7月1日]</a></li>
                <li><a 
                        target="_blank">香港回归纪念日[7月1日]</a></li>
                <li><a 
                        target="_blank">国际合作节[7月7日]</a></li>
                <li><a 
                        target="_blank">世界人口日[7月11日]</a>
                </li>
            </ul>
        </li>
        <li>
            <h3>8月</h3>
            <ul>
                <li><a 
                        target="_blank">八一建军节[8月1日]</a></li>
                <li><a 
                        target="_blank">七夕情人节[8月7日]</a></li>
                <li><a 
                        target="_blank">中元节[8月15日]</a></li>
            </ul>
        </li>
        <li>
            <h3>9月</h3>
            <ul>
                <li><a 
                        target="_blank">中国人民抗日战争纪念日[9月3日]</a></li>
                <li><a  target="_blank">教师节[9月10日]</a>
                </li>
                <li><a 
                        target="_blank">世界预防自杀日[9月10日]</a></li>
                <li><a 
                        target="_blank">中秋节[9月13日]</a></li>
                <li><a 
                        target="_blank">世界和平日[9月21日]</a></li>
            </ul>
        </li>
        <li>
            <h3>10月</h3>
            <ul>
                <li><a  target="_blank">国庆节[10月1日]</a>
                </li>
                <li><a 
                        target="_blank">世界动物日[10月4日]</a>
                </li>
                <li><a 
                        target="_blank">世界精神卫生日[10月10日]</a></li>
                <li><a 
                        target="_blank">国际盲人节[10月15日]</a></li>
                <li><a 
                        target="_blank">联合国日[10月24日]</a></li>
            </ul>
        </li>
        <li>
            <h3>11月</h3>
            <ul>
                <li><a 
                        target="_blank">万圣节[11月1日]</a>
                </li>
                <li><a 
                        target="_blank">消防宣传日[11月9日]</a>
                </li>
                <li><a 
                        target="_blank">光棍节[11月11日]</a></li>
                <li><a 
                        target="_blank">国际大学生节[11月17日]</a></li>
                <li><a 
                        target="_blank">感恩节[11月28日]</a></li>
            </ul>
        </li>
        <li>
            <h3>12月</h3>
            <ul>
                <li><a 
                        target="_blank">世界艾滋病日[12月1日]</a>
                </li>
                <li><a 
                        target="_blank">世界足球日[12月9日]</a>
                </li>
                <li><a 
                        target="_blank">国际篮球日[12月21日]</a></li>
                <li><a 
                        target="_blank">平安夜[12月24日]</a></li>
                <li><a 
                        target="_blank">圣诞节[12月25日]</a></li>
            </ul>
        </li>
    </ul>
</body>

</html>
方法二：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<script type="text/javascript">
    function getSearchList() {
        var data = [
            [{
                    name: "元旦",
                    date: "1月1日"
                },
                {
                    name: "腊八节",
                    date: "1月3日"
                },
                {
                    name: "国际海关节",
                    date: "1月26日"
                },
                {
                    name: "国际麻风节",
                    date: "1月27日"
                },
                {
                    name: "小年",
                    date: "1月28日"
                }
            ],
            [{
                    name: "世界湿地日",
                    date: "2月2日"
                },
                {
                    name: "除夕",
                    date: "2月4日"
                },
                {
                    name: "春节",
                    date: "2月5日"
                },
                {
                    name: "情人节",
                    date: "2月14日"
                },
                {
                    name: "元宵节",
                    date: "2月19日"
                },
            ],
            [{
                    name: "三八妇女节",
                    date: "3月8日"
                },
                {
                    name: "植树节",
                    date: "3月12日"
                },
                {
                    name: "消费者权益日",
                    date: "3月15日"
                },
                {
                    name: "世界睡眠日",
                    date: "3月21日"
                },
                {
                    name: "世界气象日",
                    date: "3月23日"
                },
            ],
            [{
                    name: "愚人节",
                    date: "4月1日"
                },
                {
                    name: "清明节",
                    date: "4月5日"
                },
                {
                    name: "世界卫生日",
                    date: "4月7日"
                },
                {
                    name: "复活节",
                    date: "4月21日"
                },
                {
                    name: "世界读书日",
                    date: "4月23日"
                },
            ],
            [{
                    name: "五一国际劳动节",
                    date: "5月1日"
                },
                {
                    name: "五四青年节",
                    date: "5月4日"
                },
                {
                    name: "母亲节",
                    date: "5月13日"
                },
                {
                    name: "国际博物馆日",
                    date: "5月18日"
                },
                {
                    name: "世界无烟日",
                    date: "5月31日"
                },
            ],
            [{
                    name: "国际儿童节",
                    date: "6月1日"
                },
                {
                    name: "世界环境日",
                    date: "6月5日"
                },
                {
                    name: "端午节",
                    date: "6月7日"
                },
                {
                    name: "父亲节",
                    date: "6月16日"
                },
                {
                    name: "国际禁毒日",
                    date: "6月26日"
                },
            ],
            [{
                    name: "建党节",
                    date: "7月1日"
                },
                {
                    name: "香港回归纪念日",
                    date: "7月1日"
                },
                {
                    name: "国际合作节",
                    date: "7月7日"
                },
                {
                    name: "世界人口日",
                    date: "7月11日"
                }
            ],
            [{
                    name: "八一建军节",
                    date: "8月1日"
                },
                {
                    name: "七夕情人节",
                    date: "8月7日"
                },
                {
                    name: "中元节",
                    date: "8月15日"
                }
            ],
            [{
                    name: "中国人民抗日战争纪念日",
                    date: "9月3日"
                },
                {
                    name: "教师节",
                    date: "9月10日"
                },
                {
                    name: "世界预防自杀日",
                    date: "9月10日"
                },
                {
                    name: "中秋节",
                    date: "9月13日"
                },
                {
                    name: "世界和平日",
                    date: "9月21日"
                },
            ],
            [{
                    name: "国庆节",
                    date: "10月1日"
                },
                {
                    name: "世界动物日",
                    date: "10月4日"
                },
                {
                    name: "世界精神卫生日",
                    date: "10月10日"
                },
                {
                    name: "国际盲人节",
                    date: "10月15日"
                },
                {
                    name: "联合国日",
                    date: "10月24日"
                },
            ],
            [{
                    name: "万圣节",
                    date: "11月1日"
                },
                {
                    name: "消防宣传日",
                    date: "11月9日"
                },
                {
                    name: "光棍节",
                    date: "11月11日"
                },
                {
                    name: "国际大学生节",
                    date: "11月17日"
                },
                {
                    name: "感恩节",
                    date: "11月28日"
                },
            ],
            [{
                    name: "世界艾滋病日",
                    date: "12月1日"
                },
                {
                    name: "世界足球日",
                    date: "12月9日"
                },
                {
                    name: "国际篮球日",
                    date: "12月21日"
                },
                {
                    name: "平安夜",
                    date: "12月24日"
                },
                {
                    name: "圣诞节",
                    date: "12月25日"
                },
            ]
        ];
        var baike = "https://baike.baidu.com/item/";
        var str = ""
        for (var i = 0; i < data.length; i++) {
            str += "<li><h3>" + (i + 1) + "月</h3><ul>"
            for (var j = 0; j < data[i].length; j++) {
                var keyWord = data[i][j].name
                var url = "\"" + baike + keyWord + "\""
                str += "<li><a href=" + url +
                    " target=\"_blank\">" + data[i][j].name + "</a><span>[" + data[i][j].date + "]</span></li>"
            }
            str += "</ul></li>"
        }
        document.getElementById('fastival').innerHTML = str;
    }
</script>

<body onload="getSearchList();">
    <h2>2019节日大全</h2>
    <ul id="fastival"></ul>
</body>

</html>

2. 表单

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Forms</title>
</head>

<body>
    <form action="" method="post" enctype="multipart/form-data">
        <fieldset>
            <legend>Your Details:</legend>
            <p>
                Name:
                <input type="text">
            </p>
            <p>
                Email:
                <input type="mail">
            </p>
        </fieldset>
        <br>
        <fieldset>
            <legend>Your Review:</legend>
            <p>
                How did you hear about us?:
                <select name="" id="">
                    <option value="" selected>Google</option>
                    <option value="">Twitter</option>
                    <option value="">Facebook</option>
                    <option value="">Baidu</option>
                    <option value="">Weibo</option>
                </select>
            </p>
            <p>
                <p>Would you visit again?</p>
                <input type="radio" name="choose" id="">Yes
                <input type="radio" name="choose" id="">No
                <input type="radio" name="choose" id="">Maybe
            </p>
            <p>
                <p>Comments:</p>
                <textarea name="" id="" cols="40" rows="5"></textarea>
            </p>
            <p>
                <input type="checkbox" name="isUpdate" id="" checked>Sign me up for email updates
            </p>
            <p>
                <input type="submit" value="submit">
                <input type="reset" value="review">
            </p>
        </fieldset>
    </form>
</body>

</html>
最后编辑于 ：
?著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,100评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,308评论 3赞 388
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事?！?“怎么了？”我有些...
    开封第一讲书人阅读 159,718评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,275评论 1赞 287
  • ?港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,376评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,454评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,464评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,248评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,686评论 1赞 306
  • ?护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,974评论 2赞 328
  • ?白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,150评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,817评论 4赞 337
  • ?日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,484评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,140评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,374评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,012评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,041评论 2赞 351

推荐阅读更多精彩内容

  • 一，HTML语言的一般语法： 1，围堵标记：<>… 1）带属性的标记： … 2）无属性的标记：加粗 居中 标题 2...
    清水易蓝阅读 1,261评论 0赞 2
  • 感谢人生中的每一次相遇；感谢人生中的每一次相识；感谢人生中的每一次相知........真正的朋友不需要开口，他会知...
    真家阅读 308评论 0赞 4
  • 这几天情绪不好，敏感多疑，别人对自己的态度稍有点改变，或者不在意自己，就很生气，结果是自己不快乐，惹得身边的人...
    j新星阅读 549评论 1赞 0
  • 其实我辞职不是冲动的决定。虽然起因有点冲动，但是决定是经过深思熟虑之后做出的，这个过程中，衡量过自己的想法、职业规...
    戒智阅读 3,298评论 0赞 1
  • 开心，真开心做了两份作业还要做两份作业呢 e_e
    洋葱花阅读 455评论 6赞 7