5-2day-homework(本网页实现内容跳转a标签实现)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>笔记整理</title>
        
        <style type="text/css">
            *{
                margin:0 auto;
                padding:0 auto;
    
            }
            div{
                
                height:auto;
                width:600px;
                background-color: gainsboro;
                margin-bottom: 30px;
    
            }
            h4{
                text-align: center;
                background-color: gray;
                color:white;
                height:80px;
                display: block;
                
            }
            
            a{
                
                padding:10px 40px;
                background-color: dodgerblue;
                margin-top: 20px;
                color:#FFFFFF;
                display: block;
            }
        </style>
    </head>
    <body>
        <!--这里是控制按钮-->
        
        <div style="position:fixed;height:1080px;width:100px">
            <a href="#con1">01</a>
            <a href="#con2">02</a>
            <a href="#con3">03</a>
            <a href="#con4">04</a>
            <a href="#con5">05</a>
            <a href="#con6">06</a>
            
        </div>
        
        
        
        <!--一下是内容部分-->
        <div id="con1" style="background-color: papayawhip;">
            
            <!--这是第一部分知识-->
            
        <h4>01-表单标签基础知识</h4><br />
        <p>
            表单标签<br />
            1.可以提交表单中收集的信息<br />
            action属性:设置提交信息的位置<br />
            method属性:提交方式 - post/get<br />
    
        </p><br />
        <p>
            input标签(单标签) -- text(文本输入框)<br />
            1.是表单标签<br />
            2.type属性:<br />
            text - 普通的文本输入框<br />
            3.name属性: 必须设置(a.用于提交信息)<br />
            4.value属性: 标签内容<br />
            5.placeholder属性:占位符(提示信息)<br />
            6.maxlength: 输入框最多能输入的字符个数<br />
            7.readonly:readonly - 输入框只读(不能往里面输入内容)<br />
        </p><br />
        <p>
            input标签- 密码输入框<br />
            1.type属性: password --- 输入的值是密文显示<br />
            
        </p><br />
        <p>
            input标签:单选按钮<br />
            1.type属性:radio<br />
            2.name: 同一类型对应的name值必须一样<br />
            3.value:设置选中按钮提交的值<br />
            4.checked: 设置为checked,让按钮默认处于选中状态<br />
            
        </p><br />
        <p>
            input标签:多选按钮<br />
            1.type:checkbox<br />
            2.name:同一类型对应的name值必须一样<br />
            3.value:设置选中按钮提交的值<br />
            4.checked: 设置为checked,让按钮默认处于选中状态<br />
            
        </p><br />
        <p>
            input标签:普通按钮<br />
            disabled:disabled - 让按钮不能点击<br />
            input标签:重置按钮<br />
            让当前所在的form中的所有表单相关标签对应的值,回到最初的状态<br />  
            input标签:文件选择器<br /> 
        </p><br />
        </div>
        
        
        <!--这是第二部分笔记-->
        
        <div id = "con2">
        <h4>02-下拉菜单和多行文本域案例</h4><br />

        <p>
            <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单和多行文本域</title>
    </head>
    <body>
        <form action="" method="get">
            <!--fieldset:
                一个fieldset标签对应一个表单分组
                legend标签:设置分组名
            -->
            <fieldset id="">
                <legend>账号信息</legend>
                <input type="text" name="username" id="username" value="" placeholder="用户名" />
                <input type="password" name="username" id="username" value="" placeholder="密码" />
                <input type="reset" name="" id="" value="重置1" />
                
            </fieldset>
            
            <fieldset id="">
                <legend>反馈信息</legend>
                <!--1.下拉菜单-->
                <select name="city">
                    <option value="成都">成都</option>
                    <option value="重庆">重庆</option>
                    <option value="北京">北京</option>
                    <option value="大连">大连</option>
                    <!--selected:设置默认选中-->
                    <option value="青岛" selected="selected">青岛</option>
                </select>
            
            <!--2.多行文本域(多行文本输入框)
            -->
                <textarea name="message" rows="2" cols="50" placeholder="请输入意见..." maxlength="200">上次没有发送信息</textarea>
                <input type="reset" name="" id="" value="重置2" />
            </fieldset>
            
            <input type="submit" name="" id="" value="提交" />
            
        </form>
        
        
    </body>
