美文网首页我爱编程
HTML之基础知识

HTML之基础知识

作者: 路小白同学 | 来源:发表于2018-05-26 17:36 被阅读0次

    最近学习了html的基础知识,做个总结~

    本文主要讲解一下几个方面:
    1.网络基本常识
    2.HTML基本语法 包括table 标签form标签 ol标签等。

    1.网络基本常识
    IP地址:计算机在网络中的唯一标示。
    A.公网IP(internet),局域网IP(内部IP 局部网络的IP)
    注意:公网IP一定是唯一的
    局域网IP 有可能重复
    B.DNS域名解析(公网 internet 和公网IP存在关系)

    1. 域名:公网IP地址的字符串标示 等价的形式 198.168.3.212 = <u>www.sohu.com</u>
      198.251.96.211 = <u>www.baidu.com</u>

    2. DNS域名解析

    C.端口号 port:(1024以下 系统占用)
    一个软件,在一台计算机中访问的唯一标示。

    D.网络协议:
    数据的一种传输格式【格式要求,数据】
    a.私有协议
    为特定网络操作,指定私有的格式,不具有通用性
    b.公有协议(w3c)
    HTTP(Web应用,网络应用),FTP,POP,TCP,UDP协议
    c.协议的组成(头(head),体(body) 2部分)
    1.头 (信封)
    数据的一些描述性的信息(meta data 元数据)
    传递数据,不安全,数据传输量小
    2.体 (信的内容)
    传输数据的
    安全,数据传输量大

    E:服务器(Server)
    服务器:就是一台计算机,性能好,对外提供功能,服务器

    2.HTML基本语法

    HTML是一个互联网系统中的网页。用于展示。浏览器向服务器发起请求,而后服务器响应一个html,然后浏览器展示html.
    html是由标签对组成的不区分大小写,由开始标签和结束标签组成。<head></head>这个网页中的描述相信。不显示给用户看,eg:<title></title>可以展示网页的描述,也可写css样式或javascript代码。可省略
    <body></body>内表示网页正文。
    eg:

    <html>
    <head> 
    <title>谁念西风独自凉</title>
    </head>
    
    <body>
    <h1> 这是一个测试程序啊 </h1><br/>
    </body>
    
    </html>
    

    2.1:基础语法。

    网页中需要换行<br/>

    网页中文本需要空格&nbsp;

    超级链接<a href=””>标签

    image.png

    图片标签<img /> 可以在网页中显示图片

    image.png

    块级元素(block)与行内元素(inline)
    块级元素 占领整个版面的宽 eg:<h1.h5 <div> <p>下一个元素会自动换行
    行内元素 不换行

    还有一些如今已经不常用的语法eg:
    一条横线<hr/>
    标题标签 <h1>..<h5> 文本变粗体 变大小
    文本变粗体<strong>
    文本变颜色 大小<font color=”red” size=”10px”></font>
    段落标签 <p>

    2.2:表格标签(Table)
    table有两个作用:
    1.通过表格展示数据
    2.通过表格建立html页面布局
    eg:

    <html>
    
    <body>
    
    <table border="1" align ="center" cellspacing="0" cellpadding="0" width="80%">
    
    <tr align="center">
    <td rowspan="2">1</td>
    <td>1</td>
    <td>1</td>
    </tr>
    
    <tr>
    <td>1</td>
    <td>1</td>
    </tr>
    
    <tr>
    <td>1</td>
    <td colspan="2">1</td>
    
    </tr>
    
    </table>
    
    image.png

    rowspan colspan 设置到 <td>
    rowspan跨行
    colspan跨列
    表格是块级元素

    利用table布局eg:

    
    <html>
       <body>
          <table>
               <tr>
                  <td>用户名</td>
                  <td><input type="text" name="name"/></td>
               </tr>
               <tr>
                  <td>密码</td>
                  <td><input type="password" name="password"/></td>
               </tr>
               <tr align='center'>
                  <td colspan="2">
                     <input type="submit" value="login"/>
                  </td>
               </tr>
               
               
          </table>
       </body>
    </html>
    

    2.3:表单标签


    image.png

    a)<form>
    b)单行文本域<input type=”text”/>
    c)密码域<input type=”password”/>
    d)提交按钮<input type=”submit”/>
    下拉列表<select>

    image.png
    单选框 radio
    image.png
    复选框 checkbox
    image.png
    普通按钮button
    <input type=”button” value=”显示的内容”/>
    <input type=”reset” value=”重置按钮”/>
    隐藏文本域
    <input type="hidden" name="id" value="1"/>
    文件上传标签
    <input type=”file” name=””/>
    多行文本域标签 替代方案 富客户端编辑工具
    <textarea name=”” rows=”” cols=””/>
    eg:
    <html>
    <body>
    <form method="" action="www.baidu.com">
    
    userName <input type="text" name="name"/><br/>
    
    passWord <input type="password" name="password"/><br/>
    
    <select name="city">
    
    <option value="1">北京</option>
    <option value="2">天津</option>
    <option value="3">南京</option>
    </select><br/>
    sex 男<input type="radio" name="sex" value="1"/> 女<input type="radio" 
    
    name="sex"value="2"/><br/>
    
    兴趣  读书<input type="checkbox" name="fa" value="1"/> 运动<input type="checkbox" name="fa" 
    
    value="2"/> 音乐<input type="checkbox" name="fa" value="3"/><br/>
    <input type="hidden" name="id" value="1"/>
    <input type="file" name="选择文件"/><br/>
    <textarea  name="编辑签名" rows="10" cols="10"/>
    
    </textarea>
    <br/>
    <input type="submit" value="提交"/>
    

    2.4列表
    <ol></ol>表示有序列表 前面标有序号 <ur></ur>表示无序列表 <li></li>表示一行。列表中还可以再加如列表
    eg:

    <html>
      <body>
          <ol>
             <li>test</li>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ol>
         
         <hr/>
         
         <ul>
            <li>ces</li>
            <li>s</li>
            <li>sss</li>
            <li>sss</li>
         </ul>
         
         <hr/>
          <ol>
             <li>ffff</li>
             <ol>
                <li>f1</li>
                <li>f1ss</li>
             </ol>
             <li>f2</li>
             <ol>
                <li>f2sss</li>
                <li>ssf</li>
             </ol>
         </ol>
         
         
      </body>
    </html>
    
    

    相关文章

      网友评论

        本文标题:HTML之基础知识

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