美文网首页
html的学习小结

html的学习小结

作者: 矮萌杰 | 来源:发表于2018-03-17 20:03 被阅读0次

    html是一种超文本语言,页面中可以包含又图片,链接,甚至音乐,程序。他的结构包括头部(head),身体(body)。一般而言,Html的固定格式都是:

    <html>
    <head>
      <title>这里输入标题</title>
    </head>
    <body>
      这里输入网站要显示的内容。
    </body>
    </html>
    
    进入浏览器后显示: 实操.png

    个人感觉有几种比较常用的代码

    1.<h1>-</h1>...<h6>-<h6>的标题
    2.背景颜色或背景图案:<body background="X盘:/XX文件/XX.jpg">
    <body color="颜色的单词">
    3.还有表单页面form,input.很多需要填写的,选择的都会用到html这些。

    类似这一些的: 实例.png
    作为一个初学html的小白,自己敲的代码也就普普通通而已:
    <form>
    <ol>
    <li>你的名字:</li>
    <input type="text" name="your name">
    <br>
    <li>你的电话
    <input type="text" name="phone" size="11">
    

    4.包括一些链接。
    <a href="图片的地址或者网址等等"></a>
    插入图片:<img src="图片地址">

    <html>
    <head>
      <title>hello world</title>
    </head>
    <body>
      <a href="http://www.baidu.com">Link
    </body>
    </html>
    
    转化.png 新网址.png

    通常来说,个人觉得链接往往跟“按钮”一起连用

    <html>
    <head>
      <title>hello world</title>
    </head>
    <body>
      <a href="http://www.baidu.com">
      <input type="button" value="确定"></a>
    </body>
    </html>
    
    实操2.png
    变色.png

    点击确认,便可转入百度首页。
    学了一点点Html自己做了个页面玩玩。


    图一.png
    图二.png

    以下是代码:

    <html>
    <head>
        <title>XXXXX</title>
    </head>
    <body bgcolor="pink">
        <h1>消费调查用卷</h1>
        <form>
        <ol>
        <li>你的名字:</li>
        <input type="text" name="your name">
        <br>
        <li>你的电话:</li>
        <input type="text" name="phone" size="11">
        </form>
        <li>每月所花的钱:</li><br>
        <form>
        <input type="radio" name="cost" value="500">500
        <input type="radio" name="cost" value="800">800
        <input type="radio" name="cost" value="1000">1000
        <input type="radio" name="cost" value="1500">1500
        </form>
        <li>花费的地方:</li><br>
        <input type="checkbox" name="where" value="网购">网购
        <input type="checkbox" name="where" value="夜市">夜市
        <input type="checkbox" name="where" value="外卖">外卖
        <input type="checkbox" name="where" value="资料">资料
        <input type="checkbox" name="where" value="上网">上网
        <input type="checkbox" name="where" value="服装">服装
        <input type="checkbox" name="where" value="化妆品">化妆品 
        <input type="checkbox" name="where" value="伙食费">伙食费
        <input type="checkbox" name="where" value="其他">其他
        </form>
        <li>建议或意见:</li><br>
        <textarea type="text" rows="10" cols="30">
        </textarea><br>
        <li>附表:大学生消费数据:</li>
        <table border="1" cellpadding="20">
        <tr>
            <th lign="left">花费地方</th>
            <th lign="right">花费金额</th>
        </tr>
        <tr>
            <td>网购</td>
            <td>500</td>
        </tr>
        <tr>
            <td>夜市</td>
            <td>100</td>
        </tr>
        <tr>
            <td>资料</td>
            <td>200</td>
        </tr>
        <tr>
            <td>上网</td>
            <td>20</td>
        </tr>
        <tr>
            <td>伙食费</td>
            <td>700</td>
        </tr>
        <tr>
            <td>其他</td>
            <td>100</td>
        </tr>
        </table>
        <input type="button" value="提交">
    </body>
    </html>
    

    新手上路,可能很多不尽人意。就单纯的做来玩玩当作复习复习所学的内容。
    q(≧▽≦q)。

    相关文章

      网友评论

          本文标题:html的学习小结

          本文链接:https://www.haomeiwen.com/subject/wzijqftx.html