</html> 
        </p>
        </div>
        
        
        
        
        <!--这里是第三部分空白标签案例-->
        
        <div id = "con3">
        <h4>03-空白标签案例</h4>
        <p>
            <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <div id="">
            <a href="">百度一下</a>
        </div>
        <div id="">
            <a href="">淘宝</a>
        </div>
        
        
        <!--
            html中标签分为两大类:
            1.块级标签:一行只能有一个(不管标签的宽度是多少)
            h1-h6,  p, hr, 列表标签,table, form, 
            
            2.行内标签:一行可以有多个
            a, img, input,下拉列表(select), textarea
            
            
            div标签,是空白标签,没有任何特殊的意义(无语义标签)
        -->
        <div style="background-color: red; width: 100px;">
            我是div1 <br />
            我是div111
        </div>
        <span style="background-color: royalblue;">
            我是span4
        </span>
        <div style="background-color: yellow; width: 90px;">
            我是div2
        </div>
        <div style="background-color: palevioletred; width: 120px;">
            我是div3
        </div>
        
        <span style="background-color: green;">
            我是span
        </span>
        <span style="background-color: gold;">
            我是span2
        </span>
        <span style="background-color: greenyellow;">
            我是span3
        </span>
        <span style="background-color: royalblue;">
            我是span4
        </span>
        
        
    </body>
</html>
    
        </p>
        </div>
        
        
        <!--这是第四部分笔记-->
        
        <div id = "con4" style="background-color:mediumspringgreen">
        <h4>04-认识css</h4>
        <p><br />
            
1.什么是CSS<br />
    CSS是web标准中的表现标准,用设置网页上的标签的样式(长什么样,在哪儿)<br />
    CSS代码/CSS文件,我们叫样式表<br /><br />
    
    目前我们使用的是CSS3。<br /><br />
    
2.写在哪儿<br />
    内联样式表:将css代码写在标签的style属性中<br />
    内部样式表:写在head标签中的style标签的内容中<br />
    外部样式表:写在一个css文件中,通过head中的link标签来关联<br />
    优先级: 内联的优先级最高;内部和外部没有绝对优先,主要看同一个属性谁最后赋值,谁就有效<br /><br />
    
    
3.怎么写(CSS语法)<br />
选择器{属性:属性值; 属性:属性值;}<br />
选择器: 用来选中需要设置样式的标签<br />
属性:css属性(css2中的属性有两百多个)<br />
属性值:如果属性值是数字,表示的是大小要在后面加px<br />
注意:每个属性之间要使用分号隔开,否则属性无效<br /><br />

补充属性: color: 设置字体颜色  <br />background-color:设置背景颜色  <br />width:标签的宽度  <br />height:标签的高度<br />

        </p><br />
        </div>
        
        <!--这是第五部分css选择器-->
        
        <div id = "con5" style="background-color:gold">
        <h4>05-css选择器</h4><br />
        <p>
            选择器<br />
0. 元素选择器(标签选择器):标签名<br />
    选中所有的标签名对应的标签<br />
1.id选择器:#id属性值<br />
    每个标签都有一个id属性,整个html中,id的值必须唯一<br /><br />
    
2.class选择器:.class属性值<br />
    每个标签都有一个class属性,<br /><br />
    
3.通配符:*<br />
    选中所有的标签  <br /><br />
    
4.层级选择器:选择器1 选择器2...<br />

5.群组选择器:选择器1,选择器,....<br /><br />

补充:<br />
    css中的颜色值:<br />
    1.颜色英语单词<br />
    2.16进制的颜色值 0-255 -- 00-ff (#ff0000-红色)<br />
    3.rgb值:rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度 0~1<br />
    
        </p><br />
        </div>
        
        
        <!--这是第六部分笔记知识点-->
        
        <div id = "con6" style="background-color:lightskyblue">
        <h4>06-css选择器</h4><br />
        <p>
            伪类选择器:   选择器:状态<br />
    link: 超链接的初始状态; -- 一次都没有访问成功的时候的状态<br />
    visited: 超链接访问后的状态 --- 已经访问成功后的状态<br />
    hover: 鼠标悬停在标签上对应的状态<br />
    active:鼠标按住的状态<br /><br />
    
    给同一个标签通过伪类选择器给不同状态设置不同的样式的时候,要遵守爱恨原则(先要爱才能恨)
    LoVe HAte<br />
        </p><br />
        </div>

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

推荐阅读更多精彩内容