• HTML


    目录:

    • HTML基础

    • 列表、表格与框架

    • 表单

    一、HTML基础

    1.1 HTML的基本结构

    <html>
        <head>
            <title></title>
        </head>
        <body>
        </body>
    </html>

    1.2 排版信息

    <!--标题标签-->
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    
    <!--段落标签-->
        <p>太阳当空照</p>
    
    <!--换行标签-->
        <p>太阳当空照<br/>花儿对我笑</p>
    
    <!--水平线标签-->
        <hr/>
    
    <!--字体样式标签-->
        <strong>加粗</strong>
        <em>斜体</em>
    
    <!--注释和特殊符号-->
        注释:<!--只会在代码中显示-->
        特殊符号:&nbsp、空格;&gt、>;&lt<; &copy、版权符号
    
    <!--图片相关标签-->
    <img src="img/tu.jpg" alt="图像替代文本" title="鼠标提示文字"width="100px" height="100px" align="absmiddle"/> <!--图片和文本的对齐方式-->
    
    <!--a标签-->
        基本:<a href="" target="_blank">文本内容</a>  <!--href代表路径-->
        锚链接:<a name="mao">乙位置</a>  <a href="#mao">跳到乙位置</a>
        锚链接跨页面:href属性上加文件路径在加上锚的名称
        功能连接:邮箱:<a href="mailto:1403948905@qq.com">QQ邮箱</a>
               QQ:tencent://message/?v=1&amp;uin=22841758 &amp; site=www.hda.com & amp; Menu=yes

    二、列表、表格与框架

    2.1 列表

    <!--基本写法--> <!--type是类型:disc实体圆心、square视图方心、circle空心圆-->
        <ul type="circle">
            <li>○苹果</li>
            <li>○香蕉</li>
        </ul>    
    
    <!--无序列表--><!--可以无限嵌套-->
        <ul>
            <li>苹果
                <ul>
                    <li>甜的
                         <ul>
                                 <li>很甜</li>
                                 <li>一般</li>
                         </ul>
                    </li>        
                    <li>不甜的</li>    
                </ul>
            </li>
            <li>香蕉</li>       
        </ul>
    
    <!--有序列表--><!--type:1数字符号、A/a大小写字母符号、I/i大小写罗马数符号-->
        <ol>
           <li>苹果</li>
           <li>香蕉</li>
        </ol>
    
    <!--定义列表-->
        <dl>
            <dt>所属专业</dt>
                <dd>计算机软件工程</dd>
        </dl>

    2.2表格

    <!--基本写法,可以互相嵌套--><!--width宽、height高、cellpadding间距、cellspading填充、border边框--><!--对齐方式:align水平对齐、valign垂直对齐-->
    <table width="" height="" cellpadding="" cellspacing="" border="">
          <tr>
                 <td colspan="2"></td> <!--跨列-->
                 <td></td>
          </tr>
          <tr>
                 <td rowspan="2"></td> <!--跨行-->
                 <td></td>
          </tr>
    </table>

    2.3框架

        <frameset cols=*30%,50%* frameborder="0">
                 <frame src="" name="">
                 <frame src="" name="">
                 <frame src="" name="">
        </frameset>
    <!-- cols纵向分割、rows水平分割 -->
    <!-- Src为每个框架显示的路径 -->
    <!-- frameset不能输入在body里面->
    
    <!-- iframe内联式框架-->
    <iframe src="path" name="mainFrame" frameborder="x" scrolling="yes/no" noresize="noresize" width="x" height="y"></iframe>
    <!--iframe必须是对签 --><!--scroling是否出现滚动条、noresze是否允许调整框架大小 frame中设置 -->

    2.3表单

    <!--基本写法 --><!--method提交方式、action提交目标-->
        <form method="post" action="result.html">
          <p>名字:<input name="name" type="text"></p>
          <p>密码:<input name="pass" type="password"></p>
          <p>
                <input name="submit" type="button" value="提交">
                <input name="reset" type="reset" value="重填">
          </p>
        </form>
    
    
    <!--表单元素属性:name:指定元素名称、value:元素初始值-、size:初始宽度 、maxlength输出的最大字符串、checked指定按钮是否被选中    -->
    
    <!-- input -->
      <!--文本框-->:text:<input name="yi" id="yi" type="text">  mame:对服务器相应的数据,id: 机器识别
      <!--密码框-->:password:<input name="pass" id="er" type="password">  
      <!--单选框-->:radio:<input name="gen" type="radio" value="男" checked="checked" ><input name="gen" type="radio" value="女"><!--复选框-->:checkbox:<input type="checkbox" name="interest" value="sports">运动
                         <input type="checkbox" name="interest" value="sports"  checked="checked">聊天
                           <input type="checkbox" name="interest" value="sports">玩游戏
    
      <!--重置按钮--><input type="reset" name="butReset" value="reset按钮">
      <!--提交按钮--><input type="button" name="butResult" value="提交"/>
    
    
    <!--文件域--><!--注意:在from标签加上enctype="multipart/from-data"提交方式post-->
    <input type="file" name="files"/>浏览
    <input type="submit" name=upload value="上传"/> 上传
    
    <!--隐藏域-->
    <input type="hidden" value="666" name="userid"/>
    
    <!--列表框-->
           <select name="year" size="1"> <!--size显示的行数,selected默认行数-->
              <opention value="0" selected="selected">0</opention>
              <opention value="1">1</opention>
              <opention value="2">2</opention>
           </select>
    <!--扩展列表框-->
           <select name="year" size="1"> <!--size显示的行数,selected默认行数-->
             <optgroup lable="一线城市">
                <opention value="0" selected="selected">0</opention>
                <opention value="1">1</opention>
                <opention value="2">2</opention>
              </optgroup>
           </select>
    
    <!--多行文本域-->
    <textarea name="text" rows="10" cols="10">文本内容</textarea>
    
    
    <!--表单高级应用-->
    <!--只读和禁用-->:redonly="redonly"只读;disabled="disabled"禁用;
    <!--必填-->:requried="required"
    
    
    <!--表单语义化--><!--对搜索引擎友好-->
    <fieldest id="">
              <p>名字:<input name="name" type="text"></p>
              <p>密码:<input name="pass" type="password"></p>
              <input type="button" name="butResult" value="提交"/>
    </fieldest>

    .

  • 相关阅读:
    Java并发编程:并发容器之ConcurrentHashMap(转载)
    Java ConcurrentModificationException异常原因和解决方法
    Java并发编程:同步容器
    Java并发编程:深入剖析ThreadLocal
    错误:The POM for org.codehaus.plexus:plexus-compiler-api:jar:2.2 is invalid, transitive dependencies (if any) will not be available, enable debug logging for more details的解决方法
    maven工程中引入oracle驱动报错Missing artifact com.oracle:ojdbc14:jar:10.2.0.4.0
    部署时发出警告: [SetContextPropertiesRule]{Context} Setting property 'source' to 'org.eclipse.jst.jee.server:jx-web' did not find a matching property.的解决方法
    [WARNING] The POM for com.tao:jx-service:jar:0.0.1-SNAPSHOT is missing, no dependency information available
    maven工程中警告[WARNING] Using platform encoding (GBK actually) to copy filtered resources, i.e. build is platform dependent!
    Eclipse中Errors occurred during the build最简单的解决方法
  • 原文地址:https://www.cnblogs.com/shishixiang/p/14131424.html
Copyright © 2020-2023  润新知