初学HTML

浏览数：36 / 时间：2015年06月09日

再把牛腩看完以后对BS感觉还挺好玩的，只是在牛腩中，东西有点杂乱，所以完了以后就发现自己的路任重道远，但是今天用两个小时学习了一下基本的HTML，感觉在牛腩中也就这几个，所以
在这里总结一下。

HTML又叫超文本标记语言，也是构成网页文档的主要语言，大家在页面上右键，单击查看网页源代码，看到的大部分都是咱们所说的HTML语言，HTML可以描述文字，图形，链接，表格，我们网页上呈现的静态画面就是HTML的功劳，可是对于实现我们该如何呢，其实说到网页的制作，貌似这个词很大，其实网页也就是一个信息的输入和输出，所以我们就把信息分为修饰和输入输出来实现一下HTML。

修饰

1、框架

2、内容修饰

<p align="#"> 表示paragraph，作用是创建一个段，属性align表示段的对齐方式，#可是是left、center、right、justtify，分别表示左对齐，居中，右对齐，两段对齐。

<br>表示line break，作用换行，我们在一句话的末尾加上<br>，就会让后边的语句转换到下一行。

<hr color="clr"> 表示horizontal rule,作用是插入一条水平下线，color是表示水平线的颜色，可以写成red，white，yellow,也可以用16进制表示，例如#rrggbb，#ff0000,当然如果自己想要挑颜色，也可专门找相关的工具来找。

<html>
<body>   
    <center>
        <h2><font color="red">静夜思</font></h2>
        <b>作者：李白</b>
        <hr color="blue" />
        <font color="green" size="3">
            窗前明月光，疑是地上霜。<br />
            举头望明月，低头思故乡，
        </font>
    </center>
</body>
</html>

输入

大家在网页中观察一下什么可以输入，是不是也就是一个文本框，下拉框，单选多选按钮，提交按钮，所以这里我们就为大家简单的介绍一下输入的也写表示方法。

<input>元素用于接受用户输入的信息，语法是<input type="type" name="name" size="size" value="value",属性type用来制定要创建的控件的类型，属性name用来表示控件的名称，处理表单的服务器端可以获得名称，从而进行处理，在网页上，该属性不显示，size表示控件的大小，value表示初始值。

单行文本输入控件 (type:"text"）

提交按钮 (type:"submit")

重置按钮 (type:"reset")

口令输入控件(type:"password"

单选按钮 (type:"radio")

复选框 (type:"checkbox")

隐藏控件 (type:"hidden")

    <textarea name="name" rows="number numbger of rows“ cols="number of columns">...</textarea>   表示多行文本

当然HTML里边还是有一个比较特殊的家伙，那就是下拉框，他是表示方法是<select>元素创建，各个选项用<option>元素提供，代码如下

<span style="white-space:pre">	</span><select size="1" name="education">
<span style="white-space:pre">		</span><option value="" selected>...</option>
<span style="white-space:pre">		</span><option value="高中">高中</option>
<span style="white-space:pre">		</span><option value="大学">大学</option>
<span style="white-space:pre">		</span><option value="硕士">硕士</option>
<span style="white-space:pre">		</span><option value="博士">博士</option>
<span style="white-space:pre">	</span></select>

输出

当然我们大部分浏览网页都是为了获取信息，所以这个貌似也就成了重点，而且运用起来也比较灵活，当然也只是相对于输入来说。想想我们用来输出表示都用到了什么，表格，文字，图片，链接。貌似也就这么多了。

表格

表格：<table border=n align="alignment" gbcolor="clr">...</table>,border用于定义表格框的宽度，n可以是从零开始的整数，如果border=0，表示没有宽度，align用于表示对齐方式，属性值为left，center，right。属性bgcolor用户表示背景颜色，全称是backgroundcolor，方式前边介绍过了，<capiton><caption>用来定义表头，<tr></tr>用来再添加一行，<td></td>用来定义表头。就不多说了，上例子。

 <table border="1" align="center" bgcolor="#ffdddd">
        <caption>2014年度期末考试成绩单</caption>
        <tr align="center" valign="middle">
            <!--新行-->
            <th>姓名</th>       <!--表头-->
            <th>语文</th>       <!--表头-->
            <th>数学</th>       <!--表头-->
            <th>英语</th>       <!--表头-->
        </tr>
        <tr align="center" valign="middle">
            <!--新行-->>
            <th>张三</th>       <!--表头-->
            <th>65</th>       <!--表头-->
            <th>89</th>       <!--表头-->
            <th>98</th>       <!--表头-->
        </tr>
        <tr align="center" valign="middle">
            <!--新行-->>
            <th>李四</th>       <!--表头-->
            <th>12</th>       <!--表头-->
            <th>43</th>       <!--表头-->
            <th>45</th>       <!--表头-->
        </tr>
        <tr align="center" valign="middle">
            <!--新行-->>
            <th>王五</th>       <!--表头-->
            <th>44</th>       <!--表头-->
            <th>76</th>       <!--表头-->
            <th>88</th>       <!--表头-->
        </tr>

    </table>

超链接

我们在点击某个网站的logo时经常会连接到我们网站，其实这就用到了超链接，HTML之所以叫超文本标记语言，特殊之处就在这里。那么我们就简单的说一下。

<a href="URL">...</a>,属性href用于指定超链接的目标，目标地址由URL定位在...处的文本作为浏览器中显示的超链接文本。

<span style="white-space:pre">	</span><a href="http://blog.csdn.net/lovemenghaibin">        
	<span style="white-space:pre">	</span>孟海滨的博客 
<span style="white-space:pre">	</span></a>

图片

在网站上我们会看到大量的图片，大部分格式都是gif的，因为不需要大量的大量的颜色，也有很多高清的图片，我们会用JPEG格式，所以在网页中嵌入一副图像要使用<img src="URL" width=n height=n>

<img src="孟海滨.jpg" width="81" height="130" />

综合运用

当然我们在编辑网页的时候就没有说是单独用的，所以我们也得总和运用一下，下边就把我们要的输入和输出的一次都为大家表现出来。

<html>
    <head><title>表单的例子</title></head>
    <body>
        <form method="get" action="reg.jsp">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input type="text" name="user" value="游客" size="30" /><br /></td>
                </tr>
                <tr>
                    <td>密   码：</td>
                    <td><input type="password" name="pwd" /></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td><input type="radio" name="sex" value="1" checked="checked" />男
                        <input type="radio" name="sex" value="0" />女
                    </td>
                </tr>
                <tr>
                    <td>兴趣爱好：</td>
                    <td>
                        <input type="checkbox" name="interest" value="football" /> 足球
                        <input type="checkbox" name="interest" value="basketball" /> 篮球
                        <input type="checkbox" name="interest" value="swim" /> 游泳
                        <input type="checkbox" name="interest" value="volleyball" /> 排球
                    </td>
                </tr>
                <tr>
                    <td>最高学历：</td>
                    <td>
                        <select size="1" name="education">
                            <option value="" selected>...</option>
                            <option value="高中">高中</option>
                            <option value="大学">大学</option>
                            <option value="硕士">硕士</option>
                            <option value="博士">博士</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td valign="top">个人简介：</td>
                    <td>
                        <textarea name="personal" rows="5" cols="30">个人简介</textarea><br />
                    </td>
                </tr>
                <tr>
                    <td><input type="reset" value="重写" /></td>
                    <td><input type="submit" value="注册" /><br /></td>
                </tr>
            </table>

        </form>
        <a href="http://www.baidu.com">
            <img src="孟海滨.jpg" width="81" height="130" />
        </a>
    </body>
</html>