边住院边学编程--HTML和CSS（二）

cheva(73)

Published in

#cn

Words

905

Reading

5 min

Listen

Play

一、今日情况

早上查房，主任说伤口消炎差不多了，病理检查切除的比较少，肿瘤细胞如果没切干净的话，伤口不会长好。然后吩咐我的主治医师让她联系外科转病房。结果到下午了，主治医生还是说，那边对接的医生在做手术没有回话。今天多半转不了。

二、学习app--codeNgo

今天换了个学习app，叫codeNgo，里面有好几套课程，可以学习HTML，CSS和JavaScript。这个软件相比昨天的软件，知识点要简略一些。当然这更适合新手。而且更棒的是，它的测试题是让你写代码，并可以预览效果而不是做选择题考察知识点，实践性更强，也有游戏通关的感觉。虽然上个软件也自带代码编辑器，不过使用上没有这个方便，这个编辑器自带了符号键盘像<>""之类的可以直接打出。而系统自带的书法还要进入符号页面找。

三、学习笔记

1. HTML

输入元素 input 根据type属性的设置表现为不同的形式，<input type="text">是文本输入框框。<input type="radio", name="radio1",value=1>是单选框。把type设为checkbox就是复选框。用法和单选框基本一样。要注意的是单选框和复选框要夹在<label>元素中间，并加上描述。要不然别人会不知道选什么。使用单选框、复选框时label, name, value三要素缺一不可。
form元素，填表元素就是把几个输入元素组织到一起，用来收集用户收集的信息，再通过action属性传递给数据处理部分，一般是JavaScript 或者PHP的脚本。method属性则设置数据传送方式，分为get 和post，简单讲get是明文传递，post是加密传递，传递用户信息等敏感信息一定要用post。下面是我练习写的一个填表元素，里面包括一个文本输入框和一个单选框。

<form class="testborderform">
            <input type="text"
             placeholder="put some text..."><br />
            <button type="submit">add text</button><br />
            <p>do you like this? </p>
            <label>
                <input type="radio" name="test radio" value=1>
                yes
            </label>
            <label>
                <input type="radio" name="test radio" value=2 checked>
                no
            </label>
        </form>

2. CSS

以前不知道CSS是什么意思，看到CSS第一个想到的是著名枪战游戏反恐精英CS。查了谷歌，CSS直译是“层叠样式表”，还是云里雾里。把软件教程学完，发现CSS其实很简单。就是把设置网页显示风格的代码集中在一起，放置到head元素里面，对网页风格，比如元素的颜色，字体，大小，位置进行集中管理。
比如下面这个：

<style>
      p{background-color:yellow;
}
</style>

就是把网页中的所有的段落加上黄色背景。
CSS的语法就是选择器接花括号，括号里面放需要改变的属性。除了对常用的元素进行风格改写外，还可以对自己设置的类元素(类名称前加.) 和单个元素（元素id前加#）。CSS中的属性很多，需要多练习才能掌握，这里就不一一罗列了。

3. 练习写网页

用这两天学的知识，练习写了个网页，也是为了好玩，打发时间。把代码发在下面：

<html>
    <head>
        <title>test</title>
        <meta name="viewport"
                     content="width=device-width">
        <style>
            p {color:crimson;
                background-color:yellow;
                font-size:30px;
                }
            label{color:green;
                    font-size:22px
                    }
            .testborderform{
                border:3px dotted darkcyan;
                border-radius:20px;
                margin:30px 30px 30px 30px;
                padding:20px 20px ;}
             body{
                       background-color:lightblue;
                     }
             #coffee{background-color:black;
                            border:30px solid red;
                            margin:0 30px 0 30px;
                            padding:40px 0 40px;
                            }
              #milk{background-color:white;
                            border:30px solid red;
                            margin:0 30px 0 30px;
                            text-align:right;
                            padding:40px 0 40px;
                            opacity:0.4;
                            position:relative;
                            top:-70;left:40;
                            }

        </style>
    </head>
    <body>
        <H2>test</H2>
        <p>this a test.</p>
        <hr color="red" />
        <form class="testborderform">
            <input type="text"
             placeholder="put some text..."><br />
            <button type="submit">add text</button><br />
            <p>do you like this? </p>
            <label>
                <input type="radio" name="test radio" value=1>
                yes
            </label>
            <label>
                <input type="radio" name="test radio" value=2 checked>
                no
            </label>
        </form>
        <div>
            <p id="coffee">coffee</p>
            <p id="milk">milk</p>
        </div>
    </body>
</html>